/* =====================================================================
   LAURA GARCÍA — hoja de estilos de las dos páginas (2026-09-20)

   index.html        el enlace en la bio: foto, nombre y botones.
   portafolio.html   el portafolio a pantalla completa: clientes, piezas,
                     servicios, lo que le escriben y contacto.

   Colores y letras del manual de marca v1.1 (documentos/). Lo llamativo
   está en el movimiento y en la composición, no en colores nuevos: rojo
   #881C14, negro, niebla y blanco, con Cal Sans, Manrope y DM Sans.

   SIN CIFRAS. Por encargo del dueño (2026-09-20) no hay ni un número de
   alcance, ventas o seguidores en ninguna de las dos páginas.
   ===================================================================== */

/* LAS LETRAS, DESDE EL PROPIO DOMINIO — 2026-09-21.
   Antes venían de Google: dos dominios más que conectar antes de poder pintar
   un solo texto. Solo el juego «latin» (español completo, comillas y rayas
   incluidas); DM Sans y Manrope son variables: un archivo para todos los
   pesos. */
@font-face {
  font-family: 'Cal Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fuentes/cal-sans-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url(../fuentes/dm-sans-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 500 800;
  font-display: swap;
  src: url(../fuentes/manrope-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --rojo:   #881C14;
  --rojo-2: #6E150F;
  --rojo-3: #B32A1E;          /* solo para brillos y degradados */
  --negro:  #000000;
  --noche:  #0B0B0B;          /* el fondo de la página del enlace */
  --carbon: #333333;
  --niebla: #E7E7E7;
  --blanco: #FFFFFF;
  --tinta:  #141414;          /* texto sobre blanco (la ficha, desde 2026-10-24) */
  --gris:   #666666;          /* texto secundario sobre blanco (5.7:1) */

  --f-titulo: 'Cal Sans', 'Manrope', system-ui, sans-serif;
  --f-sub:    'Manrope', system-ui, sans-serif;
  --f-texto:  'DM Sans', system-ui, sans-serif;

  --columna: 520px;           /* la ficha del enlace en la bio */
  --ancho: 1180px;            /* el portafolio */
  --radio: 22px;
  --radio-chico: 14px;
  --suave: cubic-bezier(.2, .7, .2, 1);
}

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

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  color: var(--negro);
  font-family: var(--f-texto);
  font-size: 1rem;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p, figure, blockquote { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }

:focus-visible { outline: 3px solid var(--rojo-3); outline-offset: 3px; }
[hidden] { display: none !important; }

.visualmente-oculto {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.saltar {
  position: absolute;
  left: -9999px;
  z-index: 50;
  padding: 10px 16px;
  background: var(--rojo);
  color: var(--blanco);
  border-radius: 0 0 10px 0;
}
.saltar:focus { left: 0; top: 0; }

/* El botón de todo el sitio. */
.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 52px;
  padding: 0 26px;
  border: 0;
  border-radius: 999px;
  font-family: var(--f-sub);
  font-weight: 700;
  font-size: .98rem;
  line-height: 1;
  cursor: pointer;
  transition: transform .25s var(--suave), background .2s ease, box-shadow .25s var(--suave);
}
.boton--rojo { background: var(--rojo); color: var(--blanco); box-shadow: 0 12px 30px rgba(136, 28, 20, .35); }
.boton--rojo:hover { background: var(--rojo-2); transform: translateY(-2px); box-shadow: 0 16px 36px rgba(136, 28, 20, .45); }
.boton:active { transform: scale(.98); }

/* El aviso pequeño de abajo («Enlace copiado»). */
.aviso {
  position: fixed;
  left: 50%;
  bottom: 22px;
  z-index: 40;
  transform: translateX(-50%);
  padding: 11px 18px;
  border-radius: 999px;
  background: rgba(0, 0, 0, .88);
  color: var(--blanco);
  font-family: var(--f-sub);
  font-weight: 600;
  font-size: .86rem;
  animation: aviso-entra .3s var(--suave) both;
}
@keyframes aviso-entra { from { opacity: 0; transform: translate(-50%, 10px); } to { opacity: 1; transform: translate(-50%, 0); } }

/* =====================================================================
   1. EL ENLACE EN LA BIO  (body.enlace-bio)
   ===================================================================== */

/*
 * BLANCA DESDE EL 2026-10-24. Felipe: «que predomine el blanco, que sea
 * minimalista, pero que no quites las animaciones ni los cuadrados de la
 * foto». Se cambian colores, no movimientos: las manchas siguen vagando (en
 * un rosado muy suave), el aro sigue girando y los dos cuadrados también.
 * La versión oscura está en respaldos/2026-10-24-blanco-antes/.
 */
body.enlace-bio {
  min-height: 100vh;
  min-height: 100svh;
  background: var(--blanco);
  color: var(--tinta);
}

/*
 * EL FONDO QUE RESPIRA. Tres manchas de rojo del manual sobre negro, muy
 * difuminadas y girando despacio, con un grano finísimo encima para que no
 * se vea una mancha plana de color. Nada de esto se toca ni se lee: es
 * decoración, va con `aria-hidden` y se apaga con «menos movimiento».
 */
.aurora {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.aurora__mancha {
  position: absolute;
  display: block;
  border-radius: 50%;
  /* Sin `filter: blur` — 2026-09-21. Tres manchas de hasta 820 px con un
     desenfoque de 90 px, animadas sin parar, eran lo más caro de la página:
     el scroll iba a 6 fotogramas por segundo. El degradado radial ya se
     funde con el negro; el desenfoque encima casi no se veía. */
  opacity: .6;
  will-change: transform;
}
.aurora__mancha--1 {
  top: -22vh;
  left: -18vw;
  width: 78vw;
  height: 78vw;
  max-width: 760px;
  max-height: 760px;
  background: radial-gradient(circle at 50% 50%, rgba(179, 42, 30, .22), rgba(179, 42, 30, .08) 35%, rgba(136, 28, 20, 0) 70%);
  animation: vaga-1 26s ease-in-out infinite alternate;
}
.aurora__mancha--2 {
  right: -26vw;
  top: 18vh;
  width: 86vw;
  height: 86vw;
  max-width: 820px;
  max-height: 820px;
  background: radial-gradient(circle at 50% 50%, rgba(136, 28, 20, .16), rgba(136, 28, 20, .06) 34%, rgba(110, 21, 15, 0) 68%);
  animation: vaga-2 32s ease-in-out infinite alternate;
}
.aurora__mancha--3 {
  bottom: -30vh;
  left: 10vw;
  width: 70vw;
  height: 70vw;
  max-width: 700px;
  max-height: 700px;
  background: radial-gradient(circle at 50% 50%, rgba(20, 20, 20, .05), rgba(20, 20, 20, 0) 65%);
  animation: vaga-3 38s ease-in-out infinite alternate;
}
/* El grano: un tramado diminuto, suficiente para quitar el plástico. */
.aurora__grano {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(0, 0, 0, .05) 1px, transparent 1px);
  background-size: 3px 3px;
  opacity: .5;
}
/* Solo desplazamiento, sin `scale`: cambiar de tamaño obliga a volver a
   dibujar la mancha; moverla, no. */
@keyframes vaga-1 { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(6vw, 8vh, 0); } }
@keyframes vaga-2 { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-8vw, -6vh, 0); } }
@keyframes vaga-3 { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(5vw, -7vh, 0); } }

.bio {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 26px;
  width: 100%;
  max-width: var(--columna);
  min-height: 100vh;
  min-height: 100svh;
  margin: 0 auto;
  padding: 26px 20px 40px;
}

