/**
 * La web pública de la Clínica Veterinaria Vinyo.
 *
 * Comparte la paleta y las tipografías de la aplicación —los valores salen de
 * `web/src/estilos/tokens.css` y de `docs/MARCA.md`— porque quien llega aquí
 * desde un cartel de la clínica y luego entra a su portal tiene que reconocer el
 * mismo sitio. Lo que NO comparte es la retícula: una web que capta y una
 * aplicación que se usa ocho horas al día no se ordenan igual.
 *
 * Los tokens se copian en vez de importarse porque este sitio es HTML estático
 * servido por Caddy, sin empaquetador y sin ninguna relación de compilación con
 * `web/`. Si las dos listas discrepan alguna vez, manda `tokens.css` y esto es
 * lo que está desactualizado.
 *
 * ## La regla del magenta vale también aquí
 *
 * El magenta relleno señala LA acción que la página existe para provocar —pedir
 * la cita— y aparece una sola vez por pantalla. Repetirlo lo convierte en
 * decoración, y el magenta de esta marca está a 1,32:1 del rojo de error: una
 * decoración magenta se lee como una avería.
 *
 * ## El dorado no lleva texto encima
 *
 * Da 1,94:1 sobre crema. Sirve para filetes, subrayados y el emblema; nunca para
 * un párrafo, por muy de la marca que sea.
 */

:root {
  --indigo: #1b2357;
  --indigo-claro: #343e82;
  --indigo-oscuro: #171f53;
  --indigo-tenue: #ebedf8;
  --magenta: #d61a6f;
  --magenta-oscuro: #a01453;
  --dorado: #f59e0b;
  /*
   * El mismo dorado, bajado de tono hasta que SE LEE sobre el crema. El de
   * marca mide 1,94:1 ahí y 6,86:1 sobre el índigo de la cabecera, que es donde
   * vive; éste mide 4,2:1. Es para texto corto sobre crema —hoy, «Vinyo» del
   * titular de la portada—, nunca para un párrafo largo ni para el emblema, que
   * siguen con `--dorado`.
   */
  --dorado-sobre-crema: #a86400;
  --crema: #f6f3ec;
  --tinta: #1a2340;
  --blanco: #ffffff;

  --texto: #1a2340;
  --texto-tenue: #5a5f78;
  --texto-sobre-indigo: #ffffff;
  --texto-tenue-sobre-indigo: #c9cde8;
  --borde: #ddd9cf;

  --tipo-titulos: 'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif;
  --tipo-cuerpo: 'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif;
  --tipo-marca: 'Dancing Script', 'Segoe Script', 'Brush Script MT', cursive;

  --ancho: 1120px;
  --radio: 14px;
  --radio-grande: 22px;
  --sombra: 0 1px 2px rgba(27, 35, 87, 0.06), 0 8px 24px rgba(27, 35, 87, 0.08);
  --sombra-alta: 0 2px 4px rgba(27, 35, 87, 0.08), 0 18px 44px rgba(27, 35, 87, 0.14);

  /*
   * Los tonos de las dos escenas de la portada (`css/portada.css`). No son
   * colores nuevos: son los de arriba mezclados, para que la escena clara y la
   * aurora sigan siendo la paleta que eligió el cliente el 26 de agosto y no
   * una cuarta propuesta. Solo se nombran aquí, donde vive la paleta.
   */
  --luz-de-estudio: color-mix(in oklab, var(--blanco) 70%, var(--crema));
  --filete-sobre-crema: color-mix(in oklab, var(--indigo) 30%, transparent);
  --aurora-fondo: var(--indigo-oscuro);
  --aurora-luz: color-mix(in oklab, var(--indigo-claro) 88%, transparent);
  --aurora-luz-tenue: color-mix(in oklab, var(--indigo-claro) 55%, transparent);
  --aurora-velo-magenta: color-mix(in oklab, var(--magenta) 34%, transparent);
  --aurora-velo-dorado: color-mix(in oklab, var(--dorado) 12%, transparent);
  --texto-sobre-aurora: var(--crema);
  --texto-tenue-sobre-aurora: var(--texto-tenue-sobre-indigo);
  --filete-sobre-aurora: color-mix(in oklab, var(--crema) 28%, transparent);
  --velo-de-escena-cubierta: var(--indigo-oscuro);
  --velo-de-la-opinion: color-mix(in oklab, var(--indigo-oscuro) 62%, transparent);
  --velo-de-la-opinion-sobre-figura: color-mix(in oklab, var(--indigo-oscuro) 88%, transparent);
  --malla-linea: var(--crema);
  --malla-nodo: var(--crema);
  --malla-nodo-acento: var(--dorado);
}

*, *::before, *::after { box-sizing: border-box; }

/**
 * Los anclas se detienen debajo de la cabecera, no detrás de ella.
 *
 * La cabecera es `sticky`, así que al saltar a `#servicios` el navegador deja el
 * título justo bajo el borde de la ventana y la barra lo tapa. Se reserva la
 * altura de la cabecera ya recogida —que es como está cuando el salto termina,
 * porque para entonces ya se ha bajado— más un dedo de aire.
 */
html { scroll-behavior: smooth; scroll-padding-top: 5rem; }

/*
 * Hasta el 15 de octubre de 2026 había además `[id] { scroll-margin-top: 5.5rem }`
 * con el mismo fin. El navegador suma los dos, y cada salto se paraba a 168 px
 * del borde en vez de a 80: en escritorio, la fila de «Lo que hacemos» quedaba
 * con su texto por debajo de la pantalla.
 */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

body {
  margin: 0;
  font-family: var(--tipo-cuerpo);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--texto);
  background: var(--crema);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-family: var(--tipo-titulos); line-height: 1.15; letter-spacing: -0.02em; margin: 0 0 .5em; }
h1 { font-size: clamp(2.1rem, 5.5vw, 3.4rem); font-weight: 800; }
h2 { font-size: clamp(1.6rem, 3.6vw, 2.3rem); font-weight: 700; }
h3 { font-size: 1.15rem; font-weight: 700; }
p { margin: 0 0 1rem; }
a { color: var(--magenta-oscuro); }

img { max-width: 100%; height: auto; display: block; }

/* Que el teclado no se pierda: el foco se ve siempre y en todas partes. */
:focus-visible { outline: 3px solid var(--magenta); outline-offset: 3px; border-radius: 6px; }

