/* =============================================================================
   Cuba Argentina Advertizing — hoja de estilos única.

   El lenguaje visual sale de la pieza de marca del cliente: rojo bandera, azul
   marino, celeste argentino y amarillo de llamada, con display condensado en
   cursiva. Lo que cambia respecto a su pieza es la JERARQUÍA: su cartel mete
   cuarenta elementos en un cuadrado; aquí hay un mensaje por pantalla.

   La idea rectora: el fondo es la noche de la avenida y la pantalla LED es la
   única fuente de luz. Por eso el oscuro domina y las fotos del camión brillan.
   ========================================================================== */

:root {
  /* Paleta muestreada del logotipo original (post 2026-07-05) */
  --rojo:        #db0606;
  --rojo-hondo:  #a50707;
  --marino:      #050e2e;
  --marino-2:    #0b1740;
  --azul:        #0f43a9;
  --celeste:     #4494e7;
  --amarillo:    #f0c210;
  --wa:          #25d366;

  --papel:       #f4f6fb;
  --papel-2:     #ffffff;
  --tinta:       #0d1428;
  --tinta-suave: #4a5573;
  --linea:       #dde2ee;

  --claro:       #ffffff;
  --claro-suave: #b9c3e0;

  /* Tipografía */
  --display: 'Archivo', 'Arial Narrow', system-ui, sans-serif;
  --texto:   'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Ritmo */
  --ancho:  1200px;
  --gutter: clamp(1.15rem, 4vw, 2.5rem);
  --radio:  14px;
  --radio-s: 9px;

  --sombra:    0 18px 45px -22px rgb(5 14 46 / .55);
  --sombra-alta: 0 30px 70px -28px rgb(5 14 46 / .7);
}

/* --- reset corto ---------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}
body {
  margin: 0;
  background: var(--marino);
  color: var(--claro);
  font-family: var(--texto);
  font-size: 1rem;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3 { margin: 0; }
p  { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button, input { font: inherit; color: inherit; }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--amarillo); color: var(--marino);
  padding: .7rem 1.1rem; font-weight: 700; border-radius: 0 0 var(--radio-s) 0;
}
.skip:focus { left: 0; }

:where(a, button, summary, input):focus-visible {
  outline: 3px solid var(--amarillo);
  outline-offset: 3px;
  border-radius: 4px;
}

/* --- utilidades de tipografía --------------------------------------------
   El display de la marca es condensado, en cursiva y en versalitas altas.
   Se reproduce con los ejes variables de Archivo en vez de con una imagen. */
.display {
  font-family: var(--display);
  font-variation-settings: 'wdth' 84;
  font-style: italic;
  font-weight: 800;
  text-transform: uppercase;
  line-height: .93;
  letter-spacing: -.015em;
}

/* =============================================================== BARRA ==== */
.bar {
  position: sticky; top: 0; z-index: 60;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .55rem var(--gutter);
  background: rgb(5 14 46 / .88);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgb(68 148 231 / .22);
}
/* `min-width: 0` es lo que impide que la marca empuje a los botones fuera de
   la barra: sin el, un flex-item no baja de su contenido y el bloque de la
   derecha acaba montandose encima del nombre. */
.bar__brand { display: flex; align-items: center; gap: .6rem; text-decoration: none; min-height: 44px; min-width: 0; }
.bar__emblema {
  width: auto; height: 40px; flex: none;
  border-radius: 7px;
  /* El emblema viene recortado de la pieza original, que tiene fondo blanco:
     se le da un marco propio en vez de fingir una transparencia que no existe. */
  box-shadow: 0 0 0 1.5px rgb(255 255 255 / .5);
}
.bar__nombre {
  /* Si algun dia no cabe, se recorta; nunca se monta encima de los botones. */
  overflow: hidden;
  display: flex; flex-direction: column; line-height: 1;
  font-family: var(--display); font-variation-settings: 'wdth' 84;
  font-style: italic; text-transform: uppercase;
}
/* El rojo de marca sobre el marino da 3,64:1. Se deja tal cual a proposito:
   la WCAG excluye del requisito de contraste el texto que forma parte de un
   logotipo, y este lo es. El resto de textos rojos si se corrigieron. */
.bar__nombre1 { font-weight: 800; font-size: 1.02rem; color: var(--rojo); letter-spacing: -.005em; }
.bar__nombre1 b { color: var(--claro); font-weight: 800; }
.bar__nombre2 {
  font-weight: 600; font-size: .58rem; letter-spacing: .34em;
  color: var(--claro-suave); margin-top: .18rem;
}
/* Desde que la barra lleva cuatro controles —marca, idioma, telefono y
   WhatsApp— el nombre compuesto con tipografia ya no cabe por debajo de 620 px
   y se le montaba encima el selector de idioma. Ahi manda el emblema solo, que
   es identidad suficiente cuando el nombre entero esta a un dedo de scroll. */
@media (max-width: 699px) { .bar__nombre { display: none; } }
.bar__nav { display: none; }
/* 1024 px y no 900: con el selector de idioma, el telefono completo y el boton
   de WhatsApp a la derecha, las tres anclas del centro no caben hasta ahi y se
   partian en dos lineas comiendose el nombre de la marca. Son anclas de la
   MISMA pagina: quien no las ve, sigue bajando. */
