/* ============================================================================
   Devo · Hoja de estilos de la web comercial (/, /servicios/, legales)
   CSS plano, sin Tailwind: la web que vende "webs rápidas" no carga 300 KB de
   JavaScript para pintarse. Lo usan index.php, servicios.php, servicio.php y
   legal.php a través de publico.php.

   Reglas del sistema (no romperlas al añadir cosas):
   - Color: todo sale de los tokens de :root. Un solo acento, el verde de marca.
     Modo claro u oscuro según el sistema del visitante (prefers-color-scheme).
   - Esquinas: botones y campos 10px, tarjetas y fotos 18px. Nada más.
   - Tipografía: Geist para todo (texto y titulares).
     "Dev" del logotipo va en Space Grotesk, recortada a esas tres letras.
   - Capas: cabecera 30, menú móvil 31. No hay más z-index.
   - Movimiento: solo transform/opacity y siempre se apaga con
     prefers-reduced-motion.
   ========================================================================== */

@font-face{ font-family:'Geist'; src:url('/fonts/Geist-Variable.woff2') format('woff2');
  font-weight:100 900; font-style:normal; font-display:swap; }
@font-face{ font-family:'Space Grotesk Logo'; src:url('/fonts/SpaceGrotesk-Dev.woff2') format('woff2');
  font-weight:700; font-style:normal; font-display:block; unicode-range:U+44,U+65,U+76; }

/* ---------- Tokens ---------- */
:root{
  color-scheme: light dark;
  --bg:      #F3F5F2;
  --bg-2:    #EAEEE8;
  --sur:     #FBFCFA;
  --line:    #D9E0D7;
  --tx:      #111612;
  --tx-2:    #47524A;
  --tx-3:    #5F6B63;
  --brand:   #34B24A;
  --brand-h: #2DA142;
  --brand-tx:#1B7530;
  --brand-wash: #E1F1E2;
  --on-brand:#0A100B;
  --danger:  #B3261E;
  --sombra:  0 1px 2px rgb(24 46 30 / .06), 0 12px 32px -16px rgb(24 46 30 / .18);
  /* Colores de las ilustraciones */
  --il-fondo:#E1F1E2; --il-panel:#FBFCFA; --il-linea:#D9E0D7; --il-suave:#EEF2ED; --il-tx:#111612;
  --il-tx2:#5F6B63; --il-verde:#1B7530; --il-movil:#1A221C; --il-pantalon:#1F3D2A;
  --r-sm: 10px;
  --r-lg: 18px;
  --ancho: 1200px;
  --gutter: clamp(16px, 4vw, 32px);
  --ease: cubic-bezier(.16, 1, .3, 1);
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:      #0B0E0C;
    --bg-2:    #0F1310;
    --sur:     #141915;
    --line:    #232B25;
    --tx:      #E8EDE9;
    --tx-2:    #A2AEA5;
    --tx-3:    #85918A;
    --brand-h: #45C25A;
    --brand-tx:#6CD47F;
    --brand-wash: #12241A;
    --danger:  #F2A29B;
    --sombra:  0 1px 2px rgb(0 0 0 / .3), 0 16px 40px -20px rgb(0 0 0 / .6);
    --il-fondo:#12241A; --il-panel:#141915; --il-linea:#232B25; --il-suave:#1B221D; --il-tx:#E8EDE9;
    --il-tx2:#85918A; --il-verde:#6CD47F; --il-movil:#34413A; --il-pantalon:#2F5A3D;
  }
}

/* ---------- Base ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-padding-top:84px; }
@media (prefers-reduced-motion: no-preference){ html{ scroll-behavior:smooth; } }
body{
  margin:0; background:var(--bg); color:var(--tx);
  font-family:'Geist', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size:1.0625rem; line-height:1.6; font-feature-settings:'ss01';
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}
img{ display:block; max-width:100%; height:auto; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,p,ul,ol,dl,dd,figure{ margin:0; }
ul,ol{ padding:0; list-style:none; }
::selection{ background:var(--brand); color:var(--on-brand); }
:focus-visible{ outline:2px solid var(--brand); outline-offset:3px; border-radius:4px; }
strong{ font-weight:600; color:var(--tx); }

.contenedor{ width:100%; max-width:var(--ancho); margin-inline:auto; padding-inline:var(--gutter); }
.sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.saltar{ position:absolute; left:12px; top:-60px; z-index:31; background:var(--brand); color:var(--on-brand);
  padding:10px 16px; border-radius:var(--r-sm); font-weight:600; transition:top .2s; }
.saltar:focus{ top:12px; }

/* ---------- Tipografía ---------- */
.t-display{ font-size:clamp(2.25rem, 1.2rem + 3.6vw, 3.9rem); line-height:1.04; letter-spacing:-.04em;
  font-weight:620; text-wrap:balance; }