.salto-al-contenido {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--indigo); color: var(--texto-sobre-indigo);
  padding: .75rem 1.25rem; border-radius: 0 0 var(--radio) 0; font-weight: 600;
}
.salto-al-contenido:focus { left: 0; }

.contenedor { width: min(100% - 2.5rem, var(--ancho)); margin-inline: auto; }

/* ── Cabecera ─────────────────────────────────────────────────────────── */

/**
 * La cabecera lleva las huellas del logotipo, como la aplicación.
 *
 * Era índigo liso, y el índigo liso no es de nadie. El mismo patrón que la
 * aplicación usa en su banda de marca hace que las dos mitades de Vinyo —la web
 * pública y el sistema de la clínica— se reconozcan como el mismo sitio, que es
 * exactamente lo que le pasa a quien entra aquí desde un cartel y luego abre su
 * portal.
 *
 * El fichero es el mismo `img/patron-huellas.svg` que ya vestía la portada, con
 * sus huellas blancas al 5 % de opacidad: sobre el índigo se leen como una
 * textura y nunca compiten con el rótulo. Se escribe `background-color` y
 * `background-image` por separado, y no una `background` de golpe, porque la
 * forma abreviada borraría la imagen cada vez que alguien tocara el color.
 */
.cabecera {
  position: sticky; top: 0; z-index: 40;
  background-color: rgba(27, 35, 87, 0.96);
  background-image: url("../img/patron-huellas.svg");
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(245, 158, 11, 0.35);
}
.cabecera__fila { display: flex; align-items: center; gap: 1rem; padding: .7rem 0; }
.cabecera__marca { display: flex; align-items: center; gap: .65rem; text-decoration: none; margin-right: auto; }
.cabecera__emblema { width: 48px; height: 48px; border-radius: 50%; }
.cabecera__nombre { display: flex; flex-direction: column; line-height: 1.05; }
.cabecera__nombre small {
  font-size: .58rem; letter-spacing: .19em; text-transform: uppercase;
  color: var(--texto-tenue-sobre-indigo); font-weight: 600;
}
.cabecera__nombre strong { font-family: var(--tipo-marca); font-size: 1.7rem; color: var(--dorado); font-weight: 700; }

/**
 * Arriba del todo la cabecera se abre y enseña el emblema; al bajar, se recoge.
 *
 * Quien llega por primera vez merece ver de quién es la clínica: el emblema a
 * 40 px es un icono de pestaña, no un logotipo. Quien ya está leyendo, en
 * cambio, quiere la pantalla para el texto, así que la cabecera vuelve sola al
 * tamaño de siempre en los primeros 130 px de scroll.
 *
 * ## Por qué esto no lleva JavaScript
 *
 * `animation-timeline: scroll()` ata la animación a la barra de scroll y la
 * resuelve el navegador en su hilo de composición: no hay guion escuchando el
 * scroll, no hay fotograma perdido al desplazarse rápido, y no depende de que
 * `coreografia.js` haya cargado.
 *
 * ## Y por qué el estado grande vive DENTRO del `@supports`
 *
 * Es la parte que hay que entender antes de tocar esto. El estado normal —el de
 * siempre— está escrito fuera, y el grande solo existe donde el navegador sabe
 * animarlo. Escrito al revés, un navegador sin `animation-timeline` se quedaría
 * con la cabecera abierta para siempre, robando 70 px de pantalla en cada página
 * y sin forma de recogerla. Así, quien no lo soporta ve exactamente lo que veía
 * antes, que es un fallo que no se nota.
 *
 * Con `prefers-reduced-motion` tampoco se abre: una barra que cambia de tamaño
 * mientras lees es movimiento, por mucho que lo dispare el scroll y no un reloj.
 *
 * Las tres animaciones comparten línea de tiempo y rango a propósito. Podrían
 * ser una sola sobre una variable interpolada con `@property`, pero entonces el
 * tamaño de cada pieza se leería en un `calc()` a tres reglas de distancia en
 * vez de en su propio selector.
 */
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .cabecera__fila,
    .cabecera__emblema,
    .cabecera__nombre strong {
      /* Sin la forma abreviada `animation`: el atajo REINICIA `animation-timeline`
         a `auto`, y una animación con la línea de tiempo perdida no corre ni
         falla, simplemente no existe. Escritas sueltas, no hay orden que
         recordar. `duration: auto` es lo que le dice al navegador que quien
         manda es el rango de scroll y no un reloj. */
      animation-timing-function: linear;
      animation-fill-mode: both;
      animation-duration: auto;
      animation-timeline: scroll(root block);
      animation-range: 0px 130px;
    }

    .cabecera__fila { padding-block: 1.15rem; animation-name: cabecera-se-recoge; }
    .cabecera__emblema { width: 66px; height: 66px; animation-name: emblema-se-recoge; }
    .cabecera__nombre strong { font-size: 2.05rem; animation-name: marca-se-recoge; }

    /* En pantalla ancha hay sitio para que el emblema se lea de verdad. En el
       móvil, cada píxel que ocupa la cabecera se lo quita al titular. */
    @media (min-width: 700px) {
      .cabecera__fila { padding-block: 1.5rem; }
      .cabecera__emblema { width: 88px; height: 88px; }
      .cabecera__nombre strong { font-size: 2.5rem; }
    }
  }
}

@keyframes cabecera-se-recoge { to { padding-block: .7rem; } }
@keyframes emblema-se-recoge { to { width: 48px; height: 48px; } }
@keyframes marca-se-recoge { to { font-size: 1.7rem; } }

.menu { display: flex; gap: .35rem; align-items: center; }
.menu a {
  color: var(--texto-sobre-indigo); text-decoration: none; font-weight: 600; font-size: .92rem;
  padding: .5rem .75rem; border-radius: var(--radio);
}
.menu a:hover { background: rgba(255, 255, 255, .12); }

.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font-family: var(--tipo-titulos); font-weight: 700; font-size: 1rem;
  padding: .85rem 1.6rem; border-radius: 999px; border: 2px solid transparent;
  text-decoration: none; cursor: pointer; min-height: 44px;
  transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}
