/* =============================================================================
   fletea — styles.css
   Sistema tomado del Manual de Identidad de Marca v1.0.
   Proporción obligatoria 60 crema / 30 tinta / 10 naranja.
   ============================================================================= */

/* =============================================================
   1. TOKENS
   ============================================================= */
:root{
  /* Paleta oficial — valores exactos del manual §4 */
  --naranja:      #FF6210;   /* color de marca. El único que vende. */
  --naranja-hover:#F15808;
  --tinta:        #1C0D0A;   /* títulos. No es negro puro: tiene calidez. */
  --grafito:      #353535;   /* texto de lectura. El más usado del sistema. */
  --crema:        #FEF1E4;   /* fondo de sección */
  --beige:        #E5D7D1;   /* líneas, bordes, separadores. Nunca texto. */
  --ambar:        #F0AD4E;   /* acento secundario. Uso escaso. */
  --verde:        #2E7D4F;   /* estado: confirmado */
  --rojo:         #C0392B;   /* estado: pendiente / bloqueante */

  /* Derivados */
  --blanco:       #FFFFFF;
  --crema-suave:  #FBF4EC;
  --gris-suave:   #6E5C54;   /* neutro cálido, sesgado hacia el naranja */
  --naranja-velo: rgba(255,98,16,.07);
  --verde-velo:   rgba(46,125,79,.10);
  --tinta-velo:   rgba(28,13,10,.06);

  /* Tipografías — manual §5 */
  --display: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --texto:   "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --frase:   "Calistoga", Georgia, "Times New Roman", serif;
  --dato:    "IBM Plex Mono", ui-monospace, "Courier New", monospace;

  /* Ritmo */
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --ancho:  1180px;
  --lectura: 66ch;
  --radio: 14px;
  --radio-sm: 9px;

  /* Easings */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft:   cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);

  --sombra:    0 1px 2px rgba(28,13,10,.04), 0 10px 30px -18px rgba(28,13,10,.25);
  --sombra-alta:0 2px 6px rgba(28,13,10,.06), 0 22px 48px -22px rgba(28,13,10,.34);

  color-scheme: light;
}

/* =============================================================
   2. RESET Y BASE
   ============================================================= */
*, *::before, *::after{ box-sizing:border-box; margin:0; }
html{ -webkit-text-size-adjust:100%; tab-size:2; scroll-behavior:smooth; scroll-padding-top:88px; }

body{
  background:var(--crema);
  color:var(--grafito);
  font-family:var(--texto);
  font-size:16px;
  font-weight:400;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  overflow-x:clip;
}

img, svg, video{ display:block; max-width:100%; }
img{ height:auto; }
button{ font:inherit; color:inherit; cursor:pointer; border:0; background:none; }
a{ color:inherit; text-decoration:none; }
p{ text-wrap:pretty; }
input, select, textarea{ font:inherit; color:inherit; }

::selection{ background:var(--naranja); color:var(--crema); }

:focus-visible{
  outline:2.5px solid var(--naranja);
  outline-offset:3px;
  border-radius:4px;
}

/* =============================================================
   3. UTILIDADES
   ============================================================= */
.contenedor{ width:100%; max-width:var(--ancho); margin-inline:auto; padding-inline:var(--gutter); }
.lectura{ max-width:var(--lectura); }
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.saltar{
  position:fixed; top:-100px; left:1rem; z-index:9999;
  padding:.7rem 1.1rem; background:var(--tinta); color:var(--crema);
  border-radius:var(--radio-sm); font-weight:600; transition:top .2s var(--ease-out);
}
.saltar:focus{ top:1rem; }

/* =============================================================
   4. TIPOGRAFÍA
   ============================================================= */
h1,h2,h3,h4{ font-family:var(--display); color:var(--tinta); text-wrap:balance; }
h1{ font-weight:700; font-size:clamp(2.25rem,6.2vw,4.15rem); line-height:1.04; letter-spacing:-.028em; }
h2{ font-weight:700; font-size:clamp(1.75rem,4vw,2.85rem); line-height:1.12; letter-spacing:-.02em; }
h3{ font-weight:700; font-size:clamp(1.2rem,2.2vw,1.55rem); line-height:1.18; letter-spacing:-.012em; }
h4{ font-weight:600; font-size:1.03rem; line-height:1.28; }

/* Etiqueta: Montserrat 600, mayúsculas, +0.11em — manual §5 */
.etiqueta{
  font-family:var(--texto); font-weight:600; font-size:.7rem;
  text-transform:uppercase; letter-spacing:.11em; color:var(--gris-suave);
  line-height:1.4;
}
.etiqueta--naranja{ color:var(--naranja-hover); }

/* Dato: IBM Plex Mono, sin excepción — precio, folio, teléfono, código */
.dato{ font-family:var(--dato); font-variant-numeric:tabular-nums; font-weight:500; }

/* Frase institucional: Calistoga, una sola oración. Nunca texto corrido. */
.frase{ font-family:var(--frase); font-weight:400; line-height:1.28; color:var(--tinta); }

.bajada{ font-size:clamp(1rem,1.6vw,1.16rem); line-height:1.62; color:var(--grafito); }

/* =============================================================
   5. COMPONENTES
   ============================================================= */

/* --- Motivo de ruta: punto → línea → punta. Del mundo del negocio. --- */
.ruta{ display:flex; align-items:center; gap:0; height:10px; }
.ruta i{ width:9px; height:9px; border-radius:50%; background:var(--naranja); flex:none; }
.ruta span{
  flex:1; height:1.5px; background:var(--beige);
  transform-origin:left center; transform:scaleX(0);
  transition:transform 1.1s var(--ease-out);
}
.reveal.is-in .ruta span, .ruta.is-in span{ transform:scaleX(1); }
.ruta b{
  width:0; height:0; flex:none;
  border-top:5px solid transparent; border-bottom:5px solid transparent;
  border-left:7px solid var(--beige);
}