.t-h2{ font-size:clamp(1.75rem, 1.1rem + 2vw, 2.6rem); line-height:1.1; letter-spacing:-.032em;
  font-weight:600; text-wrap:balance; }
.t-h3{ font-size:1.2rem; line-height:1.3; letter-spacing:-.015em; font-weight:600; }
.t-lead{ font-size:clamp(1.06rem, 1rem + .35vw, 1.2rem); line-height:1.55; color:var(--tx-2);
  max-width:46ch; text-wrap:pretty; }
.t-cuerpo{ color:var(--tx-2); max-width:65ch; text-wrap:pretty; }
.t-peq{ font-size:.92rem; color:var(--tx-2); }
.num{ font-variant-numeric:tabular-nums; }
.antetitulo{ display:block; font-size:.8rem; font-weight:560; letter-spacing:.08em; text-transform:uppercase;
  color:var(--brand-tx); margin-bottom:1rem; }

/* ---------- Botones ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem; white-space:nowrap;
  min-height:48px; padding:0 1.35rem; border-radius:var(--r-sm); border:1px solid transparent;
  font:inherit; font-size:1rem; font-weight:580; letter-spacing:-.01em; cursor:pointer;
  transition:background-color .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease), transform .2s var(--ease);
}
.btn:active{ transform:translateY(1px) scale(.985); }
.btn .ico{ width:18px; height:18px; transition:transform .3s var(--ease); }
.btn:hover .ico-mueve{ transform:translateX(3px); }
.btn-pri{ background:var(--brand); color:var(--on-brand); box-shadow:inset 0 1px 0 rgb(255 255 255 / .22); }
.btn-pri:hover{ background:var(--brand-h); }
.btn-sec{ border-color:var(--line); color:var(--tx); background:transparent; }
.btn-sec:hover{ border-color:var(--tx-3); }
.btn-peq{ min-height:40px; padding:0 1rem; font-size:.94rem; }
.enlace{ display:inline-flex; align-items:center; gap:.4rem; font-weight:560; color:var(--brand-tx);
  text-decoration:underline; text-decoration-color:transparent; text-underline-offset:4px;
  transition:text-decoration-color .25s; }
.enlace:hover{ text-decoration-color:currentColor; }
.enlace .ico{ width:16px; height:16px; transition:transform .3s var(--ease); }
.enlace:hover .ico{ transform:translateX(3px); }

.ico{ width:20px; height:20px; flex:none; fill:currentColor; }

/* ---------- Cabecera ---------- */
.cab{ position:sticky; top:0; z-index:30; background:color-mix(in srgb, var(--bg) 84%, transparent);
  backdrop-filter:saturate(1.4) blur(14px); -webkit-backdrop-filter:saturate(1.4) blur(14px);
  border-bottom:1px solid transparent; transition:border-color .3s; }
.cab.con-borde{ border-bottom-color:var(--line); }
.cab-fila{ display:flex; align-items:center; justify-content:space-between; gap:1rem; height:68px; }
.logo{ display:inline-flex; align-items:center; gap:.45rem; color:var(--tx); }
.logo-dev{ font-family:'Space Grotesk Logo', 'Geist', sans-serif; font-weight:700; font-size:1.55rem;
  letter-spacing:-.02em; line-height:1; }
.logo svg{ overflow:visible; transform:translateY(-1px); }
.cab-nav{ display:none; gap:2rem; }
.cab-nav a{ font-size:.95rem; color:var(--tx-2); transition:color .2s; }
.cab-nav a:hover, .cab-nav a[aria-current="page"]{ color:var(--tx); }
.cab-acc{ display:flex; align-items:center; gap:.5rem; }
.cab-acc .btn-pri{ display:none; }
.btn-menu{ display:grid; place-items:center; width:44px; height:44px; border-radius:var(--r-sm);
  border:1px solid var(--line); background:transparent; color:var(--tx); cursor:pointer; }
.btn-menu .ico{ width:22px; height:22px; }
.menu-movil{ position:absolute; z-index:31; left:var(--gutter); right:var(--gutter); top:calc(100% + 6px);
  background:var(--sur); border:1px solid var(--line); border-radius:var(--r-lg); padding:.5rem;
  box-shadow:var(--sombra); }
.menu-movil[hidden]{ display:none; }
.menu-movil a{ display:block; padding:.85rem 1rem; border-radius:var(--r-sm); color:var(--tx-2); }
.menu-movil a:hover{ background:var(--bg-2); color:var(--tx); }
.menu-movil .btn{ width:100%; margin-top:.35rem; color:var(--on-brand); }
@media (min-width: 640px){ .cab-acc .btn-pri{ display:inline-flex; } }
@media (min-width: 860px){ .cab-nav{ display:flex; } .btn-menu{ display:none; } }