/* LA acción de la página. Una sola por pantalla: ver la cabecera del fichero. */
.boton--accion { background: var(--magenta); color: var(--blanco); box-shadow: var(--sombra); }
.boton--accion:hover { background: var(--magenta-oscuro); transform: translateY(-2px); box-shadow: var(--sombra-alta); }
.boton--linea { border-color: currentColor; color: var(--indigo); background: transparent; }
.boton--linea:hover { background: var(--indigo-tenue); }
.boton--sobre-indigo { border-color: rgba(255,255,255,.55); color: var(--texto-sobre-indigo); background: transparent; }
.boton--sobre-indigo:hover { background: rgba(255,255,255,.14); }
.boton--pequeno { padding: .6rem 1.1rem; font-size: .9rem; }

.menu-boton { display: none; background: none; border: 0; color: var(--texto-sobre-indigo); padding: .5rem; cursor: pointer; }

@media (max-width: 860px) {
  .menu-boton { display: block; }
  .menu {
    position: absolute; inset: 100% 0 auto 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--indigo-oscuro); padding: .5rem 1.25rem 1.25rem;
    border-bottom: 1px solid rgba(245, 158, 11, .35);
  }
  .menu[hidden] { display: none; }
  .menu a { padding: .85rem .5rem; border-bottom: 1px solid rgba(255,255,255,.08); }
  .menu .boton { margin-top: .75rem; }
}

/* ── Portada ──────────────────────────────────────────────────────────── */

/**
 * La portada tiene su propia hoja, `css/portada.css`, que solo enlaza
 * `index.html`: la escena del dueño delante de la palabra y la aurora con la
 * malla no existen en ninguna otra página. Aquí se quedan las dos piezas que
 * las páginas de servicio siguen usando en su encabezado: el rótulo y la fila
 * de acciones.
 */
.portada__rotulo {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .74rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
  color: var(--dorado); border: 1px solid rgba(245, 158, 11, .45);
  padding: .4rem .85rem; border-radius: 999px; margin-bottom: 1.25rem;
}
.portada__acciones { display: flex; flex-wrap: wrap; gap: .85rem; margin-top: 2rem; }

/* ── La banda ─────────────────────────────────────────────────────────── */

/**
 * Una fila de consejos para el dueño que corre ligada al scroll, justo bajo el
 * hero. Hasta el 15 de octubre de 2026 eran dos filas en sentidos opuestos, con
 * el horario y las credenciales de la clínica arriba; Luiggi pidió dejar solo
 * los consejos.
 *
 * Aquí solo se pinta: color, tipografía y la huella dorada entre ítems. El
 * movimiento y las copias que hacen el bucle sin costura los pone
 * `coreografia.js`; sin él, la fila se ve quieta y entera, que también sirve.
 *
 * `width: max-content` es lo que impide que la fila se parta en dos líneas y
 * que el bucle deje de ser una tira.
 */
.banda {
  overflow: hidden; background: var(--blanco); border-bottom: 1px solid var(--borde);
  padding: 1.35rem 0; display: grid; gap: .8rem;
}
.banda__fila {
  display: flex; align-items: center; width: max-content;
  margin: 0; padding: 0; list-style: none;
  color: var(--texto-tenue); font-family: var(--tipo-titulos); font-weight: 600;
  font-size: clamp(1rem, 1.6vw, 1.3rem); letter-spacing: -.015em; white-space: nowrap;
}
.banda__fila li { padding-inline: 1.25rem; }
.banda__huella { display: block; width: 22px; height: 20px; color: var(--dorado); }

/*
 * Los consejos van en la tinta entera (15,46:1 sobre blanco) y no en la
 * atenuada (6,28:1): se leen como frases.
 */
.banda__fila--consejo { color: var(--texto); }

/*
 * Por debajo de 1024 px la fila deja de correr y enseña solo el primer consejo,
 * quieto, entero y centrado. Medido el 15 de octubre de 2026: una frase de
 * setenta caracteres mide unos 740 px a 390 de ancho y no cabe en la pantalla
 * mientras corre, así que en un teléfono nunca llegaba a leerse de principio a
 * fin; a 768 px se cortaba por los dos lados. En escritorio la fila corre con
 * sus cuatro consejos.
 *
 * Las copias que hace `coreografia.js` van detrás de los originales, así que
 * el primer hijo es siempre el primer consejo del día. Su `transform` se anula
 * con `!important`, porque lo escribe en línea en cada fotograma. El `.banda`
 * de delante no sobra: `coreografia.css` carga después y su
 * `[data-marquee-fila]` pide `width: max-content` y `white-space: nowrap`.
 */
@media (max-width: 63.99rem) {
  /*
   * La columna de la banda se mide por su contenido más ancho, que es la fila
   * con sus seis copias: miles de píxeles. Sin acotarla, el consejo se
   * centraba en esa columna y caía fuera de la pantalla.
   */
  .banda { grid-template-columns: minmax(0, 1fr); }
  .banda .banda__fila--consejo {
    width: auto; padding-inline: 1.25rem;
    white-space: normal; justify-content: center;
    transform: none !important;
  }
  .banda .banda__fila--consejo > li:not(:first-child) { display: none; }
  .banda .banda__fila--consejo > li:first-child {
    flex: 0 1 34rem; padding-inline: 0;
    text-align: center; white-space: normal; line-height: 1.4; text-wrap: balance;
  }
}

/* ── El telón ─────────────────────────────────────────────────────────── */

/**
 * El telón lo pinta y lo quita `coreografia.css` / `coreografia.js`. Esta regla
 * es la red de seguridad: si esa hoja no carga, el telón no existe. Sin ella, el
 * emblema, la palabra «Vinyo» y un «0%» se quedarían en el flujo de la página
 * encima de la cabecera como un adorno que nadie pidió.
 */
.telon { display: none; }

/* ── Secciones ────────────────────────────────────────────────────────── */

.seccion { padding: clamp(3.5rem, 8vw, 5.5rem) 0; }
.seccion--blanca { background: var(--blanco); }
.seccion--indigo { background: var(--indigo); color: var(--texto-sobre-indigo); }
.seccion--indigo h2 { color: var(--texto-sobre-indigo); }
.seccion--indigo p { color: var(--texto-tenue-sobre-indigo); }

.seccion__cabeza { max-width: 62ch; margin-bottom: 2.5rem; }
.seccion__antetitulo {
  display: block; font-size: .72rem; font-weight: 700; letter-spacing: .15em;
  text-transform: uppercase; color: var(--magenta-oscuro); margin-bottom: .6rem;
}
.seccion--indigo .seccion__antetitulo { color: var(--dorado); }