@media (min-width: 1024px) {
  .bar__nav { display: flex; gap: 1.9rem; margin-inline: auto; }
  .bar__nav a { white-space: nowrap; }
  .bar__nav a {
    position: relative;
    font-size: .88rem; font-weight: 500;
    color: var(--claro-suave); text-decoration: none;
    padding: .3rem 0;
  }
  .bar__nav a::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: 0;
    height: 2px; background: var(--amarillo);
    transform: scaleX(0); transform-origin: left;
    transition: transform .18s ease;
  }
  .bar__nav a:hover { color: var(--claro); }
  .bar__nav a:hover::after { transform: scaleX(1); }
}

.bar__end { display: flex; align-items: center; gap: .5rem; flex: none; }

/* Selector de idioma. Es un enlace de dos letras, no una bandera: media Miami
   habla español sin ser de un pais con esa bandera, y "ES" no le atribuye
   nacionalidad a nadie. */
.bar__idioma {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; min-height: 44px; padding: .5rem .6rem;
  border-radius: 100px;
  border: 1px solid rgb(185 195 224 / .28);
  font-family: var(--texto);
  font-size: .78rem; font-weight: 700; letter-spacing: .06em;
  color: var(--claro-suave); text-decoration: none;
  transition: color .16s ease, border-color .16s ease, background .16s ease;
}
.bar__idioma:hover {
  color: #fff; border-color: var(--celeste); background: rgb(68 148 231 / .14);
}

