/* ==========================================================================
   SHU DESARROLLOS
   --------------------------------------------------------------------------
   Móvil primero: lo de aquí abajo es el móvil; las pantallas grandes se
   ajustan al final, en los @media.
   ========================================================================== */


/* ═══════════════════════════════ COLORES ═══════════════════════════════════
   Gris, blanco y el verde amarillento «ojo de gato», en degradado.

   ⚠️ REGLA DURA, medida: el verde luminoso como TEXTO sobre blanco da
   1,6:1 — ilegible (el mínimo es 4,5:1). Pero con texto gris oscuro
   ENCIMA da 8,6:1.

   Por eso el verde es SUPERFICIE, no tinta: no se escribe con él, se
   escribe sobre él. Cuando hace falta un verde de letra, es --oliva.
   ========================================================================== */
:root{
  /* El degradado: dorado → verde. El verde es EL DEL LOGO (#BDF410), para
     que la marca y la web sean el mismo color. Medido: 11,03:1 sobre gris
     oscuro y 12,24:1 con la tinta encima. */
  --oro:    #E8D40A;
  --verde:  #BDF410;
  --grad:   linear-gradient(100deg, var(--oro) 0%, #D3EA0D 45%, var(--verde) 100%);
  --oliva:  #556F13;   /* 5,48:1 sobre blanco — el único verde que sí es tinta */
  --verde-suave: rgba(85,111,19,.08);   /* tinte para fondos, sobre lo blanco */

  /* Grises y blanco */
  --fondo:    #FAFAF8;   /* el fondo de la página */
  --blanco:   #FDFDFC;   /* tarjetas y campos: un punto más claro que el fondo */
  --hueso:    #F1F1EC;   /* tinte suave para cajas destacadas sobre lo blanco */
  --tinta:    #22221F;   /* 15,26:1 sobre blanco */
  --carbon:   #2A2A28;   /* fondo de las secciones oscuras */
  --pie:      #1B1B19;   /* el pie, un punto más oscuro para separarlo */
  --gris:     #63635E;   /* 5,78:1 sobre blanco */
  --gris-cl:  #B4B4AD;   /* 6,90:1 sobre carbón */
  --borde:    #E4E4DF;   /* separadores */
  --borde-ui: #78786F;   /* bordes de campos: 3,80:1 sobre el fondo gris */

  --rojo:     #BE2F1C;   /* 5,66:1 sobre blanco — solo errores */
  --rojo-sv:  rgba(190,47,28,.07);

  /* Tipografía */
  /* Fraunces en vez de Bodoni: la Bodoni tiene los trazos finos tan finos que
     en pantalla pequeña desaparecen y los titulares no se leen. */
  --serif: 'Fraunces', Georgia, 'Times New Roman', serif;
  --sans:  'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  --r:    10px;
  --r-lg: 22px;
  --nav:  72px;
  --wrap: 1140px;
  --pad:  20px;
}


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

/* El JS oculta cosas con [hidden]; tiene que ganar siempre. */
[hidden]{ display:none !important; }

html{ scroll-behavior:smooth; scroll-padding-top:calc(var(--nav) + 12px); }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
}

body{
  margin:0; background:var(--fondo); color:var(--tinta);
  font-family:var(--sans); font-size:16px; line-height:1.65;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; }
button{ font:inherit; color:inherit; }

:focus-visible{ outline:3px solid var(--oliva); outline-offset:3px; border-radius:3px; }
.sec--oscuro :focus-visible,.pie :focus-visible{ outline-color:var(--verde); }

.wrap{ width:100%; max-width:var(--wrap); margin:0 auto; padding:0 var(--pad); }
.lista-limpia{ list-style:none; margin:0; padding:0; }

.saltar{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--tinta); color:var(--blanco); padding:12px 20px; border-radius:0 0 var(--r) 0;
}
.saltar:focus{ left:0; }


/* ══════════════════════════════ TIPOGRAFÍA ════════════════════════════════
   Bodoni Moda solo en tamaños grandes: es una serif de contraste muy alto y
   en pequeño se rompe. De 1.2rem para abajo, manda la sans. */
h1,h2{ font-family:var(--serif); font-weight:600; line-height:1.14; margin:0; letter-spacing:-.015em; }
h3,h4{ font-family:var(--sans); font-weight:600; line-height:1.25; margin:0; }
p{ margin:0; }


/* ═══════════════════════════════ BOTONES ══════════════════════════════════ */
.btn{
  position:relative; overflow:hidden;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:50px; padding:13px 24px;
  border:1.5px solid transparent; border-radius:100px;
  font-size:.95rem; font-weight:600; text-decoration:none; text-align:center;
  cursor:pointer;
  transition:transform .18s ease, box-shadow .3s ease, border-color .18s, color .18s, background-color .2s, background-position .5s ease;
}
/* El degradado como fondo, con la tinta oscura encima: 7,3–8,2:1.
   El color FLUYE solo, lento y sin parar (no hace falta pasar el ratón). */
.btn--verde{ background:var(--grad); background-size:230% 100%; color:var(--tinta);
  animation:fluyeBtn 7s ease-in-out infinite; box-shadow:0 6px 16px rgba(34,34,31,.10); }
/* Al pasar el ratón: elevación NEUTRA (no neón verde), se lee más premium. */
.btn--verde:hover{ transform:translateY(-3px); box-shadow:0 12px 28px rgba(34,34,31,.16); }
@keyframes fluyeBtn{ 0%{ background-position:0% 50%; } 50%{ background-position:100% 50%; } 100%{ background-position:0% 50%; } }
/* Un destello claro que barre el botón al pasar por encima. */
.btn--verde::after{
  content:''; position:absolute; top:0; left:-80%; width:55%; height:100%;
  background:linear-gradient(120deg, transparent, rgba(255,255,255,.6), transparent);
  transform:skewX(-20deg); pointer-events:none;
}
.btn--verde:hover::after{ animation:brillo .75s ease; }
@keyframes brillo{ from{ left:-80%; } to{ left:140%; } }
.btn--linea{ background:transparent; color:var(--tinta); border-color:var(--borde-ui); }
.btn--linea:hover{ transform:translateY(-3px); border-color:var(--tinta); background:rgba(34,34,31,.05); }
.sec--oscuro .btn--linea{ color:var(--blanco); border-color:rgba(250,250,248,.34); }
.sec--oscuro .btn--linea:hover{ border-color:var(--blanco); background:rgba(250,250,248,.08); }
/* Un pequeño empujón al pulsar, para que se note el clic. */
.btn:active{ transform:translateY(0) scale(.97); }
/* Botón bloqueado (p. ej. Enviar hasta aceptar la casilla): atenuado y sin efectos. */
.btn:disabled{ opacity:.5; cursor:not-allowed; }
.btn:disabled:hover{ transform:none; box-shadow:none; }
.btn--grande{ min-height:56px; padding:16px 30px; font-size:1rem; }
.btn--ancho{ width:100%; }


/* ═══════════════════════════════ CABECERA ═════════════════════════════════ */
.cab{
  position:fixed; top:0; left:0; right:0; z-index:100; height:var(--nav);
  /* Sólida a propósito: translúcida con desenfoque deja ver el texto pasando
     por debajo y en el móvil parpadea. */
  background:var(--fondo);
  border-bottom:1px solid transparent;
  transition:border-color .3s, box-shadow .28s ease, height .28s ease;
}
.cab.is-scroll{ border-bottom-color:var(--borde); box-shadow:0 6px 20px rgba(34,34,31,.06); }
.cab__in{ height:100%; display:flex; align-items:center; justify-content:space-between; }
.marca{ text-decoration:none; display:flex; align-items:center; }

/* En móvil el menú es un panel a pantalla completa */
.nav{
  position:fixed; inset:var(--nav) 0 0 0; background:var(--fondo);
  display:flex; flex-direction:column; justify-content:center; gap:4px;
  padding:0 var(--pad) 18vh; visibility:hidden; opacity:0;
  transition:opacity .25s, visibility .25s;
}
.nav.is-on{ visibility:visible; opacity:1; }
.nav a{
  font-family:var(--serif); font-size:1.7rem; text-decoration:none;
  padding:13px 0; border-bottom:1px solid var(--borde);
}
.nav__cta{ margin-top:20px; font-family:var(--sans); font-size:.95rem; border-bottom:0; }

.burger{ width:44px; height:44px; display:grid; place-content:center; gap:5px; background:none; border:0; cursor:pointer; }
.burger span{ display:block; width:23px; height:1.5px; background:var(--tinta); transition:transform .25s, opacity .25s; }
.burger.is-on span:nth-child(1){ transform:translateY(6.5px) rotate(45deg); }
.burger.is-on span:nth-child(2){ opacity:0; }
.burger.is-on span:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg); }


/* ═════════════════════════════════ PORTADA ════════════════════════════════ */
.hero{ padding:calc(var(--nav) + 64px) 0 60px; position:relative; overflow:hidden;
  /* Formas suaves de fondo que cruzan el banner (opción A): dan riqueza sin
     tocar la legibilidad —opacidades muy bajas— ni el peso —son CSS, sin imagen. */
  background:
    radial-gradient(46% 52% at 9% 92%, rgba(99,99,94,.06) 0%, transparent 68%),
    radial-gradient(38% 44% at 60% 6%, rgba(189,244,16,.05) 0%, transparent 70%),
    radial-gradient(50% 60% at 96% 78%, rgba(189,244,16,.05) 0%, transparent 72%);
}
/* Un resplandor muy suave del verde, para que la portada no sea plana */
.hero::before{
  content:''; position:absolute; top:-18%; right:-22%; width:76vw; height:76vw;
  max-width:620px; max-height:620px; border-radius:50%;
  background:radial-gradient(circle, rgba(189,244,16,.12) 0%, rgba(232,212,10,.05) 45%, transparent 70%);
  transform:translateY(var(--par,0)); will-change:transform; pointer-events:none;
}
/* Un par de formas redondeadas muy tenues detrás del contenido (como el boceto) */
.hero::after{
  content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(closest-side, rgba(99,99,94,.05), transparent) 6% 30% / 240px 200px no-repeat,
    radial-gradient(closest-side, rgba(99,99,94,.045), transparent) 52% 88% / 300px 220px no-repeat;
}
.hero__in{ position:relative; z-index:1; display:grid; gap:30px; }
/* La ilustración del hero (foto 1). En móvil va debajo del texto. */
.hero__media{ justify-self:center; width:100%; max-width:500px; }
.hero__img{ width:100%; height:auto; display:block; }
/* Entrada del hero en cascada (una vez, al cargar) + flotación muy suave de la
   ilustración. prefers-reduced-motion lo neutraliza globalmente (ver arriba). */