/*
 * Una sección con foto de fondo. El velo no es decoración: sobre la foto del
 * equipo, que tiene batas negras, paredes blancas y focos, el crema del texto
 * se queda sin contraste en cuanto cae sobre una zona clara. El degradado va
 * más cerrado por la izquierda, que es donde empieza a leerse cada línea.
 */
.seccion--foto {
  position: relative; isolation: isolate; overflow: clip;
  background-color: var(--indigo); color: var(--texto-sobre-indigo);
}
/*
 * La foto del equipo (octubre de 2026) es apaisada, 16:9, con nueve personas de
 * pie detrás de una mesa y la doctora y el pomerania sentados delante. Las
 * cabezas de los de pie empiezan hacia el 16 % del alto y el perro acaba hacia
 * el 81 %. En escritorio la sección es más apaisada que la foto y `cover`
 * recorta por arriba y por abajo: con el encuadre al 36 % el corte de arriba
 * cae en la pared, por encima de todas las cabezas, y el de abajo en el borde
 * de la mesa. En el teléfono recorta por los lados y el centro deja dentro a
 * la doctora, el perro y las cinco caras del medio; los bordes caen entre dos
 * personas, no encima de una cara.
 */
.seccion__foto {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 36%;
}

/*
 * Las huellas blancas de la pared, que la foto anterior traía pintadas. Van en
 * la franja del margen de arriba, que mide lo mismo que el `padding-block` de la
 * sección: así nunca caen sobre el antetítulo ni el titular, mida lo que mida
 * el texto. Dentro de la franja ocupan los sitios que tenían en la foto vieja,
 * del 30 al 66 % del ancho. Detrás del velo, como la foto, para que se vean
 * igual de tenues.
 */
.seccion__huellas {
  position: absolute; inset: 0 0 auto; z-index: -2; pointer-events: none;
  height: clamp(4.5rem, 11vw, 8rem);
}
.seccion__huellas span {
  --grande: clamp(1.6rem, 4.5vw, 4.1rem);
  --pequena: clamp(1.05rem, 2.5vw, 2.3rem);
  position: absolute; left: var(--x); top: var(--y);
  width: var(--tam); aspect-ratio: 40 / 36;
  translate: -50% -50%; rotate: var(--giro);
  background: url("../img/huella.svg") center / contain no-repeat;
}
.seccion__huellas span:nth-child(1) { --x: 30%; --y: 30%; --tam: var(--grande); --giro: -8deg; }
.seccion__huellas span:nth-child(2) { --x: 40.5%; --y: 68%; --tam: var(--pequena); --giro: 6deg; }
.seccion__huellas span:nth-child(3) { --x: 47.6%; --y: 44%; --tam: calc(var(--grande) * .9); --giro: -4deg; }
.seccion__huellas span:nth-child(4) { --x: 53%; --y: 14%; --tam: calc(var(--grande) * .75); --giro: 10deg; }
.seccion__huellas span:nth-child(5) { --x: 56.8%; --y: 58%; --tam: var(--pequena); --giro: -10deg; }
.seccion__huellas span:nth-child(6) { --x: 66%; --y: 30%; --tam: var(--grande); --giro: 8deg; }
.seccion__velo {
  position: absolute; inset: 0; z-index: -1;
  background-image: linear-gradient(
    102deg,
    color-mix(in oklab, var(--indigo-oscuro) 93%, transparent) 0%,
    color-mix(in oklab, var(--indigo-oscuro) 88%, transparent) 46%,
    color-mix(in oklab, var(--indigo-oscuro) 80%, transparent) 100%);
}

/*
 * La sombra no es adorno: el párrafo va sobre caras, batas y focos, y aunque el
 * crema tenga contraste de sobra contra el velo, sobre un fondo movido las
 * letras se leen «blandas». La sombra les da un borde propio.
 */
.seccion--foto .seccion__cabeza p { text-shadow: 0 1px 12px var(--indigo-oscuro); }
.seccion--foto h2 { color: var(--texto-sobre-indigo); }
/*
 * Sobre la foto, el texto secundario va en el crema entero y no en el atenuado
 * que usan las secciones índigo: ahí el atenuado mide 9,6:1 contra un fondo
 * liso, y sobre una cara iluminada bajo el velo se queda en 3,2:1.
 *
 * Va con `.seccion__cabeza` delante porque `.seccion__cabeza p`, más abajo,
 * tiene la misma especificidad que `.seccion--foto p` y gana por ir después:
 * hasta el 15 de octubre de 2026 el párrafo del equipo salía en el gris de
 * las secciones blancas, a unos 2,5:1 sobre el velo, y nadie lo vio porque
 * la regla de aquí arriba parecía decir lo contrario.
 */
.seccion--foto p,
.seccion--foto .seccion__cabeza p { color: var(--texto-sobre-indigo); }
.seccion--foto .seccion__antetitulo { color: var(--dorado); }

/*
 * Sin la lista de nombres, la sección es una banda de foto con un texto
 * encima. Centrado y más grande porque ya no compite con nada, y con más aire
 * arriba y abajo para que la foto se vea y no quede en un filete.
 */
.seccion--foto { padding-block: clamp(4.5rem, 11vw, 8rem); }
.seccion--foto .seccion__cabeza {
  max-width: 52rem; margin-inline: auto; margin-bottom: 0; text-align: center;
}
.seccion--foto .seccion__cabeza p {
  font-size: clamp(1.1rem, 1.7vw, 1.35rem); line-height: 1.6;
}
.seccion__cabeza p { color: var(--texto-tenue); font-size: 1.08rem; }

.rejilla { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(255px, 1fr)); }

/* ── Las áreas de servicio ───────────────────────────────────────────── */