/* ---------- Secciones ---------- */
.sec{ padding-block:clamp(4.5rem, 3rem + 6vw, 8rem) clamp(5rem, 3.4rem + 6.5vw, 8.75rem); }
.sec-tinte{ background:var(--bg-2); }
.cabecera-sec{ max-width:44rem; margin-bottom:clamp(2.5rem, 2rem + 2vw, 4rem); }
.cabecera-sec .t-cuerpo{ margin-top:1rem; }

/* Aparición al entrar en pantalla (solo si el visitante acepta movimiento) */
@media (prefers-reduced-motion: no-preference){
  .js .aparece{ opacity:0; transform:translateY(22px);
    transition:opacity .8s var(--ease), transform .8s var(--ease);
    transition-delay:calc(var(--i, 0) * 70ms); }
  .js .aparece.visto{ opacity:1; transform:none; }
}

/* ---------- Hero ---------- */
.hero{ padding-block:clamp(2.5rem, 1rem + 5vw, 5.5rem) clamp(4rem, 2.5rem + 5vw, 7rem); }
.hero-rejilla{ display:grid; gap:clamp(2.5rem, 2rem + 3vw, 4.5rem); align-items:center; }
.hero h1{ margin-bottom:1.4rem; }
.hero .t-lead{ margin-bottom:2.2rem; }
.hero-acc{ display:flex; flex-wrap:wrap; align-items:center; gap:1rem 1.75rem; }
.hero-desde{ font-size:.82rem; font-weight:500; color:var(--tx-3); margin-left:.15rem; }
/* Ilustraciones (SVG en línea, ver ilustracion() en publico.php) */
.il{ display:block; width:100%; height:auto; font-family:inherit; }
.hero-il{ margin:0 -2% 0 0; }
@media (min-width: 960px){
  .hero-rejilla{ grid-template-columns:minmax(0, .95fr) minmax(0, 1.05fr); }
  .hero-il{ margin-right:-3rem; }
}
/* Animación de las ilustraciones. Suena unos segundos cuando el dibujo entra en
   pantalla (clase .anima, la pone publico.php) y otra vez al pasar el ratón.
   No hay bucles infinitos y con "reducir movimiento" se ven quietas.
   Clases dentro del SVG: a-sube (aparece), a-barra (crece), a-aparece (funde),
   a-sello (golpe de sello), a-flota, a-gira (gira desde el transform-origin
   que lleva en línea), a-pulso, a-bota. --d = retraso de cada pieza. */
.il .a-sube, .il .a-barra, .il .a-sello, .il .a-pulso, .il .a-flota, .il .a-bota{ transform-box:fill-box; transform-origin:center; }
.il .a-barra{ transform-origin:50% 100%; }
.il .a-gira{ transform-box:view-box; }
@media (prefers-reduced-motion: no-preference){
  .js .il:not(.anima) :is(.a-sube, .a-barra, .a-aparece, .a-sello){ opacity:0; }
  .il.anima .a-sube{ animation:il-sube .8s var(--ease) var(--d, 0s) both; }
  .il.anima .a-flota{ animation:il-flota 2.4s ease-in-out var(--d, .6s) 2; }
  .il.anima .a-sube.a-flota{ animation:il-sube .8s var(--ease) var(--d, 0s) both, il-flota 2.4s ease-in-out calc(var(--d, 0s) + .9s) 2; }
  .il.anima .a-barra{ animation:il-barra 1s var(--ease) var(--d, 0s) both; }
  .il.anima .a-aparece{ animation:il-aparece .9s ease var(--d, 0s) both; }
  .il.anima .a-sello{ animation:il-sello .55s cubic-bezier(.3, 1.6, .5, 1) var(--d, 0s) both; }
  .il.anima .a-gira{ animation:il-gira 1.8s ease-in-out var(--d, .4s) 3; }
  .il.anima .a-gira.a-rapido{ animation:il-teclea .35s ease-in-out var(--d, .4s) 12; }
  .il.anima .a-pulso{ animation:il-pulso 1.6s ease-in-out var(--d, .4s) 3; }
  .il.anima .a-bota{ animation:il-bota .45s ease-in-out var(--d, .2s) 10; }
}
@keyframes il-sube{ from{ opacity:0; transform:translateY(12px) scale(.94); } to{ opacity:1; transform:none; } }
@keyframes il-flota{ 50%{ transform:translateY(-7px); } }
@keyframes il-barra{ from{ opacity:0; transform:scaleY(0); } to{ opacity:1; transform:none; } }
@keyframes il-aparece{ from{ opacity:0; } to{ opacity:1; } }
@keyframes il-sello{ from{ opacity:0; transform:scale(1.7) rotate(-6deg); } to{ opacity:1; transform:none; } }
@keyframes il-gira{ 30%{ transform:rotate(-6deg); } 70%{ transform:rotate(4deg); } }
@keyframes il-teclea{ 50%{ transform:rotate(-4deg); } }
@keyframes il-pulso{ 50%{ transform:scale(1.14); } }
@keyframes il-bota{ 50%{ transform:translateY(-5px); } }