@keyframes heroUp{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } }
.hero__texto > *{ animation:heroUp .6s cubic-bezier(.22,1,.36,1) both; }
.hero__texto > *:nth-child(1){ animation-delay:.04s; }
.hero__texto > *:nth-child(2){ animation-delay:.12s; }
.hero__texto > *:nth-child(3){ animation-delay:.20s; }
.hero__texto > *:nth-child(4){ animation-delay:.28s; }
.hero__texto > *:nth-child(5){ animation-delay:.36s; }
.hero__media{ animation:heroUp .7s cubic-bezier(.22,1,.36,1) .30s both; }
@keyframes flotaY{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-7px); } }
.hero__img{ animation:flotaY 6s ease-in-out 1.1s infinite; }
.hero__kicker{
  font-size:.72rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase;
  color:var(--gris); margin-bottom:20px;
}
.hero__tit{ font-size:clamp(2.5rem, 11vw, 3.6rem); margin-bottom:22px; text-wrap:balance; }

/* El «ojo de gato»: el degradado va DETRÁS de la palabra, nunca como letra.
   Así el texto sigue siendo tinta oscura sobre el verde (7,3–8,2:1). */
.brilla{ position:relative; white-space:nowrap; }
.brilla::before{
  content:''; position:absolute; left:-.12em; right:-.12em; bottom:.04em; top:.14em;
  background:var(--grad); background-size:200% 100%; border-radius:.28em; z-index:-1;
  transform:rotate(-.7deg); animation:brillaFluye 8s ease-in-out infinite;
}
/* El verde del subrayado deriva muy despacio, dorado↔verde: da vida sin distraer. */
@keyframes brillaFluye{ 0%{ background-position:0% 50%; } 50%{ background-position:100% 50%; } 100%{ background-position:0% 50%; } }

.hero__sub{ font-size:1.06rem; color:var(--gris); max-width:54ch; margin-bottom:30px; }
.hero__cta{ display:flex; flex-direction:column; gap:12px; margin-bottom:24px; }

.garantia{
  display:inline-flex; align-items:flex-start; gap:10px;
  font-size:.9rem; color:var(--tinta); font-weight:500;
  background:var(--hueso); border:1px solid var(--borde);
  padding:12px 16px; border-radius:var(--r);
}
.garantia__ico{
  display:grid; place-content:center; flex-shrink:0; width:20px; height:20px;
  border-radius:50%; background:var(--grad); color:var(--tinta);
  font-size:.68rem; font-weight:700; margin-top:1px;
}

.zonas{
  display:flex; gap:11px; align-items:flex-start; margin-top:24px;
  font-size:.9rem; color:var(--gris); max-width:56ch;
}
.zonas b{ color:var(--tinta); }
.zonas__ico{ flex-shrink:0; font-size:1rem; margin-top:1px; }


/* ═══════════════════════════════ SECCIONES ════════════════════════════════ */
.sec{ padding:64px 0; }
/* Primera sección de una página interior: deja hueco bajo la barra fija */
.sec--interior{ padding-top:calc(var(--nav) + 46px); }
.sec--oscuro{ background:var(--carbon); color:var(--blanco); position:relative; overflow:hidden; }
/* Resplandor muy tenue que se desplaza al hacer scroll: da profundidad sin distraer. */
.sec--oscuro::before{
  content:''; position:absolute; top:-15%; right:-12%;
  width:52vw; height:52vw; max-width:480px; max-height:480px; border-radius:50%;
  background:radial-gradient(circle, rgba(189,244,16,.045) 0%, transparent 66%);
  transform:translateY(var(--par,0)); will-change:transform; pointer-events:none; z-index:0;
}
.sec--oscuro > .wrap{ position:relative; z-index:1; }
.sec__cab{ margin-bottom:38px; max-width:60ch; }
/* Intro a dos columnas en páginas interiores: texto + ilustración */
.intro{ display:grid; gap:26px; align-items:center; margin-bottom:40px; }
.intro .sec__cab{ margin-bottom:0; }
.intro__media{ justify-self:center; width:100%; max-width:420px; }
.intro__img{ width:100%; height:auto; display:block; }
.sec--oscuro .intro__img{ filter:drop-shadow(0 14px 30px rgba(0,0,0,.28)); }
.sec__cab--centro{ margin-left:auto; margin-right:auto; text-align:center; }
.sec__kicker{
  font-size:.7rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase;
  color:var(--oliva); margin-bottom:12px;
}
.sec--oscuro .sec__kicker{ color:var(--verde); }
.sec__tit{ font-size:clamp(1.9rem, 7vw, 2.6rem); margin-bottom:14px; text-wrap:balance; }
.sec__lead{ color:var(--gris); font-size:1.02rem; }
.sec--oscuro .sec__lead{ color:var(--gris-cl); }


/* ═══════════════════════ LO QUE VA EN TODAS ═══════════════════════════════ */
.rejilla{ display:grid; grid-template-columns:1fr; gap:26px; }
.pieza__tick{
  display:grid; place-content:center; width:26px; height:26px; margin-bottom:12px;
  border-radius:50%; background:var(--grad); color:var(--tinta);
  font-size:.75rem; font-weight:700;
  transition:transform .22s cubic-bezier(.22,1,.36,1);
}
/* Micro-reacción del tick al pasar el ratón por la pieza */
.pieza:hover .pieza__tick{ transform:scale(1.15) rotate(-6deg); }
.pieza__t{ font-size:1.02rem; margin-bottom:6px; }
.pieza__d{ font-size:.92rem; color:var(--gris); }
.sec--oscuro .pieza__d{ color:var(--gris-cl); }


/* ════════════════════════════ SELECTOR Y PANELES ══════════════════════════ */
.selector{
  position:relative; display:flex; gap:0; margin:0 auto 34px;
  background:var(--hueso); border:1px solid var(--borde);
  border-radius:100px; padding:5px; width:fit-content; max-width:100%;
}
.selector__b{
  position:relative; z-index:1; appearance:none; border:0; background:none;
  font-size:.88rem; font-weight:600; color:var(--gris);
  padding:11px 20px; border-radius:100px; cursor:pointer; white-space:nowrap;
  transition:color .22s;
}
.selector__b[aria-selected="true"]{ color:var(--tinta); }
/* La pastilla que se desliza por detrás del botón activo */
.selector__fondo{
  position:absolute; top:5px; bottom:5px; left:0; z-index:0;
  background:var(--grad); border-radius:100px;
  transition:transform .34s cubic-bezier(.4,0,.2,1), width .34s cubic-bezier(.4,0,.2,1);
}

.paneles{ position:relative; }
.panel__cab{ text-align:center; max-width:56ch; margin:0 auto 32px; }
.panel__tit{ font-family:var(--serif); font-weight:600; font-size:1.7rem; margin-bottom:10px; }
.panel__lead{ color:var(--gris); }

/* La animación de cambio de lado */
@keyframes entra-dcha{ from{ opacity:0; transform:translateX(34px); } to{ opacity:1; transform:none; } }
@keyframes entra-izda{ from{ opacity:0; transform:translateX(-34px); } to{ opacity:1; transform:none; } }
.entra-dcha{ animation:entra-dcha .34s cubic-bezier(.22,1,.36,1); }
.entra-izda{ animation:entra-izda .34s cubic-bezier(.22,1,.36,1); }

/* Lo específico de cada tipo de negocio */
.propio{ display:grid; grid-template-columns:1fr; gap:18px; margin-bottom:38px; }
.propio__it{
  background:var(--hueso); border:1px solid var(--borde);
  border-radius:var(--r); padding:20px;
}
.propio__t{ font-size:1rem; margin-bottom:6px; }
.propio__t::before{
  content:''; display:block; width:26px; height:3px; border-radius:2px;
  background:var(--grad); margin-bottom:11px;
}
.propio__d{ font-size:.9rem; color:var(--gris); }

/* Las tres tarjetas de nivel */
.niveles{ display:grid; grid-template-columns:1fr; gap:16px; }
.nivel{
  position:relative; background:var(--blanco); border:1px solid var(--borde);
  border-radius:var(--r-lg); padding:26px 22px;
  box-shadow:0 1px 3px rgba(34,34,31,.05), 0 12px 30px rgba(34,34,31,.05);
  display:flex; flex-direction:column;
  transition:transform .22s cubic-bezier(.22,1,.36,1), box-shadow .3s ease;
}
/* Al pasar el ratón, la tarjeta se eleva un poco (motion sutil) */
.nivel:hover{ transform:translateY(-5px);
  box-shadow:0 2px 6px rgba(34,34,31,.06), 0 26px 50px rgba(34,34,31,.11); }
.nivel--destacado{ border-color:var(--tinta); border-width:2px; }
.nivel__sello{
  position:absolute; top:-11px; left:22px;
  background:var(--grad); color:var(--tinta);
  font-size:.72rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  padding:4px 12px; border-radius:100px;
}
.nivel__nom{
  font-family:var(--serif); font-weight:600; font-size:1.35rem; margin-bottom:10px;
}
.nivel__precio{
  font-family:var(--serif); font-weight:600; font-size:2.5rem; line-height:1;
  font-variant-numeric:tabular-nums; margin-bottom:4px;
}
.nivel__cuota{
  display:block; font-family:var(--sans); font-size:.86rem; font-weight:500;
  color:var(--gris); margin-top:8px;
}
.nivel__extra{
  font-size:.84rem; color:var(--gris); padding:9px 12px; margin-top:12px;
  background:var(--hueso); border-radius:var(--r);
}
.nivel__extra b{ color:var(--tinta); }
/* Aviso de IVA en cada precio (no en mantenimiento) */
.nivel__iva{ display:block; font-family:var(--sans); font-size:.72rem; font-weight:400; color:var(--gris); margin-top:5px; letter-spacing:.02em; }
.nivel__resumen{ font-size:.92rem; color:var(--gris); margin:16px 0 14px; }
.nivel__items{ display:grid; gap:8px; margin-bottom:22px; font-size:.9rem; }
.nivel__items li{ display:flex; gap:9px; align-items:flex-start; }
.nivel__items span{ color:var(--oliva); font-weight:700; }
.nivel .btn{ margin-top:auto; }

/* El extra de reservas */
.extra{
  display:flex; flex-wrap:wrap; gap:14px; align-items:center; justify-content:space-between;
  margin-top:20px; padding:20px 22px;
  background:var(--hueso); border:1px dashed var(--borde-ui); border-radius:var(--r-lg);
}
.extra__t{ font-size:1rem; margin-bottom:4px; }
.extra__d{ font-size:.86rem; color:var(--gris); max-width:52ch; }
.extra__p{ font-family:var(--serif); font-size:1.6rem; line-height:1; white-space:nowrap; }
.extra__p span{ display:block; font-family:var(--sans); font-size:.8rem; color:var(--gris); margin-top:6px; }
.extra__p .extra__iva{ font-size:.72rem; font-weight:400; margin-top:3px; letter-spacing:.02em; }