.compartir {
  align-self: flex-end;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(0, 0, 0, .12);
  border-radius: 50%;
  background: var(--blanco);
  color: var(--tinta);
  cursor: pointer;
  transition: background .2s ease, transform .25s var(--suave);
}
.compartir svg { width: 20px; height: 20px; }
.compartir:hover { background: #F5F2F1; transform: translateY(-2px); }

.bio__cabeza {
  display: grid;
  justify-items: center;
  gap: 10px;
  text-align: center;
}

/*
 * EL RETRATO, CON SU ARO. La foto en un cuadrado redondeado y, por detrás,
 * un aro de color que gira: es el único adorno con movimiento continuo de
 * la ficha y es lo que le da el aire de «esto está vivo».
 */
.retrato {
  position: relative;
  z-index: 1;
  width: min(62vw, 220px);
  aspect-ratio: 1;
  /*
   * CUADRADOS CENTRADOS EN EL CÍRCULO — 2026-10-24. Felipe: «que el círculo
   * esté centrado en el cuadrado; si el cuadrado tapa algo, sube el cuadrado
   * con el círculo». Al girar, la punta del cuadrado sobresale ~24 px por
   * debajo de la foto: se deja ese aire abajo (+10 px) y el conjunto sube lo
   * mismo (-10 px arriba), así los botones no bajan ni un píxel.
   */
  margin-top: -10px;
  margin-bottom: 32px;
}
/*
 * EL ARO: GIRA EL COLOR, NO EL CUADRADO — corregido el 2026-09-21.
 *
 * Antes se rotaba el elemento con `transform: rotate`, y al girar un cuadrado
 * sus esquinas barren mucho más lejos que sus lados: asomaban por detrás de
 * la foto y llegaban a pisar el nombre. Ahora el elemento está quieto y lo
 * que se mueve es el ÁNGULO del degradado (`--angulo`), así que la silueta no
 * cambia nunca. Donde el navegador no entienda @property, el aro se queda
 * quieto con el mismo degradado: se pierde el giro, no el diseño.
 */
/*
 * Y SIN REDIBUJAR — 2026-09-21. Animar `--angulo` obligaba a pintar el
 * degradado de nuevo 60 veces por segundo, en el procesador. Ahora el aro es
 * una ventana quieta (`overflow: hidden` con sus esquinas) y lo que gira es
 * una capa por dentro, el doble de grande para que nunca asome un hueco: la
 * silueta sigue sin moverse y el giro lo hace la tarjeta gráfica.
 */
.retrato__aro {
  position: absolute;
  inset: -3px;
  overflow: hidden;
  border-radius: 50%;   /* foto redonda desde el 2026-10-24 */
  isolation: isolate;
}
.retrato__aro::before {
  content: "";
  position: absolute;
  inset: -50%;
  background: conic-gradient(var(--rojo-3), #F1E2DF, var(--rojo), var(--rojo-2), var(--rojo-3));
  animation: gira-cuadro 9s linear infinite;
  will-change: transform;
}
/* Y un halo suave por detrás, que es lo que da la sensación de relieve. */
/*
 * LOS DOS CUADRADOS QUE GIRAN DETRÁS DE LA FOTO — vueltos a poner el
 * 2026-09-21, con la cuenta hecha esta vez.
 *
 * Un cuadrado girando asoma por las esquinas mucho más que por los lados: su
 * diagonal es 1,41 veces su lado. Antes el cuadrado medía lo mismo que la
 * foto y sus puntas llegaban a pisar el nombre. Ahora mide el 82 % y el 74 %
 * de la foto, así que en el peor momento del giro las puntas sobresalen unos
 * 16 px por detrás —justo el efecto que se buscaba— y no alcanzan el texto,
 * que además está separado y por encima (.bio__nombre, z-index 2).
 *
 * La cuenta, con la foto de 220 px y esquinas redondeadas de 28:
 *   · la foto, medida en diagonal, llega a 144 px del centro;
 *   · un cuadrado del 100 % llega a 155 px  ->  asoma 11 px por la punta;
 *   · y se le sube el centro 24 px, así su punta de abajo queda a 131 px,
 *     es decir 21 px por debajo de la foto, y el nombre empieza 32 px más
 *     abajo: no se tocan ni en el peor momento del giro.
 */
.retrato::before,
.retrato::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: -1;
  border-radius: 24%;
}
.retrato::before {
  width: 100%;
  aspect-ratio: 1;
  margin: -50% 0 0 -50%;
  background: linear-gradient(140deg, var(--rojo-3), var(--rojo-2));
  box-shadow: 0 18px 40px rgba(136, 28, 20, .25);
  animation: gira-cuadro 16s linear infinite;
  will-change: transform;
}
.retrato::after {
  width: 88%;
  aspect-ratio: 1;
  margin: -44% 0 0 -44%;
  background: rgba(20, 20, 20, .07);
  animation: gira-cuadro 24s linear infinite reverse;
  will-change: transform;
}
@keyframes gira-cuadro { to { transform: rotate(1turn); } }
.retrato picture {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
}
.retrato img {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  object-position: center 18%;
}
.retrato img { box-shadow: 0 18px 40px rgba(0, 0, 0, .16); }

.bio__nombre {
  position: relative;
  z-index: 2;
  font-family: var(--f-titulo);
  font-weight: 400;
  font-size: clamp(2.3rem, 11vw, 3.2rem);
  line-height: .95;
  letter-spacing: -.02em;
}
/*
 * EL OFICIO, EN UNA LÍNEA HASTA DONDE SE PUEDA — 2026-09-27.
 *
 * Al pasar de «Social Media Manager» a «Social Media Manager & AI Specialist»
 * el rótulo creció de 20 a 36 caracteres, y con la separación entre letras que
 * lleva —que es la que le da el aire de rótulo— dejó de caber:
 *
 *     320px · 360px · 375px .... DOS líneas
 *     390px · 430px ............ una
 *
 * Es decir, se partía en el iPhone SE y en la mitad de los Android. Y el corte
 * caía donde tocara, con un «&» colgando al final del renglón.
 *
 * Se arregla por los dos lados: en pantalla estrecha se aprieta un poco la
 * separación y el cuerpo —lo justo para que entre, no tanto como para que
 * pierda el aire—, y si aun así hay que partirlo, `text-wrap: balance` reparte
 * las dos líneas parejas en vez de dejar una larga y una corta.
 */
.bio__oficio {
  font-family: var(--f-sub);
  font-weight: 700;
  font-size: .76rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gris);
  text-wrap: balance;
}

@media (max-width: 420px) {
  .bio__oficio {
    font-size: .70rem;
    letter-spacing: .14em;
  }
}
/*
 * LA FRASE Y EL «TE AYUDO A…» — 2026-09-22.
 *
 * El dueño: «que diga algo como yo lo tengo en mi perfil: conviértete en la
 * marca favorita… que diga así: te ayudo a tal cosa». Son las palabras de su
 * perfil de Instagram, tal cual.
 *
 * La lista va alineada a la izquierda dentro de un bloque centrado: cuatro
 * frases centradas se leen como un poema y cuesta seguirlas; alineadas,
 * el ojo vuelve siempre al mismo sitio. El cuadradito de cada línea es el
 * mismo gesto que los cuadrados que giran detrás de la foto.
 */
.bio__frase {
  max-width: 24ch;
  margin-top: 8px;
  font-family: var(--f-sub);
  font-weight: 800;
  font-size: clamp(1.04rem, 4.6vw, 1.22rem);
  line-height: 1.24;
  color: var(--tinta);
}
/* Instagram y correo: dos botones redondos bajo la foto. */
.bio__redes {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin: -8px 0 6px;
}
.red {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(0, 0, 0, .12);
  border-radius: 50%;
  background: var(--blanco);
  color: var(--tinta);
  transition: background .2s ease, color .2s ease, transform .25s var(--suave);
}
.red svg { width: 21px; height: 21px; }
.red:hover { background: var(--rojo); border-color: var(--rojo-3); color: var(--blanco); transform: translateY(-2px); }
.red:focus-visible { outline: 2px solid var(--tinta); outline-offset: 3px; }
.bio__enlaces { width: 100%; }
/* La línea suelta de 404.html (la del pie de la ficha se fue el 2026-10-24). */
.bio__linea { max-width: 34ch; margin-top: 12px; font-size: .95rem; line-height: 1.5; color: var(--gris); }
.bio__enlaces ul { display: grid; gap: 12px; }

/*
 * LOS BOTONES. Cristal sobre el fondo oscuro, icono a la izquierda y
 * flecha a la derecha. Al pasar por encima cruza un brillo diagonal: es
 * el guiño «wow» que pidió el dueño, y cuesta un pseudoelemento.
 */
.enlace {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 74px;
  padding: 14px 18px;
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, .1);
  border-radius: 18px;
  /* Sin `backdrop-filter` — 2026-09-21: sobre el fondo que se mueve, el
     navegador rehacía el desenfoque de cada botón en cada fotograma. El
     fondo de detrás ya es difuso: sin el desenfoque se ve igual. */
  background: var(--blanco);
  color: var(--tinta);
  transition: transform .3s var(--suave), background .25s ease, border-color .25s ease, box-shadow .3s var(--suave);
}
.enlace::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -60%;
  width: 45%;
  background: linear-gradient(100deg, transparent, rgba(136, 28, 20, .08), transparent);
  transform: skewX(-18deg);
  transition: left .6s var(--suave);
}
.enlace:hover {
  transform: translateY(-3px);
  background: #FBF8F7;
  border-color: rgba(0, 0, 0, .16);
  box-shadow: 0 14px 30px rgba(0, 0, 0, .08);
}
.enlace:hover::after { left: 120%; }
.enlace:active { transform: scale(.99); }

.enlace--principal {
  background: linear-gradient(135deg, var(--rojo-3), var(--rojo-2));
  border-color: rgba(255, 255, 255, .22);
  color: var(--blanco);
  box-shadow: 0 16px 38px rgba(136, 28, 20, .3);
}
.enlace--principal::after { background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .22), transparent); }
.enlace--principal:hover { background: linear-gradient(135deg, var(--rojo-3), var(--rojo)); }

.enlace__icono {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: #F6EEEC;
  color: var(--rojo);
}
.enlace__icono svg { width: 22px; height: 22px; }
.enlace--principal .enlace__icono { background: rgba(255, 255, 255, .18); color: var(--blanco); }

.enlace__texto { flex: 1; display: grid; gap: 2px; min-width: 0; }
.enlace__texto strong { font-family: var(--f-sub); font-weight: 700; font-size: 1.02rem; }
.enlace__texto span { font-size: .84rem; line-height: 1.3; color: var(--gris); text-wrap: balance; }
.enlace--principal .enlace__texto span { color: rgba(255, 255, 255, .82); }
.enlace__ir { flex: none; width: 20px; height: 20px; opacity: .6; transition: transform .3s var(--suave), opacity .2s ease; }
.enlace:hover .enlace__ir { transform: translateX(4px); opacity: 1; }

.bio__pie {
  margin-top: auto;
  padding-top: 18px;
  text-align: center;
  font-size: .78rem;
  color: #757575;
}
.bio__legal { margin-top: 2px; }

/* La entrada: la ficha y los botones suben uno tras otro. */
.anim .bio__cabeza,
.anim .compartir,
.anim .bio__pie { opacity: 0; transform: translateY(16px); }
.anim .bio__enlaces li { opacity: 0; transform: translateY(18px); }
.anim.is-lista .compartir { animation: entra .6s var(--suave) .05s forwards; }
.anim.is-lista .bio__cabeza { animation: entra .8s var(--suave) .1s forwards; }
.anim.is-lista .bio__enlaces li { animation: entra .7s var(--suave) forwards; animation-delay: calc(.36s + var(--n) * .09s); }
.anim.is-lista .bio__pie { animation: entra .6s var(--suave) .9s forwards; }
@keyframes entra { to { opacity: 1; transform: none; } }