.celda-il{ background:var(--bg-2); display:grid; place-items:center; padding:.75rem; }
@media (min-width: 1000px){ .celda-b .celda-il{ width:52%; flex:none; } }
@media (prefers-reduced-motion: no-preference){
  .js .hero .entra{ opacity:0; transform:translateY(16px); animation:entra .9s var(--ease) forwards;
    animation-delay:calc(var(--i, 0) * 90ms + 80ms); }
  .js .hero .entra-foto{ opacity:0; transform:scale(.97); animation:entra 1.1s var(--ease) .25s forwards; }
}
@keyframes entra{ to{ opacity:1; transform:none; } }

/* ---------- Servicios: bento con los cuatro principales ---------- */
.bento{ display:grid; gap:14px; grid-template-columns:minmax(0, 1fr); }
.celda{ position:relative; display:flex; flex-direction:column; border-radius:var(--r-lg); overflow:hidden;
  background:var(--sur); border:1px solid var(--line); transition:transform .45s var(--ease), border-color .3s; }
.celda:hover{ transform:translateY(-3px); border-color:color-mix(in srgb, var(--brand) 45%, var(--line)); }
.celda-txt{ padding:clamp(1.4rem, 1rem + 1.4vw, 2rem); display:flex; flex-direction:column; gap:.6rem; flex:1; }
.celda-txt .enlace{ margin-top:auto; padding-top:.8rem; }
.celda-ico{ display:grid; place-items:center; width:44px; height:44px; border-radius:var(--r-sm);
  background:var(--brand-wash); color:var(--brand-tx); margin-bottom:.4rem; }
.celda-ico .ico{ width:22px; height:22px; }
.celda .il{ transition:transform .8s var(--ease); }
.celda:hover .il{ transform:scale(1.03); }
.celda-marca{ background:var(--brand); border-color:transparent; color:var(--on-brand); }
.celda-marca .t-peq, .celda-marca .enlace{ color:var(--on-brand); }
.celda-marca .celda-ico{ background:rgb(10 16 11 / .12); color:var(--on-brand); }
.celda-marca:hover{ border-color:transparent; }
.celda-lista{ display:grid; gap:.55rem; margin-top:1.4rem; font-size:.97rem; font-weight:500; }
.celda-lista li{ display:flex; gap:.6rem; align-items:flex-start; }
.celda-lista .ico{ width:18px; height:18px; margin-top:3px; }
.celda-marca .grande{ font-size:clamp(1.6rem, 1.1rem + 1.6vw, 2.3rem); letter-spacing:-.035em; line-height:1.08;
  font-weight:600; max-width:14ch; }