/*
 * Lo que hace la clínica, en cinco paneles de foto, uno por área. El patrón es
 * una fila de paneles altos a sangre que se reparten el ancho: el abierto se
 * queda con casi la mitad y enseña su lista, los otros se estrechan, se
 * oscurecen y dejan su nombre en vertical. En el teléfono se apilan y cada uno
 * se despliega hacia abajo.
 *
 * Sustituye a la lista de seis filas con su tira de película (septiembre de
 * 2026), que llevaba a las páginas de servicio. La clínica agrupó sus
 * servicios en cinco áreas con una foto cada una, y esta sección enseña lo que
 * se hace sin mandar a ninguna parte.
 *
 * Sin JavaScript no se pliega nada: cinco paneles iguales con la lista a la
 * vista. Todo lo que pliega, estrecha o gira va bajo `areas--vivas`, que cuelga
 * `js/sitio.js`.
 *
 * El texto va siempre sobre el velo índigo de abajo, nunca sobre la foto sola:
 * crema sobre el índigo oscuro da 13,96:1 y el dorado del número 7,2:1. Medido
 * sobre la foto, con el texto escondido y el píxel más claro de cada caja (ver
 * la lección `el-velo-no-basta-medir-el-pixel-mas-claro`), el peor caso está
 * anotado junto a `.area__velo`.
 */
.areas {
  --area-curva: cubic-bezier(.22, 1, .36, 1);
  --area-peso-abierta: 3.6;
  padding-block: clamp(4rem, 9vw, 7.5rem);
  background: var(--blanco);
}
.areas__cabeza {
  max-width: 46rem; margin: 0 auto clamp(2.5rem, 5vw, 3.5rem);
  text-align: center;
}
.areas__cabeza h2 {
  margin-bottom: 0;
  font-size: clamp(2rem, 4.4vw, 3.4rem); font-weight: 800; line-height: 1.06;
  letter-spacing: -.03em; color: var(--tinta); text-wrap: balance;
}

/*
 * Apilados, con un filete del blanco de la sección entre panel y panel. En el
 * teléfono la foto ocupa la parte de arriba del panel, con el alto de
 * `--area-alto`, y el nombre se apoya en su borde de abajo. Al abrirse, la
 * lista sale debajo, sobre el índigo liso, y el panel crece hacia abajo. Se
 * probó primero con la foto cubriendo el panel entero y el contenido pegado al
 * pie: al abrirse, la lista empujaba el nombre hacia arriba hasta las caras de
 * la foto, donde ya no hay velo que lo sostenga.
 */
.areas__fila { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }

.area {
  --area-enfoque: 50% 40%;
  --area-alto: clamp(14rem, 60vw, 24rem);
  --area-margen: clamp(1.25rem, 5vw, 2rem);
  --area-velo-base: var(--indigo-oscuro);
  position: relative; isolation: isolate; overflow: hidden;
  min-width: 0;
  background-color: var(--aurora-fondo);
  color: var(--texto-sobre-aurora);
}
.area[data-area="atencion"] { --area-enfoque: 52% 30%; }
.area[data-area="diagnostico"] { --area-enfoque: 48% 35%; }
.area[data-area="cirugia"] { --area-enfoque: 50% 40%; }
.area[data-area="estetica"] { --area-enfoque: 60% 62%; }
.area[data-area="comercio"] { --area-enfoque: 22% 40%; }

/*
 * El encuadre de cada foto lo decide `--area-enfoque`. Las cuatro apaisadas se
 * recortan por los lados en cuanto el panel es más estrecho que la foto, así
 * que el primer valor apunta a lo que tiene que quedar en el panel estrecho
 * —el pomerania con sus gafas, el monitor del ecógrafo, la cirujana, la cara de
 * la recepcionista— sin perder las caras cuando el panel se abre. La de
 * estética es vertical y se recorta por arriba y por abajo: el segundo valor la
 * baja hasta las caras y el perro, que están en la mitad de abajo.
 */
.area__foto {
  position: absolute; inset: 0 0 auto; z-index: -2;
  width: 100%; height: var(--area-alto);
  object-fit: cover; object-position: var(--area-enfoque);
  transition: transform .9s var(--area-curva);
}

/*
 * El velo se midió con el texto escondido, buscando el píxel más claro dentro
 * de cada caja de texto (2026-10-15, a 1280, 1440, 768 y 390 px). Con la
 * primera versión, más abierta por arriba, el número dorado se quedaba en
 * 2,3:1 sobre los azulejos de diagnóstico a 1280 × 720, donde la fila es baja
 * y el texto sube hasta media foto. De ahí tres cosas: el velo cierra más en
 * la mitad de abajo, la fila no baja de 34rem y el número va en su propia
 * cápsula índigo, que le da 7,2:1 caiga donde caiga.
 */
.area__velo {
  position: absolute; inset: 0 0 auto; z-index: -1; pointer-events: none;
  height: var(--area-alto);
  background-image: linear-gradient(
    to top,
    var(--area-velo-base) 0%,
    color-mix(in oklab, var(--indigo-oscuro) 88%, transparent) 40%,
    color-mix(in oklab, var(--indigo-oscuro) 62%, transparent) 58%,
    color-mix(in oklab, var(--indigo-oscuro) 25%, transparent) 76%,
    transparent 94%);
}
.area__velo::after {
  content: ""; position: absolute; inset: 0;
  background-color: var(--indigo-oscuro); opacity: 0;
  transition: opacity .6s var(--area-curva);
}

.area__pie { display: grid; grid-template-rows: minmax(var(--area-alto), auto) auto; }
.area__titulo {
  align-self: end; margin: 0; padding: var(--area-margen);
  font-size: inherit; line-height: inherit; letter-spacing: normal;
}

/*
 * El botón ocupa el panel entero con su `::after`, que es lo que hace que
 * tocar la foto lo abra. Abierto, ese `::after` deja pasar el puntero: así la
 * lista se puede seleccionar, y en el teléfono lo que cierra el panel es el
 * título (en fila el abierto no se cierra, ver `js/sitio.js`). El foco se
 * pinta en el borde del panel y en dorado, porque el magenta del foco general
 * da 3,12:1 sobre el índigo oscuro y el dorado 7,2:1.
 */
.area__boton {
  display: block; width: 100%; margin: 0; padding: 0;
  border: 0; background: none; color: inherit; font: inherit; text-align: left;
  cursor: default;
}
.area__boton::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.area__boton:focus-visible { outline: none; }
.area__boton:focus-visible::after { outline: 3px solid var(--dorado); outline-offset: -3px; }