.nota-precios{
  margin-top:26px; text-align:center; font-size:.86rem; color:var(--gris);
  max-width:62ch; margin-left:auto; margin-right:auto;
}


/* ══════════════════════════════ CÓMO TRABAJO ══════════════════════════════ */
.pasos{ display:grid; gap:0; }
.paso{
  display:flex; gap:18px; align-items:flex-start;
  padding:24px 18px; margin:0 -18px; border-radius:12px;
  border-top:1px solid rgba(250,250,248,.14);
  transition:background-color .3s ease, color .3s ease,
             transform .3s cubic-bezier(.34,1.45,.64,1), box-shadow .3s ease;
}
.paso:last-child{ border-bottom:1px solid rgba(250,250,248,.14); }
.paso__n{
  flex-shrink:0; width:38px; height:38px; display:grid; place-content:center;
  border:1px solid rgba(250,250,248,.3); border-radius:50%;
  font-family:var(--serif); font-size:1rem; font-variant-numeric:tabular-nums;
}
/* El paso que quita el miedo a pagar va marcado */
.paso--destacado .paso__n{ background:var(--grad); color:var(--tinta); border-color:transparent; }
.paso--destacado .paso__t{ color:var(--verde); }
.paso__t{ font-size:1.08rem; margin-bottom:7px; }
.paso__d{ font-size:.95rem; color:var(--gris-cl); max-width:64ch; }

/* Al pasar el ratón, el paso se vuelve una tarjeta blanca con letras oscuras
   (el verde del paso 4 se mantiene, en un tono que se lee sobre blanco). El
   cambio entra con un pequeño rebote, como una pulsación. */
.paso:hover{
  background:var(--blanco); color:var(--tinta);
  border-color:transparent; transform:scale(1.02);
  box-shadow:0 14px 34px rgba(0,0,0,.38);
}
.paso:hover .paso__t{ color:var(--tinta); }
.paso:hover .paso__d{ color:var(--gris); }
.paso:hover .paso__n{ color:var(--tinta); border-color:var(--tinta); }
.paso--destacado:hover .paso__t{ color:var(--verde); }
.paso--destacado:hover .paso__n{ background:var(--grad); color:var(--tinta); border-color:transparent; }


/* ══════════════════════════════ PREGUNTAS ═════════════════════════════════ */
.dudas{ max-width:78ch; }
.duda{ border-top:1px solid var(--borde); }
.duda:last-child{ border-bottom:1px solid var(--borde); }
/* OJO: el <summary> tiene que quedarse en display:block. Con display:flex,
   Safari (y el iPhone) dejan de abrir y cerrar el desplegable. El flex va
   en un <span> de dentro. */
.duda__p{
  display:block; padding:21px 2px; cursor:pointer; list-style:none;
  font-size:1.02rem; font-weight:600;
}
.duda__fila{
  display:flex; align-items:center; justify-content:space-between; gap:20px;
}
.duda__p::-webkit-details-marker{ display:none; }
.duda__p::marker{ content:''; }
.duda__p:hover{ color:var(--oliva); }
.duda__mas{ position:relative; flex-shrink:0; width:17px; height:17px; }
.duda__mas::before,.duda__mas::after{
  content:''; position:absolute; inset:50% 0 auto 0; height:2px; border-radius:2px;
  background:var(--oliva); transform:translateY(-50%); transition:transform .22s;
}
.duda__mas::after{ transform:translateY(-50%) rotate(90deg); }
.duda[open] .duda__mas::after{ transform:translateY(-50%) rotate(0); }
.duda__r{ padding:0 2px 22px; }
.duda__r p{ font-size:.95rem; color:var(--gris); max-width:72ch; }

/* Pregunta abierta: se resalta en oscuro con letras claras, para dar contraste
   y que la página no quede toda blanca. Al plegarla, vuelve a la normalidad. */
.duda{ transition:background-color .25s ease, color .25s ease; }
.duda[open]{
  background:var(--carbon); color:var(--blanco);
  border-color:transparent; border-radius:var(--r);
  padding:4px 20px; margin:8px 0;
}
.duda[open] .duda__p{ color:var(--blanco); }
.duda[open] .duda__p:hover{ color:var(--blanco); }
.duda[open] .duda__r p{ color:var(--gris-cl); }
.duda[open] .duda__mas::before,
.duda[open] .duda__mas::after{ background:var(--verde); }


/* ═══════════════════════════════ CONTACTO ═════════════════════════════════ */
.contacto{ display:grid; gap:34px; }
.directo{ display:flex; flex-direction:column; gap:10px; margin-top:24px; }
.directo__it{
  display:inline-flex; align-items:center; gap:10px;
  font-weight:600; text-decoration:none; font-size:.98rem;
  background:rgba(250,250,248,.06); border:1px solid rgba(250,250,248,.22);
  color:var(--blanco);
  padding:13px 18px; border-radius:var(--r); transition:border-color .2s, background .2s;
}
.directo__it:hover{ border-color:var(--verde); background:rgba(250,250,248,.1); }
/* Ilustración del bloque de contacto: transparente, sin marco, flotando sobre
   el gris oscuro con un resplandor verde muy suave detrás (como el hero). */
.contacto__foto{ width:100%; height:auto; display:block; margin-top:12px;
  filter:drop-shadow(0 14px 34px rgba(0,0,0,.30)); }

/* Los tres canales de contacto: el selector reutiliza el de precios, pero va
   sobre fondo oscuro y ocupa todo el ancho (tres pestañas, algunas largas). */
.selector--canales{ width:100%; margin-bottom:26px; }
.selector--canales .selector__b{ flex:1 1 0; white-space:normal; line-height:1.2; padding:11px 12px; }
.sec--oscuro .selector{ background:rgba(250,250,248,.06); border-color:rgba(250,250,248,.22); }
.sec--oscuro .selector__b{ color:var(--gris-cl); }
.sec--oscuro .selector__b[aria-selected="true"]{ color:var(--tinta); }  /* tinta oscura sobre el verde */
/* La casilla opcional del formulario de correo, sin el asterisco de obligatorio */
.opc{ font-weight:400; color:var(--gris); font-size:.8em; }
.sec--oscuro .opc{ color:var(--gris-cl); }
.canal__lead{ margin-bottom:18px; color:var(--gris); }
.sec--oscuro .canal__lead{ color:var(--gris-cl); }
.whats__btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; text-decoration:none; }

.form{ display:grid; gap:16px; }
.campo{ display:grid; gap:6px; }
.campo label{ font-size:.85rem; font-weight:600; }
.campo .req{ color:var(--oliva); font-style:normal; }
.campo input,.campo textarea{
  font:inherit; font-size:1rem;         /* 16px evita el zoom de iOS al enfocar */
  padding:13px 15px; border:1.5px solid var(--borde-ui); border-radius:var(--r);
  background:var(--blanco); color:var(--tinta); width:100%;
  transition:border-color .2s, box-shadow .2s;
}
.campo input:focus,.campo textarea:focus{ border-color:var(--oliva); box-shadow:0 0 0 3px rgba(85,111,19,.14); }

/* El formulario va sobre gris oscuro: campos oscuros con texto blanco.
   Medido: blanco s/#33332F = 12,14:1 · borde #88887F s/carbón = 4,02:1 */