@media (min-width: 720px){
  .bento{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .celda-a{ grid-column:1 / -1; }
}
@media (min-width: 1000px){
  .bento{ grid-template-columns:1.25fr 1fr 1fr; grid-template-rows:auto auto; }
  .celda-a{ grid-column:1; grid-row:1 / span 2; }
  .celda-b{ grid-column:2 / span 2; grid-row:1; flex-direction:row; }
  .celda-c{ grid-column:2; grid-row:2; }
  .celda-d{ grid-column:3; grid-row:2; }
}
.ademas{ margin-top:clamp(3rem, 2rem + 3vw, 4.5rem); }
.ademas h3{ margin-bottom:1.25rem; }
.lista-serv{ display:grid; gap:0 2.5rem; grid-template-columns:minmax(0, 1fr); }
@media (min-width: 760px){ .lista-serv{ grid-template-columns:repeat(2, minmax(0, 1fr)); } }
.lista-serv a{ display:grid; grid-template-columns:auto minmax(0, 1fr) auto; gap:1rem; align-items:start;
  padding:1.2rem 0; border-top:1px solid var(--line); }
.lista-serv .ico{ color:var(--brand-tx); margin-top:3px; }
.lista-serv b{ display:block; font-weight:580; letter-spacing:-.01em; }
.lista-serv span.t-peq{ display:block; margin-top:.2rem; }
.lista-serv .flecha{ color:var(--tx-3); transition:transform .3s var(--ease), color .2s; }
.lista-serv a:hover .flecha{ transform:translateX(4px); color:var(--brand-tx); }
.lista-serv a:hover b{ color:var(--brand-tx); }

/* ---------- Por qué Devo ---------- */
.porque{ display:grid; gap:3rem; }
.porque-puntos{ display:grid; gap:2.25rem 2.5rem; grid-template-columns:minmax(0, 1fr); }
.porque-puntos li{ padding-top:1.25rem; border-top:2px solid var(--brand); }
.porque-puntos p{ margin-top:.5rem; }
@media (min-width: 720px){ .porque-puntos{ grid-template-columns:repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px){
  .porque{ grid-template-columns:repeat(12, minmax(0, 1fr)); }
  .porque-txt{ grid-column:1 / span 5; }
  .porque-puntos{ grid-column:7 / span 6; margin-top:.5rem; }
}

/* ---------- Proceso: línea de tiempo ---------- */
.pasos{ display:grid; gap:2.25rem; grid-template-columns:minmax(0, 1fr); counter-reset:paso; position:relative; }
.pasos li{ position:relative; padding-left:2.5rem; }
.pasos li::before{ content:""; position:absolute; left:0; top:.35rem; width:14px; height:14px; border-radius:50%;
  background:var(--bg); border:3px solid var(--brand); }
.pasos li::after{ content:""; position:absolute; left:6px; top:1.6rem; bottom:-2.25rem; width:2px; background:var(--line); }
.pasos li:last-child::after{ display:none; }
.pasos p{ margin-top:.5rem; }
@media (min-width: 900px){
  .pasos{ grid-template-columns:repeat(4, minmax(0, 1fr)); gap:2rem; }
  .pasos li{ padding-left:0; padding-top:2.5rem; }
  .pasos li::before{ top:0; }
  .pasos li::after{ left:1.4rem; right:-2rem; top:6px; bottom:auto; width:auto; height:2px; }
}

/* ---------- Sectores: mosaico de fotos ---------- */
.mosaico{ display:grid; gap:2rem 14px; grid-template-columns:minmax(0, 1fr); }
.mosaico figure{ display:flex; flex-direction:column; gap:.75rem; }
.mosaico-il{ background:var(--sur); border:1px solid var(--line); border-radius:var(--r-lg); padding:.5rem;
  transition:transform .45s var(--ease), border-color .3s; }
.mosaico figure:hover .mosaico-il{ transform:translateY(-3px); border-color:color-mix(in srgb, var(--brand) 45%, var(--line)); }
.mosaico figcaption{ font-size:.98rem; font-weight:560; letter-spacing:-.01em; }
@media (min-width: 640px){ .mosaico{ grid-template-columns:repeat(2, minmax(0, 1fr)); } }
@media (min-width: 960px){ .mosaico{ grid-template-columns:repeat(3, minmax(0, 1fr)); } }
.tambien{ margin-top:2.25rem; max-width:65ch; color:var(--tx-2); }

/* ---------- Preguntas (lista abierta, sin acordeón) ---------- */
.faq{ display:grid; gap:2.5rem; }
.faq dl{ display:grid; gap:0; }
.faq dt{ font-weight:600; font-size:1.08rem; letter-spacing:-.012em; padding-top:1.5rem; border-top:1px solid var(--line); }
.faq dt:first-child{ border-top:0; padding-top:0; }
.faq dd{ color:var(--tx-2); margin-top:.5rem; padding-bottom:1.5rem; max-width:62ch; }
@media (min-width: 960px){
  .faq{ grid-template-columns:minmax(0, 5fr) minmax(0, 7fr); gap:4rem; }
  .faq-cab{ position:sticky; top:110px; align-self:start; }
}

/* ---------- Contacto ---------- */
.contacto{ display:grid; gap:2.5rem; background:var(--sur); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:clamp(1.4rem, 1rem + 2.5vw, 3.25rem); box-shadow:var(--sombra); }
@media (min-width: 960px){ .contacto{ grid-template-columns:minmax(0, 5fr) minmax(0, 7fr); gap:4rem; } }
.datos{ display:grid; gap:1.1rem; margin-top:2rem; }
.datos li{ display:flex; align-items:center; gap:.85rem; color:var(--tx-2); }
.datos .ico{ color:var(--brand-tx); }
.datos a{ color:var(--tx); transition:color .2s; }
.datos a:hover{ color:var(--brand-tx); }

.form{ display:grid; gap:1.15rem; }
.form-fila{ display:grid; gap:1.15rem; }
@media (min-width: 640px){ .form-fila{ grid-template-columns:repeat(2, minmax(0, 1fr)); } }
.campo{ display:flex; flex-direction:column; gap:.45rem; }
.campo label{ font-size:.92rem; font-weight:560; }
.campo label small{ font-weight:400; color:var(--tx-3); }
.campo input, .campo select, .campo textarea{
  width:100%; font:inherit; font-size:1rem; color:var(--tx); background:var(--bg);
  border:1px solid var(--line); border-radius:var(--r-sm); padding:.8rem .95rem; min-height:48px;
  transition:border-color .2s, box-shadow .2s; }
.campo textarea{ resize:vertical; min-height:7.5rem; }
.campo input::placeholder, .campo textarea::placeholder{ color:var(--tx-3); opacity:1; }
.campo input:focus, .campo select:focus, .campo textarea:focus{ outline:none; border-color:var(--brand);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--brand) 28%, transparent); }
.campo .error{ display:none; font-size:.88rem; color:var(--danger); }
.campo.mal input, .campo.mal textarea{ border-color:var(--danger); }
.campo.mal .error{ display:block; }
.casilla{ display:flex; align-items:flex-start; gap:.7rem; font-size:.92rem; color:var(--tx-2); }
.casilla input{ width:18px; height:18px; margin-top:.15rem; accent-color:var(--brand); flex:none; }
.casilla a{ color:var(--brand-tx); text-decoration:underline; text-underline-offset:3px; }
.casilla.mal{ color:var(--danger); }
.form .btn{ width:100%; }
.oculto{ position:absolute; left:-9999px; }
.aviso{ border-radius:var(--r-sm); padding:.9rem 1rem; font-size:.95rem; display:flex; gap:.7rem; align-items:flex-start; }
.aviso .ico{ margin-top:2px; }
.aviso-mal{ background:color-mix(in srgb, var(--danger) 10%, transparent); color:var(--danger); }
.hecho{ display:flex; flex-direction:column; align-items:flex-start; gap:.75rem; padding:2rem;
  border-radius:var(--r-lg); background:var(--brand-wash); }
