/*
  appbar.css — bloques: cabecera, menú móvil, hero, cifras, formatos,
  camino (svg-path), acordeón, equipo, formulario, cookie-banner, botones.
  Sin !important. Sin ::-webkit-scrollbar (scrollbar-color basta en Chrome 121+).
*/

@layer blocks;

@layer blocks {
  /* --- botones --- */
  .boton {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2xs);
    padding: 0.85rem 1.6rem;
    border-radius: var(--radio-sm);
    font-weight: 600;
    font-size: 0.95rem;
    min-height: 48px;
    transition: background var(--dur-rapida) var(--curva), color var(--dur-rapida) var(--curva), border-color var(--dur-rapida) var(--curva);
  }

  .boton--primario {
    background: var(--cobalt);
    color: var(--chalk);
    border: var(--borde-fino) solid var(--cobalt);
  }

  .boton--primario:hover {
    background: var(--cobalt-oscuro);
    border-color: var(--cobalt-oscuro);
  }

  .boton--fantasma {
    background: transparent;
    color: var(--black);
    border: var(--borde-fino) solid var(--black);
  }

  .boton--fantasma:hover {
    background: var(--black);
    color: var(--chalk);
  }

  .seccion--oscura .boton--fantasma,
  .headline-block .boton--fantasma {
    color: var(--texto-oscuro);
    border-color: var(--linea-oscura);
  }

  .seccion--oscura .boton--fantasma:hover,
  .headline-block .boton--fantasma:hover {
    background: var(--texto-oscuro);
    color: var(--black);
  }

  /* --- grano: textura sobre secciones oscuras --- */
  .ruido {
    position: relative;
    isolation: isolate;
  }

  .ruido::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 0.05;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.86' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  }

  .ruido > * {
    position: relative;
    z-index: 1;
  }

  /* --- cabecera --- */
  .site-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: var(--black);
    border-bottom: var(--borde-fino) solid var(--linea-oscura);
  }

  .site-header__fila {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-md);
    padding-block: var(--s-xs);
  }

  .logotype {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    font-family: var(--fuente-display);
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--texto-oscuro);
    letter-spacing: -0.01em;
  }

  .logotype__marca {
    width: 1.6rem;
    height: 1.6rem;
    flex-shrink: 0;
  }

  .site-header__nav {
    display: none;
    align-items: center;
    gap: var(--s-md);
  }

  .site-header__enlace {
    font-size: 0.94rem;
    font-weight: 500;
    color: var(--grey-claro);
    padding: 0.4rem 0.1rem;
    border-bottom: 2px solid transparent;
    transition: color var(--dur-rapida) var(--curva), border-color var(--dur-rapida) var(--curva);
  }

  .site-header__enlace:hover,
  .site-header__enlace[aria-current='page'] {
    color: var(--texto-oscuro);
    border-bottom-color: var(--cobalt);
  }

  .site-header__acciones {
    display: flex;
    align-items: center;
    gap: var(--s-sm);
  }

  .site-header__tel {
    display: none;
    font-size: 0.9rem;
    color: var(--grey-claro);
  }

  .nav-toggle {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    border-radius: var(--radio-sm);
  }

  .nav-toggle span {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--texto-oscuro);
    transition: transform var(--dur-media) var(--curva), opacity var(--dur-media) var(--curva);
  }

  .nav-toggle[aria-expanded='true'] span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }

  .nav-toggle[aria-expanded='true'] span:nth-child(2) {
    opacity: 0;
  }

  .nav-toggle[aria-expanded='true'] span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }

  @media (min-width: 900px) {
    .site-header__nav {
      display: flex;
    }

    .site-header__tel {
      display: inline-block;
    }

    .nav-toggle {
      display: none;
    }
  }

  /* --- menú móvil de pantalla completa --- */
  .menu-movil {
    position: fixed;
    inset: 0;
    z-index: 1100;
    background: var(--black);
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: var(--s-xl) var(--s-md);
    transform: translateY(-100%);
    transition: transform var(--dur-media) var(--curva);
  }

  .menu-movil.esta-abierto {
    transform: translateY(0);
  }

  .menu-movil__cerrar {
    position: absolute;
    top: var(--s-sm);
    right: var(--s-sm);
    width: 44px;
    height: 44px;
    color: var(--texto-oscuro);
    font-size: 1.5rem;
  }

  .menu-movil__nav {
    display: flex;
    flex-direction: column;
    gap: var(--s-sm);
  }

  .menu-movil__enlace {
    font-family: var(--fuente-display);
    font-size: clamp(1.6rem, 8vw, 2.2rem);
    color: var(--texto-oscuro);
    font-weight: 500;
  }

  .menu-movil__tel {
    display: inline-block;
    margin-top: var(--s-lg);
    color: var(--grey-claro);
    font-size: 1.05rem;
  }

  @media (min-width: 900px) {
    .menu-movil {
      display: none;
    }
  }

  /* --- hero diagonal-veil (index) --- */
  .headline-block {
    position: relative;
    min-height: 88vh;
    display: flex;
    align-items: flex-end;
    background: var(--black);
    overflow: hidden;
  }

  .headline-block__foto {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .headline-block__velo {
    position: absolute;
    inset: 0;
    background:
      linear-gradient(115deg, rgba(17, 18, 20, 0.97) 0%, rgba(17, 18, 20, 0.94) 32%, rgba(17, 18, 20, 0.55) 58%, rgba(17, 18, 20, 0.18) 76%, rgba(17, 18, 20, 0.02) 92%);
  }

  .headline-block__contenido {
    position: relative;
    z-index: 1;
    padding-block: var(--s-xl) var(--s-2xl);
    max-width: 40rem;
  }

  .headline-block__etiqueta {
    display: inline-block;
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--cobalt);
    margin-bottom: var(--s-sm);
  }

  .headline-block__titulo {
    color: var(--texto-oscuro);
    margin-bottom: var(--s-sm);
  }

  .headline-block__texto {
    color: var(--grey-claro);
    font-size: 1.08rem;
    margin-bottom: var(--s-md);
  }

  .headline-block__acciones {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-sm);
  }

  /* --- banda de título en páginas internas --- */
  .seccion-titular {
    padding-block: calc(var(--s-xl) + 1.5rem) var(--s-xl);
  }

  .seccion-titular__etiqueta {
    display: inline-block;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--cobalt);
    margin-bottom: var(--s-sm);
  }

  .seccion-titular__titulo {
    max-width: 34rem;
    margin-bottom: var(--s-sm);
  }

  .seccion-titular__texto {
    max-width: 42rem;
    color: var(--grey-claro);
    font-size: 1.05rem;
  }

  /* --- cifras del club --- */
  .cifras {
    display: grid;
    gap: var(--s-lg);
    grid-template-columns: repeat(2, 1fr);
  }

  @media (min-width: 700px) {
    .cifras {
      grid-template-columns: repeat(4, 1fr);
    }
  }

  .cifras__numero {
    font-family: var(--fuente-display);
    font-weight: 700;
    font-size: clamp(2rem, 4vw, 2.9rem);
    color: var(--cobalt);
    line-height: 1;
  }

  .cifras__etiqueta {
    display: block;
    margin-top: var(--s-2xs);
    font-size: 0.92rem;
    color: var(--grey);
  }

  /* --- formatos: lente scroll-snap --- */
  .formatos__tira {
    display: flex;
    gap: var(--s-md);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: var(--s-sm);
    margin: 0 calc(var(--s-sm) * -1);
    padding-inline: var(--s-sm);
  }

  .formatos__tarjeta {
    flex: 0 0 min(20rem, 82vw);
    scroll-snap-align: start;
    background: var(--superficie);
    border: var(--borde-fino) solid var(--linea);
    border-radius: var(--radio-md);
    overflow: hidden;
  }

  .formatos__imagen {
    width: 100%;
    height: 12.5rem;
    object-fit: cover;
  }

  .formatos__cuerpo {
    padding: var(--s-sm);
  }

  .formatos__cuerpo h3 {
    margin-bottom: var(--s-2xs);
  }

  .formatos__cuerpo p {
    color: var(--grey);
    font-size: 0.95rem;
    margin-bottom: var(--s-xs);
  }

  .formatos__enlace {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--cobalt);
  }

  /* --- camino del candidato: svg-path --- */
  .camino {
    max-width: 46rem;
    margin-inline: auto;
  }

  .camino__svg {
    width: 100%;
    height: auto;
  }

  .camino__linea {
    fill: none;
    stroke: var(--cobalt);
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-dasharray: 620;
    stroke-dashoffset: 0;
    transition: stroke-dashoffset var(--dur-lenta) var(--curva);
  }

  .camino__punto {
    fill: var(--black);
    stroke: var(--cobalt);
    stroke-width: 2.5;
  }

  .camino__paradas {
    display: grid;
    gap: var(--s-md);
    grid-template-columns: repeat(3, 1fr);
    margin-top: var(--s-md);
    text-align: center;
  }

  .camino__paradas h3 {
    font-size: 1rem;
    margin-bottom: var(--s-2xs);
  }

  .camino__paradas p {
    font-size: 0.88rem;
    color: var(--grey);
    margin-inline: auto;
  }

  @media (prefers-reduced-motion: reduce) {
    .camino__linea {
      transition: none;
    }
  }

  /* --- acordeón (details/summary) --- */
  .acordeon {
    border-top: var(--borde-fino) solid var(--linea-oscura);
  }

  .seccion:not(.seccion--oscura) .acordeon {
    border-top-color: var(--linea);
  }

  .acordeon__item {
    border-bottom: var(--borde-fino) solid var(--linea-oscura);
  }

  .seccion:not(.seccion--oscura) .acordeon__item {
    border-bottom-color: var(--linea);
  }

  .acordeon__pregunta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-sm);
    padding-block: var(--s-sm);
    cursor: pointer;
    font-weight: 600;
    font-size: 1.02rem;
    list-style: none;
  }

  .acordeon__pregunta::-webkit-details-marker {
    display: none;
  }

  .acordeon__signo {
    flex-shrink: 0;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 50%;
    border: var(--borde-fino) solid var(--cobalt);
    color: var(--cobalt);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    transition: transform var(--dur-rapida) var(--curva);
  }

  .acordeon__item[open] .acordeon__signo {
    transform: rotate(45deg);
  }

  .acordeon__respuesta {
    padding-bottom: var(--s-sm);
    color: var(--grey-claro);
    max-width: 46rem;
  }

  .seccion:not(.seccion--oscura) .acordeon__respuesta {
    color: var(--grey);
  }

  /* --- equipo --- */
  .equipo__tarjeta {
    text-align: left;
  }

  .equipo__retrato {
    width: 100%;
    aspect-ratio: 2 / 3;
    object-fit: cover;
    border-radius: var(--radio-md);
    margin-bottom: var(--s-sm);
  }

  .equipo__nombre {
    font-size: 1.05rem;
    margin-bottom: 0.15rem;
  }

  .equipo__rol {
    display: block;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--cobalt);
    margin-bottom: var(--s-xs);
  }

  .equipo__bio {
    font-size: 0.94rem;
    color: var(--grey);
  }

  /* --- lista de principios --- */
  .principios {
    display: grid;
    gap: var(--s-md);
  }

  @media (min-width: 700px) {
    .principios {
      grid-template-columns: repeat(2, 1fr);
    }
  }

  .principios__item {
    padding: var(--s-md);
    border: var(--borde-fino) solid var(--linea-oscura);
    border-radius: var(--radio-md);
  }

  .principios__item h3 {
    color: var(--texto-oscuro);
    margin-bottom: var(--s-2xs);
  }

  .principios__item p {
    color: var(--grey-claro);
    font-size: 0.94rem;
  }

  /* --- voces / citas --- */
  .voces {
    display: grid;
    gap: var(--s-md);
  }

  @media (min-width: 700px) {
    .voces {
      grid-template-columns: repeat(2, 1fr);
    }
  }

  .voces__cita {
    padding: var(--s-md);
    background: var(--superficie);
    border-radius: var(--radio-md);
    border: var(--borde-fino) solid var(--linea);
  }

  .voces__cita p {
    font-size: 1.02rem;
    max-width: none;
  }

  .voces__cita footer {
    margin-top: var(--s-sm);
    font-size: 0.86rem;
    color: var(--grey);
  }

  .voces__cita .autor {
    display: block;
    font-weight: 600;
    color: var(--black);
  }

  /* --- tarjetas de servicio (subpáginas) --- */
  .tarjeta-servicio {
    padding: var(--s-md);
    background: var(--superficie);
    border: var(--borde-fino) solid var(--linea);
    border-radius: var(--radio-md);
  }

  .tarjeta-servicio h3 {
    margin-bottom: var(--s-2xs);
  }

  .tarjeta-servicio p {
    color: var(--grey);
    font-size: 0.95rem;
  }

  .lista-marcada {
    display: grid;
    gap: var(--s-xs);
  }

  .lista-marcada li {
    position: relative;
    padding-left: 1.4rem;
    color: var(--grey);
  }

  .seccion--oscura .lista-marcada li {
    color: var(--grey-claro);
  }

  .lista-marcada li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.55em;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--cobalt);
  }

  .lista-no {
    display: grid;
    gap: var(--s-xs);
  }

  .lista-no li {
    position: relative;
    padding-left: 1.4rem;
    color: var(--grey);
  }

  .lista-no li::before {
    content: '—';
    position: absolute;
    left: 0;
    color: var(--grey-claro);
  }

  /* --- formulario --- */
  .formulario {
    display: grid;
    gap: var(--s-sm);
    max-width: 30rem;
  }

  .campo {
    display: grid;
    gap: 0.4rem;
  }

  .campo label {
    font-size: 0.88rem;
    font-weight: 600;
  }

  .campo input {
    padding: 0.85rem 1rem;
    min-height: 48px;
    border: var(--borde-fino) solid var(--linea);
    border-radius: var(--radio-sm);
    background: var(--superficie);
  }

  .campo input:focus-visible {
    outline: 2px solid var(--cobalt);
    outline-offset: 1px;
  }

  .campo--consentimiento {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 0.6rem;
  }

  .campo--consentimiento input {
    min-height: auto;
    width: 1.15rem;
    height: 1.15rem;
    margin-top: 0.2rem;
    flex-shrink: 0;
  }

  .campo--consentimiento label {
    font-weight: 400;
    font-size: 0.86rem;
    color: var(--grey);
  }

  .campo-oculto {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
  }

  .formulario__estado {
    font-size: 0.9rem;
    min-height: 1.4rem;
  }

  .formulario__estado[data-estado='ok'] {
    color: var(--cobalt-oscuro);
  }

  .formulario__estado[data-estado='error'] {
    color: #b3261e;
  }

  /* --- aviso legal (contacto) --- */
  .aviso-legal {
    font-size: 0.92rem;
    color: var(--grey);
  }

  .aviso-legal dl {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.5rem var(--s-sm);
    margin-top: var(--s-sm);
  }

  .aviso-legal dt {
    font-weight: 600;
    color: var(--black);
  }

  /* --- cookie banner: franja inferior, sin backdrop, sin modal --- */
  .cookie-banner {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1300;
    display: none;
    background: var(--black);
    color: var(--texto-oscuro);
    border-top: var(--borde-fino) solid var(--linea-oscura);
    padding: var(--s-sm);
  }

  .cookie-banner.esta-visible {
    display: block;
  }

  .cookie-banner__fila {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-sm);
  }

  .cookie-banner__texto {
    font-size: 0.88rem;
    color: var(--grey-claro);
    max-width: 46rem;
    margin: 0;
  }

  .cookie-banner__acciones {
    display: flex;
    gap: var(--s-xs);
    flex-shrink: 0;
  }

  .cookie-banner__boton {
    padding: 0.6rem 1.1rem;
    border-radius: var(--radio-sm);
    font-size: 0.86rem;
    font-weight: 600;
    min-height: 44px;
  }

  .cookie-banner__boton--aceptar {
    background: var(--cobalt);
    color: var(--chalk);
  }

  .cookie-banner__boton--rechazar {
    background: transparent;
    color: var(--grey-claro);
    border: var(--borde-fino) solid var(--linea-oscura);
  }

  /* --- 404 --- */
  .pagina-cuerpo-oscuro {
    background: var(--black);
    color: var(--texto-oscuro);
  }

  .pagina-perdida {
    min-height: 60vh;
    display: flex;
    align-items: center;
  }

  .pagina-perdida h1 {
    color: var(--texto-oscuro);
  }

  .pagina-perdida p {
    color: var(--grey-claro);
  }

  .pagina-perdida__codigo {
    font-family: var(--fuente-display);
    font-size: clamp(4rem, 14vw, 8rem);
    color: var(--cobalt);
    line-height: 1;
    margin-bottom: var(--s-sm);
  }

  /* --- cta franja --- */
  .cta-franja {
    text-align: center;
  }

  .cta-franja h2 {
    margin-bottom: var(--s-md);
  }

  .cta-franja .headline-block__acciones {
    justify-content: center;
  }
}