/* --- Botones --- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  font-family:var(--texto); font-weight:600; font-size:.96rem;
  padding:.92rem 1.5rem; border-radius:var(--radio-sm);
  background:var(--naranja); color:var(--blanco);
  line-height:1.3; text-align:center;
  transition:background .25s var(--ease-out), transform .25s var(--ease-out), box-shadow .25s var(--ease-out);
  box-shadow:0 1px 2px rgba(241,88,8,.18), 0 10px 22px -14px rgba(241,88,8,.7);
}
.btn:hover{ background:var(--naranja-hover); transform:translateY(-2px); box-shadow:0 3px 8px rgba(241,88,8,.22), 0 16px 30px -16px rgba(241,88,8,.8); }
.btn:active{ transform:translateY(0); }

.btn--linea{
  background:transparent; color:var(--tinta);
  border:1.5px solid var(--beige); box-shadow:none;
}
.btn--linea:hover{ background:var(--blanco); border-color:var(--naranja); color:var(--naranja-hover); transform:translateY(-2px); box-shadow:var(--sombra); }

.btn--wa{ background:var(--tinta); color:var(--crema); box-shadow:none; }
.btn--wa:hover{ background:#2A1511; }

.btn--bloque{ width:100%; }
.btn[disabled]{ opacity:.45; pointer-events:none; }

/* --- Tarjeta --- */
.tarjeta{
  background:var(--blanco); border:1px solid var(--beige);
  border-radius:var(--radio); padding:1.6rem 1.7rem;
  display:flex; flex-direction:column; gap:.85rem;
  transition:border-color .3s var(--ease-out), transform .3s var(--ease-out), box-shadow .3s var(--ease-out);
}

/* --- Chips --- */
.chip{
  display:inline-flex; align-items:center; gap:.4rem;
  font-size:.84rem; font-weight:500; padding:.46rem .85rem;
  border-radius:100px; border:1.5px solid var(--beige);
  background:var(--blanco); color:var(--grafito);
  transition:all .22s var(--ease-out);
}
.chip:hover{ border-color:var(--naranja); color:var(--tinta); }
.chip[aria-pressed="true"]{
  background:var(--naranja-velo); border-color:var(--naranja);
  color:var(--naranja-hover); font-weight:600;
}

/* --- Aviso --- */
.aviso{
  border-left:3px solid var(--naranja); background:var(--naranja-velo);
  padding:1rem 1.25rem; border-radius:0 var(--radio-sm) var(--radio-sm) 0;
  font-size:.93rem; line-height:1.58;
}
.aviso--verde{ border-color:var(--verde); background:var(--verde-velo); }

/* =============================================================
   6. SECCIONES
   ============================================================= */

/* --- Barra de utilidad + encabezado --- */
.utilidad{
  background:var(--tinta); color:var(--crema);
  font-size:.79rem; letter-spacing:.01em;
}
.utilidad .contenedor{
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem; padding-block:.55rem; flex-wrap:wrap;
}
.utilidad a{ font-weight:600; display:inline-flex; align-items:center; gap:.4rem; }
.utilidad a:hover{ color:var(--ambar); }
.utilidad .cobertura{ color:rgba(254,241,228,.72); }

.encabezado{
  position:sticky; top:0; z-index:100;
  background:rgba(254,241,228,.86);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color .3s var(--ease-out), background .3s var(--ease-out), box-shadow .3s var(--ease-out);
}
.encabezado.is-pegado{ border-bottom-color:var(--beige); box-shadow:0 6px 24px -20px rgba(28,13,10,.6); }
@supports not (backdrop-filter: blur(4px)){ .encabezado{ background:var(--crema); } }

.encabezado .contenedor{
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem; padding-block:.85rem;
}
/* El logotipo ya trae la palabra «fletea» dibujada en su propia tipografía.
   Volver a escribirla al lado con otra fuente es justo lo que prohíbe el
   Manual §3. Por eso aquí solo va la imagen. */
.marca{ display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:.22rem; }
.marca img{ height:30px; width:auto; display:block; }
.marca--pie img{ height:34px; }
.marca .lema{
  font-family:var(--frase); font-size:.72rem; color:var(--gris-suave);
  line-height:1; display:none;
}
.nav{ display:none; align-items:center; gap:1.6rem; font-size:.92rem; font-weight:500; }
.nav a{ color:var(--grafito); transition:color .2s var(--ease-out); position:relative; }
.nav a::after{
  content:""; position:absolute; left:0; bottom:-5px; width:100%; height:1.5px;
  background:var(--naranja); transform:scaleX(0); transform-origin:right;
  transition:transform .3s var(--ease-out);
}
.nav a:hover{ color:var(--tinta); }
.nav a:hover::after{ transform:scaleX(1); transform-origin:left; }
.encabezado .btn{ padding:.62rem 1.1rem; font-size:.87rem; }

/* --- Hero --- */
.hero{ padding-block:clamp(2.5rem,7vw,4.5rem) clamp(2rem,5vw,3rem); position:relative; overflow:hidden; }
.hero .contenedor{ display:grid; gap:clamp(2rem,5vw,3.5rem); align-items:center; }
.hero-texto{ display:flex; flex-direction:column; gap:1.4rem; }
.hero h1 .destacado{ color:var(--naranja); }
.hero .bajada{ max-width:52ch; }
.hero-acciones{ display:flex; flex-wrap:wrap; gap:.7rem; }
.hero-sellos{
  display:flex; flex-wrap:wrap; gap:.5rem 1.4rem; padding-top:.4rem;
  font-size:.83rem; color:var(--gris-suave);
}
.hero-sellos span{ display:inline-flex; align-items:center; gap:.45rem; }
.hero-sellos svg{ width:15px; height:15px; color:var(--verde); flex:none; }