.hecho .ico{ width:36px; height:36px; color:var(--brand-tx); }

/* ---------- Banda de cierre (páginas interiores) ---------- */
.cierre{ display:grid; gap:1.5rem; align-items:center; padding:clamp(1.75rem, 1rem + 3vw, 3.25rem);
  border-radius:var(--r-lg); background:var(--brand); color:var(--on-brand); }
.cierre .t-cuerpo{ color:var(--on-brand); opacity:.82; margin-top:.6rem; }
.cierre .btn{ background:var(--on-brand); color:#F3F5F2; justify-self:start; }
.cierre .btn:hover{ background:#1C2A1F; }
@media (min-width: 860px){ .cierre{ grid-template-columns:minmax(0, 1fr) auto; } .cierre .btn{ justify-self:end; } }

/* ---------- Páginas interiores ---------- */
.migas ol{ display:flex; flex-wrap:wrap; gap:.5rem; font-size:.9rem; color:var(--tx-3); margin-bottom:1.75rem; }
.migas a:hover{ color:var(--tx); }
.migas li[aria-current]{ color:var(--tx-2); }
.cab-int{ padding-block:clamp(2.5rem, 1.5rem + 4vw, 5rem) clamp(2.5rem, 1.5rem + 3vw, 4rem); }
.cab-int .t-lead{ margin-top:1.25rem; max-width:52ch; }

.indice a{ display:grid; grid-template-columns:auto minmax(0, 1fr); gap:1.25rem; align-items:start;
  padding:1.75rem 0; border-top:1px solid var(--line); }
.indice .celda-ico{ margin:0; }
.indice b{ display:block; font-size:1.2rem; font-weight:600; letter-spacing:-.018em; transition:color .2s; }
.indice .desc{ display:block; margin-top:.4rem; }
.indice .enlace{ margin-top:.8rem; }
.indice a:hover b{ color:var(--brand-tx); }
@media (min-width: 900px){
  .indice{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); column-gap:3.5rem; }
}

.serv-hero{ display:grid; gap:2.5rem; }
.incluye{ background:var(--sur); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:clamp(1.4rem, 1rem + 1.5vw, 2rem); box-shadow:var(--sombra); }
.incluye h2{ font-size:1rem; font-weight:600; margin-bottom:1rem; }
.incluye li{ display:flex; gap:.7rem; align-items:flex-start; padding:.55rem 0; color:var(--tx-2); }
.incluye .ico{ color:var(--brand-tx); width:18px; height:18px; margin-top:4px; }
@media (min-width: 960px){
  .serv-hero{ grid-template-columns:minmax(0, 7fr) minmax(0, 5fr); gap:4rem; align-items:start; }
}
.serv-intro{ display:grid; gap:2.5rem; }
.serv-intro .t-cuerpo p + p{ margin-top:1.1rem; }
.serv-intro .il{ background:var(--sur); border-radius:var(--r-lg); padding:.5rem; }
@media (min-width: 960px){ .serv-intro.con-foto{ grid-template-columns:minmax(0, 7fr) minmax(0, 5fr); gap:4rem; align-items:center; } }
.beneficios{ display:grid; gap:1.75rem 2.5rem; grid-template-columns:minmax(0, 1fr); }
.beneficios li{ padding-top:1.1rem; border-top:2px solid var(--brand); }
.beneficios p{ margin-top:.4rem; }
@media (min-width: 640px){ .beneficios{ grid-template-columns:repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px){ .beneficios{ grid-template-columns:repeat(4, minmax(0, 1fr)); } }

.otros{ display:flex; flex-wrap:wrap; gap:.6rem; }
.otros a{ display:inline-flex; align-items:center; gap:.55rem; padding:.65rem 1rem; border-radius:var(--r-sm);
  border:1px solid var(--line); background:var(--sur); font-size:.95rem; font-weight:520;
  transition:border-color .2s, color .2s; }
.otros a .ico{ width:18px; height:18px; color:var(--brand-tx); }
.otros a:hover{ border-color:var(--brand); }

.legal{ max-width:68ch; }
.legal h2{ font-size:1.35rem; font-weight:600; letter-spacing:-.02em; margin:2.75rem 0 .8rem; }
.legal p, .legal li{ color:var(--tx-2); }
.legal p{ margin-bottom:1rem; }
.legal ul{ list-style:disc; padding-left:1.25rem; margin-bottom:1rem; }
.legal li{ margin-bottom:.35rem; }
.legal a{ color:var(--brand-tx); text-decoration:underline; text-underline-offset:3px; }

.no-hay{ min-height:60dvh; display:grid; place-items:center; text-align:center; padding-block:4rem; }
.no-hay .t-cuerpo{ margin:1rem auto 2rem; }

/* ---------- Pie ---------- */
.pie{ border-top:1px solid var(--line); padding-block:3.5rem 3rem; }
.pie-fila{ display:grid; gap:2rem; }
.pie p.t-peq{ max-width:36ch; margin-top:1rem; }
.pie nav{ display:flex; flex-wrap:wrap; gap:.75rem 1.75rem; font-size:.94rem; color:var(--tx-2); }
.pie nav a:hover{ color:var(--tx); }
.pie-bajo{ margin-top:2.5rem; padding-top:1.5rem; border-top:1px solid var(--line); font-size:.88rem; color:var(--tx-3);
  display:flex; flex-wrap:wrap; gap:.5rem 1.5rem; justify-content:space-between; }
@media (min-width: 860px){ .pie-fila{ grid-template-columns:minmax(0, 1fr) auto; align-items:end; } }

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ transition-duration:.01ms !important; animation-duration:.01ms !important; animation-delay:0s !important; }
}