.area__numero {
  display: inline-block; margin-bottom: .7rem; padding: .2rem .6rem;
  border: 1px solid color-mix(in oklab, var(--dorado) 45%, transparent); border-radius: 999px;
  background-color: var(--indigo-oscuro);
  font-size: .72rem; font-weight: 700; letter-spacing: .16em; line-height: 1.4; color: var(--dorado);
}
.area__cabecera { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; }
.area__nombre {
  max-width: 16ch;
  font-size: clamp(1.5rem, 5.4vw, 2.5rem); font-weight: 800; line-height: 1.05;
  letter-spacing: -.025em; text-wrap: balance;
}
.area__signo {
  flex: none; display: none; place-items: center;
  width: 2.75rem; height: 2.75rem; border-radius: 50%;
  border: 1px solid var(--filete-sobre-aurora); color: var(--texto-sobre-aurora);
  transition: transform .5s var(--area-curva), background-color .3s ease, border-color .3s ease, color .3s ease;
}
.area__signo svg { width: 1.15rem; height: 1.15rem; }
.area__vertical { display: none; }

.area__mas { display: grid; grid-template-rows: 1fr; padding-inline: var(--area-margen); }
.area__mas-dentro { min-height: 0; overflow: hidden; }
.area__lista {
  list-style: none; margin: 0; padding: 0 0 var(--area-margen);
  display: grid; max-width: 38ch;
}
.area__lista li {
  padding: .5rem 0; border-top: 1px solid var(--filete-sobre-aurora);
  font-size: 1rem; font-weight: 500; line-height: 1.5;
}

/* ── Con JavaScript: se pliegan y se abren ── */

.areas--vivas .area__boton { cursor: pointer; }
.areas--vivas .area__boton[aria-disabled="true"] { cursor: default; }
.areas--vivas .area__signo { display: grid; }
.areas--vivas .area--abierta .area__signo {
  transform: rotate(45deg);
  background-color: var(--crema); border-color: var(--crema); color: var(--indigo-oscuro);
}
.areas--vivas .area--abierta .area__boton::after { pointer-events: none; }

.areas--vivas .area__mas {
  grid-template-rows: 0fr; visibility: hidden;
  transition: grid-template-rows .6s var(--area-curva), visibility 0s linear .6s;
}
.areas--vivas .area--abierta .area__mas {
  grid-template-rows: 1fr; visibility: visible;
  transition: grid-template-rows .6s var(--area-curva), visibility 0s linear 0s;
}
.areas--vivas .area__lista {
  opacity: 0; transform: translate3d(0, .75rem, 0);
  transition: opacity .3s ease, transform .5s var(--area-curva);
}
.areas--vivas .area--abierta .area__lista {
  opacity: 1; transform: none;
  transition: opacity .45s ease .18s, transform .6s var(--area-curva) .18s;
}

@media (hover: hover) and (pointer: fine) {
  .areas--vivas .area:not(.area--abierta):hover .area__foto { transform: scale(1.04); }
  .areas--vivas .area:not(.area--abierta):hover .area__signo { border-color: var(--crema); }
}

/*
 * En fila, a partir de 1024 px: por debajo, cuatro paneles estrechos de cinco
 * no llegan a los 100 px y el nombre no cabe ni en vertical.
 *
 * El pie del panel abierto tiene el ancho del panel abierto aunque el panel
 * todavía esté creciendo, y el de los estrechos también: así el texto no se
 * recoloca a cada fotograma mientras los paneles cambian de ancho, solo se
 * recorta y se funde. El ancho sale de la fila (`cqw`), que es la que se
 * reparte: los cinco pesos suman `--area-peso-abierta` más cuatro.
 */
/*
 * Registradas para que el fundido del pie se funda de verdad al abrir y cerrar.
 * Donde no se pueden registrar, los valores cambian de golpe y el resto sigue
 * igual.
 */
@property --area-fundido-fuerte { syntax: "<percentage>"; inherits: false; initial-value: 0%; }
@property --area-fundido-medio { syntax: "<percentage>"; inherits: false; initial-value: 0%; }
@property --area-fundido-suave { syntax: "<percentage>"; inherits: false; initial-value: 0%; }