.hero-foto{ position:relative; }
.hero-foto img{
  width:100%; border-radius:var(--radio);
  aspect-ratio:3/4; object-fit:cover; object-position:center 40%;
  box-shadow:var(--sombra-alta);
}
/* Ficha de capacidad sobrepuesta — dato real, no adorno */
.hero-ficha{
  position:absolute; left:-.5rem; bottom:1.4rem;
  background:var(--blanco); border:1px solid var(--beige);
  border-radius:var(--radio-sm); padding:.85rem 1.1rem;
  box-shadow:var(--sombra-alta); display:flex; flex-direction:column; gap:.15rem;
}
.hero-ficha .k{ font-family:var(--dato); font-weight:700; font-size:1.18rem; color:var(--tinta); }
.hero-ficha .v{ font-size:.72rem; color:var(--gris-suave); letter-spacing:.03em; }

/* --- Puertas (triage) --- */
.puertas{ padding-block:clamp(1rem,3vw,1.5rem) clamp(3rem,7vw,4.5rem); }
.puertas-grid{ display:grid; gap:1rem; margin-top:1.6rem; }
.puerta{
  background:var(--blanco); border:1px solid var(--beige); border-radius:var(--radio);
  padding:1.5rem 1.6rem; display:flex; flex-direction:column; gap:.55rem;
  position:relative; overflow:hidden;
  transition:border-color .3s var(--ease-out), transform .3s var(--ease-out), box-shadow .3s var(--ease-out);
}
.puerta::before{
  content:""; position:absolute; inset:0 auto 0 0; width:3px;
  background:var(--naranja); transform:scaleY(0); transform-origin:bottom;
  transition:transform .35s var(--ease-out);
}
.puerta:hover{ border-color:var(--naranja); transform:translateY(-4px); box-shadow:var(--sombra-alta); }
.puerta:hover::before{ transform:scaleY(1); transform-origin:top; }
.puerta .p-nombre{ font-family:var(--display); font-weight:700; font-size:1.22rem; color:var(--tinta); }
.puerta .p-sub{ font-size:.86rem; color:var(--gris-suave); }
.puerta .p-ir{
  margin-top:auto; padding-top:.7rem; display:inline-flex; align-items:center; gap:.45rem;
  font-weight:600; font-size:.9rem; color:var(--naranja-hover);
}
.puerta .p-ir svg{ width:15px; height:15px; transition:transform .3s var(--ease-out); }
.puerta:hover .p-ir svg{ transform:translateX(4px); }

/* --- Banda de evidencia --- */
.evidencia{ background:var(--tinta); color:var(--crema); padding-block:clamp(2.2rem,5vw,3rem); }
.evidencia-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:1.6rem 1rem; }
.evidencia .n{
  font-family:var(--dato); font-weight:700; font-size:clamp(1.6rem,4vw,2.3rem);
  color:var(--crema); line-height:1.1; font-variant-numeric:tabular-nums;
}
.evidencia .n em{ font-style:normal; color:var(--naranja); }
.evidencia .d{ font-size:.8rem; color:rgba(254,241,228,.66); line-height:1.4; margin-top:.2rem; }

/* --- Sección genérica --- */
.seccion{ padding-block:clamp(3rem,8vw,5.5rem); }
.seccion--crema{ background:var(--crema-suave); }
.seccion-cabeza{ display:flex; flex-direction:column; gap:.8rem; margin-bottom:2.2rem; max-width:60ch; }

/* --- Servicio --- */
.servicio{
  display:grid; gap:1.8rem; align-items:center;
  padding-block:clamp(2rem,5vw,3rem);
  border-top:1px solid var(--beige);
}
.servicio:first-of-type{ border-top:0; padding-top:0; }
.servicio-texto{ display:flex; flex-direction:column; gap:1.05rem; }
.servicio-texto h3{ max-width:20ch; }
.servicio ul{ list-style:none; padding:0; display:flex; flex-direction:column; gap:.6rem; }
.servicio li{ position:relative; padding-left:1.5rem; font-size:.95rem; line-height:1.5; }
.servicio li::before{
  content:""; position:absolute; left:0; top:.6em;
  width:8px; height:1.5px; background:var(--naranja);
}
.servicio-acciones{ display:flex; flex-wrap:wrap; gap:.65rem; padding-top:.2rem; }
.servicio-foto img{ width:100%; border-radius:var(--radio); aspect-ratio:4/3; object-fit:cover; box-shadow:var(--sombra); }

/* Lo que NO incluye — la jugada de Claridad del ADN */
.no-incluye{
  border:1px dashed var(--beige); border-radius:var(--radio-sm);
  padding:.95rem 1.2rem; background:var(--blanco);
  font-size:.88rem; color:var(--gris-suave); line-height:1.55;
}
.no-incluye b{ color:var(--tinta); font-weight:600; }

/* Aviso de agenda foránea — escasez honesta, con la razón enfrente */
.nota-agenda{
  display:flex; gap:.8rem; align-items:flex-start;
  background:var(--naranja-velo); border-radius:var(--radio-sm);
  padding:.9rem 1.1rem; font-size:.88rem; line-height:1.55; color:var(--tinta);
}
.nota-agenda svg{ width:17px; height:17px; color:var(--naranja); flex:none; margin-top:.15rem; }

/* --- Rutas foráneas --- */
.rutas{ display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:.7rem; }
.ruta-item{
  background:var(--blanco); border:1px solid var(--beige); border-radius:var(--radio-sm);
  padding:.9rem 1rem; display:flex; flex-direction:column; gap:.15rem;
  transition:border-color .25s var(--ease-out), transform .25s var(--ease-out);
}
.ruta-item:hover{ border-color:var(--naranja); transform:translateY(-2px); }
.ruta-item .r-d{ font-family:var(--display); font-weight:600; font-size:.96rem; color:var(--tinta); }
.ruta-item .r-k{ font-family:var(--dato); font-size:.78rem; color:var(--gris-suave); }

/* --- Renta de cajas ---------------------------------------------------
   Panel en tinta, no en naranja: la caja real es negra con tapa naranja,
   y sobre fondo naranja la tapa desaparecería. Aquí el naranja se reserva
   para lo que vende: la tapa, el precio bueno y el botón. */