.sec--oscuro .campo label{ color:var(--blanco); }
.sec--oscuro .campo .req{ color:var(--verde); }
.sec--oscuro .campo input,.sec--oscuro .campo textarea{
  background:#33332F; border-color:#88887F; color:var(--blanco);
}
.sec--oscuro .campo input::placeholder,.sec--oscuro .campo textarea::placeholder{ color:#9A9A93; }
.sec--oscuro .campo input:focus,.sec--oscuro .campo textarea:focus{ border-color:var(--verde); box-shadow:0 0 0 3px rgba(189,244,16,.16); }
.campo textarea{ min-height:130px; resize:vertical; }
/* El error no depende solo del color: borde de 2px y texto en negrita */
.campo--error input,.campo--error textarea{ border-color:var(--rojo); border-width:2px; }
.error{ font-size:.82rem; color:var(--rojo); font-weight:600; }

.consent{ display:flex; gap:11px; align-items:flex-start; font-size:.86rem; color:var(--gris); }
.consent input{ width:20px; height:20px; margin:2px 0 0; flex-shrink:0; accent-color:var(--oliva); }
.consent a{ color:var(--oliva); }
.sec--oscuro .consent{ color:var(--gris-cl); }
.sec--oscuro .consent a{ color:var(--verde); }
.sec--oscuro .consent input{ accent-color:var(--verde); }

/* Trampa antispam: invisible para las personas, la rellenan los robots */
.tarro{ position:absolute !important; left:-9999px; opacity:0; pointer-events:none; }

.aviso-form{ padding:13px 16px; border-radius:var(--r); font-size:.88rem; border:1px solid var(--borde); }
.aviso-form--ok{ background:rgba(85,111,19,.09); border-color:var(--oliva); color:var(--oliva); }
.aviso-form--mal{ background:var(--rojo-sv); border-color:var(--rojo); color:var(--rojo); font-weight:600; }
.aviso-form--prueba{ background:var(--hueso); color:var(--gris); }

/* Sobre oscuro el rojo cambia de tono: #FF8A7A da 6,28:1 sobre carbón */
.sec--oscuro .error{ color:#FF8A7A; }
.sec--oscuro .campo--error input,.sec--oscuro .campo--error textarea{ border-color:#FF8A7A; }
.sec--oscuro .aviso-form{ border-color:rgba(250,250,248,.22); }
.sec--oscuro .aviso-form--prueba{ background:rgba(250,250,248,.07); color:var(--gris-cl); }
.sec--oscuro .aviso-form--ok{ background:rgba(189,244,16,.12); border-color:var(--verde); color:var(--verde); }
.sec--oscuro .aviso-form--mal{ background:rgba(255,138,122,.12); border-color:#FF8A7A; color:#FF8A7A; }


/* ═════════════════════════════════ PIE ════════════════════════════════════ */
.pie{ background:var(--pie); color:var(--gris-cl); padding:52px 0 26px; font-size:.9rem; }
.pie__alto{ display:grid; gap:28px; padding-bottom:28px; border-bottom:1px solid rgba(250,250,248,.14); }
.pie__marca{ font-family:var(--serif); font-weight:600; font-size:1.3rem; color:var(--blanco); margin-bottom:12px; }
.pie__nap{ font-style:normal; line-height:1.9; }
.pie__nav{ display:flex; flex-wrap:wrap; gap:10px 22px; align-content:start; }
.pie__nav a{ text-decoration:none; border-bottom:1px solid transparent; }
.pie__nav a:hover{ border-color:var(--verde); color:var(--blanco); }
.pie__bajo{ padding-top:22px; font-size:.8rem; line-height:1.8; }
.pie__bajo a{ color:var(--gris-cl); }
.pie__iva{ margin-top:6px; color:var(--gris-cl); }


/* ═══════════════════════ BARRA FIJA DE MÓVIL ══════════════════════════════ */
.flotante{
  position:fixed; left:0; right:0; bottom:0; z-index:90;
  display:flex; gap:10px; padding:10px var(--pad) calc(10px + env(safe-area-inset-bottom));
  background:var(--fondo);
  border-top:1px solid var(--borde);
}
.flotante .btn{ flex:1; min-height:46px; font-size:.9rem; }
.flotante__wa{ background:#25D366; color:#062E14; border-color:#25D366; }
.flotante__wa:hover{ background:#1FB855; }
body{ padding-bottom:76px; }


/* ══════════════════════════════ APARICIÓN ═════════════════════════════════ */
.reveal{ opacity:0; transform:translateY(18px); transition:opacity .55s ease, transform .55s ease; }
.reveal.is-on{ opacity:1; transform:none; }
/* Cascada: dentro de un grupo, cada elemento entra un pelín después del anterior. */
.pieza:nth-child(2){ transition-delay:.06s; }
.pieza:nth-child(3){ transition-delay:.12s; }
.pieza:nth-child(4){ transition-delay:.18s; }
.pieza:nth-child(5){ transition-delay:.24s; }
.pieza:nth-child(6){ transition-delay:.30s; }
.pieza:nth-child(7){ transition-delay:.36s; }
.pieza:nth-child(8){ transition-delay:.42s; }
.premio:nth-child(2){ transition-delay:.10s; }
.premio:nth-child(3){ transition-delay:.20s; }
@media (prefers-reduced-motion: reduce){ .reveal{ opacity:1; transform:none; } }


/* ═════════════════════════════════════════════════════════════════════════
   TABLET — 700px
   ═════════════════════════════════════════════════════════════════════════ */
@media (min-width:700px){
  :root{ --pad:32px; }
  .hero{ padding:calc(var(--nav) + 88px) 0 78px; }
  .hero__cta{ flex-direction:row; }
  .sec{ padding:84px 0; }
  .rejilla{ grid-template-columns:repeat(2,1fr); gap:32px; }
  .propio{ grid-template-columns:repeat(3,1fr); }
  .niveles{ grid-template-columns:repeat(3,1fr); gap:18px; }
  .contacto{ grid-template-columns:1fr 1fr; gap:52px; align-items:start; }
  .form{ grid-template-columns:1fr 1fr; }
  .campo--ancho,.consent{ grid-column:1 / -1; }
  .directo{ flex-direction:row; flex-wrap:wrap; }
  .pie__alto{ grid-template-columns:1fr auto; gap:44px; }
}


/* ═════════════════════════════════════════════════════════════════════════
   DOS COLUMNAS — 860px (hero e intros: texto + ilustración lado a lado
   antes de llegar al escritorio, para que no se apilen en portátiles medianos)
   ═════════════════════════════════════════════════════════════════════════ */
@media (min-width:860px){
  .hero__in{ grid-template-columns:1.05fr .95fr; align-items:center; gap:44px; max-width:none; }
  .hero__media{ max-width:none; justify-self:end; }
  .intro{ grid-template-columns:1.1fr .9fr; gap:40px; align-items:center; }
  .intro__media{ justify-self:end; max-width:none; }
}


/* ═════════════════════════════════════════════════════════════════════════
   ESCRITORIO — 1000px
   ═════════════════════════════════════════════════════════════════════════ */
@media (min-width:1000px){
  :root{ --nav:92px; --pad:40px; }

  /* El menú deja de ser panel y pasa a barra */
  .burger{ display:none; }
  .nav{
    position:static; inset:auto; visibility:visible; opacity:1;
    flex-direction:row; align-items:center; gap:30px; padding:0; background:none;
  }
  .nav a{ font-family:var(--sans); font-size:.92rem; font-weight:500; padding:0; border:0; position:relative; }
  .nav a:not(.nav__cta)::after{
    content:''; position:absolute; left:0; right:0; bottom:-6px; height:2px; border-radius:2px;
    background:var(--grad); transform:scaleX(0); transform-origin:left; transition:transform .25s;
  }
  .nav a:not(.nav__cta):hover::after{ transform:scaleX(1); }
  .nav__cta{ margin:0; min-height:44px; padding:11px 20px; }

  .marca__img{ height:84px; }
  /* Al bajar, la barra se encoge un punto: sensación de app cuidada. */
  .cab.is-scroll{ height:72px; }
  .cab.is-scroll .marca__img{ transform:scale(.79); }   /* scale, no height: sin coste de layout */
  .sec{ padding:110px 0; }
  /* Hero más grande en pantalla ancha: si no, el contenido se ve pequeño
     y perdido en el centro. En móvil se queda como estaba. */
  .hero{ padding:calc(var(--nav) + 104px) 0 96px; }
  /* En pantalla ancha el hero crece un poco más (las 2 columnas ya vienen del
     bloque de 860px de más arriba) */
  .hero__tit{ font-size:clamp(3rem, 4.4vw, 4.6rem); }
  .hero__sub{ font-size:1.22rem; max-width:52ch; }
  .hero__in{ gap:56px; }
  .intro{ gap:52px; }
  .rejilla{ grid-template-columns:repeat(4,1fr); }   /* 8 piezas = 2 filas exactas */
  .paso{ gap:26px; padding:28px 18px; }

  /* En escritorio no hace falta la barra fija */
  .flotante{ display:none; }
  body{ padding-bottom:0; }
}


/* ═════════════════════════════════════════════════════════════════════════
   IMPRESIÓN — que se pueda imprimir el presupuesto
   ═════════════════════════════════════════════════════════════════════════ */
@media print{
  .cab,.nav,.flotante,.hero__cta,.form,.selector,.hero__media,.contacto__foto,.intro__media{ display:none !important; }
  body{ background:#fff; color:#000; padding:0; }
  .reveal{ opacity:1; transform:none; }
  .sec,.sec--oscuro{ background:#fff; color:#000; padding:16px 0; }
  .sec--oscuro .sec__tit,.sec--oscuro .paso__t,.sec--oscuro .pieza__t{ color:#000; }
  .panel[hidden]{ display:block !important; }   /* imprimir los dos lados */
  .nivel,.duda{ break-inside:avoid; }
  .duda__r{ display:block !important; }
}

/* Logo del pie (versión clara, sobre el gris oscuro) */
/* El logo del pie va sobre una pastilla clara: así se usa el original, sin
   recolorear, y la cajita de la H conserva su contraste. */
.pie__logo{
  height:62px; width:auto; margin-bottom:18px;
  background:var(--blanco); padding:14px 18px; border-radius:var(--r-lg);
}


/* ══════════════════════════ EL LOGO EN LA CABECERA ══════════════════════
   Va entero, con su órbita. La barra tiene que ser alta: la órbita hace que
   el dibujo sea casi cuadrado, así que las letras ocupan poca altura y por
   debajo de 92px de barra «desarrollos» deja de leerse. */
.marca{ display:flex; align-items:center; text-decoration:none; }
.marca__img{ height:62px; width:auto; transform-origin:left center; transition:transform .28s ease; }
.marca__txt{ font-family:var(--serif); font-size:1.2rem; font-weight:600; }


/* ═══════════════════════════ RECOMIÉNDAME ══════════════════════════════════
   Va sobre el verde de marca. Es el único sitio donde el degradado ocupa una
   sección entera, y es a propósito: es la oferta y tiene que parar el scroll.
   El texto va SIEMPRE en tinta oscura encima (10,5:1 en el peor punto). */
.sec--verde{ background:var(--grad); color:var(--tinta); }
.sec--verde .sec__kicker{ color:var(--tinta); opacity:.72; }
.sec--verde .sec__lead{ color:var(--tinta); opacity:.86; }

/* Los tres premios */
.premios{ display:grid; grid-template-columns:1fr; gap:14px; margin-bottom:26px; }
.premio{
  background:var(--blanco); border-radius:var(--r-lg); padding:24px 22px;
  text-align:center; display:flex; flex-direction:column; align-items:center;
}
.premio__nivel{ font-size:.82rem; color:var(--gris); line-height:1.45; }
.premio__nivel b{ display:block; font-size:1.06rem; color:var(--tinta); margin-top:2px; }
.premio__meses{
  font-family:var(--serif); font-weight:600; font-size:3.6rem; line-height:1;
  margin:12px 0 4px; font-variant-numeric:tabular-nums;
}
.premio__pie{ font-size:.8rem; font-weight:600; color:var(--gris); max-width:16ch; }

/* El vale, para quien no tiene mantenimiento */
.vale{
  background:rgba(34,34,31,.07); border:1px dashed rgba(34,34,31,.32);
  border-radius:var(--r-lg); padding:22px; margin-bottom:22px;
}
.vale__tit{ font-size:1.04rem; margin-bottom:8px; }
.vale__txt{ font-size:.93rem; max-width:70ch; }

/* La letra pequeña, dicha claro */
.condiciones{ display:grid; gap:7px; font-size:.84rem; max-width:74ch; }
.condiciones li{ display:flex; gap:9px; align-items:flex-start; opacity:.82; }
.condiciones span{ font-weight:700; }

@media (min-width:700px){
  .premios{ grid-template-columns:repeat(3,1fr); gap:18px; }
  .vale{ padding:26px 30px; }
}


/* ═══════════════════ OPCIONES DE MANTENIMIENTO ══════════════════════════
   Van debajo de las tarjetas de nivel: primero se elige la web, después
   cómo se lleva. */
.mant{ margin-top:38px; padding-top:34px; border-top:1px solid var(--borde); }
.mant__cab{ text-align:center; max-width:56ch; margin:0 auto 26px; }
.mant__tit{ font-family:var(--serif); font-weight:600; font-size:1.5rem; margin-bottom:9px; }
.mant__lead{ color:var(--gris); font-size:.95rem; }

.mant__ops{ display:grid; grid-template-columns:1fr; gap:16px; }
.mop{
  position:relative; background:var(--blanco); border:1px solid var(--borde);
  border-radius:var(--r-lg); padding:24px 22px;
  display:flex; flex-direction:column;
}
.mop--destacado{ border-color:var(--tinta); border-width:2px; }
.mop__sello{
  position:absolute; top:-11px; left:22px;
  background:var(--grad); color:var(--tinta);
  font-size:.72rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  padding:4px 12px; border-radius:100px;
}
.mop__nom{ font-size:1.02rem; margin-bottom:8px; }
.mop__precio{
  font-family:var(--serif); font-weight:600; font-size:2.1rem; line-height:1;
  font-variant-numeric:tabular-nums; margin-bottom:12px;
}
.mop__precio span{
  font-family:var(--sans); font-size:.82rem; font-weight:500;
  color:var(--gris); margin-left:3px;
}
.mop__resumen{ font-size:.9rem; color:var(--gris); margin-bottom:14px; }
.mop__items{ display:grid; gap:8px; font-size:.88rem; }
.mop__items li{ display:flex; gap:9px; align-items:flex-start; }
.mop__items span{ color:var(--oliva); font-weight:700; }

/* El aviso del plan sin mantenimiento: es importante y tiene que verse */
.mop__aviso{
  display:flex; gap:9px; align-items:flex-start; margin-top:14px;
  font-size:.84rem; color:var(--rojo); font-weight:500;
  background:var(--rojo-sv); border-radius:var(--r); padding:10px 12px;
}
.mop__aviso span{ font-weight:800; }

.mant__nota{
  margin-top:18px; text-align:center; font-size:.84rem; color:var(--gris);
  max-width:60ch; margin-left:auto; margin-right:auto;
}

@media (min-width:700px){
  .mant__ops{ grid-template-columns:repeat(3,1fr); gap:18px; }
}


/* ═══════════════════ TABLA DE COMPARACIÓN DEL MANTENIMIENTO ═════════════
   En su propia caja con scroll horizontal: en el móvil una tabla de cuatro
   columnas no cabe, y sin esto empujaría la página entera de lado. */
.comparar{ margin-top:28px; overflow-x:auto; -webkit-overflow-scrolling:touch; }
.comparar__tabla{
  width:100%; min-width:520px; border-collapse:collapse;
  background:var(--blanco); border:1px solid var(--borde); border-radius:var(--r-lg);
  overflow:hidden; font-size:.88rem;
}
.comparar__tabla th,.comparar__tabla td{
  padding:12px 14px; text-align:center; border-bottom:1px solid var(--borde);
}
.comparar__tabla tbody tr:last-child th,
.comparar__tabla tbody tr:last-child td{ border-bottom:0; }

/* La primera columna: qué es cada fila */
.comparar__tabla tbody th{
  text-align:left; font-weight:500; color:var(--tinta); width:38%;
}
.comparar__tabla thead th{
  font-family:var(--sans); font-weight:700; font-size:.86rem;
  background:var(--hueso); border-bottom:2px solid var(--borde);
  line-height:1.3;
}
.comparar__tabla thead th:first-child{ text-align:left; font-weight:600; color:var(--gris); }
.comparar__tabla thead th span{
  display:block; font-weight:600; font-size:.94rem; color:var(--oliva); margin-top:4px;
  font-variant-numeric:tabular-nums;
}
.comparar__tabla td{ color:var(--gris); font-variant-numeric:tabular-nums; white-space:pre-line; line-height:1.4; }

/* La columna del plan recomendado, marcada de arriba abajo */
.comparar__tabla .es-destacada{ background:var(--verde-suave); color:var(--tinta); font-weight:600; }
.comparar__tabla thead .es-destacada{ background:var(--grad); }
.comparar__tabla thead .es-destacada span{ color:var(--tinta); opacity:.75; }



/* ══════════════════════════════════════════════════════════════════════════
   CATÁLOGO: asistente, automatizaciones y calculadora del pack
   (los precios los pinta js/main.js desde CATALOGO)
   ══════════════════════════════════════════════════════════════════════════ */

/* Oculto a la vista, pero lo leen los lectores de pantalla */
.oculto{
  position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* Cuatro tarjetas de servicio (inicio y hub) y mantenimientos de dos opciones */
@media (min-width:700px){
  .niveles--4{ grid-template-columns:repeat(2,1fr); }
  .mant__ops--2{ grid-template-columns:repeat(2,1fr); max-width:760px; margin:0 auto; }
}
@media (min-width:1000px){
  .niveles--4{ grid-template-columns:repeat(4,1fr); }
}

/* Etiquetas de tamaño: «Con IA» y «Depende» */
.tam{
  display:inline-block; vertical-align:middle; font-family:var(--sans);
  font-size:.72rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  padding:3px 9px; border-radius:100px; line-height:1.4; white-space:nowrap;
}
.tam--ia{ background:var(--tinta); color:var(--verde); }        /* verde sobre gris oscuro: 11:1 */
.tam--depende{ border:1px dashed var(--borde-ui); color:var(--gris); }

/* Los tres tamaños explicados */
.tamanos{ display:grid; gap:14px; margin-bottom:40px; }
.tamano{
  background:var(--blanco); border:1px solid var(--borde); border-radius:var(--r-lg);
  padding:22px 22px 20px;
}
.tamano__nom{ font-size:1.02rem; margin-bottom:6px; }
.tamano__precio{ font-family:var(--serif); font-weight:600; font-size:2rem; line-height:1; margin:0 0 10px; font-variant-numeric:tabular-nums; }
.tamano__precio span{ display:block; font-family:var(--sans); font-size:.76rem; font-weight:400; color:var(--gris); margin-top:6px; }
.tamano__d{ font-size:.9rem; color:var(--gris); margin:0; }

/* Filtro por sector */
.filtro{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.filtro__tit{ font-size:.76rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--gris); margin-right:4px; }
.chip{
  font:inherit; font-size:.88rem; font-weight:500; min-height:40px; padding:7px 15px;
  border:1px solid var(--borde-ui); border-radius:100px; background:transparent; color:var(--tinta);
  cursor:pointer; transition:background-color .2s ease, border-color .2s ease, transform .2s ease;
}
.chip:hover{ border-color:var(--tinta); transform:translateY(-1px); }
.chip[aria-pressed="true"]{ background:var(--grad); border-color:transparent; font-weight:700; }
.filtro__cuenta{ font-size:.86rem; color:var(--gris); margin:12px 0 26px; }

/* Grupos y fichas */
.grupo{ margin-bottom:44px; }
.grupo__cab{ display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 14px; margin-bottom:16px; }
.grupo__tit{ font-family:var(--serif); font-weight:600; font-size:1.45rem; margin:0; }
.grupo__sub{ color:var(--gris); font-size:.95rem; margin:0; }
.fichas{ display:grid; gap:14px; }
.ficha{
  display:flex; flex-direction:column; gap:12px;
  background:var(--blanco); border:1px solid var(--borde); border-radius:var(--r-lg); padding:22px;
  box-shadow:0 1px 3px rgba(34,34,31,.05);
  transition:transform .22s cubic-bezier(.22,1,.36,1), box-shadow .3s ease;
}
.ficha:hover{ transform:translateY(-3px); box-shadow:0 2px 6px rgba(34,34,31,.06), 0 18px 36px rgba(34,34,31,.09); }
.ficha--depende{ border-style:dashed; border-color:var(--borde-ui); box-shadow:none; }
.ficha__cab{ display:flex; justify-content:space-between; align-items:flex-start; gap:12px; }
.ficha__t{ font-size:1.02rem; margin:0; }
.ficha__et{ display:flex; align-items:center; gap:8px; flex-shrink:0; margin:0; }
.ficha__precio{ font-family:var(--serif); font-weight:600; font-size:1.3rem; white-space:nowrap; font-variant-numeric:tabular-nums; }
.flujo{ margin:0; display:grid; gap:8px; }
.flujo div{ display:grid; grid-template-columns:5.4rem 1fr; gap:8px; font-size:.92rem; }
.flujo dt{ font-size:.72rem; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--oliva); line-height:1.9; }
.flujo dd{ margin:0; }
.ficha__ej{
  margin:0; font-size:.87rem; padding:10px 12px; background:var(--hueso);
  border-radius:var(--r); border-left:3px solid var(--verde);
}
.ficha__ej b{ font-weight:700; }
.ficha__con{ margin:auto 0 0; font-size:.82rem; color:var(--gris); }
.ficha__con span{ font-weight:700; color:var(--tinta); }
.fichas__vacio{ color:var(--gris); text-align:center; padding:30px 0; }
@media (min-width:700px){
  .tamanos{ grid-template-columns:repeat(3,1fr); }
  .fichas{ grid-template-columns:repeat(2,1fr); }
}
@media (min-width:1000px){ .fichas{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:520px){ .flujo div{ grid-template-columns:1fr; gap:0; } }

/* Lo que depende y lo que no hacemos (sobre fondo oscuro) */
.limites{ display:grid; gap:16px; max-width:820px; }
.limites li{ display:grid; grid-template-columns:auto 1fr; gap:10px 14px; align-items:start; }
.limites p{ margin:0; font-size:.95rem; color:var(--gris-cl); }
.limites strong{ display:block; color:var(--blanco); margin-bottom:2px; }
.estado{
  font-size:.72rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  padding:4px 10px; border-radius:100px; white-space:nowrap; margin-top:2px;
}
.estado--depende{ background:rgba(232,212,10,.14); color:var(--oro); }   /* 10:1 sobre carbón */
.estado--no{ background:rgba(255,138,122,.13); color:#FF8A7A; }           /* el rojo de los errores sobre oscuro */

/* ── Calculadora del pack ─────────────────────────────────────────────── */
.calc{ display:grid; gap:34px; align-items:start; }
.calc__form{ min-width:0; }
.paso-pack{ border:0; margin:0 0 34px; padding:0; min-width:0; }
.paso-pack__tit{
  display:flex; align-items:center; gap:12px; padding:0; margin-bottom:16px;
  font-family:var(--serif); font-weight:600; font-size:1.4rem;
}
.paso-pack__tit span{
  width:34px; height:34px; border-radius:50%; display:grid; place-content:center;
  background:var(--grad); font-family:var(--sans); font-size:.95rem; font-weight:700;
}
.paso-pack__grupo{ font-size:.76rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--gris); margin:18px 0 8px; }
.paso-pack__nota{ font-size:.84rem; color:var(--gris); margin:12px 0 0; }
.tipo-pack{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:12px; }
.ops{ display:grid; gap:10px; }

/* Cada opción es un radio o una casilla de verdad, con su caja encima */
.op{ position:relative; display:block; cursor:pointer; }
.op input{ position:absolute; opacity:0; width:1px; height:1px; }
.op__caja{
  display:grid; gap:2px; height:100%; padding:14px 16px 14px 48px; position:relative;
  background:var(--blanco); border:1px solid var(--borde); border-radius:var(--r);
  transition:border-color .2s ease, background-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
/* El círculo (radio) o el cuadrado (casilla) de la izquierda */
.op__caja::before{
  content:''; position:absolute; left:16px; top:16px; width:20px; height:20px;
  border:2px solid var(--borde-ui); border-radius:50%; background:var(--blanco);
  transition:background-color .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.op--check .op__caja::before{ border-radius:6px; top:50%; margin-top:-10px; }
.op:hover .op__caja{ border-color:var(--borde-ui); transform:translateY(-1px); }
.op input:checked + .op__caja{ border-color:var(--tinta); background:var(--verde-suave); box-shadow:inset 0 0 0 1px var(--tinta); }
.op input:checked + .op__caja::before{ border-color:var(--tinta); background:var(--tinta); box-shadow:inset 0 0 0 4px var(--blanco); }
.op--check input:checked + .op__caja::before{
  background:var(--grad); box-shadow:none;
  content:'✓'; display:grid; place-content:center; font-size:.8rem; font-weight:800; color:var(--tinta);
}
.op input:focus-visible + .op__caja{ outline:3px solid var(--oliva); outline-offset:2px; }
.op--check .op__caja{ display:flex; justify-content:space-between; align-items:center; gap:10px; }
.op__nom{ font-weight:600; font-size:.95rem; }
.op__precio{ font-family:var(--serif); font-weight:600; font-size:1.15rem; white-space:nowrap; font-variant-numeric:tabular-nums; }
.op__precio small{ font-family:var(--sans); font-size:.78rem; font-weight:500; color:var(--gris); }
.op__nota{ font-size:.84rem; color:var(--gris); }
.op--mini .op__caja{ padding:8px 16px 8px 40px; border-radius:100px; }
.op--mini .op__caja::before{ left:14px; top:50%; margin-top:-9px; width:18px; height:18px; }
.op--off{ cursor:not-allowed; }
.op--off .op__caja{ opacity:.5; }
.op--off:hover .op__caja{ transform:none; }

.sueltos{ display:grid; gap:8px; margin-top:12px; }
.suelto{
  display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap;
  padding:10px 14px; background:var(--hueso); border-radius:var(--r); font-weight:600; font-size:.92rem;
}
.suelto select{
  font:inherit; font-weight:500; font-size:.9rem; padding:8px 10px; min-height:40px;
  border:1px solid var(--borde-ui); border-radius:8px; background:var(--blanco); color:var(--tinta);
}

/* El resumen: tarjeta oscura que acompaña al bajar en el ordenador */
.resumen{
  background:var(--carbon); color:var(--blanco); border-radius:var(--r-lg); padding:26px 24px;
  box-shadow:0 18px 44px rgba(34,34,31,.18);
}
.resumen__tit{ font-family:var(--serif); font-weight:600; font-size:1.45rem; margin-bottom:14px; }
.resumen__lineas li{
  display:flex; justify-content:space-between; gap:14px; padding:8px 0; font-size:.9rem;
  color:var(--gris-cl); border-bottom:1px solid rgba(250,250,248,.1); font-variant-numeric:tabular-nums;
}
.resumen__lineas li span:last-child{ white-space:nowrap; color:var(--blanco); }
.resumen__vacio{ justify-content:center !important; }
.resumen__dto{ display:flex; justify-content:space-between; gap:14px; margin:12px 0 0; font-weight:700; color:var(--verde); }
.resumen__total p{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; margin:16px 0 0; }
.resumen__et{ font-size:.82rem; color:var(--gris-cl); }
.resumen__n{ font-family:var(--serif); font-weight:600; font-size:2rem; line-height:1; white-space:nowrap; font-variant-numeric:tabular-nums; }
.resumen__n small{ font-family:var(--sans); font-size:.85rem; font-weight:500; color:var(--gris-cl); }
.resumen__avisos{ display:grid; gap:8px; margin-top:18px; }
.resumen__avisos li{
  font-size:.86rem; padding:9px 12px; border-left:3px solid var(--verde);
  background:rgba(189,244,16,.08); border-radius:0 8px 8px 0;
}
.resumen__nota{ font-size:.78rem; color:var(--gris-cl); margin:18px 0 16px; }
.resumen__copiar{
  display:block; margin:12px auto 0; padding:6px; font:inherit; font-size:.86rem;
  background:none; border:0; color:var(--verde); text-decoration:underline; text-underline-offset:3px; cursor:pointer;
}
.resumen__min{ font-size:.76rem; color:var(--gris-cl); text-align:center; margin:10px 0 0; }
.btn--off{ opacity:.5; cursor:not-allowed; }

/* Los tramos del descuento */
.tramos{ display:grid; gap:14px; max-width:860px; margin:0 auto; }
.tramo{
  text-align:center; padding:26px 20px; border:1px solid rgba(250,250,248,.18); border-radius:var(--r-lg);
}
.tramo__pct{ display:block; font-family:var(--serif); font-weight:600; font-size:2.8rem; line-height:1; color:var(--verde); }
.tramo__rango{ display:block; margin-top:10px; color:var(--gris-cl); font-size:.92rem; }

/* La barra del móvil con los totales del pack */
.barra-pack{
  position:fixed; left:0; right:0; bottom:0; z-index:40;
  display:flex; justify-content:space-between; align-items:center; gap:12px;
  padding:10px var(--pad) calc(10px + env(safe-area-inset-bottom, 0px));
  background:var(--carbon); color:var(--blanco); box-shadow:0 -8px 24px rgba(0,0,0,.18);
}
.barra-pack p{ margin:0; font-size:.9rem; font-variant-numeric:tabular-nums; }
.barra-pack b{ font-family:var(--serif); font-size:1.15rem; }
.barra-pack span{ color:var(--gris-cl); font-size:.8rem; }
.barra-pack .btn{ min-height:42px; padding:9px 16px; font-size:.88rem; }
body.con-barra{ padding-bottom:78px; }

@media (min-width:700px){
  .ops{ grid-template-columns:repeat(2,1fr); }
  .tramos{ grid-template-columns:repeat(3,1fr); }
}
@media (min-width:1000px){
  .calc{ grid-template-columns:minmax(0,1fr) 360px; gap:44px; }
  .resumen{ position:sticky; top:calc(var(--nav) + 20px); }
  .barra-pack{ display:none; }
  body.con-barra{ padding-bottom:0; }
}
@media print{ .barra-pack,.resumen__copiar,.chip{ display:none !important; } }



/* ══════════════════════════════════════════════════════════════════════════
   REDISEÑO (oct 2026) — estilo «Nueva portada SHU», cada cosa en su página.
   Va al final a propósito: ajusta lo de arriba sin tocarlo. Mismos colores
   medidos; más grande, más contraste y con piezas vivas (escenas, banda,
   pegatinas). Fuente visual: docs/bocetos/web-shu-completa.html
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Tipografía con más carácter ── */
h1,h2{ font-weight:700; letter-spacing:-.025em; line-height:1.04; }
.sec__tit{ font-size:clamp(2.1rem, 5.4vw, 3.4rem); margin-bottom:16px; }
.sec__kicker{ display:flex; align-items:center; gap:10px; font-size:.74rem; font-weight:800; letter-spacing:.16em; text-transform:uppercase; }
.sec__kicker::before{ content:''; width:28px; height:3px; border-radius:3px; background:var(--grad); flex:none; }
.hero__tit{ font-size:clamp(2.8rem, 8vw, 5.8rem); line-height:1.02; }
.hero__tit em, .sec__tit em{ font-style:italic; font-weight:600; }
.sec--oscuro .sec__tit em{ color:var(--verde); }
.g{ color:var(--gris); } .sec--oscuro .g{ color:var(--gris-cl); }

/* ── Botones ── */
.btn{ font-weight:800; }
.btn--oscuro{ background:var(--tinta); color:var(--verde); }
.btn--oscuro:hover{ transform:translateY(-3px); box-shadow:0 14px 30px rgba(34,34,31,.25); }
.btn--linea{ border-width:2px; border-color:var(--tinta); }

/* ── Sin la barra fija de abajo: ahora está la burbuja del asistente ── */
body{ padding-bottom:0; }

/* ══════════════════════ CABECERA con desplegable ════════════════════════ */
.nav a[aria-current="page"], .nav a.on{ color:var(--oliva); }
.drop{ position:relative; }
.sub{ display:grid; gap:2px; padding:0 0 8px 14px; }
.sub a{ display:flex; align-items:center; gap:12px; font-family:var(--sans); font-size:1rem; font-weight:700; padding:9px 0; border-bottom:0; }
.sub .ico{ width:32px; height:32px; border-radius:9px; }
.sub .ico svg{ width:16px; height:16px; }
@media (min-width:1000px){
  .nav{ gap:8px; }
  .nav > a:not(.nav__cta), .drop__a{ padding:8px 12px !important; border-radius:100px; transition:background-color .2s; }
  .nav > a:not(.nav__cta):hover, .drop__a:hover, .nav a.on{ background:var(--hueso); }
  .nav a:not(.nav__cta)::after{ display:none; }
  .drop__a::after{ content:' ▾'; font-size:.75em; }
  .sub{ position:absolute; top:calc(100% + 8px); left:0; min-width:250px; padding:8px; display:none;
    background:var(--blanco); border:1px solid var(--borde); border-radius:16px; box-shadow:0 22px 44px rgba(34,34,31,.13); }
  .sub::before{ content:''; position:absolute; left:0; right:0; top:-10px; height:10px; }
  .drop:hover .sub, .drop:focus-within .sub{ display:grid; }
  .sub a{ padding:8px 10px; border-radius:10px; font-size:.92rem; }
  .sub a:hover, .sub a[aria-current="page"]{ background:var(--hueso); }
}

/* ══════════════════════ PIEZAS COMUNES ══════════════════════════════════ */
.ico{ width:40px; height:40px; flex:none; border-radius:12px; background:var(--grad); display:grid; place-content:center; }
.ico svg{ width:20px; height:20px; stroke:var(--tinta); fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }

/* Migas de pan */
.migas{ font-size:.8rem; font-weight:700; color:var(--gris); margin-bottom:18px; display:flex; gap:8px; flex-wrap:wrap; }
.migas a{ text-decoration:none; } .migas a:hover{ color:var(--oliva); }

/* Pegatina girada */
.pega{ position:absolute; width:118px; height:118px; border-radius:50%; background:var(--tinta); color:var(--verde);
  display:grid; place-content:center; text-align:center; font-weight:800; font-size:.7rem; line-height:1.15; letter-spacing:.04em;
  text-transform:uppercase; transform:rotate(-12deg); box-shadow:0 14px 30px rgba(34,34,31,.25); z-index:3; pointer-events:none; }
.pega b{ display:block; font-family:var(--serif); font-size:1.45rem; letter-spacing:-.02em; text-transform:none; color:var(--blanco); }
.pega--v{ background:var(--grad); color:var(--tinta); } .pega--v b{ color:var(--tinta); }

/* Portada: «SHU» gigante de marca de agua */
.hero__marca{ position:absolute; right:-2%; top:-2%; z-index:0; pointer-events:none; user-select:none;
  font-family:var(--serif); font-weight:800; font-size:clamp(12rem, 32vw, 28rem); line-height:1; letter-spacing:-.06em; color:var(--hueso); }
.hero--serv{ padding-bottom:70px; }
.hero--serv .hero__tit{ font-size:clamp(2.6rem, 7vw, 5rem); }

/* Banda verde con texto en movimiento */
.marquesina{ background:var(--grad); overflow:hidden; border-block:3px solid var(--tinta); transform:rotate(-1.2deg);
  margin:8px -10px 26px; position:relative; z-index:5; }
.marquesina__pista{ display:flex; width:max-content; animation:marquesina 30s linear infinite; }
.marquesina span{ font-family:var(--serif); font-weight:800; font-size:clamp(1.7rem, 4.5vw, 3.1rem); padding:14px 22px; white-space:nowrap; letter-spacing:-.02em; }
.marquesina i{ font-style:normal; margin-left:22px; }
@keyframes marquesina{ to{ transform:translateX(-50%); } }

/* Tarjetas de servicio con escena */
.servs{ display:grid; gap:22px; }
@media (min-width:820px){ .servs{ grid-template-columns:1fr 1fr; } }
.serv{ position:relative; background:var(--blanco); border:1px solid var(--borde); border-radius:var(--r-lg); overflow:hidden;
  display:flex; flex-direction:column; text-decoration:none; color:var(--tinta);
  box-shadow:0 1px 3px rgba(34,34,31,.05), 0 16px 38px rgba(34,34,31,.07);
  transition:transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s; }
.serv:hover{ transform:translateY(-6px) rotate(-.4deg); box-shadow:0 2px 6px rgba(34,34,31,.06), 0 30px 60px rgba(34,34,31,.13); }
.serv .esc{ height:230px; }
.serv__txt{ padding:24px 26px 26px; display:flex; flex-direction:column; gap:10px; flex:1; }
.serv__tit{ font-family:var(--serif); font-weight:700; font-size:2rem; letter-spacing:-.02em; line-height:1.05; }
.serv__pie{ display:flex; justify-content:space-between; align-items:center; gap:12px; margin-top:auto; padding-top:8px; }
.serv__desde{ font-family:var(--serif); font-weight:700; font-size:1.25rem; font-variant-numeric:tabular-nums; }
.serv__desde small{ font-family:var(--sans); font-size:.72rem; font-weight:700; color:var(--gris); text-transform:uppercase; letter-spacing:.08em; margin-right:4px; }
.mas{ font-weight:800; font-size:.92rem; display:inline-flex; gap:8px; align-items:center; }
.mas span{ width:34px; height:34px; border-radius:50%; background:var(--tinta); color:var(--verde); display:grid; place-content:center; transition:transform .25s; }
.serv:hover .mas span, .trabajo:hover .mas span{ transform:translateX(4px) rotate(-45deg); }

/* Sectores en pastilla */
.sectores{ display:flex; flex-wrap:wrap; gap:12px; }
.sector{ display:inline-flex; align-items:center; gap:12px; border:2px solid var(--tinta); border-radius:100px; padding:8px 20px 8px 8px;
  text-decoration:none; font-weight:800; transition:background-color .2s, transform .2s; }
.sector:hover{ background:var(--verde); transform:rotate(-2deg); }
.sector .ico{ border-radius:50%; width:36px; height:36px; }

/* Bloque verde del final */
.final-sec{ padding:30px 0 0; }
.final{ position:relative; overflow:hidden; background:var(--grad); border-radius:32px; padding:clamp(34px, 6vw, 64px); }
.final__tit{ font-size:clamp(2.3rem, 6.4vw, 4.4rem); max-width:14ch; margin-bottom:14px; }
.final__txt{ max-width:46ch; font-weight:600; margin-bottom:24px; }
.final .pega{ right:6%; top:50%; transform:translateY(-50%) rotate(10deg); width:150px; height:150px; }
@media (max-width:760px){ .final .pega{ display:none; } }

/* Pie con columnas */
.pie{ margin-top:84px; padding-top:56px; }
.pie__alto{ grid-template-columns:1fr; }
.pie__nav{ display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:26px; }
.pie__tit{ color:var(--blanco); font-weight:800; margin-bottom:10px; }
.pie__col ul{ list-style:none; margin:0; padding:0; display:grid; gap:6px; }
.pie__lema{ margin:10px 0 6px; }
.pie__redes{ margin-top:10px; display:flex; gap:12px; }
.pie__gigante{ font-family:var(--serif); font-weight:800; font-size:clamp(3.6rem, 14vw, 10.5rem); line-height:.85;
  color:#262624; letter-spacing:-.05em; margin-top:30px; user-select:none; white-space:nowrap; overflow:hidden; }
@media (min-width:860px){ .pie__alto{ grid-template-columns:1.1fr 2fr; gap:44px; } }

/* ══════════════════════ ESCENAS («Así funciona») ════════════════════════ */
.esc{ position:relative; overflow:hidden; background:var(--carbon); }
.esc-etq{ position:absolute; top:14px; left:14px; z-index:4; background:rgba(27,27,25,.78); color:var(--blanco); font-size:.68rem;
  font-weight:800; letter-spacing:.1em; text-transform:uppercase; padding:5px 10px; border-radius:100px; display:flex; gap:6px; align-items:center; }
.esc-etq::before{ content:''; width:7px; height:7px; border-radius:50%; background:var(--verde); }
@keyframes escParpadeo{ 0%,100%{ opacity:.3; } 50%{ opacity:1; } }
/* navegador */
.esc-nav{ height:22px; background:var(--hueso); display:flex; align-items:center; gap:5px; padding-inline:10px; }
.esc-nav i{ width:7px; height:7px; border-radius:50%; background:#cfcfc8; }
.esc-nav span{ margin-left:10px; font-size:.62rem; color:var(--gris); font-weight:600; }
.esc-web{ padding:14px; animation:escScroll 11s ease-in-out infinite; }
.esc-h{ height:58px; border-radius:8px; background:linear-gradient(120deg,#2A2A28,#3d3d38); margin-bottom:10px; position:relative; }
.esc-h::after{ content:''; position:absolute; left:14px; top:16px; width:46%; height:10px; border-radius:4px; background:var(--verde); box-shadow:0 16px 0 -2px #8d8d86; }
.esc-fila{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-bottom:10px; }
.esc-fila div{ height:56px; border-radius:7px; background:var(--hueso); }
.esc-fila div:nth-child(2){ background:rgba(189,244,16,.35); }
.esc-linea{ height:8px; border-radius:4px; background:#e6e6e0; margin-bottom:7px; }
.esc-linea--c{ width:60%; }
.esc-mapa{ height:70px; border-radius:7px; background:repeating-linear-gradient(45deg,#ecece6 0 6px,#f3f3ee 6px 12px); margin:10px 0; }
@keyframes escScroll{ 0%,12%{ transform:translateY(0); } 45%,58%{ transform:translateY(-160px); } 88%,100%{ transform:translateY(0); } }
.esc-navegador{ position:absolute; left:8%; right:8%; top:34px; bottom:-20px; background:var(--blanco); border-radius:10px; overflow:hidden; }
.esc-cursor{ position:absolute; width:16px; height:16px; z-index:3; animation:escCursor 7s ease-in-out infinite; }
.esc-cursor::before{ content:''; position:absolute; inset:0; background:var(--tinta); clip-path:polygon(0 0,0 100%,30% 72%,52% 100%,64% 94%,44% 66%,80% 66%); }
@keyframes escCursor{ 0%{ left:30%; top:60%; } 30%{ left:62%; top:42%; } 45%{ left:62%; top:42%; transform:scale(.85); } 50%{ transform:scale(1); } 75%{ left:40%; top:75%; } 100%{ left:30%; top:60%; } }
/* móvil con chat */
.esc-movil{ width:178px; height:330px; background:var(--tinta); border-radius:28px; padding:9px; box-shadow:0 30px 60px rgba(34,34,31,.3); }
.esc-pant{ background:#F6F6F2; border-radius:21px; height:100%; overflow:hidden; display:flex; flex-direction:column; }
.esc-chatcab{ background:var(--carbon); color:var(--blanco); font-size:.62rem; font-weight:700; padding:12px 10px 8px; display:flex; gap:7px; align-items:center; }
.esc-chatcab i{ width:18px; height:18px; border-radius:50%; background:var(--grad); flex:none; }
.esc-chatcab small{ display:block; color:var(--verde); font-weight:600; }
.esc-burbujas{ flex:1; display:flex; flex-direction:column; justify-content:flex-end; gap:6px; padding:10px 8px; overflow:hidden; }
.esc-b{ max-width:84%; font-size:.66rem; line-height:1.35; padding:7px 9px; border-radius:12px; opacity:0; transform:translateY(8px); transition:opacity .35s, transform .35s; }
.esc-b.ver{ opacity:1; transform:none; }
.esc-b--cli{ align-self:flex-end; background:var(--grad); border-bottom-right-radius:4px; }
.esc-b--bot{ align-self:flex-start; background:var(--blanco); border:1px solid var(--borde); border-bottom-left-radius:4px; }
.esc-b--escribe{ align-self:flex-start; background:var(--blanco); border:1px solid var(--borde); display:flex; gap:3px; padding:9px 10px; }
.esc-b--escribe span{ width:5px; height:5px; border-radius:50%; background:var(--gris-cl); animation:escParpadeo 1s infinite; }
.esc-b--escribe span:nth-child(2){ animation-delay:.15s; } .esc-b--escribe span:nth-child(3){ animation-delay:.3s; }
.esc--chat{ display:grid; place-items:center; }
.esc--chat .esc-movil{ width:170px; height:290px; margin-top:40px; box-shadow:none; }
/* portada: portátil + móvil */
.esc--portada{ background:none; overflow:visible; min-height:400px; }
.esc-portatil{ position:absolute; left:0; right:12%; top:20px; background:var(--tinta); border-radius:16px 16px 6px 6px; padding:10px 10px 18px; box-shadow:0 30px 60px rgba(34,34,31,.22); }
.esc-portatil::after{ content:''; position:absolute; left:-5%; right:-5%; bottom:-12px; height:14px; background:#3a3a36; border-radius:0 0 14px 14px; }
.esc-pantalla{ background:var(--blanco); border-radius:8px; height:270px; overflow:hidden; }
.esc--portada .esc-movil{ position:absolute; right:0; bottom:0; z-index:2; }
.esc-pega{ left:-10px; bottom:20px; }
/* flujo */
.esc--flujo{ display:flex; align-items:center; justify-content:center; }
.esc-flujo{ display:flex; align-items:center; justify-content:center; padding-inline:20px; width:100%; }
.esc-nodo{ position:relative; width:86px; height:86px; border-radius:18px; background:#34342F; border:1px solid #4a4a44; display:grid; place-content:center;
  text-align:center; color:var(--blanco); font-size:.66rem; font-weight:700; gap:6px; flex:none; transition:border-color .3s; }
.esc-nodo svg{ width:26px; height:26px; margin:0 auto; stroke:var(--verde); fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.esc-ok{ position:absolute; top:-8px; right:-8px; width:22px; height:22px; border-radius:50%; background:var(--grad); color:var(--tinta);
  display:grid; place-content:center; font-size:.7rem; font-weight:900; transform:scale(0); transition:transform .3s cubic-bezier(.34,1.56,.64,1); }
.esc-nodo.hecho{ border-color:var(--verde); } .esc-nodo.hecho .esc-ok{ transform:scale(1); }
.esc-cable{ position:relative; flex:1; max-width:80px; height:3px; background:#4a4a44; }
.esc-cable i{ position:absolute; top:-4px; left:0; width:11px; height:11px; border-radius:50%; background:var(--verde); box-shadow:0 0 0 4px rgba(189,244,16,.2); opacity:0; }
.esc-cable.va i{ animation:escViaje .9s ease-in-out forwards; }
@keyframes escViaje{ from{ left:0; opacity:1; } to{ left:calc(100% - 11px); opacity:1; } }
.esc-notif{ position:absolute; right:16px; bottom:16px; background:var(--blanco); color:var(--tinta); border-radius:12px; padding:8px 10px; font-size:.66rem;
  display:flex; gap:8px; align-items:center; box-shadow:0 10px 24px rgba(0,0,0,.3); transform:translateY(80px); transition:transform .45s cubic-bezier(.22,1,.36,1); }
.esc-notif.ver{ transform:none; } .esc-notif i{ width:22px; height:22px; border-radius:6px; background:var(--grad); flex:none; }
/* pack */
.esc--pack{ display:grid; place-items:center; }
.esc-piezas{ display:flex; gap:12px; align-items:center; }
.esc-pieza{ width:74px; height:74px; border-radius:18px; background:#34342F; border:1px solid #4a4a44; display:grid; place-content:center; transition:transform .6s cubic-bezier(.34,1.56,.64,1); }
.esc-pieza svg{ width:28px; height:28px; stroke:var(--verde); fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.esc--pack.junto .esc-pieza--1{ transform:translateX(30px) rotate(-8deg); }
.esc--pack.junto .esc-pieza--3{ transform:translateX(-30px) rotate(8deg); }
.esc--pack.junto .esc-pieza--2{ transform:scale(1.12); }
.esc-contador{ position:absolute; right:22px; top:22px; background:var(--grad); color:var(--tinta); font-family:var(--serif); font-weight:800; font-size:1.6rem; padding:6px 14px; border-radius:14px; transform:rotate(6deg); font-variant-numeric:tabular-nums; }
.esc-total{ position:absolute; left:22px; bottom:18px; color:var(--blanco); font-size:.74rem; font-weight:700; }
.esc-total b{ display:block; font-family:var(--serif); font-size:1.6rem; color:var(--verde); font-variant-numeric:tabular-nums; }
/* Quietas (sin movimiento): nada se desplaza */
.esc-quietas .esc-web, .esc-quietas .esc-cursor, .esc-quietas .marquesina__pista{ animation:none; }

/* Reproductor */
.video{ display:grid; gap:30px; align-items:center; }
@media (min-width:960px){ .video{ grid-template-columns:1.4fr .9fr; } }
.player{ position:relative; border-radius:var(--r-lg); overflow:hidden; background:var(--pie); border:1px solid #3a3a36; box-shadow:0 30px 60px rgba(0,0,0,.35); }
.player .esc{ height:340px; }
.player__tapa{ position:absolute; inset:0; z-index:5; width:100%; display:grid; place-content:center; justify-items:center; gap:14px; border:0; cursor:pointer;
  background:linear-gradient(180deg, rgba(27,27,25,.35), rgba(27,27,25,.78)); color:var(--blanco); font:800 1rem var(--sans); }
.player__tapa span{ width:84px; height:84px; border-radius:50%; background:var(--grad); display:grid; place-content:center; box-shadow:0 0 0 12px rgba(189,244,16,.18); transition:transform .25s; }
.player__tapa:hover span{ transform:scale(1.08); }
.player__tapa svg{ width:30px; height:30px; fill:var(--tinta); margin-left:5px; }
.player.on .player__tapa{ display:none; }
.player__barra{ position:absolute; left:16px; right:16px; bottom:12px; height:4px; border-radius:4px; background:rgba(250,250,248,.18); z-index:4; }
.player__barra i{ display:block; height:100%; width:0; border-radius:4px; background:var(--verde); }
.player.on .player__barra i{ animation:playerAvance 14s linear infinite; }
@keyframes playerAvance{ to{ width:100%; } }
.esc-quietas .player__tapa{ display:none; }

/* Fotos (mientras no lleguen, las ilustraciones de siempre) */
.foto{ position:relative; }
.foto img{ width:100%; height:auto; display:block; }
.foto .pega{ right:-10px; top:-24px; }

/* ══════════════════════ TRABAJOS ════════════════════════════════════════ */
.filtros{ display:flex; gap:10px; overflow-x:auto; padding-bottom:8px; margin-bottom:28px; scrollbar-width:thin; }
.chip{ flex:none; font:800 .95rem var(--sans); border:2px solid var(--tinta); background:transparent; border-radius:100px; padding:10px 22px; cursor:pointer; color:var(--tinta); }
.chip[aria-pressed="true"]{ background:var(--grad); }
.trabajos{ display:grid; gap:22px; grid-template-columns:repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.trabajo{ background:var(--blanco); border:1px solid var(--borde); border-radius:var(--r-lg); overflow:hidden; text-decoration:none; color:var(--tinta);
  display:flex; flex-direction:column; box-shadow:0 12px 30px rgba(34,34,31,.06); transition:transform .3s, box-shadow .3s; }
.trabajo:hover{ transform:translateY(-5px); box-shadow:0 26px 50px rgba(34,34,31,.12); }
.trabajo__img{ width:100%; aspect-ratio:16/10; object-fit:cover; display:block; }
.trabajo__marco{ aspect-ratio:16/10; background:var(--carbon); display:flex; flex-direction:column; padding:16px 16px 0; }
.trabajo__marco .esc-nav{ border-radius:10px 10px 0 0; }
.trabajo__nombre{ flex:1; background:linear-gradient(135deg, #F1F1EC, #E6EAD9); display:grid; place-content:center;
  font-family:var(--serif); font-weight:700; font-size:1.7rem; color:var(--tinta); }
.trabajo__txt{ padding:18px 22px 22px; display:flex; justify-content:space-between; align-items:center; gap:12px; }
.trabajo__tit{ display:block; font-family:var(--serif); font-weight:700; font-size:1.4rem; }
.trabajo__desc{ display:block; color:var(--gris); font-size:.92rem; }
.trabajo--siguiente{ border:2px dashed var(--gris-cl); box-shadow:none; display:grid; place-content:center; justify-items:center; text-align:center; gap:12px; padding:30px; min-height:280px; }
.trabajo--siguiente:hover{ transform:none; box-shadow:none; }

/* ══════════════════════ AJUSTES DE LO QUE YA HABÍA ══════════════════════ */
.nivel__precio{ font-weight:800; font-size:2.8rem; }
.mop__precio{ font-weight:800; }
.nivel, .mop{ border-radius:var(--r-lg); }
.paso__n{ font-weight:800; }
/* Conócenos y «cómo hacemos tu web»: números en contorno */
.pasos--grandes{ list-style:none; padding:0; margin:0; display:grid; gap:18px; }
@media (min-width:820px){ .pasos--grandes{ grid-template-columns:repeat(4, 1fr); } }
.pasos--grandes .paso{ display:block; margin:0; padding:26px; border:1px solid var(--borde); border-radius:var(--r-lg); background:var(--blanco); color:var(--tinta); }
.pasos--grandes .paso:hover{ transform:translateY(-4px); box-shadow:0 18px 40px rgba(34,34,31,.1); }
.pasos--grandes .paso__n{ width:auto; height:auto; border:0; background:none; display:block; margin-bottom:12px;
  font-size:4rem; line-height:.9; color:transparent; -webkit-text-stroke:2px var(--tinta); }
.pasos--grandes .paso--destacado .paso__n{ color:var(--verde); background:none; }
.pasos--grandes .paso__t{ font-family:var(--serif); font-size:1.35rem; color:var(--tinta); }
.pasos--grandes .paso__d{ color:var(--gris); }
.pasos--grandes .paso--destacado .paso__t, .pasos--grandes .paso--destacado:hover .paso__t{ color:var(--tinta); }
.pasos--grandes .paso--destacado:hover .paso__n{ background:none; }
/* Valores en tarjetas claras sobre oscuro */
.valores .pieza{ background:var(--blanco); color:var(--tinta); border-radius:var(--r-lg); padding:24px; }
.valores .pieza__d{ color:var(--gris); }
/* Preguntas con más cuerpo */
.duda__p{ font-weight:800; }
/* Formulario: el contacto vive en su página */
.sec--interior{ padding-top:calc(var(--nav) + 40px); }

/* Listas con check, portadas de una columna y los dos móviles del asistente */
.checks{ list-style:none; padding:0; margin:22px 0 0; display:grid; gap:12px; }
.checks li{ display:flex; gap:12px; align-items:flex-start; }
.checks li::before{ content:'✓'; flex:none; width:24px; height:24px; border-radius:50%; background:var(--grad); color:var(--tinta);
  display:grid; place-content:center; font-size:.75rem; font-weight:900; margin-top:1px; }
.checks--rejilla{ grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); }
.hero .checks{ margin:0 0 28px; }
@media (min-width:860px){ .hero__in--uno{ grid-template-columns:1fr !important; } }
.hero__in--uno .hero__sub{ max-width:60ch; }
.duo{ position:relative; min-height:380px; }
.duo .esc{ position:absolute; background:none; overflow:visible; height:auto; }
.duo .esc:first-child{ left:6%; bottom:20px; transform:rotate(-6deg); }
.duo .esc:last-child{ right:4%; bottom:0; transform:rotate(5deg); }
.duo .esc-movil{ margin:0; box-shadow:0 30px 60px rgba(34,34,31,.3); }
.hero__media .player .esc{ height:300px; }

/* La banda inclinada y la marca de agua no deben empujar la página de lado */
main{ overflow-x:clip; }

/* Dos secciones oscuras seguidas (p. ej. «Cómo funciona» en Tu web y Automatizaciones)
   se leen como un solo bloque: sin el hueco doble entre ellas. */
.sec--oscuro + .sec--oscuro{ padding-top:0; }