@media (min-width: 64rem) {
  .areas__fila {
    display: flex; gap: 0;
    height: clamp(34rem, 70svh, 42rem);
    container-type: inline-size;
  }
  .area {
    --area-velo-base: color-mix(in oklab, var(--indigo-oscuro) 94%, transparent);
    display: flex; flex-direction: column; justify-content: flex-end;
    flex: 1 1 0; min-height: 0;
    transition: flex-grow .8s var(--area-curva);
  }
  .area + .area { box-shadow: inset 1px 0 0 color-mix(in oklab, var(--indigo-oscuro) 70%, transparent); }
  .area__foto, .area__velo { inset: 0; height: 100%; }
  /*
   * En cirugía y en comercio la cara queda a media foto, justo donde empieza
   * el texto del panel abierto. La foto se hace un quinto más alta que el
   * panel y se apoya abajo: sobra techo y la cara sube hasta la parte sin
   * velo. En diagnóstico no se puede, porque el veterinario de pie tiene la
   * cabeza en el borde de arriba.
   */
  .area[data-area="cirugia"] .area__foto,
  .area[data-area="comercio"] .area__foto { top: auto; height: 120%; }
  .area__pie { display: block; padding: 2rem 1.75rem; }
  .area__titulo { padding: 0; }
  .area__mas { padding-inline: 0; }
  .area__lista { padding: 1.1rem 0 0; }
  .area__nombre { font-size: clamp(1.35rem, 1.7vw, 1.75rem); transition: font-size .6s var(--area-curva); }

  .areas--vivas .area--abierta { flex-grow: var(--area-peso-abierta); }
  .areas--con-abierta .area__pie {
    flex: none; padding: 2.25rem 2.25rem 2.5rem;
    width: calc(100cqw * var(--area-peso-abierta) / (var(--area-peso-abierta) + 4));
  }
  .areas--con-abierta .area--abierta .area__nombre { font-size: clamp(2rem, 2.6vw, 2.5rem); }

  .areas--con-abierta .area:not(.area--abierta) .area__numero,
  .areas--con-abierta .area:not(.area--abierta) .area__cabecera { opacity: 0; transition: opacity .2s ease; }
  .area__numero, .area__cabecera { transition: opacity .4s ease .3s; }

  /*
   * Menos índigo sobre las fotos (Luiggi, 15 de octubre de 2026: el velo
   * tapaba demasiado). El velo del panel se abre mucho por arriba, y el
   * contraste lo sostienen dos piezas pegadas al texto:
   *
   * - En el abierto, un fundido de fondo en su pie, que crece con el bloque de
   *   texto en vez de con el panel: con la fila baja (34rem) el texto sube
   *   hasta media foto, y un velo medido en porcentajes del panel tenía que
   *   cerrarse entero para alcanzarlo. El pie no se posiciona a propósito: el
   *   nombre vertical y el `::after` del botón se miden contra el panel.
   * - En los cerrados, un riel por la izquierda, donde va el nombre vertical,
   *   en lugar de oscurecer el panel entero.
   *
   * Medido como el resto (texto escondido, píxel más claro de cada línea) a
   * 1440, 1366, 1280 y 1024 px: lista 11,4:1, título 8,9:1, número 7,2:1 y
   * nombre vertical 5,1:1 en el peor caso.
   */
  .areas--vivas .area__velo {
    background-image: linear-gradient(
      to top,
      color-mix(in oklab, var(--indigo-oscuro) 88%, transparent) 0%,
      color-mix(in oklab, var(--indigo-oscuro) 70%, transparent) 25%,
      color-mix(in oklab, var(--indigo-oscuro) 38%, transparent) 45%,
      color-mix(in oklab, var(--indigo-oscuro) 12%, transparent) 65%,
      transparent 82%);
  }
  .areas--vivas .area__velo::after {
    background-color: transparent;
    background-image: linear-gradient(
      to right,
      color-mix(in oklab, var(--indigo-oscuro) 66%, transparent) 0,
      color-mix(in oklab, var(--indigo-oscuro) 60%, transparent) 4.25rem,
      color-mix(in oklab, var(--indigo-oscuro) 22%, transparent) 8.5rem,
      color-mix(in oklab, var(--indigo-oscuro) 12%, transparent) 100%);
  }
  .areas--con-abierta .area:not(.area--abierta) .area__velo::after { opacity: 1; }

  .areas--con-abierta .area__pie {
    --area-fundido-alto: 9rem;
    --area-fundido-fuerte: 0%; --area-fundido-medio: 0%; --area-fundido-suave: 0%;
    padding-top: calc(2.25rem + var(--area-fundido-alto));
    background-image: linear-gradient(
      to top,
      color-mix(in oklab, var(--indigo-oscuro) var(--area-fundido-fuerte), transparent) 0%,
      color-mix(in oklab, var(--indigo-oscuro) var(--area-fundido-medio), transparent) calc(100% - var(--area-fundido-alto)),
      color-mix(in oklab, var(--indigo-oscuro) var(--area-fundido-suave), transparent) calc(100% - var(--area-fundido-alto) * .5),
      transparent 100%);
    transition: --area-fundido-fuerte .6s var(--area-curva), --area-fundido-medio .6s var(--area-curva), --area-fundido-suave .6s var(--area-curva);
  }
  .areas--con-abierta .area--abierta .area__pie {
    --area-fundido-fuerte: 86%; --area-fundido-medio: 78%; --area-fundido-suave: 40%;
  }

  /*
   * En fila el panel abierto no se cierra (`js/sitio.js`), así que el signo,
   * que abierto gira a «×», prometía algo que no pasa. En el teléfono se queda:
   * allí sí abre y cierra.
   */
  .areas--vivas .area__signo { display: none; }

  .areas--vivas .area__vertical {
    display: block; position: absolute; left: 1.35rem; bottom: 1.9rem;
    max-height: calc(100% - 3.8rem);
    writing-mode: vertical-rl; transform: rotate(180deg);
    font-size: 1.3rem; font-weight: 700; line-height: 1.15; letter-spacing: -.01em;
    opacity: 0; pointer-events: none;
    transition: opacity .2s ease;
  }
  .areas--con-abierta .area:not(.area--abierta) .area__vertical { opacity: 1; transition: opacity .45s ease .35s; }
}

/*
 * Sin JavaScript, en escritorio, los cinco paneles van abiertos e iguales y
 * el texto sube hasta casi arriba (a 1024 px, la lista de cirugía empieza a
 * 81 px del borde). El velo de abajo no llega ahí, así que se cierra entero.
 */
@media (min-width: 64rem) {
  .areas:not(.areas--vivas) .area__velo {
    background-image: linear-gradient(
      to top,
      var(--area-velo-base) 0%,
      color-mix(in oklab, var(--indigo-oscuro) 90%, transparent) 55%,
      color-mix(in oklab, var(--indigo-oscuro) 78%, transparent) 85%,
      color-mix(in oklab, var(--indigo-oscuro) 60%, transparent) 100%);
  }
}

@media (min-width: 64rem) and (hover: hover) and (pointer: fine) {
  .areas--con-abierta .area:not(.area--abierta):hover .area__velo::after { opacity: .6; }
}

/*
 * Con `!important` a propósito: las reglas de estado de arriba llevan dos y
 * tres clases, y una regla de una sola clase perdía ante ellas. La duración la
 * salvaba la regla general de menos movimiento, pero los retrasos (0,18 s de
 * la lista, 0,6 s de `visibility`) seguían ahí.
 */
@media (prefers-reduced-motion: reduce) {
  .areas .area, .areas .area *, .areas .area__velo::after { transition: none !important; }
}

.seccion__cabeza--ancha { max-width: 70ch; }
/* Una cabeza que es solo su antetítulo no necesita el hueco de un titular. */
.seccion__cabeza--sola { margin-bottom: 1.75rem; }
.seccion__cabeza--sola .seccion__antetitulo { margin-bottom: 0; }

.tarjeta {
  background: var(--blanco); border: 1px solid var(--borde); border-radius: var(--radio-grande);
  padding: 1.75rem; box-shadow: var(--sombra);
  transition: transform .18s ease, box-shadow .18s ease;
}
.seccion--blanca .tarjeta { background: var(--crema); }
.tarjeta:hover { transform: translateY(-3px); box-shadow: var(--sombra-alta); }
.tarjeta h3 { margin-bottom: .35rem; }
.tarjeta p { color: var(--texto-tenue); margin: 0; font-size: .97rem; }
.tarjeta__icono {
  width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center;
  background: var(--indigo-tenue); color: var(--indigo); margin-bottom: 1rem;
}
.tarjeta__icono svg { width: 24px; height: 24px; }

/* ── Contacto ─────────────────────────────────────────────────────────── */