.cajas{ padding-block:clamp(3rem,8vw,5.5rem) clamp(1.4rem,4vw,2.4rem); }
.cajas-panel{
  background:var(--tinta); color:var(--crema);
  border-radius:calc(var(--radio) + 6px);
  padding:clamp(1.7rem,5vw,3rem);
  display:grid; gap:clamp(1.8rem,4vw,3rem); align-items:center;
  box-shadow:var(--sombra-alta);
}
.cajas-panel .etiqueta{ color:var(--naranja); }
.cajas-panel h2{ color:var(--crema); }
.cajas-panel .bajada{ color:rgba(254,241,228,.86); }
.cajas-panel .dato{ color:var(--crema); }
.cajas-texto{ display:flex; flex-direction:column; gap:1.15rem; }

.cajas-dibujo{ display:flex; justify-content:center; }
.cajas-dibujo svg{ width:min(100%,215px); height:auto; }

/* Los dos tramos de precio. El de 12+ es el que conviene y se ve. */
.precios{ display:grid; gap:.8rem; }
/* En pantallas muy angostas los dos tramos van uno debajo del otro:
   apretados en dos columnas, «$89» y «por caja» se parten. */
@media (min-width:430px){ .precios{ grid-template-columns:1fr 1fr; } }
.precio{
  background:rgba(254,241,228,.055); border:1px solid rgba(254,241,228,.15);
  border-radius:var(--radio-sm); padding:1rem 1.15rem;
}
.precio--mejor{ border-color:var(--naranja); background:rgba(255,98,16,.11); }
.precio .rango{
  font-size:.7rem; letter-spacing:.1em; text-transform:uppercase;
  color:rgba(254,241,228,.62); font-weight:600;
}
.precio .n{
  font-family:var(--dato); font-weight:700; font-size:1.85rem; color:var(--crema);
  line-height:1.05; margin-top:.4rem; font-variant-numeric:tabular-nums;
}
.precio .n span{ font-family:var(--texto); font-size:.78rem; font-weight:500; color:rgba(254,241,228,.66); }
.precio .extra{ margin-top:.5rem; font-size:.83rem; line-height:1.5; color:rgba(254,241,228,.78); }
.precio .regalo{ color:var(--naranja); font-weight:600; }

/* La aritmética honesta: once cajas cuestan más que doce. */
.cajas-cuenta{
  font-size:.85rem; line-height:1.55; color:rgba(254,241,228,.72);
  border-left:2px solid var(--naranja); padding-left:.85rem;
}
.cajas-cuenta .dato{ color:var(--crema); }

.cajas-lista{ list-style:none; padding:0; display:flex; flex-direction:column; gap:.65rem; }
.cajas-lista li{
  display:grid; grid-template-columns:auto 1fr; gap:.7rem; align-items:start;
  font-size:.92rem; line-height:1.55; color:rgba(254,241,228,.88);
}
.cajas-lista svg{ width:18px; height:18px; margin-top:.18rem; color:var(--naranja); }

.cajas-acciones{ display:flex; flex-wrap:wrap; gap:.7rem; }
.btn--fantasma{
  background:transparent; color:var(--crema);
  border:1.5px solid rgba(254,241,228,.45); box-shadow:none;
}
.btn--fantasma:hover{ background:rgba(254,241,228,.12); color:var(--crema); border-color:var(--crema); }

/* Emplayado y el puente hacia la mudanza */
.cajas-abajo{ display:grid; gap:1rem; margin-top:1rem; }
.tarjeta--puente{ border-color:var(--naranja); background:var(--naranja-velo); }
.tarjeta--puente .btn{ align-self:flex-start; }

/* Guiño en el hero: lleva a la sección de cajas sin robarle el CTA principal. */
.cajas-guino{
  display:inline-flex; align-items:center; gap:.55rem; align-self:flex-start;
  font-size:.88rem; font-weight:500; color:var(--tinta); line-height:1.35;
  background:var(--naranja-velo); border:1px solid rgba(255,98,16,.28);
  border-radius:999px; padding:.55rem 1rem;
  transition:background .25s var(--ease-out), border-color .25s var(--ease-out), transform .25s var(--ease-out);
}
.cajas-guino b{ font-weight:600; color:var(--naranja-hover); }
.cajas-guino svg{ width:17px; height:17px; color:var(--naranja); flex:none; }
.cajas-guino:hover{ background:rgba(255,98,16,.13); border-color:var(--naranja); transform:translateY(-1px); }

/* --- Complementos --- */

.complementos{ display:grid; gap:1rem; }

/* --- Pasos --- */
.pasos{ display:grid; gap:1.1rem; counter-reset:paso; }
.paso{
  display:grid; grid-template-columns:auto 1fr; gap:0 1.1rem; align-items:start;
  padding-top:1.1rem; border-top:1px solid var(--beige);
}
.paso .p-n{
  font-family:var(--dato); font-weight:700; font-size:.92rem; color:var(--naranja);
  width:2rem; padding-top:.1rem;
}
.paso h4{ margin-bottom:.2rem; }
.paso p{ font-size:.92rem; color:var(--gris-suave); line-height:1.55; }

/* --- Las cinco preguntas / FAQ (acordeón nativo) --- */
.preguntas{ display:flex; flex-direction:column; }
details.pregunta{ border-bottom:1px solid var(--beige); }
details.pregunta summary{
  list-style:none; cursor:pointer; padding:1.15rem 2.4rem 1.15rem 0;
  font-family:var(--display); font-weight:600; font-size:1.02rem; color:var(--tinta);
  position:relative; line-height:1.35;
  transition:color .2s var(--ease-out);
}
details.pregunta summary::-webkit-details-marker{ display:none; }
details.pregunta summary:hover{ color:var(--naranja-hover); }
details.pregunta summary::after{
  content:""; position:absolute; right:.35rem; top:50%;
  width:11px; height:11px; margin-top:-7px;
  border-right:2px solid var(--naranja); border-bottom:2px solid var(--naranja);
  transform:rotate(45deg); transition:transform .3s var(--ease-out);
}
details.pregunta[open] summary::after{ transform:rotate(-135deg); margin-top:-3px; }
details.pregunta .respuesta{
  padding:0 2.4rem 1.3rem 0; font-size:.95rem; line-height:1.65; color:var(--grafito);
  max-width:62ch;
}