/* ---------- Calculadora de la web por suscripción (/calcula) ----------
   Modal nativo <dialog>. En el móvil ocupa la pantalla como una hoja;
   en el ordenador es una caja centrada. Todo opaco, sin capas translúcidas. */
.calc{ padding:0; border:0; background:transparent; color:var(--tx); width:100%; max-width:680px;
  max-height:100dvh; margin:auto; }
.calc::backdrop{ background:rgb(6 10 7 / .62); }
.calc-caja{ display:flex; flex-direction:column; background:var(--sur); border:1px solid var(--line);
  border-radius:var(--r-lg); box-shadow:var(--sombra); max-height:min(92dvh, 860px); overflow:hidden; }
.calc-cab{ display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; padding:1.25rem 1.25rem .75rem; }
.calc-paso-txt{ font-size:.82rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--brand-tx); }
.calc-titulo{ font-size:1.55rem; font-weight:760; letter-spacing:-.03em; margin-top:.15rem; }
.calc-cerrar{ display:grid; place-items:center; width:40px; height:40px; border-radius:var(--r-sm); border:1px solid var(--line);
  background:transparent; color:var(--tx-2); cursor:pointer; }
.calc-cerrar .ico{ width:18px; height:18px; }
.calc-barra{ height:4px; margin:0 1.25rem; border-radius:2px; background:var(--bg-2); overflow:hidden; }
.calc-barra span{ display:block; height:100%; width:20%; background:var(--brand); border-radius:2px; transition:width .35s var(--ease); }
.calc-cuerpo{ padding:1.25rem; overflow-y:auto; flex:1; }
.calc-pregunta{ font-size:1.2rem; font-weight:700; letter-spacing:-.02em; margin-bottom:.9rem; }
.calc-pregunta small{ font-size:.85rem; font-weight:500; color:var(--tx-3); margin-left:.35rem; }
.calc-tipo input, .calc-extra input, .calc-chip input{ position:absolute; opacity:0; pointer-events:none; }
.calc-tipos, .calc-extras{ display:flex; flex-direction:column; gap:.65rem; }
.calc-tipo-caja, .calc-extra-caja{ display:flex; flex-direction:column; gap:.3rem; padding:1rem 1.1rem; border:1.5px solid var(--line);
  border-radius:var(--r-sm); background:var(--bg); cursor:pointer; transition:border-color .2s, background .2s; }