/* =====================================================================
   2. RESULTADOS  (body.portafolio — la URL sigue siendo /portafolio)

   Desde el 2026-10-24, con el mismo diseño que /especialidades (Felipe:
   «quiero que sea con el mismo diseño que ahora estamos llevando»):
   blanco, filetes de 1 px, etiquetas en letra de máquina con su cuadrado
   rojo, títulos en Cal Sans y el rojo solo en lo que se marca. La cabecera,
   el cierre y el pie son los de especialidades (sección 4b). La versión
   oscura con la portada a pantalla completa está en
   respaldos/2026-10-24-resultados-antes/.
   ===================================================================== */

body.portafolio {
  background: var(--blanco);
  color: var(--tinta);
}

.ancho {
  width: 100%;
  max-width: var(--ancho);
  margin: 0 auto;
  padding: 0 24px;
}

/* Clientes y Piezas en la barra; el tramo en que vas se marca en rojo
   (sitio.js, «el menú marca en qué tramo vas»). */
.esp-barra__tramos { display: flex; gap: 22px; }
.esp-barra__tramos a { font-size: .95rem; color: #3A3A3A; transition: color .2s ease; }
.esp-barra__tramos a:hover,
.esp-barra__tramos a.is-activo { color: var(--rojo); }
@media (max-width: 640px) {
  .esp-barra__tramos { display: none; }
}

/* ------------------------------------------------------------- tramos */
.tramo {
  padding: clamp(56px, 8vw, 96px) 0;
  border-top: 1px solid #ECE8E5;
  background: var(--blanco);
  color: var(--tinta);
}
.tramo--oscuro { background: #FAF9F7; }   /* las piezas, sobre un papel apenas más tibio */
/* El primer tramo abre la página: sin filete arriba y con menos aire, para
   que el primer cliente se vea en la primera pantalla. */
main > .tramo:first-of-type { border-top: 0; padding-top: clamp(36px, 5vw, 64px); }
.tramo__titulo--pagina { max-width: 20ch; text-wrap: balance; }
.tramo__titulo {
  font-family: var(--f-titulo);
  font-weight: 400;
  font-size: clamp(2.2rem, 5.4vw, 3.6rem);
  line-height: 1;
  letter-spacing: -.025em;
}
.tramo__bajada {
  max-width: 56ch;
  margin-top: 16px;
  font-size: clamp(1rem, 1.5vw, 1.12rem);
  line-height: 1.55;
  color: #4A4A4A;
}
.tramo__sub {
  margin: clamp(48px, 6vw, 72px) 0 18px;
  font-family: var(--f-sub);
  font-weight: 700;
  font-size: .72rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #5C5C5C;
}

/* ------------------------------------------------------------ clientes */
.clientes {
  display: grid;
  margin-top: clamp(32px, 5vw, 56px);
  border-top: 1px solid #E4E0DC;
}
.cliente {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(20px, 3vw, 34px);
  padding: clamp(28px, 4vw, 48px) 0;
  border-bottom: 1px solid #E4E0DC;
}
.cliente__marca { position: relative; display: inline-block; }
.cliente__marca img {
  width: clamp(76px, 12vw, 104px);
  height: clamp(76px, 12vw, 104px);
  border: 1px solid #E4E0DC;
  border-radius: 50%;
}
/* El número va como una etiqueta: «01», en letra de máquina. */
.cliente__numero {
  position: absolute;
  top: -6px;
  right: -14px;
  padding: 3px 7px;
  border: 1px solid rgba(179, 42, 30, .35);
  background: var(--blanco);
  font-family: var(--f-sub);
  font-weight: 700;
  font-size: .68rem;
  letter-spacing: .12em;
  line-height: 1.2;
  color: var(--rojo-3);
}
.cliente__sector {
  font-family: var(--f-sub);
  font-weight: 700;
  font-size: .72rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--rojo-3);
}
.cliente__nombre {
  margin-top: 6px;
  font-family: var(--f-sub);
  font-weight: 800;
  font-size: clamp(1.4rem, 3vw, 1.9rem);
  line-height: 1.12;
  letter-spacing: -.015em;
}
.cliente__que { margin-top: 10px; font-size: 1rem; line-height: 1.6; color: #4A4A4A; }
.cliente__tareas { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; }
.cliente__tareas li {
  padding: 6px 10px;
  border: 1px solid #E4E0DC;
  font-family: var(--f-sub);
  font-weight: 700;
  font-size: .68rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #4A4A4A;
}

@media (min-width: 860px) {
  /* El texto, en dos columnas: el logo a la izquierda y lo demás al lado. */
  .cliente__texto {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 34px;
    align-items: start;
  }
  .cliente__marca { grid-row: 1 / span 4; }
  .cliente__que { max-width: 68ch; }
  /* El antes/después de Cangel Zone va a lo ancho, debajo: si cae en la
     columna del logo, la ensancha y descuadra toda la ficha. */
  .cliente__texto > .avance,
  .cliente__texto > .avance__nota { grid-column: 1 / -1; }
}

/*
 * LA FILA DE CADA CLIENTE (2026-09-21): el perfil y sus piezas en una línea,
 * todas a la misma altura y cada una con su forma; si no caben, la fila se
 * desliza de lado. Ahora sobre gris claro y con esquinas casi rectas.
 */
.collage {
  display: flex;
  gap: 12px;
  margin-top: 4px;
  padding: 18px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-left: 18px;
  scrollbar-width: none;
  background: #F6F5F3;
  border: 1px solid #ECE8E5;
}
.collage::-webkit-scrollbar { display: none; }
.collage__piezas { display: contents; }
.collage__perfil,
.collage__pieza {
  flex: none;
  margin: 0;
  scroll-snap-align: start;
}
.collage__perfil img,
.collage__pieza img {
  display: block;
  width: auto;
  height: clamp(210px, 20vw, 260px);
  border: 1px solid #E4E0DC;
  border-radius: 6px;
  background: var(--blanco);
}

/* --------------------------------------------------------------- marcas */
/* Los logos en una rejilla de filetes, como las tarjetas de especialidades. */
.marcas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  border-top: 1px solid #E4E0DC;
  border-left: 1px solid #E4E0DC;
}
.marcas li {
  display: grid;
  place-items: center;
  padding: 18px;
  border-right: 1px solid #E4E0DC;
  border-bottom: 1px solid #E4E0DC;
  transition: background .25s ease;
}
.marcas li:hover { background: #F6F5F3; }
.marcas img {
  width: min(84px, 100%);
  border-radius: 50%;
  transition: transform .3s var(--suave);
}
.marcas li:hover img { transform: scale(1.06); }

/* --------------------------------------------------------------- piezas */
.filtros {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: clamp(28px, 4vw, 44px) 0 22px;
}
.filtro {
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid #D9D5D1;
  background: var(--blanco);
  color: var(--tinta);
  font-family: var(--f-sub);
  font-weight: 700;
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.filtro:hover { border-color: var(--tinta); }
.filtro.is-activo { background: var(--tinta); color: var(--blanco); border-color: var(--tinta); }
.filtro:focus-visible { outline: 2px solid var(--rojo); outline-offset: 2px; }

.tira {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 14px;
}
.clip { margin: 0; }
.clip[hidden] { display: none; }
.clip__marco {
  position: relative;
  aspect-ratio: 9 / 16;
  border-radius: 8px;
  overflow: hidden;
  background: #111;
  box-shadow: 0 10px 26px rgba(0, 0, 0, .12);
  transition: transform .35s var(--suave), box-shadow .35s var(--suave);
}
.clip:hover .clip__marco { transform: translateY(-4px); box-shadow: 0 16px 34px rgba(0, 0, 0, .18); }
.clip__marco img, .clip__marco video { display: block; width: 100%; height: 100%; object-fit: cover; }
.clip__marco video { object-fit: contain; background: #000; }
.clip__play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  width: 100%;
  padding: 0;
  border: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, .45), rgba(0, 0, 0, 0) 60%);
  color: var(--blanco);
  cursor: pointer;
}
.clip__play svg { width: 48px; height: 48px; filter: drop-shadow(0 4px 12px rgba(0, 0, 0, .5)); transition: transform .25s var(--suave); }
.clip__play:hover svg { transform: scale(1.1); }
.clip__play:focus-visible { outline: 2px solid var(--blanco); outline-offset: -4px; }
.clip__dur {
  position: absolute;
  right: 8px;
  bottom: 8px;
  padding: 2px 7px;
  background: rgba(0, 0, 0, .7);
  color: var(--blanco);
  font-family: var(--f-sub);
  font-weight: 700;
  font-size: .68rem;
  pointer-events: none;
}
.clip.is-playing .clip__play,
.clip.is-playing .clip__dur,
.clip.is-playing img { display: none; }
.clip__pie {
  display: flex;
  flex-wrap: wrap;   /* «Tecnología · ENTRETENIMIENTO» no cabe en una línea a 390 px */
  justify-content: space-between;
  align-items: baseline;
  gap: 2px 8px;
  margin-top: 10px;
}
.clip__pie b { font-family: var(--f-sub); font-weight: 700; font-size: .88rem; }
.clip__pie span {
  font-family: var(--f-sub);
  font-weight: 700;
  font-size: .64rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #6B6B6B;
}

/* ---------------------------------------------------------- lo que dicen */
.dicen {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  margin-top: clamp(32px, 5vw, 52px);
  border-top: 1px solid #E4E0DC;
  border-left: 1px solid #E4E0DC;
}
.dice {
  position: relative;
  display: grid;
  align-content: space-between;
  gap: 18px;
  padding: 54px 24px 22px;
  border-right: 1px solid #E4E0DC;
  border-bottom: 1px solid #E4E0DC;
  font-family: var(--f-sub);
  font-weight: 600;
  font-size: 1.05rem;
  line-height: 1.45;
}
.dice::before {
  content: "“";
  position: absolute;
  top: 14px;
  left: 22px;
  font-family: var(--f-titulo);
  font-size: 3rem;
  line-height: 1;
  color: var(--rojo-3);
}
.dice footer {
  font-family: var(--f-sub);
  font-weight: 700;
  font-size: .66rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #6B6B6B;
}

/* El cierre de esta página lleva además Instagram y correo. */
.esp-cierre__otros { margin-top: 6px; font-size: .92rem; color: #4A4A4A; }
.esp-cierre__otros a { text-decoration: underline; text-underline-offset: 3px; }
.esp-cierre__otros a:hover { color: var(--rojo); }
.esp-cierre__otros span { margin: 0 8px; }

/* La firma del pie (la usan resultados y especialidades). */
.firma { display: inline-flex; align-items: center; gap: 8px; font-family: var(--f-sub); font-weight: 700; font-size: 1.1rem; color: var(--blanco); }
.firma__apellido { padding: 3px 9px; background: var(--rojo); border-radius: 6px; }
.pie__legal { font-size: .78rem; }

/* =====================================================================
   2b. LA PÁGINA ÚNICA  (body.una) — 2026-10-24
   Portada que dice qué hace · especialidades · resultados por cliente ·
   piezas · mensajes · contacto. Usa las piezas de la sección 2 (tramos,
   clips, mensajes) y de la 4b (barra, etiquetas, rejilla de
   especialidades, cierre y pie); aquí va lo que es solo suyo.
   ===================================================================== */
html { scroll-padding-top: 88px; }   /* la barra fija no tapa el título al saltar a un tramo */

body.una {
  background: var(--blanco);
  color: var(--tinta);
}

/* La marca de la barra: «Laura» + «García» en su recuadro rojo. */
.una-marca {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  font-family: var(--f-sub);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--tinta);
}
.una-marca .firma__apellido { color: var(--blanco); }
@media (max-width: 900px) {
  .esp-barra__tramos { display: none; }
}

/* ------------------------------------------------------------ portada */
.una-portada {
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid #ECE8E5;
}
.una-portada .aurora { position: absolute; }
.una-portada__fila {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);   /* la foto primero (2026-10-24) */
  align-items: center;
  gap: clamp(32px, 5vw, 72px);
  max-width: var(--ancho);
  margin: 0 auto;
  padding: clamp(48px, 7vw, 96px) 24px clamp(40px, 5vw, 64px);
}
.una-portada__texto { display: grid; gap: 22px; justify-items: start; }
.una-portada__titulo {
  max-width: 17ch;
  font-family: var(--f-titulo);
  font-weight: 400;
  font-size: clamp(2.5rem, 5.2vw, 4.4rem);
  line-height: 1;
  letter-spacing: -.025em;
  text-wrap: balance;
}
.una-portada__bajada {
  max-width: 54ch;
  font-size: clamp(1.02rem, 1.5vw, 1.18rem);
  line-height: 1.6;
  color: #4A4A4A;
}
.una-portada__bajada b { color: var(--tinta); font-weight: 700; }
.una-portada__botones { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 14px; margin-top: 4px; }
/* El botón secundario: la misma píldora, en filete. */
.una-boton-linea {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 52px;
  padding: 0 24px;
  border: 1.5px solid rgba(20, 20, 20, .22);
  border-radius: 999px;
  font-family: var(--f-sub);
  font-weight: 700;
  font-size: .98rem;
  color: var(--tinta);
  transition: border-color .2s ease, transform .25s var(--suave), background .2s ease;
}
.una-boton-linea:hover { border-color: var(--tinta); background: #FAF8F7; transform: translateY(-2px); }
.una-boton-linea:focus-visible,
.una-portada .boton:focus-visible { outline: 2px solid var(--rojo); outline-offset: 3px; }

.una-portada__foto { display: grid; justify-items: center; }
/*
 * Aire alrededor de la foto: al girar, la punta de cada cuadrado sobresale un
 * 11 % del lado de la foto (37 px a 340 px). Arriba y abajo se deja eso más
 * unos 16 px, así no toca ni el título ni los iconos (Felipe, 2026-10-24:
 * «que el cuadro que está abajo de la foto no toque nada»).
 */
.una-portada .retrato { width: min(64vw, 340px); margin: 40px 0 56px; }
.una-portada .bio__redes { margin: 0; }

/*
 * LAS MARCAS, EN MARQUESINA INFINITA — 2026-10-24 (Felipe: «que sean una
 * marquesina y un poco más grandes, tipo un slider infinito»).
 *
 * La pista lleva la lista dos veces y se corre exactamente la mitad de su
 * ancho: cuando termina la primera copia, la segunda está donde empezó la
 * primera y el salto no se nota. Solo se anima `transform` (lo hace la
 * tarjeta gráfica, ver «efectos caros» del 2026-09-21). Se para al pasar el
 * ratón o el dedo; con «menos movimiento», quieta y se desliza a mano.
 */
.una-marcas {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 18px;
  max-width: var(--ancho);
  margin: 0 auto;
  padding: 28px 0 36px;
  border-top: 1px solid #ECE8E5;
}
.una-marcas__rotulo {
  padding: 0 24px;
  font-family: var(--f-sub);
  font-weight: 700;
  font-size: .68rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #5C5C5C;
}
.una-desfile {
  --logo: 84px;
  --hueco: 28px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.una-desfile__pista {
  display: flex;
  width: max-content;
  animation: desfile 38s linear infinite;
}
.una-desfile:hover .una-desfile__pista,
.una-desfile:focus-within .una-desfile__pista { animation-play-state: paused; }
.una-desfile__lista {
  display: flex;
  gap: var(--hueco);
  padding-right: var(--hueco);   /* el mismo hueco en la costura entre las dos copias */
}
.una-desfile__lista li { flex: none; }
.una-desfile__lista img {
  width: var(--logo);
  height: var(--logo);
  border: 1px solid #E4E0DC;
  border-radius: 50%;
  transition: transform .3s var(--suave);
}
.una-desfile__lista li:hover img { transform: scale(1.06); }
@keyframes desfile { to { transform: translate3d(-50%, 0, 0); } }
@media (prefers-reduced-motion: reduce) {
  .una-desfile { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
  .una-desfile__pista { animation: none; padding: 0 24px; }
  .una-desfile__lista[aria-hidden="true"] { display: none; }
}

/* El tramo de especialidades: la rejilla de 4b, con aire bajo el título. */
.tramo > .esp { margin-top: clamp(32px, 5vw, 56px); }

/* ---------------------------------------------------------- resultados */
.casos {
  display: grid;
  margin-top: clamp(32px, 5vw, 56px);
  border-top: 1px solid #E4E0DC;
}
.caso {
  display: grid;
  gap: clamp(22px, 3vw, 32px);
  padding: clamp(32px, 4vw, 52px) 0;
  border-bottom: 1px solid #E4E0DC;
}
.caso__cabeza {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 18px 48px;
  align-items: start;
}
.caso__marca { display: flex; align-items: center; gap: 18px; }
.caso__marca img {
  flex: none;
  width: 72px;
  height: 72px;
  border: 1px solid #E4E0DC;
  border-radius: 50%;
}
.caso__sector {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--f-sub);
  font-weight: 700;
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--rojo-3);
}
.caso__nombre {
  margin-top: 6px;
  font-family: var(--f-sub);
  font-weight: 800;
  font-size: clamp(1.45rem, 2.6vw, 2rem);
  line-height: 1.1;
  letter-spacing: -.015em;
}
.caso__texto { display: grid; gap: 14px; }
.caso__texto > p:first-child { font-size: 1.02rem; line-height: 1.6; color: #4A4A4A; }
.caso__dato { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; }
.caso__dato b {
  font-family: var(--f-titulo);
  font-weight: 400;
  font-size: clamp(1.9rem, 3.4vw, 2.6rem);
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--rojo-3);
}
.caso__dato span { max-width: 38ch; font-size: .95rem; line-height: 1.45; color: #4A4A4A; }
.caso__roles {
  font-family: var(--f-sub);
  font-weight: 700;
  font-size: .66rem;
  letter-spacing: .1em;
  line-height: 1.9;
  text-transform: uppercase;
  color: #6B6B6B;
}

/* Las cinco piezas: el mismo marco 9:16 para todas, derechas, en una fila. */
.caso__galeria {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
}
.caso__pieza { display: grid; gap: 10px; margin: 0; min-width: 0; }
.caso__marco {
  aspect-ratio: 9 / 16;
  overflow: hidden;
  border: 1px solid #E4E0DC;
  border-radius: 8px;
  background: #F6F5F3;
}
.caso__marco picture { display: block; width: 100%; height: 100%; }
.caso__marco img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 80%; }
.caso__pieza--perfil .caso__marco img { object-position: top; }
.caso__pieza--abajo .caso__marco img { object-position: center bottom; }
/* Los carruseles (4:5) se ven ENTEROS dentro del marco, sin recortarles el texto. */
.caso__pieza--entera .caso__marco img { object-fit: contain; object-position: center; padding: 8px; }
.caso__pieza figcaption {
  font-family: var(--f-sub);
  font-weight: 700;
  font-size: .62rem;
  letter-spacing: .12em;
  line-height: 1.5;
  text-transform: uppercase;
  color: #5C5C5C;
}

/* Las piezas: filas de seis en el ordenador (las 30 de /videos). */
.una .tira { grid-template-columns: repeat(6, minmax(0, 1fr)); margin-top: clamp(28px, 4vw, 44px); }
/* La portada enseña solo cuatro desde el 2026-10-26 («que solo salgan 4
   videos en la página principal»): una fila de cuatro, más grandes. VA ANTES
   de las reglas del teléfono, que la vuelven de dos en dos. */
.una .tira--cuatro { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 2vw, 26px); }