/* --- Cobertura --- */
.cobertura-lista{ display:flex; flex-wrap:wrap; gap:.5rem; }
.cobertura-lista span{
  font-size:.87rem; font-weight:500; padding:.42rem .9rem;
  border:1px solid var(--beige); border-radius:100px; background:var(--blanco);
  color:var(--grafito);
}

/* --- Cierre --- */
.cierre{ background:var(--tinta); color:var(--crema); padding-block:clamp(3rem,8vw,4.5rem); text-align:center; }
.cierre .frase{ color:var(--crema); font-size:clamp(1.5rem,4vw,2.4rem); max-width:20ch; margin-inline:auto; }
.cierre p{ color:rgba(254,241,228,.72); max-width:46ch; margin:1rem auto 0; font-size:.98rem; }
.cierre .btn{ margin-top:1.8rem; }

/* --- Pie --- */
.pie{ background:var(--crema-suave); border-top:1px solid var(--beige); padding-block:2.8rem 6.5rem; font-size:.88rem; }
.pie-grid{ display:grid; gap:2rem; }
.pie h4{ font-size:.72rem; text-transform:uppercase; letter-spacing:.11em; color:var(--gris-suave); font-weight:600; margin-bottom:.8rem; }
.pie ul{ list-style:none; padding:0; display:flex; flex-direction:column; gap:.5rem; }
.pie a:hover{ color:var(--naranja-hover); }
.pie .legal{
  margin-top:2.2rem; padding-top:1.4rem; border-top:1px solid var(--beige);
  display:flex; flex-wrap:wrap; gap:.6rem 1.5rem; justify-content:space-between;
  font-size:.78rem; color:var(--gris-suave);
}

/* --- Barra fija móvil --- */
.barra-movil{
  position:fixed; left:0; right:0; bottom:0; z-index:120;
  display:grid; grid-template-columns:1fr 1fr; gap:.55rem;
  padding:.6rem var(--gutter) calc(.6rem + env(safe-area-inset-bottom));
  background:rgba(254,241,228,.94);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-top:1px solid var(--beige);
}
.barra-movil .btn{ padding:.8rem 1rem; font-size:.9rem; }
@supports not (backdrop-filter: blur(4px)){ .barra-movil{ background:var(--crema); } }

/* =============================================================
   7. COTIZADOR
   ============================================================= */
.cot-cabeza{ background:var(--crema); border-bottom:1px solid var(--beige); }
.cot-cabeza .contenedor{ display:flex; align-items:center; justify-content:space-between; gap:1rem; padding-block:.85rem; }

/* Barra de progreso con tiempo restante real */
.progreso{ position:sticky; top:0; z-index:90; background:var(--crema); padding:.9rem 0 .55rem; }
.progreso-info{
  display:flex; justify-content:space-between; align-items:baseline; gap:1rem;
  font-size:.78rem; color:var(--gris-suave); margin-bottom:.5rem;
}
.progreso-info .paso-n{ font-family:var(--texto); font-weight:600; color:var(--tinta); letter-spacing:.06em; text-transform:uppercase; font-size:.72rem; }
.progreso-info .falta{ font-family:var(--dato); font-size:.76rem; }
.progreso-riel{ height:3px; background:var(--beige); border-radius:3px; overflow:hidden; }
.progreso-barra{
  height:100%; width:0%; background:var(--naranja); border-radius:3px;
  transition:width .5s var(--ease-out);
}

.cot-main{ padding-block:1.8rem 3rem; }
.cot-layout{ display:grid; gap:2rem; align-items:start; }

.paso-panel{ display:none; flex-direction:column; gap:1.3rem; }
.paso-panel.is-activo{ display:flex; animation:entra .42s var(--ease-out) both; }
@keyframes entra{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }

.paso-titulo{ display:flex; flex-direction:column; gap:.4rem; }
.paso-titulo h2{ font-size:clamp(1.4rem,3.4vw,1.95rem); }
.paso-titulo p{ font-size:.93rem; color:var(--gris-suave); max-width:52ch; }

.campo{ display:flex; flex-direction:column; gap:.45rem; }
.campo > label, .campo-titulo{
  font-family:var(--texto); font-weight:600; font-size:.72rem;
  text-transform:uppercase; letter-spacing:.11em; color:var(--gris-suave);
}
.campo input[type="text"], .campo input[type="tel"], .campo input[type="email"],
.campo input[type="date"], .campo input[type="number"], .campo textarea, .campo select{
  width:100%; padding:.85rem 1rem;
  font-size:16px; /* 16px mínimo: evita el zoom automático de iOS */
  background:var(--blanco); border:1.5px solid var(--beige);
  border-radius:var(--radio-sm); color:var(--tinta);
  transition:border-color .22s var(--ease-out), box-shadow .22s var(--ease-out);
}
.campo input:focus, .campo textarea:focus, .campo select:focus{
  outline:none; border-color:var(--naranja);
  box-shadow:0 0 0 3px var(--naranja-velo);
}
.campo textarea{ min-height:92px; resize:vertical; line-height:1.55; }
.campo .ayuda{ font-size:.8rem; color:var(--gris-suave); }
.campo .error{ font-size:.82rem; color:var(--rojo); font-weight:500; display:none; }
.campo.is-error input, .campo.is-error select{ border-color:var(--rojo); }
.campo.is-error .error{ display:block; }

.dupla{ display:grid; gap:1rem; }