.calc-extra-caja{ flex-direction:row; align-items:center; justify-content:space-between; gap:1rem; }
.calc-tipo-fila{ display:flex; align-items:baseline; justify-content:space-between; gap:1rem; }
.calc-tipo-fila strong, .calc-extra-caja strong{ font-size:1.02rem; font-weight:680; }
.calc-tipo-txt, .calc-extra-txt{ font-size:.9rem; color:var(--tx-2); line-height:1.45; }
.calc-extra-txt{ display:block; margin-top:.15rem; }
.calc-precio{ font-weight:750; color:var(--brand-tx); white-space:nowrap; }
.calc-precio small{ font-size:.78rem; font-weight:500; color:var(--tx-3); }
.calc input:checked + .calc-tipo-caja, .calc input:checked + .calc-extra-caja{ border-color:var(--brand); background:var(--brand-wash); }
.calc input:focus-visible + .calc-tipo-caja, .calc input:focus-visible + .calc-extra-caja, .calc input:focus-visible + span{ outline:2px solid var(--brand); outline-offset:2px; }
.calc-chips{ display:flex; flex-wrap:wrap; gap:.55rem; }
.calc-chip span{ display:inline-flex; align-items:center; min-height:44px; padding:0 1.05rem; border:1.5px solid var(--line); border-radius:var(--r-sm);
  background:var(--bg); font-weight:560; cursor:pointer; transition:border-color .2s, background .2s; }
.calc-chip input:checked + span{ border-color:var(--brand); background:var(--brand-wash); color:var(--brand-tx); }
.calc-resultado{ padding:1.15rem 1.2rem; border-radius:var(--r-sm); background:var(--bg); border:1px solid var(--line); margin-bottom:1.4rem; }
.calc-res-tit{ font-weight:650; color:var(--tx-2); }
.calc-res-precio{ font-size:2.8rem; font-weight:800; letter-spacing:-.05em; line-height:1.05; color:var(--brand-tx); margin:.2rem 0 .7rem; }
.calc-res-precio small{ font-size:1rem; font-weight:550; letter-spacing:0; color:var(--tx-3); }
.calc-res-lista{ list-style:none; padding:0; display:grid; gap:.35rem; font-size:.95rem; }
.calc-res-lista li{ display:flex; justify-content:space-between; gap:1rem; padding-bottom:.35rem; border-bottom:1px dashed var(--line); }
.calc-res-lista b{ font-weight:650; color:var(--tx-2); }
.calc-condiciones{ list-style:none; padding:0; margin-top:.9rem; display:flex; flex-wrap:wrap; gap:.4rem 1rem; font-size:.88rem; font-weight:560; color:var(--brand-tx); }
.calc-condiciones li{ display:flex; align-items:center; gap:.35rem; }
.calc-condiciones .ico{ width:16px; height:16px; }
.calc-datos{ display:grid; gap:.9rem; margin-bottom:1rem; }
.calc-error{ margin-top:.8rem; color:var(--danger); font-weight:560; font-size:.94rem; }
.calc-hecho{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:.6rem; padding:1.5rem 0 1rem; }
.calc-hecho-ico{ display:grid; place-items:center; width:64px; height:64px; border-radius:50%; background:var(--brand); color:var(--on-brand); }
.calc-hecho-ico .ico{ width:32px; height:32px; }
.calc-hecho .btn{ margin-top:.6rem; }
.calc-pie{ display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.95rem 1.25rem; border-top:1px solid var(--line); background:var(--sur); }
.calc-total{ display:flex; flex-direction:column; line-height:1.2; white-space:nowrap; }
.calc-total-txt{ font-size:.8rem; font-weight:600; color:var(--tx-3); text-transform:uppercase; letter-spacing:.05em; }
.calc-total strong{ font-size:1.5rem; font-weight:800; letter-spacing:-.03em; color:var(--brand-tx); }
.calc-total small{ font-size:.78rem; color:var(--tx-3); }
.calc-botones{ display:flex; gap:.5rem; }
@media (min-width: 640px){
  .calc-datos{ grid-template-columns:1fr 1fr; }
  .calc-cab, .calc-cuerpo{ padding-left:1.75rem; padding-right:1.75rem; }
  .calc-barra{ margin:0 1.75rem; }
  .calc-pie{ padding:1rem 1.75rem; }
}
@media (max-width: 639px){
  .calc{ max-width:none; height:100dvh; margin:0; }
  .calc-caja{ height:100dvh; max-height:none; border-radius:0; border:0; }
  .calc-botones .btn{ min-height:46px; }
  .calc-atras-txt{ display:none; }
  #calcAtras{ padding:0 .8rem; }
  .calc-total-txt{ display:none; }
}
@media (prefers-reduced-motion: reduce){ .calc-barra span{ transition:none; } }