.bar__tel, .bar__wa {
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  text-decoration: none; font-weight: 600; font-size: .88rem;
  /* .68rem de relleno vertical pone los dos botones en 44 px de alto, el minimo
     para el pulgar. En movil el de telefono se queda en icono y necesita ademas
     44 px de ancho: sin min-width se quedaba en 39. */
  padding: .68rem .95rem; border-radius: 100px;
  min-height: 44px; min-width: 44px;
  white-space: nowrap;
}
.bar__tel { color: var(--claro); border: 1px solid rgb(185 195 224 / .32); }
.bar__tel:hover { border-color: var(--celeste); color: #fff; }
.bar__wa { background: var(--wa); color: #04310f; }
.bar__wa:hover { filter: brightness(1.08); }

@media (max-width: 699px) {
  .bar__tel span { display: none; }
  .bar__tel { padding: .5rem .62rem; }
  /* El selector solo necesita dos letras; 44 px de ancho es el minimo tactil. */
  .bar__idioma { padding: .5rem .4rem; }
  .bar__end { gap: .4rem; }
}

/* ================================================================ HERO ==== */
/* Una sola idea manda en esta pantalla: la del camión es la única fuente de luz
   de la página. El aura que rodea al vídeo NO es un degradado pintado a mano —
   es el propio vídeo reducido a 32×18 px y ampliado desenfocado por detrás. Si
   el anuncio de la pantalla pasa del naranja de un electricista al verde de una
   empresa de cercas, la página cambia de color con él. Es la única decoración
   de todo el sitio y se la gana: es el producto funcionando.

   Dos columnas en escritorio, para que el titular no se apoye nunca sobre el
   anuncio, que ya es una composición densa. En móvil se apilan y el vídeo va
   primero: el camión es el producto. */
.hero {
  position: relative;
  background:
    radial-gradient(112% 82% at 86% 0%, rgb(15 67 169 / .2) 0%, transparent 62%),
    radial-gradient(80% 60% at 0% 100%, rgb(219 6 6 / .12) 0%, transparent 60%),
    var(--marino);
  overflow: hidden;
}
.hero__envoltura {
  width: min(100%, var(--ancho)); margin: 0 auto;
  padding: clamp(2rem, 5vw, 3.6rem) var(--gutter) clamp(2.6rem, 6vw, 4.2rem);
  display: grid; gap: clamp(1.8rem, 4vw, 3.2rem);
  align-items: center;
}

/* --- el marco no recorta: el aura tiene que poder salirse ----------------- */
.hero__marco { position: relative; isolation: isolate; }

.hero__aura {
  position: absolute; inset: -14% -11%;
  width: 122%; height: 128%;
  z-index: 0;
  border-radius: 50% / 44%;
  filter: blur(clamp(30px, 5vw, 62px)) saturate(2.1) brightness(1.06);
  /* `screen` es lo que convierte el lienzo en luz y no en una mancha: lo
     oscuro del fotograma —la carrocería negra, el asfalto— no aporta nada, y
     solo lo que brilla de verdad, que es la pantalla, ilumina la página. */
  mix-blend-mode: screen;
  opacity: .72;
  pointer-events: none;
  /* Sin el lienzo pintado no hay nada que ver: hasta que el vídeo da su primer
     fotograma, el aura es transparente y no deja un rectángulo gris. */
  background: transparent;
  transition: opacity .7s ease;
}
/* Mientras el vídeo no haya dado un fotograma, nada. */
.hero__marco:not([data-luz]) .hero__aura { opacity: 0; }

/* --- la pantalla ---------------------------------------------------------- */
.hero__pantalla {
  position: relative; z-index: 1; margin: 0;
  border-radius: var(--radio);
  overflow: hidden;
  background: #04091c;
  box-shadow:
    var(--sombra-alta),
    0 0 0 1px rgb(178 205 255 / .28),
    inset 0 1px 0 rgb(255 255 255 / .1);
}
.hero__video,
.hero__pantalla img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 16 / 9; object-fit: cover;
}
/* La foto de repuesto viene en 1400×812 y no en 16:9. */
.hero__pantalla picture img { aspect-ratio: 1400 / 812; }

/* Velo bajo el pie: el asfalto a pleno sol deja el texto ilegible si se
   confía solo en una sombra interior. */
.hero__pantalla::after {
  content: ''; position: absolute; inset: auto 0 0 0; height: 48%;
  pointer-events: none;
  background: linear-gradient(to top, rgb(3 8 24 / .94) 0%, rgb(3 8 24 / .58) 42%, transparent 100%);
}

.hero__pie {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: .15rem .7rem;
  padding: .8rem clamp(.85rem, 2.5vw, 1.15rem);
  font-size: .8rem; line-height: 1.35;
}
.hero__pie-txt   { font-weight: 600; color: #eef3ff; }
.hero__pie-lugar { color: #9fb0d8; font-size: .74rem; }

/* --- pausa ----------------------------------------------------------------
   Obligatoria, no decorativa: hay movimiento automático de más de cinco
   segundos y la WCAG 2.2.2 pide poder pararlo. */
.hero__conmutar {
  position: absolute; top: .7rem; right: .7rem; z-index: 3;
  display: grid; place-items: center;
  width: 38px; height: 38px; padding: 0;
  border: 1px solid rgb(255 255 255 / .3);
  border-radius: 50%;
  background: rgb(6 12 32 / .58);
  backdrop-filter: blur(8px);
  color: #fff; cursor: pointer;
  opacity: .55;
  transition: opacity .18s ease, background .18s ease, transform .18s ease;
}
.hero__pantalla:hover .hero__conmutar,
.hero__conmutar:focus-visible { opacity: 1; }
.hero__conmutar:hover { background: rgb(6 12 32 / .85); transform: scale(1.06); }
.hero__conmutar .hero__icono-play  { display: none; }
.hero__conmutar[aria-pressed="true"] .hero__icono-pausa { display: none; }
.hero__conmutar[aria-pressed="true"] .hero__icono-play  { display: block; }
/* Sin JS el botón no hace nada, así que no se enseña. */
html:not(.js) .hero__conmutar { display: none; }

/* --- columna de texto ----------------------------------------------------- */
.hero__sobre {
  display: inline-block;
  font-size: .74rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--amarillo);
  border: 1px solid rgb(240 194 16 / .45);
  border-radius: 100px; padding: .32rem .85rem;
  margin-bottom: 1.05rem;
}
.hero__h1 {
  font-family: var(--display);
  font-variation-settings: 'wdth' 82;
  font-style: italic; font-weight: 900;
  text-transform: uppercase;
  line-height: .86; letter-spacing: -.022em;
  font-size: clamp(2.9rem, 10vw, 5.4rem);
  margin-bottom: .4rem;
}
.hero__h1a { display: block; color: var(--claro); }
.hero__h1b {
  display: block; color: var(--rojo);
  /* El relieve del cartel original, hecho con sombra en vez de rasterizado */
  text-shadow: 3px 3px 0 var(--rojo-hondo), 0 14px 40px rgb(219 6 6 / .35);
}
.hero__lema {
  font-family: var(--display);
  font-variation-settings: 'wdth' 88;
  font-style: italic; font-weight: 700; text-transform: uppercase;
  font-size: clamp(1rem, 3.2vw, 1.35rem);
  color: var(--celeste);
  margin-bottom: .95rem;
}
.hero__texto {
  max-width: 46ch;
  font-size: clamp(1rem, 2.3vw, 1.1rem);
  color: var(--claro-suave);
  margin-bottom: 1.6rem;
}
.hero__ctas { display: flex; flex-wrap: wrap; gap: .7rem; margin-bottom: 1.7rem; }
/* En movil los dos botones ocupan el ancho: un CTA de 180 px al lado de uno de
   300 px se lee como "este es el bueno y este el de relleno". */
@media (max-width: 560px) {
  .hero__ctas { display: grid; grid-template-columns: 1fr; }
  .hero__ctas .btn { width: 100%; }
}
.hero__pruebas {
  display: flex; flex-wrap: wrap; gap: 1rem 2rem;
  padding-top: 1.15rem;
  border-top: 1px solid rgb(185 195 224 / .2);
  font-size: .85rem; color: var(--claro-suave);
}
.hero__pruebas li { max-width: 15ch; }
.hero__pruebas strong {
  display: block;
  font-family: var(--display); font-variation-settings: 'wdth' 88;
  font-style: italic; font-weight: 800;
  font-size: 1.5rem; color: var(--claro); line-height: 1.1;
}

@media (min-width: 900px) {
  .hero__envoltura {
    /* La columna del vídeo pesa más: es la prueba, y a 16:9 necesita ancho
       para no quedarse en una franja fina al lado de un titular de 86 px. */
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.14fr);
    min-height: min(74svh, 660px);
  }
  .hero__marco { order: 2; }
  .hero__caja  { order: 1; }
}
@media (max-width: 899px) {
  .hero__marco { order: 1; }
  .hero__caja  { order: 2; }
}
@media (max-width: 560px) {
  /* En flex las tres metricas caian 2 + 1 y dejaban un hueco. En rejilla de
     tres caben las tres en una linea con el numero un punto mas pequeño. */
  .hero__pruebas {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: .9rem .7rem;
    font-size: .78rem;
  }
  .hero__pruebas li { max-width: none; }
  .hero__pruebas strong { font-size: 1.22rem; }
  .hero__pie { font-size: .74rem; padding: .7rem .85rem; }
  .hero__pie-lugar { font-size: .7rem; }
}

/* Quien pide menos movimiento no ve el bucle: el vídeo se queda en el cartel
   —que ya cuenta lo mismo— y el aura, pintada una sola vez, se queda quieta. */
@media (prefers-reduced-motion: reduce) {
  .hero__aura { transition: none; }
}

/* ============================================================== BOTONES === */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  padding: .92rem 1.5rem;
  border: 0; border-radius: 100px;
  font-weight: 700; font-size: 1rem; text-decoration: none;
  cursor: pointer;
  transition: transform .16s ease, filter .16s ease, background .16s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn--wa { background: var(--wa); color: #04310f; box-shadow: 0 12px 30px -14px rgb(37 211 102 / .85); }
.btn--wa:hover { filter: brightness(1.08); }
.btn--rojo { background: var(--rojo); color: #fff; box-shadow: 0 12px 30px -14px rgb(219 6 6 / .8); }
.btn--rojo:hover { background: var(--rojo-hondo); }
.btn--fantasma {
  background: transparent; color: var(--claro);
  border: 1.5px solid rgb(185 195 224 / .45);
}
.btn--fantasma:hover { border-color: var(--claro); background: rgb(255 255 255 / .06); }
.btn--ancho { width: 100%; }

/* ========================================================== BENEFICIOS ==== */
.beneficios {
  background: linear-gradient(180deg, var(--marino) 0%, var(--marino-2) 100%);
  border-block: 1px solid rgb(68 148 231 / .18);
  padding: clamp(2.2rem, 5vw, 3.2rem) var(--gutter);
}
.beneficios__lista {
  width: min(100%, var(--ancho)); margin: 0 auto;
  display: grid; gap: clamp(1.4rem, 3vw, 2.2rem);
  grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
}
.ben__icono {
  display: block; width: 38px; height: 38px; margin-bottom: .8rem;
  background: var(--celeste);
  -webkit-mask: var(--m) center / contain no-repeat;
          mask: var(--m) center / contain no-repeat;
}
/* Los cuatro iconos son los mismos cuatro de la pieza del cliente. Van como
   máscaras SVG en línea: sin peticiones extra y heredan el color. */
.ben__icono[data-icono="ojo"]     { --m: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 5c-5 0-9.3 3.1-11 7c1.7 3.9 6 7 11 7s9.3-3.1 11-7c-1.7-3.9-6-7-11-7m0 11.5A4.5 4.5 0 1 1 16.5 12A4.5 4.5 0 0 1 12 16.5m0-7A2.5 2.5 0 1 0 14.5 12A2.5 2.5 0 0 0 12 9.5"/></svg>'); }
.ben__icono[data-icono="gente"]   { --m: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M16 11a3 3 0 1 0-3-3a3 3 0 0 0 3 3m-8 0a3 3 0 1 0-3-3a3 3 0 0 0 3 3m0 2c-2.3 0-7 1.2-7 3.5V19h9v-2.5c0-.9.4-1.9 1.1-2.7c-1-.5-2.3-.8-3.1-.8m8 0c-.4 0-.9 0-1.4.1c1 .8 1.4 1.8 1.4 2.9V19h7v-2.5c0-2.3-4.7-3.5-7-3.5"/></svg>'); }
.ben__icono[data-icono="pin"]     { --m: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2a7 7 0 0 0-7 7c0 5.2 7 13 7 13s7-7.8 7-13a7 7 0 0 0-7-7m0 9.5A2.5 2.5 0 1 1 14.5 9A2.5 2.5 0 0 1 12 11.5"/></svg>'); }
.ben__icono[data-icono="grafico"] { --m: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M3 20h18v2H3zm2-8h3v7H5zm5-5h3v12h-3zm5 3h3v9h-3zM4.5 8.5L11 4l3.5 2.5L20 2v3.6l-5.4 4.1L11 7.2l-5.7 3.9z"/></svg>'); }

.ben__h {
  font-family: var(--display); font-variation-settings: 'wdth' 88;
  font-style: italic; font-weight: 800; text-transform: uppercase;
  font-size: 1.18rem; letter-spacing: .005em;
  margin-bottom: .35rem;
}
.ben__p { font-size: .95rem; color: var(--claro-suave); }

/* ============================================================ SECCIONES === */
.seccion { padding: clamp(3.4rem, 8vw, 6rem) var(--gutter); }
.seccion--oscuro { background: var(--marino); }
.seccion--claro  { background: var(--papel); color: var(--tinta); }

.cab {
  width: min(100%, 720px); margin: 0 auto clamp(2.2rem, 5vw, 3.4rem);
  text-align: center;
}
.cab__sobre {
  font-size: .76rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--rojo); margin-bottom: .7rem;
}
.seccion--oscuro .cab__sobre,
.cierre .cab__sobre { color: var(--amarillo); }
.cab__h {
  font-family: var(--display); font-variation-settings: 'wdth' 85;
  font-style: italic; font-weight: 800; text-transform: uppercase;
  line-height: .98; letter-spacing: -.012em;
  font-size: clamp(1.85rem, 5.6vw, 3.1rem);
}
.cab__p {
  margin-top: .95rem;
  font-size: 1.02rem;
  color: var(--tinta-suave);
}
.seccion--oscuro .cab__p { color: var(--claro-suave); }

/* ============================================================ SERVICIOS === */
.servicios {
  width: min(100%, var(--ancho)); margin: 0 auto;
  display: grid; gap: clamp(1.4rem, 3vw, 2rem);
  grid-template-columns: repeat(auto-fit, minmax(310px, 1fr));
}
.serv {
  background: var(--papel-2);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  overflow: hidden;
  box-shadow: var(--sombra);
  display: flex; flex-direction: column;
}
.serv--destacado { border-color: rgb(219 6 6 / .35); }
.serv__foto { aspect-ratio: 1400 / 812; overflow: hidden; background: var(--marino); }
.serv__foto img { width: 100%; height: 100%; object-fit: cover; }
.serv__cuerpo { padding: clamp(1.3rem, 3vw, 1.9rem); display: flex; flex-direction: column; flex: 1; }
.serv__etiqueta {
  align-self: flex-start;
  font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  background: var(--marino); color: var(--amarillo);
  padding: .3rem .7rem; border-radius: 100px; margin-bottom: .8rem;
}
.serv--destacado .serv__etiqueta { background: var(--rojo); color: #fff; }
.serv__h {
  font-family: var(--display); font-variation-settings: 'wdth' 88;
  font-style: italic; font-weight: 800; text-transform: uppercase;
  font-size: clamp(1.3rem, 3.4vw, 1.72rem); line-height: 1;
  margin-bottom: .6rem;
}
.serv__p { color: var(--tinta-suave); margin-bottom: 1.1rem; }
.serv__puntos { margin-top: auto; display: grid; gap: .45rem; }
.serv__puntos li {
  position: relative; padding-left: 1.55rem;
  font-size: .93rem; font-weight: 500;
}
.serv__puntos li::before {
  content: ''; position: absolute; left: 0; top: .42em;
  width: 15px; height: 15px; border-radius: 50%;
  background: var(--rojo);
  box-shadow: inset 0 0 0 2px var(--papel-2), 0 0 0 1px var(--rojo);
}

/* ---- Aparicion escalonada -------------------------------------------------
   Un unico gesto en toda la pagina, sobre las ocho tarjetas de la cartera, que
   es el argumento comercial que mas importa. app.js marca [data-visible] al
   entrar en pantalla; sin JavaScript las tarjetas se ven desde el principio. */
[data-anima] > * { --retardo: 0ms; }
@media (prefers-reduced-motion: no-preference) {
  [data-anima]:not([data-visible]) > * { opacity: 0; transform: translateY(14px); }
  [data-anima][data-visible] > * {
    animation: surge .5s cubic-bezier(.22, .8, .3, 1) both;
    animation-delay: var(--retardo);
  }
}
@keyframes surge {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

/* ============================================================== CARTERA === */
.cartera {
  width: min(100%, var(--ancho)); margin: 0 auto;
  display: grid; gap: clamp(1rem, 2.4vw, 1.5rem);
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}
/* Diez anunciantes en cinco columnas: dos filas llenas. En cuatro columnas los
   dos ultimos se quedaban solos en una fila y el muro de pruebas dejaba de
   parecer un muro. */
@media (min-width: 1120px) {
  .cartera { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
@media (max-width: 559px) {
  /* Ocho tarjetas apiladas eran 4 500 px de scroll vertical, mas de la mitad
     de la pagina. En carrusel ocupan una pantalla y se recorren con el pulgar.
     Sin JavaScript: rejilla en una fila + scroll-snap. */
  .cartera {
    grid-auto-flow: column;
    grid-auto-columns: 78%;
    grid-template-columns: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding: 0 var(--gutter);
    padding: .3rem var(--gutter) 1.1rem;
    margin-inline: calc(var(--gutter) * -1);
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
    scrollbar-color: rgb(68 148 231 / .5) transparent;
  }
  .cartera > .tarjeta { scroll-snap-align: start; }
  .cartera::-webkit-scrollbar { height: 5px; }
  .cartera::-webkit-scrollbar-thumb {
    background: rgb(68 148 231 / .5); border-radius: 99px;
  }
  .cartera__pista {
    display: block; margin-top: .3rem;
    font-size: .8rem; color: var(--claro-suave); text-align: center;
  }
}
@media (min-width: 560px) { .cartera__pista { display: none; } }
.tarjeta {
  background: var(--marino-2);
  border: 1px solid rgb(68 148 231 / .2);
  border-radius: var(--radio);
  overflow: hidden;
  transition: transform .2s ease, border-color .2s ease;
}
.tarjeta:hover { transform: translateY(-4px); border-color: var(--celeste); }
.tarjeta__foto { aspect-ratio: 1400 / 812; overflow: hidden; }
.tarjeta__foto img { width: 100%; height: 100%; object-fit: cover; }
.tarjeta__pie { padding: .85rem 1.05rem 1.05rem; }
.tarjeta__sector {
  font-size: .71rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
  color: var(--celeste); margin-bottom: .12rem;
}
.tarjeta__nombre {
  font-family: var(--display); font-variation-settings: 'wdth' 90;
  font-style: italic; font-weight: 700; text-transform: uppercase;
  font-size: 1.04rem; line-height: 1.15;
}
.cartera__cierre { text-align: center; margin-top: clamp(2rem, 4vw, 3rem); }

/* ========================================================== TESTIMONIOS === */
.testimonios {
  width: min(100%, var(--ancho)); margin: 0 auto;
  display: grid; gap: clamp(1rem, 2.4vw, 1.4rem);
  /* 380 px en vez de 290: con cuatro testimonios, dos columnas llenan las dos
     filas. A 290 salian tres y la segunda fila se quedaba con uno solo. */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
}
.testi {
  background: var(--papel-2);
  border: 1px solid var(--linea);
  border-left: 4px solid var(--rojo);
  border-radius: var(--radio-s);
  padding: 1.4rem 1.5rem;
  display: flex; flex-direction: column;
  box-shadow: var(--sombra);
}
.testi__cita {
  margin: 0 0 1.1rem;
  font-size: 1.04rem; line-height: 1.5; font-weight: 500;
  color: var(--tinta);
}
/* La traduccion va DEBAJO de la cita y en otro tono: primero se lee lo que
   escribio la persona, y luego lo que dice que dice. Si se pusiera arriba,
   parecerian palabras suyas. */
.testi__trad {
  margin: .55rem 0 0;
  padding-left: .75rem;
  border-left: 2px solid var(--linea);
  font-size: .88rem; line-height: 1.55;
  color: var(--tinta-suave);
}
.testi__trad-et {
  display: block;
  font-size: .68rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase;
  color: #8b95b3;
  margin-bottom: .1rem;
}

.testi__quien { margin-top: auto; padding-top: .9rem; }
.testi__handle { display: block; font-weight: 700; font-size: .93rem; color: var(--azul); }
.testi__rol { display: block; font-size: .82rem; color: var(--tinta-suave); }
.testimonios__nota {
  width: min(100%, var(--ancho)); margin: 1.6rem auto 0;
  text-align: center; font-size: .84rem; color: var(--tinta-suave);
}

/* =============================================================== PASOS ==== */
.pasos {
  width: min(100%, var(--ancho)); margin: 0 auto;
  display: grid; gap: clamp(1.3rem, 3vw, 2rem);
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  counter-reset: paso;
}
.paso {
  position: relative;
  padding: 1.7rem 1.5rem 1.5rem;
  background: var(--marino-2);
  border: 1px solid rgb(68 148 231 / .2);
  border-radius: var(--radio);
}
.paso__n {
  position: absolute; top: -18px; left: 1.4rem;
  display: grid; place-items: center;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--rojo); color: #fff;
  font-family: var(--display); font-variation-settings: 'wdth' 92;
  font-style: italic; font-weight: 900; font-size: 1.35rem;
  box-shadow: 0 10px 24px -10px rgb(219 6 6 / .9);
}
.paso__h {
  margin: .9rem 0 .45rem;
  font-family: var(--display); font-variation-settings: 'wdth' 88;
  font-style: italic; font-weight: 800; text-transform: uppercase;
  font-size: 1.18rem;
}
.paso__p { font-size: .95rem; color: var(--claro-suave); }

/* ============================================================= PAQUETES === */
.paquetes {
  width: min(100%, var(--ancho)); margin: 0 auto;
  display: grid; gap: 1.2rem;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}
.paquete {
  background: var(--papel-2); border: 1px solid var(--linea);
  border-radius: var(--radio); padding: 1.8rem 1.5rem; text-align: center;
  box-shadow: var(--sombra);
}
.paquete__unidad {
  font-size: .76rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--tinta-suave); margin-bottom: .5rem;
}
.paquete__precio {
  font-family: var(--display); font-variation-settings: 'wdth' 86;
  font-style: italic; font-weight: 900;
  font-size: 2.6rem; line-height: 1; color: var(--rojo);
  margin-bottom: 1.2rem;
}
.paquete__precio span {
  display: block; font-size: .8rem; font-weight: 700;
  letter-spacing: .12em; color: var(--tinta-suave); font-style: normal;
}

/* ================================================================= FAQ ==== */
.faq { width: min(100%, 780px); margin: 0 auto; }
.faq__item {
  border-bottom: 1px solid var(--linea);
  padding: .35rem 0;
}
/* interpolate-size deja animar de 0 a auto en los navegadores que ya lo traen;
   en el resto el <details> abre de golpe, como hasta ahora. */
@supports (interpolate-size: allow-keywords) {
  html { interpolate-size: allow-keywords; }
  .faq__item::details-content {
    block-size: 0; overflow: hidden;
    transition: block-size .28s ease, content-visibility .28s allow-discrete;
  }
  .faq__item[open]::details-content { block-size: auto; }
}
.faq__p {
  display: flex; align-items: center; gap: .9rem;
  padding: 1rem .2rem;
  cursor: pointer; list-style: none;
  font-weight: 600; font-size: 1.05rem;
}
.faq__p::-webkit-details-marker { display: none; }
.faq__p::after {
  content: ''; margin-left: auto; flex: none;
  width: 13px; height: 13px;
  border-right: 2.5px solid var(--rojo); border-bottom: 2.5px solid var(--rojo);
  transform: rotate(45deg) translateY(-3px);
  transition: transform .2s ease;
}
.faq__item[open] .faq__p::after { transform: rotate(-135deg) translateY(-3px); }
.faq__r { padding: 0 .2rem 1.15rem; color: var(--tinta-suave); max-width: 62ch; }

/* ============================================================== CIERRE ==== */
.cierre {
  display: grid; gap: clamp(2rem, 5vw, 3.5rem);
  grid-template-columns: repeat(auto-fit, minmax(310px, 1fr));
  align-items: start;
  width: min(100%, var(--ancho));
  margin: 0 auto;
  padding: clamp(3.4rem, 8vw, 6rem) var(--gutter);
}
.cierre__h {
  font-family: var(--display); font-variation-settings: 'wdth' 84;
  font-style: italic; font-weight: 900; text-transform: uppercase;
  line-height: .97; letter-spacing: -.015em;
  font-size: clamp(1.9rem, 5.5vw, 3rem);
  margin-bottom: .9rem;
}
.cierre__p { color: var(--claro-suave); margin-bottom: 1.5rem; max-width: 42ch; }
.cierre__tel {
  display: inline-flex; align-items: center; gap: .6rem;
  text-decoration: none;
  font-family: var(--display); font-variation-settings: 'wdth' 88;
  font-style: italic; font-weight: 800;
  font-size: clamp(1.5rem, 4.5vw, 2rem);
  color: var(--amarillo);
  padding: .3rem 0; min-height: 44px;
}
.cierre__tel:hover { color: #fff; }

.cierre__lema {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.1rem;
  margin-top: 1.8rem; padding-top: 1.4rem;
  border-top: 1px solid rgb(185 195 224 / .2);
  font-family: var(--display); font-variation-settings: 'wdth' 90;
  font-style: italic; font-weight: 700; text-transform: uppercase;
  font-size: .84rem; letter-spacing: .06em;
  color: var(--claro-suave);
}
.cierre__lema li { display: flex; align-items: center; gap: 1.1rem; }
/* La estrella va DETRAS de cada elemento menos el ultimo, no delante del
   siguiente: cuando la lista se parte en dos lineas, un separador huerfano
   abriendo la segunda linea se lee como una viñeta suelta. */
.cierre__lema li:not(:last-child)::after {
  content: '★'; color: var(--rojo); font-size: .7rem; font-style: normal;
}
@media (max-width: 560px) {
  /* Apilada a una por linea, cada frase ya esta separada: la estrella al final
     de la linea se lee como un adorno suelto. */
  .cierre__lema { display: grid; gap: .45rem; }
  .cierre__lema li::after { content: none; }
}

/* ============================================================ FORMULARIO == */
.form {
  background: var(--marino-2);
  border: 1px solid rgb(68 148 231 / .28);
  border-radius: var(--radio);
  padding: clamp(1.4rem, 3.5vw, 2.1rem);
  box-shadow: var(--sombra-alta);
}
/* La trampa se saca de la pantalla en vez de ocultarla con display:none:
   algunos robots ignoran los campos ocultos y así siguen picando. */
.form__trampa {
  position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden;
}
.campo { margin-bottom: 1rem; }
.campo label {
  display: block; margin-bottom: .35rem;
  font-size: .85rem; font-weight: 600; color: var(--claro-suave);
}
.campo input {
  width: 100%;
  padding: .82rem 1rem;
  background: rgb(5 14 46 / .8);
  border: 1.5px solid rgb(185 195 224 / .45);
  border-radius: var(--radio-s);
  color: var(--claro);
  transition: border-color .15s ease;
}
.campo input::placeholder { color: rgb(185 195 224 / .68); }
.campo input:focus { border-color: var(--celeste); outline: none; }
.campo input:focus-visible { outline: 3px solid var(--amarillo); outline-offset: 2px; }
.campo input:user-invalid { border-color: var(--rojo); }
.form .btn { margin-top: .4rem; }
.form__nota {
  margin-top: .9rem;
  font-size: .81rem; color: var(--claro-suave); text-align: center;
}
.form__nota a {
  /* El enlace de privacidad medía 16 px de alto justo debajo del botón de
     enviar. El relleno lo sube a 44 sin separar el texto de su párrafo. */
  color: var(--celeste);
  display: inline-block; padding: .72rem 0; margin: -.6rem 0;
}

/* ================================================================ PIE ===== */
.pie {
  background: #030a20;
  border-top: 1px solid rgb(68 148 231 / .2);
  padding: clamp(2.5rem, 6vw, 3.6rem) var(--gutter) 1.4rem;
}
.pie__caja {
  width: min(100%, var(--ancho)); margin: 0 auto;
  display: grid; gap: clamp(1.8rem, 4vw, 3rem);
  grid-template-columns: minmax(220px, 1fr) 2fr;
}
.pie__marca picture, .pie__marca img { display: block; }
.pie__marca img {
  /* Misma decision que .bar__emblema: la pieza original trae fondo blanco, asi
     que se le da marco propio en vez de fingir una transparencia que no tiene. */
  width: 150px; height: auto;
  border-radius: 8px;
  box-shadow: 0 0 0 1.5px rgb(255 255 255 / .5), 0 10px 26px -14px rgb(0 0 0 / .9);
}
.pie__lema {
  margin-top: .9rem; max-width: 30ch;
  font-size: .88rem; color: var(--claro-suave);
}
.pie__cols {
  display: grid; gap: 1.6rem;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}
.pie__h {
  font-size: .74rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--amarillo); margin-bottom: .7rem;
}
.pie__link, .pie__txt {
  /* 44 px de alto minimo para el dedo sin cambiar el ritmo visual: el relleno
     va dentro y los margenes negativos devuelven el hueco que ocupaba. */
  display: block; font-size: .92rem; color: var(--claro-suave);
  text-decoration: none;
  padding: .7rem 0; margin: -.55rem 0 -.2rem;
}
.pie__link:hover { color: #fff; }
.pie__legal {
  width: min(100%, var(--ancho)); margin: clamp(2rem, 4vw, 2.8rem) auto 0;
  padding-top: 1.2rem;
  border-top: 1px solid rgb(185 195 224 / .14);
  display: flex; flex-wrap: wrap; gap: .6rem 1.5rem; justify-content: space-between;
  font-size: .82rem; color: rgb(185 195 224 / .75);
}
.pie__legal a {
  color: inherit;
  display: inline-block; padding: .75rem 0; margin: -.7rem 0;
}
.pie__legal a:hover { color: #fff; }

@media (max-width: 720px) {
  .pie__caja { grid-template-columns: 1fr; }
}

/* =========================================================== FLOTANTE ===== */
.flotante {
  position: fixed; right: 1rem; bottom: 1rem; z-index: 55;
  display: grid; place-items: center;
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--wa); color: #04310f;
  box-shadow: 0 14px 34px -12px rgb(37 211 102 / .95);
  transition: transform .18s ease;
}
.flotante:hover { transform: scale(1.07); }
@media (min-width: 900px) { .flotante { right: 1.6rem; bottom: 1.6rem; } }

/* A 390 px el flotante ocupa de x=318 a x=374 y los botones a ancho completo
   terminan en x=372: se solapaban siempre. app.js le pone [data-oculto] cuando
   hay un CTA de WhatsApp visible, que es justo cuando el flotante sobra. */
.flotante {
  transition: transform .18s ease, opacity .22s ease, visibility .22s;
}
.flotante[data-oculto] {
  opacity: 0; visibility: hidden;
  transform: scale(.8) translateY(8px);
  pointer-events: none;
}

/* ============================================ PÁGINAS SECUNDARIAS ========= */
.mini {
  width: min(100%, 620px); margin: 0 auto;
  padding: clamp(4rem, 12vw, 7rem) var(--gutter);
  text-align: center;
}
.mini__h {
  font-family: var(--display); font-variation-settings: 'wdth' 85;
  font-style: italic; font-weight: 900; text-transform: uppercase;
  font-size: clamp(1.9rem, 6vw, 2.8rem); line-height: 1;
  margin-bottom: 1rem;
}
.mini__p { color: var(--claro-suave); margin-bottom: 1.8rem; }
.mini__ctas { display: flex; flex-wrap: wrap; gap: .7rem; justify-content: center; }
.mini__volver { margin-top: 2rem; font-size: .9rem; }
.mini__volver a { color: var(--celeste); }

.texto {
  width: min(100%, 720px); margin: 0 auto;
  padding: clamp(3rem, 8vw, 5rem) var(--gutter);
}
.texto__h1 {
  font-family: var(--display); font-variation-settings: 'wdth' 85;
  font-style: italic; font-weight: 900; text-transform: uppercase;
  font-size: clamp(1.9rem, 6vw, 2.8rem); line-height: 1;
}
.texto__fecha { color: rgb(185 195 224 / .7); font-size: .86rem; margin-bottom: 2rem; }
.texto h2 {
  font-family: var(--display); font-variation-settings: 'wdth' 90;
  font-style: italic; font-weight: 800; text-transform: uppercase;
  font-size: 1.25rem; margin: 2rem 0 .6rem; color: var(--amarillo);
}
.texto p, .texto li { color: var(--claro-suave); }
.texto ul { list-style: disc; padding-left: 1.3rem; margin: .5rem 0; display: grid; gap: .4rem; }
.texto__volver { margin-top: 2.5rem; }
.texto__volver a { color: var(--celeste); }