/* Tarjetas de opción — selección única con autoavance */
.opciones{ display:grid; gap:.6rem; }
.opciones--2{ grid-template-columns:repeat(2,1fr); }
.opciones--3{ grid-template-columns:repeat(2,1fr); }
.opcion{
  display:flex; flex-direction:column; gap:.2rem; text-align:left;
  padding:.95rem 1.05rem; background:var(--blanco);
  border:1.5px solid var(--beige); border-radius:var(--radio-sm);
  transition:all .22s var(--ease-out); min-height:44px;
}
.opcion:hover{ border-color:var(--naranja); transform:translateY(-2px); box-shadow:var(--sombra); }
.opcion[aria-pressed="true"]{
  border-color:var(--naranja); background:var(--naranja-velo); box-shadow:none;
}
.opcion .o-t{ font-family:var(--display); font-weight:600; font-size:.97rem; color:var(--tinta); }
.opcion .o-s{ font-size:.79rem; color:var(--gris-suave); line-height:1.4; }

/* Autocompletado de colonias — lista local, sin red */
.autocompleta{ position:relative; }
.sugerencias{
  position:absolute; left:0; right:0; top:calc(100% + 4px); z-index:30;
  background:var(--blanco); border:1px solid var(--beige); border-radius:var(--radio-sm);
  box-shadow:var(--sombra-alta); max-height:210px; overflow-y:auto; display:none;
}
.sugerencias.is-abierta{ display:block; }
.sugerencias button{
  display:block; width:100%; text-align:left; padding:.62rem 1rem;
  font-size:.92rem; color:var(--grafito); border-bottom:1px solid var(--crema-suave);
}
.sugerencias button:last-child{ border-bottom:0; }
.sugerencias button:hover, .sugerencias button.is-marcada{ background:var(--naranja-velo); color:var(--tinta); }

/* Inventario */
.medidor{
  background:var(--blanco); border:1px solid var(--beige); border-radius:var(--radio-sm);
  padding:1rem 1.15rem; display:flex; flex-direction:column; gap:.6rem;
  z-index:20;
}
/* Se fija solo si la pantalla es lo bastante alta. En viewports cortos
   quedaría encima de la lista que el cliente está ajustando. */
@media (min-height:600px){
  .medidor{ position:sticky; top:56px; }
}
.medidor-cabeza{ display:flex; justify-content:space-between; align-items:baseline; gap:1rem; }
.medidor-cabeza .m-t{ font-family:var(--texto); font-weight:600; font-size:.72rem; text-transform:uppercase; letter-spacing:.11em; color:var(--gris-suave); }
.medidor-cabeza .m-v{ font-family:var(--dato); font-weight:700; font-size:.95rem; color:var(--tinta); }
/* La barra se fue con la comparación contra la capacidad del camión: una
   barra que no se llena contra nada no dice nada. */
.medidor .m-msg{ font-size:.83rem; color:var(--gris-suave); line-height:1.45; }

.inv-grupo{ margin-top:1.2rem; }
.inv-grupo > h4{
  font-size:.72rem; text-transform:uppercase; letter-spacing:.11em;
  color:var(--gris-suave); font-weight:600; margin-bottom:.6rem;
  padding-bottom:.4rem; border-bottom:1px solid var(--beige);
}
.inv-fila{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:.55rem 0; border-bottom:1px solid var(--crema-suave);
}
.inv-fila .i-n{ font-size:.93rem; color:var(--grafito); min-width:0; }
.contador{ display:flex; align-items:center; gap:.15rem; flex:none; }
.contador button{
  width:34px; height:34px; border-radius:8px; border:1.5px solid var(--beige);
  background:var(--blanco); color:var(--tinta); font-size:1.05rem; font-weight:600;
  display:grid; place-items:center; line-height:1;
  transition:all .18s var(--ease-out);
}
.contador button:hover{ border-color:var(--naranja); color:var(--naranja-hover); }
.contador .c-v{
  font-family:var(--dato); font-weight:700; font-size:.95rem;
  min-width:2.1rem; text-align:center; color:var(--tinta);
  font-variant-numeric:tabular-nums;
}
.inv-fila.is-cero .i-n{ opacity:.42; }
.inv-fila.is-cero .c-v{ color:var(--gris-suave); }

.buscador-inv{ margin-bottom:.4rem; }

/* Resumen lateral — efecto de dotación: cuesta más abandonar lo ya construido */
.resumen{
  background:var(--blanco); border:1px solid var(--beige); border-radius:var(--radio);
  padding:1.25rem 1.35rem; display:flex; flex-direction:column; gap:.9rem;
}
.resumen h3{ font-size:.72rem; text-transform:uppercase; letter-spacing:.11em; color:var(--gris-suave); font-weight:600; font-family:var(--texto); }
.resumen dl{ margin:0; display:flex; flex-direction:column; gap:.65rem; }
.resumen .r-fila{ display:flex; flex-direction:column; gap:.1rem; }
.resumen dt{ font-size:.7rem; text-transform:uppercase; letter-spacing:.09em; color:var(--gris-suave); }
.resumen dd{ margin:0; font-size:.92rem; color:var(--tinta); font-weight:500; line-height:1.4; }
.resumen .r-vacio{ font-size:.86rem; color:var(--gris-suave); font-style:italic; }

.cot-nav{
  display:flex; gap:.7rem; align-items:center; justify-content:space-between;
  padding-top:1.3rem; margin-top:.4rem; border-top:1px solid var(--beige);
}
.btn-atras{
  font-size:.9rem; font-weight:600; color:var(--gris-suave);
  display:inline-flex; align-items:center; gap:.4rem; padding:.6rem .2rem;
  transition:color .2s var(--ease-out);
}
.btn-atras:hover{ color:var(--tinta); }