/* Páginas web y software (2026-10-24): dos videos y dos pantallas en el mismo
   marco de celular, de cuatro en fila; de dos en dos en el teléfono. El marco
   es 6:11, la proporción de las pantallas una vez quitadas la barra del
   teléfono y la del navegador. */
.obras {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  margin-top: clamp(28px, 4vw, 44px);
}
.obra { display: grid; align-content: start; gap: 10px; margin: 0; min-width: 0; }
.obra__marco {
  aspect-ratio: 6 / 11;
  overflow: hidden;
  border: 1px solid #E4E0DC;
  border-radius: 8px;
  background: #F6F5F3;
}
.obra__marco video,
.obra__marco picture { display: block; width: 100%; height: 100%; }
.obra__marco video,
.obra__marco img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
/* El rótulo, siempre en dos líneas: con el de las piezas (en fila) unos
   quedaban al lado y otros debajo, según cupiera el título. */
.obra .clip__pie { display: grid; gap: 2px; justify-content: start; margin-top: 0; }
.obras__cta { margin-top: clamp(28px, 4vw, 40px); }

@media (max-width: 1024px) {
  .una .tira { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .una-portada__fila { grid-template-columns: minmax(0, 1fr); }
  .caso__cabeza { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  /* En el teléfono las piezas de cada cliente se deslizan de lado. */
  .caso__galeria {
    display: flex;
    gap: 12px;
    margin: 0 -24px;
    padding: 0 24px 6px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 24px;
    scrollbar-width: none;
  }
  .caso__galeria::-webkit-scrollbar { display: none; }
  .caso__pieza { flex: 0 0 44%; scroll-snap-align: start; }
}
@media (max-width: 640px) {
  .una-portada .retrato { width: min(62vw, 250px); margin: 30px 0 46px; }

  /* Las especialidades, de dos en dos también en el teléfono (2026-10-24). */
  .una .esp { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .una .esp__icono { padding: 20px 14px 0; }
  .una .esp__icono svg { width: 58px; height: 58px; }
  .una .esp__cuerpo { gap: 10px; padding: 16px 14px 20px; }
  .una .esp__titulo { font-size: 1rem; line-height: 1.2; }
  .una .esp__texto { font-size: .84rem; line-height: 1.45; }

  .una .tira { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .obras { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .una-desfile { --logo: 68px; --hueco: 20px; }
  .una-desfile__pista { animation-duration: 30s; }
  .una-marcas__rotulo { padding: 0 16px; }
  .una-portada__fila { padding-left: 16px; padding-right: 16px; }
  .ancho { padding-left: 16px; padding-right: 16px; }
  .caso__galeria { margin: 0 -16px; padding: 0 16px 6px; scroll-padding-left: 16px; }
}

/* =====================================================================
   3. LO QUE APARECE AL LLEGAR
   La clase `anim` la pone el guion, y solo cuando ya tiene montado lo que
   vuelve a mostrarlo. Sin guion no se esconde nada. (Lección del
   2026-09-19: media página invisible en algunos computadores.)
   ===================================================================== */
.anim [data-anim] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .7s ease-out, transform .8s var(--suave);
}
.anim [data-anim].is-visible { opacity: 1; transform: none; }

/* =====================================================================
   4. PANTALLAS GRANDES
   ===================================================================== */
@media (min-width: 720px) {
  .tira { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
}
@media (max-width: 560px) {
  /*
   * LA FICHA, RECOGIDA — 2026-09-22. Al añadir la frase de Laura y sus
   * cuatro líneas, en un teléfono de 360x740 no se veía NI UN botón sin
   * bajar, y esta página existe para el botón de WhatsApp. Se recorta la
   * foto y el aire, no el mensaje.
   */
  .bio { gap: 18px; padding-top: 18px; }
  .bio__cabeza { gap: 7px; }
  .retrato { width: min(46vw, 168px); margin-top: -11px; margin-bottom: 27px; }
  .bio__nombre { font-size: clamp(2rem, 9.4vw, 2.6rem); }
  .bio__frase { margin-top: 4px; font-size: 1rem; }
  .bio__redes { margin: -6px 0 4px; }
  .red { width: 40px; height: 40px; }
  .enlace { min-height: 66px; }

}

/* =====================================================================
   4b. ESPECIALIDADES  (body.especialidades) — 2026-10-24
   Blanca y de líneas finas, en el registro de las tarjetas de helelai.com
   que mandó Felipe de referencia: rejilla con filetes de 1 px, dibujo de
   líneas sobre gris claro, etiqueta en letra de máquina con su cuadrado rojo
   y el título debajo. El rojo es el del manual, y solo en lo que se marca.
   ===================================================================== */
body.especialidades {
  background: var(--blanco);
  color: var(--tinta);
}

/* La barra de arriba: volver, resultados y el botón. Fija y opaca (sin
   desenfoque de fondo: ver «efectos caros» del 2026-09-21). */
.esp-barra {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px max(24px, calc((100% - var(--ancho)) / 2));
  border-bottom: 1px solid #ECE8E5;
  background: var(--blanco);
}
.esp-barra__volver {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  font-family: var(--f-sub);
  font-weight: 700;
  font-size: 1rem;
}
.esp-barra__volver svg { color: var(--rojo); transition: transform .25s var(--suave); }
.esp-barra__volver:hover svg { transform: translateX(-3px); }
.esp-barra__nav { display: flex; align-items: center; gap: 22px; }
.esp-barra__nav > a:not(.esp-barra__cta) { font-size: .95rem; color: #3A3A3A; }
.esp-barra__nav > a:not(.esp-barra__cta):hover { color: var(--rojo); }
.esp-barra__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 18px;
  border-radius: 999px;
  background: var(--rojo);
  color: var(--blanco);
  font-family: var(--f-sub);
  font-weight: 700;
  font-size: .9rem;
  transition: background .2s ease, transform .25s var(--suave);
}
.esp-barra__cta:hover { background: var(--rojo-2); transform: translateY(-1px); }


.esp-cabeza {
  display: grid;
  gap: 18px;
  max-width: var(--ancho);
  margin: 0 auto;
  padding: clamp(48px, 8vw, 96px) 24px clamp(36px, 5vw, 56px);
}
.esp-cabeza__titulo {
  max-width: 16ch;
  font-family: var(--f-titulo);
  font-weight: 400;
  font-size: clamp(2.6rem, 7vw, 5rem);
  line-height: .98;
  letter-spacing: -.025em;
  text-wrap: balance;
}
.esp-cabeza__bajada {
  max-width: 56ch;
  font-size: clamp(1.02rem, 1.6vw, 1.2rem);
  line-height: 1.55;
  color: #4A4A4A;
}

/* La rejilla: los filetes de 1 px los ponen los bordes de cada tarjeta. */
.esp {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-width: calc(var(--ancho) - 48px);
  margin: 0 auto;
  border-top: 1px solid #E4E0DC;
  border-left: 1px solid #E4E0DC;
}
.esp__item {
  display: grid;
  grid-template-columns: minmax(0, 1fr);   /* sin esto, a 820 px el dibujo empujaba 7 px fuera */
  grid-template-rows: auto 1fr;
  min-width: 0;
  border-right: 1px solid #E4E0DC;
  border-bottom: 1px solid #E4E0DC;
  background: var(--blanco);
}
.esp__dibujo {
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 10;
  padding: 8% 12%;
  border-bottom: 1px solid #E4E0DC;
  background: #F6F5F3;
  transition: background .3s ease;
}
.esp__item:hover .esp__dibujo { background: #F0EEEB; }
.esp__dibujo svg { width: 100%; height: auto; overflow: visible; }
.esp__dibujo .trazo {
  stroke: var(--tinta);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  /* Sin `vector-effect: non-scaling-stroke`: con él, el guion del trazado se
     mide en píxeles y no en `pathLength`, y los rectángulos salían a medias. */
}
.esp__dibujo .punto { fill: var(--rojo-3); }

/*
 * LOS ICONOS DEL MATERIAL DE LAURA — 2026-10-24. Felipe: «quiero que sea con
 * estos iconos», con su capacitación «Deja de publicar por publicar»: iconos
 * Lucide de línea fina en el rojo del manual dentro de un círculo con borde
 * rojo, y lo que se destaca en círculo relleno con el icono en blanco (la IA,
 * como en la portada de su documento). Sustituyen a los dibujos de líneas.
 * Se trazan al llegar igual que los dibujos (pathLength="1").
 */
.esp__icono { padding: 30px 28px 0; }
.esp__icono svg {
  display: block;
  width: 76px;
  height: 76px;
  overflow: visible;
  transition: transform .35s var(--suave);
}
.esp__item:hover .esp__icono svg { transform: translateY(-3px); }
.esp__icono .trazo {
  stroke: var(--rojo);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
}
.esp__icono .esp__aro { stroke-width: 2; }
.esp__icono g .trazo { stroke-width: 1.25; }
.esp__fondo { fill: var(--rojo); }
.esp__icono--lleno g .trazo { stroke: var(--blanco); }
.anim .esp__item .esp__fondo { opacity: 0; transform: scale(.6); transform-box: fill-box; transform-origin: center; }
.anim .esp__item.is-visible .esp__fondo { animation: aparece .6s var(--suave) .35s forwards; }

.esp__cuerpo {
  display: grid;
  align-content: start;
  gap: 14px;
  padding: 26px 28px 32px;
}
.esp__titulo {
  font-family: var(--f-sub);
  font-weight: 800;
  font-size: clamp(1.28rem, 2vw, 1.55rem);
  line-height: 1.18;
  letter-spacing: -.015em;
  text-wrap: balance;
}
.esp__texto {
  max-width: 40ch;
  font-size: 1rem;
  line-height: 1.55;
  color: #555555;
}

/*
 * EL DIBUJO SE TRAZA AL LLEGAR. Cada línea lleva pathLength="1", así que
 * «dasharray 1 / dashoffset 1» la esconde entera y llevar el offset a 0 la
 * dibuja, mida lo que mida. Solo con la clase `anim` (la pone el guion): sin
 * guion, las líneas están completas desde el principio.
 */
.esp__dibujo .trazo { stroke-dasharray: 1; stroke-dashoffset: 0; }
.anim .esp__item .trazo { stroke-dashoffset: 1; }
.anim .esp__item.is-visible .trazo { animation: traza 1.5s var(--suave) .2s forwards; }
.anim .esp__item .punto {
  opacity: 0;
  transform: scale(.3);
  transform-box: fill-box;
  transform-origin: center;
}
.anim .esp__item.is-visible .punto { animation: aparece .5s var(--suave) 1.2s forwards, late 3.2s ease-in-out 2s infinite; }
@keyframes traza { to { stroke-dashoffset: 0; } }
@keyframes aparece { to { opacity: 1; transform: none; } }
@keyframes late { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }

/* Las tarjetas entran una detrás de otra dentro de cada fila. */
.anim .esp__item:nth-child(3n + 2) { transition-delay: .08s; }
.anim .esp__item:nth-child(3n + 3) { transition-delay: .16s; }

.esp-cierre {
  display: grid;
  justify-items: center;
  gap: 14px;
  padding: clamp(64px, 9vw, 110px) 24px;
  text-align: center;
}
.esp-cierre__titulo {
  font-family: var(--f-titulo);
  font-weight: 400;
  font-size: clamp(2rem, 5vw, 3.4rem);
  line-height: 1;
  letter-spacing: -.02em;
}
.esp-cierre__texto { max-width: 40ch; font-size: 1.05rem; line-height: 1.5; color: #4A4A4A; }
.esp-cierre__botones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 14px 22px;
  margin-top: 10px;
}
.esp-cierre__enlace {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  font-family: var(--f-sub);
  font-weight: 700;
  color: var(--tinta);
  border-bottom: 1px solid transparent;
  transition: color .2s ease, border-color .2s ease;
}
.esp-cierre__enlace:hover { color: var(--rojo); border-bottom-color: currentColor; }

.esp-pie {
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 30px 22px 40px;
  border-top: 1px solid #ECE8E5;
  color: #757575;
  text-align: center;
}
.esp-pie .firma { color: var(--tinta); }
.esp-pie .firma__apellido { color: var(--blanco); }

.esp-barra a:focus-visible,
.esp-cierre a:focus-visible,
.esp-pie a:focus-visible { outline: 2px solid var(--rojo); outline-offset: 3px; }

@media (max-width: 1024px) {
  .esp { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .anim .esp__item:nth-child(n) { transition-delay: 0s; }
  .anim .esp__item:nth-child(2n) { transition-delay: .08s; }
  /* Nueve en dos columnas: la última, sola, ocupa las dos. */
  .esp__item:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .esp__item:last-child:nth-child(odd) .esp__dibujo { aspect-ratio: 32 / 10; padding: 4% 30%; }
}
@media (max-width: 640px) {
  .esp-barra { padding: 10px 16px; }
  .esp-barra__volver span { font-size: .95rem; }
  .esp-barra__nav { gap: 14px; }
  .esp-barra__nav > a:not(.esp-barra__cta) { display: none; }
  .esp-cabeza { padding-left: 16px; padding-right: 16px; }
  .esp { grid-template-columns: minmax(0, 1fr); max-width: none; margin: 0 16px; }
  .anim .esp__item:nth-child(n) { transition-delay: 0s; }
  .esp__item:last-child:nth-child(odd) .esp__dibujo { aspect-ratio: 16 / 10; padding: 8% 12%; }
  .esp__cuerpo { padding: 22px 20px 26px; }
}

/* =====================================================================
   5. MENOS MOVIMIENTO
   Quien lo pide en su sistema ve la página quieta y completa: nada de
   entradas, giros ni brillos. El contenido no cambia.
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .aurora__mancha, .retrato__aro,
  .retrato::before, .retrato::after, .retrato__aro::before { animation: none; }
  .anim [data-anim], .anim .bio__cabeza, .anim .compartir, .anim .bio__pie,
  .anim .bio__enlaces li {
    opacity: 1;
    transform: none;
    animation: none !important;
    transition: none;
  }
  .anim .esp__item .trazo { stroke-dashoffset: 0; animation: none !important; }
  .anim .esp__item .punto { opacity: 1; transform: none; animation: none !important; }
  .anim .esp__item .esp__fondo { opacity: 1; transform: none; animation: none !important; }
  .enlace, .boton, .marcas img, .marcas li, .clip__marco, .clip__play svg, .filtro, .esp__dibujo { transition: none; }
  .enlace::after { display: none; }
  .aviso { animation: none; }
}

/* --------------------------------------------------------------------
   ANTES / DESPUÉS (Cangel Zone): dos capturas del mismo perfil de TikTok,
   la del arranque y la de tres meses después, con el salto en medio.
   -------------------------------------------------------------------- */
.avance {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 16px;
  align-items: center;
  margin-top: 18px;
  padding: clamp(16px, 2.5vw, 24px);
  border: 1px solid #ECE8E5;
  background: #F6F5F3;
}
.avance__paso { margin: 0; display: grid; gap: 10px; justify-items: center; text-align: center; }
.avance__paso picture {
  display: block; width: 100%; max-width: 220px; aspect-ratio: 9 / 16;
  border: 1px solid #E4E0DC; border-radius: 6px; overflow: hidden; background: var(--blanco);
}
.avance__paso img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.avance__paso figcaption { display: grid; gap: 2px; font-size: .88rem; color: var(--carbon); line-height: 1.3; }
.avance__paso b { font-family: var(--f-sub); font-size: 1.2rem; color: var(--negro); }
.avance__rotulo { font-family: var(--f-sub); font-weight: 700; font-size: .66rem; letter-spacing: .16em; text-transform: uppercase; color: #5C5C5C; }
.avance__rotulo--despues { color: var(--rojo-3); }
.avance__salto { display: grid; justify-items: center; gap: 6px; color: var(--negro); }
.avance__salto span { padding: 6px 10px; border: 1px solid #D9D5D1; background: var(--blanco); font-family: var(--f-sub); font-weight: 700; font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; }
.avance__salto i { font-style: normal; font-size: 2rem; line-height: 1; color: var(--rojo-3); }
.avance__nota { margin: 12px 0 0; font-size: .92rem; color: var(--carbon); }
.avance__nota b { color: var(--negro); }
@media (max-width: 560px) {
  /* En el teléfono, en columna: antes, el salto (flecha hacia abajo), después. */
  .avance { grid-template-columns: 1fr; gap: 14px; padding: 16px; justify-items: center; }
  .avance__salto { grid-auto-flow: column; align-items: center; gap: 10px; }
  .avance__salto i { transform: rotate(90deg); font-size: 1.5rem; }
  .avance__paso picture { max-width: 200px; }
}

/* =====================================================================
   6. SERVICIOS REDONDOS Y MENOS CUADRÍCULA (2026-10-25)
   Laura (por Felipe): «esos cuadrados se ven horribles, se ve toda
   cuadriculada la página; que los servicios se vean como botones más
   redondos u ovalados, más modernos, iconos flotantes tipo 3D».
   Iconos: Microsoft Fluent Emoji 3D (MIT), assets/img/iconos-3d/.
   ===================================================================== */

/* Fuera los filetes entre tramos: la página ya no se lee como una rejilla.
   Los separa el cambio de fondo (blanco / papel tibio). */
.una .tramo { border-top: 0; }

/* ---------- las tarjetas ---------- */
.servicios {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 64px 22px;
  margin: clamp(64px, 8vw, 92px) 0 0;
  padding: 0;
  list-style: none;
}
.servicio {
  position: relative;
  display: grid;
  align-content: start;
  gap: 8px;
  min-width: 0;
  padding: 60px 28px 30px;
  border: 1px solid #F1E7E5;
  border-radius: 32px;
  background: var(--blanco);
  box-shadow: 0 22px 44px -26px rgba(136, 28, 20, .32), 0 2px 8px rgba(20, 20, 20, .04);
  transition: transform .4s var(--suave), box-shadow .4s var(--suave), border-color .4s var(--suave);
}
.servicio:hover {
  transform: translateY(-6px);
  border-color: #EBD3CF;
  box-shadow: 0 30px 56px -26px rgba(136, 28, 20, .42), 0 4px 12px rgba(20, 20, 20, .05);
}
.servicio__nombre {
  font-family: var(--f-sub);
  font-weight: 700;
  font-size: .72rem;
  letter-spacing: .14em;
  line-height: 1.35;
  text-transform: uppercase;
  color: var(--rojo-3);
}
.servicio__gana {
  font-family: var(--f-titulo);
  font-weight: 400;
  font-size: clamp(1.32rem, 1.9vw, 1.62rem);
  line-height: 1.1;
  letter-spacing: -.012em;
  color: var(--tinta);
  text-wrap: balance;
}
.servicio__texto { max-width: 36ch; margin-top: 4px; font-size: 1rem; line-height: 1.55; color: #555555; }

/* El icono flota por encima del borde de la tarjeta, con su sombra en el
   «suelo». Se mueve con `translate` (barato: solo composición). */
.servicio__icono {
  position: absolute;
  top: -44px;
  left: 24px;
  width: 92px;
  height: 92px;
  animation: flota 5.2s ease-in-out infinite;
}
.servicio__icono img { display: block; width: 100%; height: 100%; filter: drop-shadow(0 16px 14px rgba(136, 28, 20, .24)); }
.servicio:nth-child(2) .servicio__icono { animation-delay: -.9s; }
.servicio:nth-child(3) .servicio__icono { animation-delay: -1.8s; }
.servicio:nth-child(4) .servicio__icono { animation-delay: -2.6s; }
.servicio:nth-child(5) .servicio__icono { animation-delay: -3.4s; }
.servicio:nth-child(6) .servicio__icono { animation-delay: -4.2s; }
@keyframes flota { 0%, 100% { translate: 0 0; } 50% { translate: 0 -9px; } }
.servicio:hover .servicio__icono img { filter: drop-shadow(0 22px 16px rgba(136, 28, 20, .3)); }

/* ---------- la de IA: aparte, como un botón ovalado ---------- */
.servicio--ia {
  grid-template-columns: minmax(0, 1fr);
  margin-top: 64px;
  padding: 34px clamp(150px, 16vw, 210px) 34px clamp(150px, 15vw, 196px);
  border: 0;
  border-radius: 999px;
  background: radial-gradient(120% 160% at 0% 0%, #C23A2C 0%, #881C14 52%, #5E120D 100%);
  color: var(--blanco);
  box-shadow: 0 30px 60px -28px rgba(136, 28, 20, .6);
}
.servicio--ia:hover { border-color: transparent; box-shadow: 0 36px 70px -28px rgba(136, 28, 20, .7); }
.servicio--ia .servicio__nombre { color: #FFD9D2; }
.servicio--ia .servicio__gana { color: var(--blanco); font-size: clamp(1.45rem, 2.4vw, 2rem); }
.servicio--ia .servicio__texto { max-width: 48ch; color: rgba(255, 255, 255, .86); }
.servicio--ia .servicio__icono { top: 50%; left: clamp(28px, 3.5vw, 52px); width: clamp(96px, 10vw, 128px); height: auto; margin-top: calc(clamp(96px, 10vw, 128px) / -2); }
.servicio--ia .servicio__icono img { height: auto; filter: drop-shadow(0 18px 18px rgba(20, 0, 0, .45)); }
.servicio__chispa {
  position: absolute;
  top: 50%;
  right: clamp(36px, 5vw, 70px);
  width: clamp(64px, 7vw, 92px);
  margin-top: calc(clamp(64px, 7vw, 92px) / -2);
  animation: flota 4.4s ease-in-out -1.2s infinite;
}
.servicio__chispa img { display: block; width: 100%; height: auto; filter: drop-shadow(0 12px 12px rgba(20, 0, 0, .35)); }

/* ---------- menos cuadrícula en lo demás ---------- */
/* Los mensajes son de WhatsApp: se ven como burbujas, no como casillas. */
.una .dicen { gap: 18px; border: 0; }
.una .dice {
  padding: 26px 24px 20px 26px;
  border: 0;
  border-radius: 26px 26px 26px 8px;
  background: #F7F1EF;
}
.una .dice::before { content: none; }
.una .dice footer { color: #8A6E69; }
.una .clip__marco { border-radius: 18px; }
.una .caso__marco { border-radius: 14px; }
.una .obra__marco { border-radius: 22px; }
.una .caso { border-bottom-color: #F0EBE8; }

@media (max-width: 1024px) {
  .servicios { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .servicio--ia { padding: 82px 26px 30px; border-radius: 34px; }
  .servicio--ia .servicio__icono { top: -46px; left: 22px; width: 96px; margin-top: 0; }
  .servicio__chispa { top: 20px; right: 22px; width: 52px; margin-top: 0; }
}
/* Teléfono: de dos en dos, como pidió Felipe para las especialidades. */
@media (max-width: 640px) {
  .servicios { gap: 50px 12px; margin-top: 62px; }
  .servicio { padding: 44px 14px 18px; border-radius: 24px; gap: 6px; }
  .servicio__icono { top: -32px; left: 12px; width: 64px; height: 64px; }
  .servicio__nombre { font-size: .6rem; letter-spacing: .1em; }
  .servicio__gana { font-size: 1.04rem; line-height: 1.15; }
  .servicio__texto { font-size: .84rem; line-height: 1.45; }
  /* Mismo peso que «.servicio» de arriba no basta: este bloque va después y le quitaba el aire al de IA. */
  .servicio.servicio--ia { margin-top: 62px; padding: 80px 22px 26px; border-radius: 30px; }
  .servicio--ia .servicio__icono { top: -42px; left: 18px; width: 92px; }
  .servicio--ia .servicio__chispa { top: 22px; right: 20px; width: 46px; }
  .servicio--ia .servicio__gana { font-size: 1.3rem; }
  .servicio--ia .servicio__texto { font-size: .92rem; }
}
@media (prefers-reduced-motion: reduce) {
  .servicio__icono, .servicio__chispa { animation: none; }
  .servicio, .servicio:hover { transition: none; transform: none; }
}

/* «Hablemos de tu negocio» (2026-10-26) es más largo que «Trabaja conmigo»: en el teléfono el
   botón de la barra se partía en dos líneas. Siempre en una línea; en el teléfono sin flecha y
   un poco más pequeño; en pantallas muy angostas (≤ 350 px) queda «Hablemos». */
.esp-barra__cta { white-space: nowrap; }
@media (max-width: 640px) {
  .esp-barra__cta { padding: 0 14px; font-size: .8rem; }
  .esp-barra__flecha { display: none; }
}
@media (max-width: 350px) {
  .esp-barra__cta-resto { display: none; }
}

/* =====================================================================
   /videos — 2026-10-26. «Ver más piezas» de la portada lleva aquí: las 30
   piezas de su portafolio, agrupadas por tipo como en su Canva. Usa las
   mismas tarjetas (.clip) que la portada; esto es solo lo propio.
   ===================================================================== */
.galeria__volver { margin-bottom: 18px; }
.galeria__volver a {
  font-family: var(--f-sub);
  font-weight: 700;
  font-size: .9rem;
  color: #5C5C5C;
  transition: color .2s ease;
}
.galeria__volver a:hover { color: var(--rojo); }
.galeria__volver a:focus-visible { outline: 2px solid var(--rojo); outline-offset: 3px; }
.galeria__atajos { display: flex; flex-wrap: wrap; gap: 8px; margin-top: clamp(22px, 3vw, 30px); }
.galeria__atajos .filtro { display: inline-flex; align-items: center; gap: 8px; }
.galeria__atajos .filtro span,
.galeria__grupo .tramo__sub span { color: var(--rojo); }
.galeria__grupo { scroll-margin-top: 88px; }
.galeria__grupo .tramo__sub { display: flex; align-items: baseline; gap: 10px; }
.una .galeria .tira { margin-top: 0; }

/* =====================================================================
   CONTENIDO CON IA (2026-10-27)
   Laura: «quiero que los pongas todos como con un marco de phone». Un
   iPhone dibujado con CSS (.cel): bisel negro, canto plateado, botón
   lateral e isla. Todo se mide en cqw (el ancho del propio teléfono), así
   el marco es el mismo a 160 px que a 260 px. Pantalla 9:19,5, la de un
   iPhone: los videos ya van recortados a esa proporción y las capturas
   de métricas son de iPhone, así que nada se deforma.
   El tramo es NEGRO —el único oscuro de verdad de la página—, entre dos
   claros, y con un brillo rojo de la marca arriba: es un degradado fijo,
   no se anima (lección del 6 fps de septiembre).
   ===================================================================== */
.tramo--ia {
  border-top: 0;
  background:
    radial-gradient(70% 50% at 50% 0%, rgba(136, 28, 20, .34), transparent 72%),
    var(--noche);
  color: var(--blanco);
}
.tramo--ia .tramo__titulo { text-wrap: balance; }   /* en el teléfono dejaba «IA.» sola */
.tramo--ia .tramo__bajada { color: #BDBDBD; }
.tramo--ia .tramo__sub { color: #A3A3A3; }
.tramo--ia .clip__pie b { color: var(--blanco); }
.tramo--ia .clip__pie span { color: #A3A3A3; }

.celulares {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(18px, 3vw, 36px);
  margin-top: clamp(32px, 5vw, 52px);
}
.cel-pieza { margin: 0; min-width: 0; container-type: inline-size; }
.cel-pieza .clip__pie { margin-top: 16px; }

.cel {
  position: relative;
  padding: 3.4cqw;
  border-radius: 15cqw;
  background: #000;
  box-shadow:
    0 0 0 1.5px #A9A9A9,
    0 0 0 3px #3A3A3A,
    0 28px 50px -14px rgba(0, 0, 0, .75);
}
/* La isla. */
.cel::before {
  content: '';
  position: absolute;
  z-index: 2;
  top: 6.2cqw;
  left: 50%;
  width: 29cqw;
  height: 8.4cqw;
  border-radius: 999px;
  background: #000;
  transform: translateX(-50%);
}
/* El botón de encendido, en el canto derecho. */
.cel::after {
  content: '';
  position: absolute;
  top: 27%;
  right: -4px;
  width: 2px;
  height: 13%;
  border-radius: 0 2px 2px 0;
  background: #8E8E8E;
}
.cel__pantalla {
  position: relative;
  aspect-ratio: 9 / 19.5;
  overflow: hidden;
  border-radius: 11.6cqw;
  background: #111;
}
.cel__pantalla video,
.cel__pantalla picture,
.cel__pantalla img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cel__pantalla img { object-position: top; }

.cel__sonido {
  position: absolute;
  z-index: 3;
  right: 5cqw;
  bottom: 5cqw;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, .58);
  color: var(--blanco);
  cursor: pointer;
  transition: background .2s ease;
}
.cel__sonido[hidden] { display: none; }
.cel__sonido:hover { background: rgba(0, 0, 0, .8); }
.cel__sonido:focus-visible { outline: 2px solid var(--blanco); outline-offset: 2px; }
.cel__sonido svg { width: 20px; height: 20px; }
.cel__sonido[aria-pressed="false"] .cel__sonido-si,
.cel__sonido[aria-pressed="true"] .cel__sonido-no { display: none; }

/* Las cifras: la captura en su teléfono y, al lado, los números en grande. */
.ia-cifras {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(28px, 4vw, 56px);
}
.ia-cifra {
  display: grid;
  grid-template-columns: minmax(0, 200px) minmax(0, 1fr);
  gap: clamp(18px, 3vw, 32px);
  align-items: center;
}
.ia-cifra__red {
  font-family: var(--f-sub);
  font-weight: 700;
  font-size: .7rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #EF7C70;   /* el rojo de la marca, aclarado para leerse sobre negro */
}
.ia-cifra__grande {
  margin-top: 10px;
  font-family: var(--f-titulo);
  font-size: clamp(2.6rem, 5.2vw, 3.8rem);
  line-height: .95;
  letter-spacing: -.02em;
}
.ia-cifra__grande span {
  display: block;
  margin-top: 10px;
  font-family: var(--f-sub);
  font-weight: 700;
  font-size: .78rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #BDBDBD;
}
.ia-cifra__lista {
  display: grid;
  gap: 8px;
  margin: 20px 0 0;
  padding: 18px 0 0;
  border-top: 1px solid #2B2B2B;
  list-style: none;
  font-size: .95rem;
  color: #CFCFCF;
}
.ia-cifra__lista b { font-family: var(--f-sub); color: var(--blanco); }

@media (max-width: 1024px) {
  .ia-cifras { grid-template-columns: minmax(0, 1fr); max-width: 620px; }
}
@media (max-width: 860px) {
  .celulares { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 580px; }
}
@media (max-width: 640px) {
  .celulares { gap: 26px 16px; }
  .ia-cifra { grid-template-columns: minmax(0, 44%) minmax(0, 1fr); gap: 16px; }
  .ia-cifra__lista { gap: 6px; margin-top: 14px; padding-top: 12px; font-size: .88rem; }
}

/* =====================================================================
   LO QUE ME ESCRIBEN: PANTALLAZOS DE WHATSAPP (2026-10-27, segunda vuelta)
   Las ventanas de la primera vuelta (barra de «Cliente», garabatos, barra
   de escribir) «se ven re falsas», dijo Laura. Ahora cada chat es un
   RECORTE de pantallazo, sin encabezado: solo los mensajes, con el
   WhatsApp del iPhone del pantallazo de Alex que ella mandó. Los colores
   salen de ese pantallazo: fondo #F4F1EA liso, globo blanco, el mío
   #DFFBD5. Globos muy redondos, la hora gris dentro, cola en el último.
   Sin animación propia: un pantallazo no se escribe solo.
   ===================================================================== */
.pantallazos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 22px;
  margin-top: clamp(32px, 5vw, 52px);
}
/* `position: relative` para que lo oculto (absoluto) quede DENTRO del
   recorte: sin esto, en el carrusel del teléfono la página corría de lado. */
.pantallazo {
  position: relative;
  flex: 0 1 360px;
  min-width: 0;
  margin: 0;
  padding: 16px 14px 18px 16px;
  border: 1px solid #E9E4DB;
  border-radius: 18px;
  background: #F4F1EA;
  box-shadow: 0 22px 40px -30px rgba(40, 12, 0, .45);
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Helvetica Neue', 'Segoe UI', Roboto, Arial, sans-serif;
  font-size: .98rem;
  line-height: 1.3;
  color: #0B0B0B;
  -webkit-font-smoothing: antialiased;
}
.wa-chat {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  min-width: 0;
}

.wa-globo {
  position: relative;
  max-width: 88%;
  margin: 0;
  padding: 7px 11px 8px 12px;
  border-radius: 18px;
  background: #FFFFFF;
  box-shadow: 0 0 0 .5px rgba(0, 0, 0, .07), 0 1px .5px rgba(0, 0, 0, .04);
  overflow-wrap: anywhere;
}
/* La hora va al final de la última línea, o debajo si no cabe. */
.wa-hora {
  float: right;
  position: relative;
  top: 6px;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-left: 12px;
  font-size: .7em;
  line-height: 1.5;
  color: #6B6B6B;
  white-space: nowrap;
}
/* La cola del último globo, abajo a la izquierda (el mío, a la derecha). */
.wa-globo--cola { border-bottom-left-radius: 5px; }
.wa-globo--cola::before {
  content: "";
  position: absolute;
  left: -6px;
  bottom: 0;
  width: 12px;
  height: 15px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 15'%3E%3Cpath d='M6 0v8.5c0 2.8-2 5.3-5.5 6.5H12V0z' fill='%23fff'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
}

/* La fecha, en su pastilla. */
.wa-fecha {
  align-self: center;
  margin: 0 0 10px;
  padding: 3px 11px 4px;
  border: 1px solid #E6E2DA;
  border-radius: 10px;
  background: #FDFDFD;
  font-size: .8em;
  font-weight: 600;
  color: #111111;
}

/* Lo que mandé yo: verde, a la derecha, con el botón de reenviar al lado. */
.wa-mia {
  align-self: flex-end;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  max-width: 94%;
  margin-bottom: 10px;
}
.wa-globo--mio { max-width: none; min-width: 0; background: #DFFBD5; box-shadow: none; }
.wa-globo--mio .wa-hora { color: #56694F; }
.wa-globo--mio.wa-globo--cola { border-bottom-left-radius: 18px; border-bottom-right-radius: 5px; }
.wa-globo--mio.wa-globo--cola::before { left: auto; right: -6px; transform: scaleX(-1); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 15'%3E%3Cpath d='M6 0v8.5c0 2.8-2 5.3-5.5 6.5H12V0z' fill='%23DFFBD5'/%3E%3C/svg%3E"); }
.wa-vistos { width: 16px; height: 10px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.wa-reenviar {
  flex: none;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  margin-top: 22px;
  border-radius: 50%;
  background: rgba(0, 0, 0, .2);
  color: #FFFFFF;
}
.wa-reenviar svg { width: 16px; height: 16px; fill: currentColor; }
/* El video, mandado como archivo. */
.wa-archivo {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: -2px -6px 7px -7px;
  padding: 10px 16px 10px 10px;
  border-radius: 13px;
  background: #D3F0C8;
}
.wa-archivo__icono { flex: none; width: 25px; height: 32px; }
.wa-archivo__icono text { font: 700 8.5px -apple-system, 'Segoe UI', Arial, sans-serif; fill: #FFFFFF; }
.wa-archivo__datos { display: grid; min-width: 0; line-height: 1.25; }
.wa-archivo__nombre { font-size: 1.06em; }
.wa-archivo__peso { font-size: .78em; color: #56694F; }

/* Mi mensaje al que responde el cliente. */
.wa-cita {
  display: block;
  margin: -2px -6px 6px -7px;
  padding: 7px 10px 8px 11px;
  border-left: 4px solid #1A86C7;
  border-radius: 9px;
  background: #F2F2F3;
  font-size: .86em;
  line-height: 1.35;
  color: #5B5F63;
}
.wa-cita b { display: block; font-weight: 600; color: #1A86C7; }

/* El corazón que le puse, colgando del globo. */
.wa-globo--reaccion { margin-bottom: 18px; }
.wa-reaccion {
  position: absolute;
  left: 10px;
  bottom: -20px;
  display: grid;
  place-items: center;
  height: 25px;
  padding: 0 7px;
  border: 1px solid #EAE7E2;
  border-radius: 13px;
  background: #FFFFFF;
  font-size: .78em;
  line-height: 1;
}

/* En un grupo: la foto de quien escribe, al lado del último globo. */
.wa-grupo {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: end;
  column-gap: 8px;
}
.wa-grupo__foto {
  width: 28px;
  height: 28px;
  margin-bottom: var(--abajo, 0px);
  border-radius: 50%;
  object-fit: cover;
}

/* Teléfono: uno detrás de otro, deslizando; el siguiente asoma. */
@media (max-width: 640px) {
  .pantallazos {
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: 14px;
    margin-left: -16px;
    margin-right: -16px;
    padding: 0 16px 10px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 16px;
    scrollbar-width: none;
  }
  .pantallazos::-webkit-scrollbar { display: none; }
  .pantallazo { flex: 0 0 84%; scroll-snap-align: start; }
}