.contacto { display: grid; gap: 2.5rem; }
@media (min-width: 880px) { .contacto { grid-template-columns: 1fr 1fr; align-items: start; } }
.datos { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.1rem; }
.datos li { display: flex; gap: .9rem; align-items: flex-start; }
.datos svg { width: 21px; height: 21px; flex-shrink: 0; margin-top: .25rem; color: var(--magenta-oscuro); }
.datos strong { display: block; font-size: .95rem; }
.datos span, .datos a { color: var(--texto-tenue); font-size: .95rem; }
.datos .datos__linea { display: block; }
.datos .datos__wasap { margin-top: .2rem; font-weight: 600; color: var(--magenta-oscuro); }

/*
 * El mapa de la clínica, con el gato que lo señala. El gato es decoración
 * (`alt=""`): la dirección está escrita al lado, y quien no ve la imagen no
 * pierde nada. Se apoya en la base del mapa, fuera de él, y solo la pata entra
 * `--gato-pata-dentro` en el borde: el hueco de la izquierda se calcula con la
 * posición de la pata en la imagen (`--gato-pata`, el 85,4 % de su ancho,
 * medido sobre el recorte), así que cambiar el tamaño del gato no la despega.
 * `pointer-events: none` para que nunca robe el arrastre del mapa.
 */
.mapa {
  --gato-ancho: 100px;
  --gato-izquierda: -6px;
  --gato-pata: .854;
  --gato-pata-dentro: 12px;
  display: grid; gap: .9rem; min-width: 0;
}
.mapa__escena {
  position: relative;
  padding-left: calc(var(--gato-izquierda) + var(--gato-ancho) * var(--gato-pata) - var(--gato-pata-dentro));
}
.mapa__marco {
  position: relative; overflow: hidden; height: 300px;
  border-radius: var(--radio-grande); border: 1px solid var(--borde); box-shadow: var(--sombra);
  background: var(--crema);
}
.mapa__lienzo { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.mapa__gato {
  position: absolute; left: var(--gato-izquierda); bottom: 0; z-index: 2;
  width: var(--gato-ancho); height: auto; pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, var(--tinta) 80%, transparent);
  mask-image: linear-gradient(to bottom, var(--tinta) 80%, transparent);
  filter: drop-shadow(0 10px 14px color-mix(in oklab, var(--tinta) 25%, transparent));
}
.mapa__pie { margin: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem 1rem; font-size: .92rem; color: var(--texto-tenue); }
@media (min-width: 880px) {
  .mapa { --gato-ancho: 170px; --gato-izquierda: -24px; }
  .mapa__marco { height: auto; aspect-ratio: 4 / 3; }
}

.pagos { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .4rem; }
.pagos li {
  list-style: none; font-size: .84rem; font-weight: 600;
  background: var(--indigo-tenue); color: var(--indigo); padding: .3rem .8rem; border-radius: 999px;
}

/* ── Pie ──────────────────────────────────────────────────────────────── */

.pie { background: var(--tinta); color: var(--texto-tenue-sobre-indigo); padding: 3rem 0 2rem; font-size: .92rem; }
.pie__rejilla { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.pie h3 { color: var(--texto-sobre-indigo); font-size: .78rem; letter-spacing: .13em; text-transform: uppercase; }
.pie a { color: var(--texto-tenue-sobre-indigo); text-decoration: none; }
.pie a:hover { color: var(--dorado); text-decoration: underline; }
.pie ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.pie__cierre {
  margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid rgba(255,255,255,.1);
  display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; justify-content: space-between; font-size: .85rem;
}

/**
 * El bloque de identidad del pie estaba escrito seis veces con un `style=` en el
 * marcado, y el dorado dentro de él en hexadecimal literal: `#f59e0b`. Un color
 * escrito a mano en seis ficheros es un color que el día que la marca cambie se
 * corrige en cinco.
 *
 * `.pie__marca` hace lo que hacía aquel atributo, con la diferencia de que ahora
 * el dorado sale de `--dorado` y la cursiva de `--tipo-marca`. Sobre la tinta del
 * pie el dorado mide 7,4:1, así que aquí sí puede ser el color de una palabra;
 * sobre el crema mide 1,94:1 y no puede ser nada que se lea.
 */
.pie__identidad { margin-bottom: .75rem; }
.pie__marca { font-family: var(--tipo-marca); font-size: 1.9rem; color: var(--dorado); }
.pie__lema { margin: 0; }

/*
 * Instagram y Facebook de la clínica, como botones y no como enlaces sueltos:
 * son destinos a los que alguien va a propósito y en el móvil se pulsan con el
 * pulgar, así que miden 44 px de alto. Van en el color del texto del pie y no en
 * los de cada marca: dos logotipos en rosa y azul se comerían el dorado de
 * «Vinyo» justo encima. Abren en otra pestaña, y el `aria-label` lo dice.
 */
.pie__redes { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.25rem; }
.pie .pie__red {
  display: inline-flex; align-items: center; gap: .55rem; min-height: 44px; padding: .5rem 1.05rem;
  border: 1px solid color-mix(in oklab, var(--texto-sobre-indigo) 30%, transparent); border-radius: 999px;
  color: var(--texto-sobre-indigo); font-weight: 600; font-size: .9rem;
  transition: color .2s ease, border-color .2s ease, background-color .2s ease;
}
.pie .pie__red svg { width: 1.15rem; height: 1.15rem; flex: none; }
.pie .pie__red:hover,
.pie .pie__red:focus-visible {
  color: var(--dorado); border-color: var(--dorado); text-decoration: none;
  background-color: color-mix(in oklab, var(--dorado) 10%, transparent);
}

/* ── Huecos por rellenar ──────────────────────────────────────────────── */

/**
 * Un dato de contacto que todavía no tenemos se marca, no se disimula. El
 * amarillo es el mismo dorado de la marca sobre un tinte suyo, que es la única
 * combinación de esta paleta que llama la atención sin parecer un error: un
 * teléfono en rojo se lee como una avería del sitio.
 */
.dato-pendiente {
  display: inline-block;
  background: rgba(245, 158, 11, .16);
  border: 1px dashed var(--dorado);
  color: #7a4f04;
  padding: .1rem .5rem;
  border-radius: 6px;
  font-size: .85rem;
  font-weight: 600;
  font-style: italic;
}