/* Estado de red — la parte que más conversión salva */
.estado-red{
  position:fixed; left:50%; transform:translateX(-50%) translateY(-120%);
  top:.7rem; z-index:200; max-width:calc(100vw - 2rem);
  display:flex; align-items:center; gap:.6rem;
  padding:.7rem 1.1rem; border-radius:100px;
  background:var(--tinta); color:var(--crema);
  font-size:.84rem; font-weight:500; line-height:1.35;
  box-shadow:var(--sombra-alta);
  transition:transform .45s var(--ease-out);
}
.estado-red.is-visible{ transform:translateX(-50%) translateY(0); }
.estado-red .punto{ width:8px; height:8px; border-radius:50%; background:var(--ambar); flex:none; }
.estado-red.es-error .punto{ background:var(--rojo); }
.estado-red.es-ok{ background:var(--verde); }
.estado-red.es-ok .punto{ background:var(--crema); }

/* Pantalla final */
.final{ display:none; flex-direction:column; gap:1.5rem; text-align:center; align-items:center; padding-block:1.5rem; }
.final.is-activo{ display:flex; animation:entra .5s var(--ease-out) both; }
.final .folio-caja{
  background:var(--blanco); border:1px solid var(--beige); border-radius:var(--radio);
  padding:1.5rem 1.8rem; display:flex; flex-direction:column; gap:.3rem;
  box-shadow:var(--sombra);
}
.final .folio-caja .f-l{ font-size:.7rem; text-transform:uppercase; letter-spacing:.11em; color:var(--gris-suave); font-weight:600; }
.final .folio-caja .f-v{ font-family:var(--dato); font-weight:700; font-size:1.5rem; color:var(--tinta); }
.estado-envio{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.55rem 1.1rem; border-radius:100px; font-size:.86rem; font-weight:600;
}
.estado-envio.es-enviado{ background:var(--verde-velo); color:var(--verde); }
.estado-envio.es-pendiente{ background:rgba(240,173,78,.16); color:#8A5D0F; }
.final-acciones{ display:flex; flex-direction:column; gap:.6rem; width:100%; max-width:340px; }
.final .detalle{ font-size:.9rem; color:var(--gris-suave); max-width:46ch; line-height:1.6; }

/* Ventana de confirmación del WhatsApp
   Lo último que ve el cliente antes de irse: a qué número le va a llegar su
   cotización, con el campo abierto por si se le fue un dígito. No usa
   <dialog> a propósito — esta página tiene que abrir en teléfonos viejos y
   sin señal, y un elemento que el navegador no conozca dejaría la ventana
   pegada encima del contenido en vez de ocultarla. */
.ventana[hidden]{ display:none; }
.ventana{
  position:fixed; inset:0; z-index:140;
  display:flex; align-items:center; justify-content:center;
  padding:var(--gutter);
}
.ventana-fondo{ position:absolute; inset:0; background:rgba(28,13,10,.55); }
/* «hidden» no basta por sí solo aquí. El navegador lo aplica con una regla muy
   débil, y .campo y .btn declaran su propio display unas líneas más arriba: sin
   esto, el campo del teléfono y el botón de mandar se quedaban en pantalla
   después de confirmar, encima del mensaje de que ya se mandó. */
.ventana [hidden]{ display:none; }

/* La página no se traba mientras la ventana está abierta. Poner overflow:hidden
   en el body peleaba con el overflow-x:clip de arriba y dejaba el contenido a
   medio pintar; además en los iPhone ni siquiera detiene el scroll. La ventana
   va en position:fixed, así que si el fondo se mueve, ella se queda quieta. */
.ventana-caja{
  position:relative; width:100%; max-width:400px; text-align:left;
  display:flex; flex-direction:column; gap:1rem;
  background:var(--blanco); border:1px solid var(--beige); border-radius:var(--radio);
  padding:1.7rem 1.5rem 1.4rem; box-shadow:var(--sombra-alta);
  animation:entra .32s var(--ease-out) both;
}
.ventana-caja h3{ font-size:1.15rem; line-height:1.25; padding-right:2rem; }
.ventana-caja .detalle{ font-size:.9rem; color:var(--gris-suave); line-height:1.6; }
.ventana-x{
  position:absolute; top:.45rem; right:.55rem;
  width:36px; height:36px; border:0; border-radius:50%;
  background:transparent; color:var(--gris-suave);
  font-size:1.6rem; line-height:1; cursor:pointer;
}
.ventana-x:hover{ background:var(--tinta-velo); color:var(--tinta); }
.ventana-acciones{ display:flex; flex-direction:column; gap:.6rem; }
.ventana-listo{ font-size:.95rem; font-weight:600; line-height:1.55; color:var(--verde); }
.ventana-listo.es-espera{ color:#8A5D0F; }
@media (min-width:520px){
  .ventana-acciones{ flex-direction:row-reverse; justify-content:flex-start; }
  .ventana-acciones .btn{ flex:1; }
}
@media (prefers-reduced-motion: reduce){ .ventana-caja{ animation:none; } }

/* Lista de qué incluye / qué no — Claridad, sin letras chiquitas */
.incluye{ display:grid; gap:1rem; text-align:left; width:100%; }
.incluye > div{ background:var(--blanco); border:1px solid var(--beige); border-radius:var(--radio-sm); padding:1rem 1.2rem; }
.incluye h4{ font-size:.7rem; text-transform:uppercase; letter-spacing:.11em; margin-bottom:.6rem; font-weight:600; }
.incluye .si h4{ color:var(--verde); }
.incluye .no h4{ color:var(--rojo); }
.incluye ul{ list-style:none; padding:0; display:flex; flex-direction:column; gap:.4rem; }
.incluye li{ font-size:.87rem; line-height:1.45; padding-left:1.1rem; position:relative; }
.incluye .si li::before{ content:"\2713"; position:absolute; left:0; color:var(--verde); font-weight:700; }
.incluye .no li::before{ content:"\2715"; position:absolute; left:0; color:var(--rojo); font-weight:700; }

/* =============================================================
   8. EFECTOS
   ============================================================= */
.reveal{ opacity:0; transform:translateY(18px); transition:opacity .75s var(--ease-out), transform .75s var(--ease-out); }
.reveal.is-in{ opacity:1; transform:none; }
.reveal[data-retraso="1"]{ transition-delay:.08s; }
.reveal[data-retraso="2"]{ transition-delay:.16s; }
.reveal[data-retraso="3"]{ transition-delay:.24s; }
.reveal[data-retraso="4"]{ transition-delay:.32s; }

/* Red de seguridad: si el observer nunca dispara, el contenido igual se ve */
.no-js .reveal, .is-listo-forzado .reveal{ opacity:1; transform:none; }

/* Entrada del hero al cargar */
.hero-texto > *{ opacity:0; transform:translateY(16px); animation:entraHero .8s var(--ease-out) forwards; }
.hero-texto > *:nth-child(1){ animation-delay:.05s; }
.hero-texto > *:nth-child(2){ animation-delay:.13s; }
.hero-texto > *:nth-child(3){ animation-delay:.21s; }
.hero-texto > *:nth-child(4){ animation-delay:.29s; }
.hero-texto > *:nth-child(5){ animation-delay:.37s; }
.hero-foto{ opacity:0; animation:entraHero .95s var(--ease-out) .18s forwards; }
@keyframes entraHero{ to{ opacity:1; transform:none; } }

/* =============================================================
   9. RESPONSIVE (mobile-first)
   ============================================================= */
@media (min-width:540px){
  .opciones--3{ grid-template-columns:repeat(3,1fr); }
  .dupla{ grid-template-columns:1fr 1fr; }
  .final-acciones{ flex-direction:row; max-width:none; justify-content:center; }
  .incluye{ grid-template-columns:1fr 1fr; }
}

@media (min-width:720px){
  .puertas-grid{ grid-template-columns:repeat(3,1fr); }
  .cajas-panel{ grid-template-columns:290px 1fr; gap:3rem; }
  .cajas-dibujo svg{ width:280px; }
  .cajas-abajo{ grid-template-columns:1fr 1fr; }
  .evidencia-grid{ grid-template-columns:repeat(4,1fr); }
  .complementos{ grid-template-columns:1fr 1fr; }
  .pie-grid{ grid-template-columns:1.4fr 1fr 1fr; }
  .marca .lema{ display:block; }
  .opciones--2{ grid-template-columns:repeat(2,1fr); }
}

@media (min-width:960px){
  .nav{ display:flex; }
  .barra-movil{ display:none; }
  .pie{ padding-bottom:2.8rem; }
  html{ scroll-padding-top:96px; }

  .hero .contenedor{ grid-template-columns:1.15fr .85fr; }
  .servicio{ grid-template-columns:1fr 1fr; gap:3rem; }
  .servicio:nth-of-type(even) .servicio-foto{ order:-1; }
  .cot-layout{ grid-template-columns:1fr 320px; gap:2.5rem; }
  .resumen{ position:sticky; top:112px; }
  .pasos{ grid-template-columns:repeat(4,1fr); gap:1.4rem; }
  .paso{ grid-template-columns:1fr; gap:.5rem; }
  .paso .p-n{ padding-top:0; }
}

@media (min-width:1280px){
  .hero{ padding-block:clamp(3rem,6vw,5rem) 3.5rem; }
}

/* =============================================================
   10. MOVIMIENTO REDUCIDO
   Solo se apaga lo intrusivo. Los micro-movimientos (hover, tilt,
   reveal, barra de progreso) SIEMPRE corren: Windows trae esta
   preferencia activada de fábrica en muchas configuraciones y
   apagarlo todo dejaría el sitio muerto para esos usuarios.
   ============================================================= */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .hero-texto > *, .hero-foto{ animation-duration:.35s; }
  .paso-panel.is-activo, .final.is-activo{ animation-duration:.2s; }
  .ruta span{ transition-duration:.4s; }
}

/* Impresión — la cotización final debe poder imprimirse limpia */
@media print{
  .utilidad, .encabezado, .barra-movil, .progreso, .cot-nav, .estado-red, .final-acciones{ display:none !important; }
  body{ background:#fff; }
  .final{ display:flex !important; }
}

/* Dirección completa — CP, colonia, calle y número.
   El fieldset agrupa origen y destino para que en pantalla chica se lea
   dónde termina uno y empieza el otro; el borde va suave, no de formulario
   de gobierno. */
.dir{
  border:1.5px solid var(--beige); border-radius:var(--radio-sm);
  padding:1.1rem 1.1rem 1.2rem; display:flex; flex-direction:column; gap:1rem;
}
.dir legend{
  font-family:var(--texto); font-weight:600; font-size:.72rem;
  text-transform:uppercase; letter-spacing:.11em; color:var(--tinta);
  padding:0 .45rem;
}
.dir-grid{ display:grid; gap:1rem; }
.campo .opc{
  font-weight:400; letter-spacing:.04em; text-transform:none;
  color:var(--gris-suave); font-size:.72rem;
}
/* La zona resuelta por el CP: confirma sin gritar. */
.campo .ayuda.es-zona{ color:var(--verde); font-weight:500; }
.campo .ayuda.es-aviso{ color:var(--naranja); font-weight:500; }

/* Franja ya tomada. Se apaga y se dice que no está disponible, nada más:
   la agenda de Fletea no tiene por qué ser pública. */
.opcion[disabled]{
  opacity:.45; cursor:not-allowed; background:transparent;
}
.opcion[disabled]:hover{ transform:none; box-shadow:none; border-color:var(--beige); }

/* Complementos presentados como oferta: el gancho primero, el porqué
   después. Es el único momento del formulario en que el cliente ya se
   imaginó la mudanza y todavía no ve el precio. */
.opcion .o-gancho{
  font-family:var(--texto); font-weight:700; font-size:.78rem;
  text-transform:uppercase; letter-spacing:.08em; color:var(--naranja);
}
.opcion .o-remate{
  font-size:.76rem; color:var(--gris-suave); line-height:1.4;
  border-top:1px dashed var(--beige); margin-top:.35rem; padding-top:.35rem;
}

@media (min-width:720px){
  .dir-grid{ grid-template-columns:1fr 1fr; }
  .dir-grid--calle{ grid-template-columns:2fr 1fr 1fr; }
}