/* =============================================================
   Intrawords · Subtitulado especial — sistema de diseño de la landing
   Paleta §5.2, tipografía §5.3, efectos §5.4. Sin dependencias.
   ============================================================= */

/* ----- Fuentes autoalojadas (§5.3) ----- */
@font-face{ font-family:"Sora"; src:url("/assets/fonts/sora-latin-600-normal.woff2") format("woff2"); font-weight:600; font-display:swap; }
@font-face{ font-family:"Sora"; src:url("/assets/fonts/sora-latin-700-normal.woff2") format("woff2"); font-weight:700; font-display:swap; }
@font-face{ font-family:"Inter"; src:url("/assets/fonts/inter-latin-400-normal.woff2") format("woff2"); font-weight:400; font-display:swap; }
@font-face{ font-family:"Inter"; src:url("/assets/fonts/inter-latin-500-normal.woff2") format("woff2"); font-weight:500; font-display:swap; }
@font-face{ font-family:"Inter"; src:url("/assets/fonts/inter-latin-600-normal.woff2") format("woff2"); font-weight:600; font-display:swap; }

/* ----- Tokens ----- */
:root{
  /* Marca */
  --iw-navy:#143251; --iw-steel:#5B7E9A; --iw-blue:#076CF0; --iw-blue-dark:#0C4DA2;
  /* Tinta y grises */
  --iw-ink:#2A3338; --iw-black:#060A0D; --iw-grey:#6B6B6B; --iw-grey-200:#D9DEE4; --iw-grey-100:#F1F1F1; --iw-white:#FFFFFF;
  /* Acento: solo para señalar accesibilidad. Sobre blanco, siempre la versión oscura */
  --iw-accent:#00C2A8; --iw-accent-dark:#00806F;
  /* Sobre fondo oscuro, para texto pequeño: el acento puro se queda en 4,0:1 en la zona más
     clara del degradado del hero (#1B4A78); esta versión da 5,3:1 (revisión de la fase 8). */
  --iw-accent-claro:#3DDBC4;
  /* Estados */
  --iw-ok:#1E8E57; --iw-warn:#C27A00; --iw-error:#C8433F;
  /* Degradados */
  --iw-grad-hero:radial-gradient(120% 120% at 15% 0%, #1B4A78 0%, #143251 45%, #0B1F34 100%);
  --iw-grad-cta:linear-gradient(135deg, #076CF0 0%, #0C4DA2 100%);

  --fuente-titulos:"Sora", "Segoe UI", system-ui, sans-serif;
  --fuente-texto:"Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --ancho:1200px;
  --margen:clamp(1rem, 4vw, 2rem);
  --radio:14px;
  --sombra:0 10px 30px rgb(20 50 81 / .10);
  --cabecera:72px;
  --seccion:clamp(4rem, 9vw, 7.5rem);
}
/* --iw-grey de la especificación (#878787) no llega a 4,5:1 sobre blanco; para texto
   secundario usamos #6B6B6B (5,3:1). §5.2: el contraste no es negociable. */

/* ----- Base ----- */
*, *::before, *::after{ box-sizing:border-box; }
/* El atributo hidden manda siempre: sin esto, cualquier clase con display (p. ej. .boton)
   lo anula y el elemento se ve y recibe el foco (revisión de teclado, fase 8). */
[hidden]{ display:none !important; }

html{ scroll-behavior:smooth; scroll-padding-top:calc(var(--cabecera) + 1rem); -webkit-text-size-adjust:100%; }
body{
  margin:0; font-family:var(--fuente-texto); font-size:1.0625rem; line-height:1.65;
  color:var(--iw-ink); background:var(--iw-white); overflow-x:hidden;
}
img, svg{ max-width:100%; height:auto; display:block; }
a{ color:var(--iw-blue-dark); text-underline-offset:.2em; }
a:hover{ color:var(--iw-blue); }
:focus-visible{ outline:3px solid var(--iw-blue); outline-offset:2px; border-radius:4px; }
.fondo-oscuro :focus-visible{ outline-color:#7FB5FF; }

h1, h2, h3{ font-family:var(--fuente-titulos); color:var(--iw-black); margin:0 0 .6em; text-wrap:balance; }
h1{ font-size:clamp(2.6rem, 5vw, 4.2rem); line-height:1.05; letter-spacing:-.02em; font-weight:700; }
h2{ font-size:clamp(2rem, 3.4vw, 2.9rem); line-height:1.12; letter-spacing:-.015em; font-weight:700; }
h3{ font-size:clamp(1.3rem, 2vw, 1.6rem); line-height:1.2; font-weight:600; }
p{ margin:0 0 1em; max-width:68ch; }

.visualmente-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;
}
.saltar{
  position:fixed; left:1rem; top:-4rem; z-index:100; padding:.6rem 1rem; border-radius:8px;
  background:var(--iw-blue); color:var(--iw-white); font-weight:600; text-decoration:none;
}
.saltar:focus{ top:1rem; color:var(--iw-white); }

.contenedor{ width:100%; max-width:var(--ancho); margin-inline:auto; padding-inline:var(--margen); }
.seccion{ padding-block:var(--seccion); }
.seccion--gris{ background:var(--iw-grey-100); }
.antetitulo{
  display:inline-block; margin-bottom:.8rem; font-size:.85rem; font-weight:600; letter-spacing:.08em;
  text-transform:uppercase; color:var(--iw-accent-dark);
}
.fondo-oscuro .antetitulo{ color:var(--iw-accent-claro); }
/* Sobre el gris #F1F1F1 el acento oscuro da 4,3:1; este tono da 5,9:1 (AA) */
.seccion--gris .antetitulo{ color:#00695B; }
.entradilla{ font-size:clamp(1.1rem, 1.6vw, 1.25rem); color:var(--iw-ink); }
.cabecera-seccion{ max-width:46rem; margin-bottom:clamp(2rem, 5vw, 3.5rem); }
.cabecera-seccion--centro{ margin-inline:auto; text-align:center; }
.cabecera-seccion--centro p{ margin-inline:auto; }

/* ----- Botones (efecto 9: «cursor de subtitulado») ----- */
.boton{
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  min-height:48px; padding:.8rem 1.5rem; border:2px solid transparent; border-radius:999px;
  font:600 1rem/1.2 var(--fuente-texto); text-decoration:none; cursor:pointer; overflow:hidden;
  transition:transform .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.boton--primario{ background:var(--iw-grad-cta); color:var(--iw-white); box-shadow:0 8px 24px rgb(7 108 240 / .35); }
.boton--primario:hover{ color:var(--iw-white); transform:translateY(-2px); box-shadow:0 12px 30px rgb(7 108 240 / .45); }
.boton--secundario{ background:transparent; color:var(--iw-white); border-color:rgb(255 255 255 / .55); }
.boton--secundario:hover{ color:var(--iw-white); border-color:var(--iw-white); background:rgb(255 255 255 / .08); }
.boton--claro{ background:transparent; color:var(--iw-navy); border-color:var(--iw-navy); }
.boton--claro:hover{ color:var(--iw-navy); background:rgb(20 50 81 / .06); }
/* Un rectángulo tipo «caption» se desliza bajo el texto al pasar el ratón */
.boton::after{
  content:""; position:absolute; left:50%; bottom:7px; width:56%; height:3px; border-radius:2px;
  background:var(--iw-accent); transform:translateX(-50%) scaleX(0); transform-origin:left center;
  transition:transform .3s cubic-bezier(.2,.8,.2,1);
}
.boton:hover::after, .boton:focus-visible::after{ transform:translateX(-50%) scaleX(1); }

/* ----- Barra superior (§6.2 sección 1) ----- */
.cabecera{
  position:fixed; inset:0 0 auto; z-index:50; height:var(--cabecera);
  transition:background-color .3s ease, box-shadow .3s ease;
}
.cabecera.is-scrolled{
  background:rgb(11 31 52 / .82); box-shadow:0 6px 24px rgb(0 0 0 / .18);
  -webkit-backdrop-filter:blur(14px) saturate(1.4); backdrop-filter:blur(14px) saturate(1.4);
}
.cabecera__interior{ display:flex; align-items:center; gap:1.5rem; height:100%; }
.cabecera__logo img{ width:132px; height:auto; }
.cabecera__nav{ margin-left:auto; }
.cabecera__lista{ display:flex; align-items:center; gap:1.75rem; margin:0; padding:0; list-style:none; }
.cabecera__lista a{ color:var(--iw-white); text-decoration:none; font-weight:500; font-size:.95rem; white-space:nowrap; }
.cabecera__lista a:hover{ color:var(--iw-accent-claro); }
.cabecera__telefono{ display:inline-flex; align-items:center; gap:.4rem; white-space:nowrap; }
.cabecera__cta{ min-height:42px; padding:.55rem 1.1rem; font-size:.92rem; }
.cabecera__menu{ display:none; }

@media (max-width: 1100px){
  .cabecera__menu{
    display:inline-flex; align-items:center; justify-content:center; margin-left:auto;
    width:48px; height:48px; border:0; border-radius:12px; background:rgb(255 255 255 / .1); color:var(--iw-white); cursor:pointer;
  }
  .cabecera__nav{
    position:fixed; inset:var(--cabecera) 0 auto; margin:0; padding:1rem var(--margen) 1.5rem;
    background:#0B1F34; box-shadow:0 20px 40px rgb(0 0 0 / .35); display:none;
  }
  .cabecera__nav.is-open{ display:block; }
  .cabecera__lista{ flex-direction:column; align-items:stretch; gap:.25rem; }
  .cabecera__lista a{ display:block; padding:.8rem 0; font-size:1.05rem; }
  .cabecera__lista .cabecera__telefono{ display:flex; }
  .cabecera__lista .boton{ display:flex; margin-top:.5rem; padding:.8rem 1.5rem; }
}

/* ----- Hero (§6.2 sección 2) ----- */
.hero{
  position:relative; isolation:isolate; overflow:hidden; color:var(--iw-white);
  background:var(--iw-grad-hero); padding:calc(var(--cabecera) + clamp(3rem, 8vw, 6rem)) 0 clamp(4rem, 9vw, 7rem);
}
/* Efecto 3: degradado mesh animado, solo CSS */
.hero::before, .hero::after{
  content:""; position:absolute; z-index:-1; width:70vmax; height:70vmax; border-radius:50%;
  filter:blur(60px); opacity:.55; animation:mesh 40s ease-in-out infinite alternate;
}
.hero::before{ top:-30vmax; right:-20vmax; background:radial-gradient(circle, #076CF0 0%, transparent 65%); }
.hero::after{ bottom:-35vmax; left:-25vmax; background:radial-gradient(circle, #00C2A8 0%, transparent 60%); opacity:.28; animation-duration:52s; }
@keyframes mesh{
  0%{ transform:translate3d(0,0,0) scale(1); }
  50%{ transform:translate3d(-8vmax, 6vmax, 0) scale(1.15); }
  100%{ transform:translate3d(6vmax, -4vmax, 0) scale(.95); }
}
.hero__rejilla{ display:grid; grid-template-columns:minmax(0, 1.05fr) minmax(0, .95fr); gap:clamp(2rem, 5vw, 4rem); align-items:center; }
.hero h1{ color:var(--iw-white); }
.hero__subtitulo{ font-size:clamp(1.1rem, 1.7vw, 1.3rem); color:rgb(255 255 255 / .86); max-width:36rem; }
.hero__botones{ display:flex; flex-wrap:wrap; gap:.9rem; margin-top:2rem; }

/* Reproductor simulado con subtítulos y onda de audiodescripción */
.reproductor{
  position:relative; margin:0; border-radius:20px; padding:12px; background:rgb(255 255 255 / .06);
  border:1px solid rgb(255 255 255 / .14); box-shadow:0 30px 80px rgb(0 0 0 / .35);
}
.reproductor__pantalla{
  position:relative; aspect-ratio:16 / 10; border-radius:12px; overflow:hidden;
  background:radial-gradient(80% 90% at 70% 20%, #2A5C8E 0%, #10263E 55%, #081624 100%);
}
.reproductor__marca{
  position:absolute; top:14px; left:14px; display:flex; gap:.4rem;
}
.etiqueta{
  display:inline-flex; align-items:center; gap:.35rem; padding:.25rem .55rem; border-radius:6px;
  font-size:.72rem; font-weight:600; letter-spacing:.06em; background:rgb(0 0 0 / .45); color:var(--iw-white);
}
.etiqueta--acento{ background:var(--iw-accent); color:var(--iw-black); }
.reproductor__onda{ position:absolute; inset:28% 8% 34%; }
.reproductor__onda svg{ width:100%; height:100%; }
.reproductor__onda rect{ fill:rgb(255 255 255 / .55); }
.reproductor__onda rect:nth-child(3n){ fill:var(--iw-accent); }
.subtitulo-vivo{
  position:absolute; left:50%; bottom:9%; transform:translateX(-50%); width:88%;
  text-align:center; font-weight:500; font-size:clamp(.9rem, 1.5vw, 1.05rem); line-height:1.45;
}
.subtitulo-vivo__texto{
  display:inline; padding:.2em .45em; background:rgb(0 0 0 / .72); color:#FFF7A8;
  -webkit-box-decoration-break:clone; box-decoration-break:clone; border-radius:4px;
}
.subtitulo-vivo__cursor{
  display:inline-block; width:.55em; height:1.1em; margin-left:2px; vertical-align:-.15em;
  background:#FFF7A8; animation:parpadeo 1s steps(1) infinite;
}
@keyframes parpadeo{ 50%{ opacity:0; } }
.reproductor__controles{ display:flex; align-items:center; gap:.8rem; padding:12px 6px 4px; color:rgb(255 255 255 / .8); font-size:.8rem; }
.reproductor__barra{ flex:1; height:4px; border-radius:2px; background:rgb(255 255 255 / .18); overflow:hidden; }
.reproductor__progreso{ display:block; width:38%; height:100%; background:var(--iw-accent); animation:progreso 24s linear infinite; }
@keyframes progreso{ from{ width:0; } to{ width:100%; } }

@media (max-width: 900px){
  .hero__rejilla{ grid-template-columns:1fr; }
}
@media (max-width: 560px){
  /* Pantalla más alta en móvil para que el subtítulo (hasta 3 líneas) no pise la onda */
  .reproductor__pantalla{ aspect-ratio:4 / 3.4; }
  .reproductor__onda{ inset:22% 8% 46%; }
  .subtitulo-vivo{ font-size:.85rem; bottom:6%; }
}

/* ----- Confianza (sección 3) ----- */
.confianza{ padding-block:clamp(3rem, 6vw, 4.5rem); background:var(--iw-white); border-bottom:1px solid var(--iw-grey-200); }
.confianza__fila{ display:grid; grid-template-columns:auto 1fr; gap:clamp(1.5rem, 4vw, 3.5rem); align-items:center; }
.confianza__sellos{ position:relative; overflow:hidden; width:min(300px, 100%); }
.confianza__texto{ margin:0 0 1.25rem; font-weight:500; }
.contadores{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:1rem; margin:0; padding:0; list-style:none; }
.contador__cifra{ display:block; font:700 clamp(2rem, 4vw, 2.8rem)/1 var(--fuente-titulos); color:var(--iw-navy); font-variant-numeric:tabular-nums; }
.contador__etiqueta{ display:block; margin-top:.35rem; font-size:.95rem; color:var(--iw-grey); }
.clientes{ margin-top:clamp(2rem, 5vw, 3rem); }
.clientes__titulo{ margin:0 0 1rem; text-align:center; font-size:.85rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--iw-grey); }
.clientes__lista{ display:grid; grid-template-columns:repeat(5, minmax(0, 1fr)); gap:.5rem 1.5rem; margin:0; padding:0; list-style:none; align-items:center; }
.clientes__lista img{ width:100%; max-width:120px; margin-inline:auto; filter:grayscale(1); opacity:.75; transition:opacity .25s ease; }
.clientes__lista li:hover img{ opacity:1; }
@media (max-width: 760px){
  .confianza__fila{ grid-template-columns:1fr; justify-items:center; text-align:center; }
  .confianza__texto{ margin-inline:auto; }
  .clientes__lista{ grid-template-columns:repeat(3, minmax(0, 1fr)); }
}

/* Efecto 10: barrido de luz diagonal en los sellos cada 6 s */
.brillo{ position:relative; display:block; overflow:hidden; }
.brillo::after{
  content:""; position:absolute; inset:-50% auto -50% -60%; width:40%;
  background:linear-gradient(105deg, transparent 0%, rgb(255 255 255 / .55) 50%, transparent 100%);
  transform:translateX(0) skewX(-12deg); animation:brillo 6s ease-in-out infinite; pointer-events:none;
}
@keyframes brillo{ 0%, 70%{ transform:translateX(0) skewX(-12deg); } 100%{ transform:translateX(450%) skewX(-12deg); } }

/* ----- El problema / la ayuda (sección 4) ----- */
.problema__rejilla{ display:grid; grid-template-columns:minmax(0, 1.2fr) minmax(0, .8fr); gap:clamp(2rem, 6vw, 5rem); align-items:center; }
.problema__dato{
  padding:clamp(1.5rem, 3vw, 2.25rem); border-radius:var(--radio); background:var(--iw-navy); color:var(--iw-white);
  box-shadow:var(--sombra);
}
.problema__dato strong{ display:block; font:700 clamp(1.4rem, 2.4vw, 1.8rem)/1.2 var(--fuente-titulos); margin-bottom:.6rem; }
.problema__dato p{ margin:0; color:rgb(255 255 255 / .85); }
.problema__dato a{ color:var(--iw-white); font-weight:600; }
.enlace-externo::after{ content:" ↗"; }
@media (max-width: 860px){ .problema__rejilla{ grid-template-columns:1fr; } }

/* ----- Servicios (sección 5, efecto 5: inclinación) ----- */
.servicios__rejilla{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:clamp(1rem, 2.5vw, 1.75rem); }
.tarjeta{
  position:relative; display:flex; flex-direction:column; padding:clamp(1.5rem, 3vw, 2rem);
  border-radius:var(--radio); background:var(--iw-white); border:1px solid var(--iw-grey-200);
  box-shadow:var(--sombra); transition:transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease;
  transform-style:preserve-3d; will-change:transform;
}
.tarjeta:hover{ box-shadow:0 20px 45px rgb(20 50 81 / .16); }
.tarjeta__icono{
  display:grid; place-items:center; width:56px; height:56px; margin-bottom:1.25rem; border-radius:14px;
  background:rgb(0 194 168 / .12); color:var(--iw-accent-dark);
}
.tarjeta__icono svg{ width:28px; height:28px; }
.tarjeta h3{ color:var(--iw-navy); }
.tarjeta p{ font-size:1rem; }
.tarjeta__datos{ margin:auto 0 0; padding:1rem 0 0; border-top:1px solid var(--iw-grey-200); display:grid; gap:.6rem; font-size:.92rem; }
.tarjeta__datos div{ display:grid; grid-template-columns:5.5rem 1fr; gap:.5rem; }
.tarjeta__datos dt{ font-weight:600; color:var(--iw-navy); }
.tarjeta__datos dd{ margin:0; }
@media (max-width: 900px){ .servicios__rejilla{ grid-template-columns:1fr; } }

/* ----- Cómo funciona (sección 6): línea de tiempo ----- */
.pasos{ position:relative; display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:1.5rem; margin:0; padding:0; list-style:none; counter-reset:paso; }
.pasos::before{
  content:""; position:absolute; top:27px; left:12%; right:12%; height:2px;
  background:linear-gradient(90deg, var(--iw-accent) 0%, var(--iw-blue) 100%); opacity:.5;
}
.paso{ position:relative; text-align:center; counter-increment:paso; }
.paso::before{
  content:counter(paso); display:grid; place-items:center; width:56px; height:56px; margin:0 auto 1.1rem;
  border-radius:50%; background:var(--iw-white); border:2px solid var(--iw-blue); color:var(--iw-blue-dark);
  font:700 1.3rem/1 var(--fuente-titulos); position:relative; z-index:1;
}
.paso h3{ font-size:1.2rem; color:var(--iw-navy); }
.paso p{ font-size:.98rem; margin-inline:auto; }
@media (max-width: 860px){
  .pasos{ grid-template-columns:1fr; gap:2rem; }
  .pasos::before{ top:0; bottom:0; left:27px; right:auto; width:2px; height:auto; background:linear-gradient(180deg, var(--iw-accent), var(--iw-blue)); }
  .paso{ display:grid; grid-template-columns:56px 1fr; column-gap:1.25rem; text-align:left; }
  .paso::before{ grid-row:span 2; margin:0; }
  .paso p{ margin-inline:0; }
}

/* ----- Presupuestador (sección 7) ----- */
.presupuesto{ background:var(--iw-grad-hero); color:var(--iw-white); }
.presupuesto h2{ color:var(--iw-white); }
.presupuesto .entradilla{ color:rgb(255 255 255 / .86); }
.presupuesto__caja{
  max-width:52rem; margin-inline:auto; padding:clamp(1.5rem, 4vw, 3rem); border-radius:20px;
  background:var(--iw-white); color:var(--iw-ink); box-shadow:0 30px 80px rgb(0 0 0 / .3);
}
.presupuestador__sin-js{ margin:0; text-align:center; }

/* Efecto 7: barra de progreso con marcas por paso; el activo late suavemente */
.presupuestador__progreso{ position:relative; margin-bottom:.5rem; }
.presupuestador__barra{ position:absolute; top:15px; left:16px; right:16px; height:4px; border-radius:2px; background:var(--iw-grey-200); overflow:hidden; }
.presupuestador__barra span{ display:block; height:100%; width:0; background:var(--iw-grad-cta); transition:width .3s ease; }
.presupuestador__marcas{ position:relative; display:flex; justify-content:space-between; margin:0; padding:0; list-style:none; }
.presupuestador__marcas li{
  display:grid; place-items:center; width:34px; height:34px; border-radius:50%;
  background:var(--iw-white); border:2px solid var(--iw-grey-200); color:var(--iw-grey);
  font:600 .9rem/1 var(--fuente-titulos); transition:background-color .3s ease, border-color .3s ease, color .3s ease;
}
.presupuestador__marcas li.is-hecho{ background:var(--iw-blue); border-color:var(--iw-blue); color:var(--iw-white); }
.presupuestador__marcas li.is-activo{ border-color:var(--iw-blue); color:var(--iw-blue-dark); animation:latido 2s ease-in-out infinite; }
@keyframes latido{ 0%, 100%{ box-shadow:0 0 0 0 rgb(7 108 240 / .35); } 50%{ box-shadow:0 0 0 7px rgb(7 108 240 / 0); } }
.presupuestador__estado{ margin:0 0 1.25rem; font-size:.9rem; font-weight:600; color:var(--iw-grey); text-align:center; }

/* Efecto 8: transición entre pasos (220 ms) */
.paso-form{ animation:entrar-paso .22s ease both; }
.paso-form.is-saliendo{ animation:salir-paso .22s ease both; }
@keyframes entrar-paso{ from{ opacity:0; transform:translateX(16px); } to{ opacity:1; transform:none; } }
@keyframes salir-paso{ from{ opacity:1; transform:none; } to{ opacity:0; transform:translateX(-16px); } }
.paso-form fieldset{ margin:0; padding:0; border:0; min-width:0; }
.paso-form legend{ padding:0; }
.paso-form__titulo{ margin:0 0 .4rem; font-size:clamp(1.35rem, 2.4vw, 1.7rem); color:var(--iw-navy); }
.paso-form__titulo:focus{ outline:none; }
.paso-form__titulo:focus-visible{ outline:3px solid var(--iw-blue); }
.paso-form__ayuda{ margin:.35rem 0 .8rem; font-size:.93rem; color:var(--iw-grey); }
.paso-form__pregunta{ margin:.5rem 0 .8rem; font-weight:600; }
.paso-form__nota{ margin:1rem 0 0; font-size:.93rem; color:var(--iw-grey); }

.presupuestador .campo{ display:block; margin:0 0 1.4rem; padding:0; border:0; min-width:0; }
.presupuestador .campo > label, .presupuestador .campo > legend{ display:block; margin-bottom:.45rem; font-weight:600; color:var(--iw-ink); }
.presupuestador input[type="text"], .presupuestador input[type="email"], .presupuestador input[type="tel"],
.presupuestador input[type="number"], .presupuestador select, .presupuestador textarea{
  width:100%; min-height:48px; padding:.65rem .8rem; font:inherit; font-size:1rem; color:var(--iw-ink);
  background:var(--iw-white); border:1.5px solid #9AA6B2; border-radius:10px;
}
.presupuestador textarea{ min-height:96px; resize:vertical; }
.presupuestador [aria-invalid="true"]{ border-color:var(--iw-error); box-shadow:0 0 0 1px var(--iw-error); }
.opcional{ font-weight:400; color:var(--iw-grey); }
.campos-dos{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); column-gap:1.25rem; }
@media (max-width: 640px){ .campos-dos{ grid-template-columns:1fr; } }

.duracion{ display:flex; gap:1rem; }
.duracion label{ display:flex; align-items:center; gap:.5rem; font-weight:500; }
.duracion input{ width:7rem !important; }

/* Opciones: radios y casillas grandes, con el input nativo (accesible) */
.opciones{ display:grid; gap:.6rem; }
.opciones--tarjetas{ grid-template-columns:repeat(auto-fit, minmax(13rem, 1fr)); }
.opciones--linea{ grid-template-columns:repeat(2, minmax(0, 9rem)); }
.opciones--rejilla{ grid-template-columns:repeat(auto-fill, minmax(9.5rem, 1fr)); }
.opcion{
  position:relative; display:flex; align-items:center; gap:.65rem; min-height:52px; padding:.7rem .9rem;
  border:1.5px solid var(--iw-grey-200); border-radius:12px; background:var(--iw-white); cursor:pointer;
  transition:border-color .2s ease, background-color .2s ease;
}
.opcion:hover{ border-color:var(--iw-steel); }
.opcion input{ width:20px; height:20px; margin:0; flex:none; accent-color:var(--iw-blue); }
.opcion:has(input:checked){ border-color:var(--iw-blue); background:rgb(7 108 240 / .06); }
.opcion:has(input:focus-visible){ outline:3px solid var(--iw-blue); outline-offset:2px; }
.casilla{ display:flex; gap:.65rem; align-items:flex-start; font-weight:400 !important; cursor:pointer; }
.casilla input{ width:20px; height:20px; margin:.2rem 0 0; flex:none; accent-color:var(--iw-blue); }

.campo__error{ margin:.45rem 0 0; font-size:.92rem; font-weight:600; color:var(--iw-error); }
.campo__error::before{ content:"⚠ "; }
.presupuestador__resumen-errores{ margin-bottom:1.25rem; padding:.85rem 1rem; border-radius:10px; border-left:4px solid var(--iw-error); background:#FBEDEC; color:#8E2B28; font-weight:600; }
.aviso-form{ margin:0 0 1.25rem; padding:.85rem 1rem; border-radius:10px; border-left:4px solid; font-size:.95rem; }
.aviso-form--aviso{ border-color:var(--iw-warn); background:#FFF6E5; color:#5C3B00; }
.aviso-form--recargo{ border-color:var(--iw-error); background:#FBEDEC; color:#8E2B28; }
.aviso-form--info{ border-color:var(--iw-blue); background:#EAF2FE; color:#0C3D80; }
.trampa{ position:absolute; left:-10000px; width:1px; height:1px; overflow:hidden; }

/* Calendario de entregas (§8.7) */
.calendario{ display:grid; gap:1.25rem; }
.calendario__semana{ margin:0; padding:0; border:0; min-width:0; }
.calendario__semana legend{ margin-bottom:.5rem; font-weight:600; color:var(--iw-navy); }
.calendario__dias{ display:grid; grid-template-columns:repeat(5, minmax(0, 1fr)); gap:.5rem; }
.calendario__dia{ display:grid; gap:.35rem; align-content:start; }
.calendario__fecha{ font-size:.82rem; font-weight:600; text-align:center; color:var(--iw-ink); text-transform:capitalize; }
.tramo{ position:relative; display:block; cursor:pointer; }
.tramo input{ position:absolute; opacity:0; inset:0; margin:0; cursor:pointer; }
.tramo span{
  display:block; padding:.5rem .25rem; border-radius:8px; border:1.5px solid; text-align:center;
  font-size:.78rem; line-height:1.25; transition:background-color .2s ease;
}
.tramo--libre span{ border-color:var(--iw-ok); color:#14653D; background:#EAF6EF; }
.tramo--recargo span{ border-color:var(--iw-warn); color:#6B4300; background:#FFF6E5; }
.tramo--bloqueado{ cursor:not-allowed; }
.tramo--bloqueado span{ border-color:var(--iw-grey-200); color:#8A8F94; background:var(--iw-grey-100); text-decoration:line-through; }
.tramo input:checked + span{ background:var(--iw-blue); border-color:var(--iw-blue); color:var(--iw-white); text-decoration:none; }
.tramo input:focus-visible + span{ outline:3px solid var(--iw-blue); outline-offset:2px; }
.calendario__leyenda{ display:flex; flex-wrap:wrap; gap:1rem; margin:.9rem 0 0; padding:0; list-style:none; font-size:.85rem; color:var(--iw-grey); }
.calendario__leyenda li{ display:flex; align-items:center; gap:.4rem; }
.punto{ width:12px; height:12px; border-radius:3px; border:1.5px solid; }
.punto--libre{ border-color:var(--iw-ok); background:#EAF6EF; }
.punto--recargo{ border-color:var(--iw-warn); background:#FFF6E5; }
.punto--bloqueado{ border-color:var(--iw-grey-200); background:var(--iw-grey-100); }
@media (max-width: 560px){
  .calendario__dias{ grid-template-columns:repeat(5, minmax(3.6rem, 1fr)); overflow-x:auto; padding-bottom:.25rem; }
}

.presupuestador__botones{ display:flex; justify-content:space-between; gap:1rem; margin-top:1.75rem; padding-top:1.25rem; border-top:1px solid var(--iw-grey-200); }
.presupuestador__botones [data-siguiente], .presupuestador__botones [data-enviar]{ margin-left:auto; }
.presupuestador__botones .boton[disabled]{ opacity:.6; cursor:progress; }
.presupuestador__confirmacion{ text-align:center; }
.presupuestador__confirmacion:focus{ outline:none; }
.presupuestador__confirmacion h3{ color:var(--iw-navy); }
.presupuestador__confirmacion p{ margin-inline:auto; }

/* ----- Por qué Intrawords (sección 8) ----- */
.argumentos{ display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:clamp(1.25rem, 3vw, 2rem); margin:0; padding:0; list-style:none; }
.argumento__icono{ width:48px; height:48px; margin-bottom:1rem; color:var(--iw-blue-dark); }
.argumento h3{ font-size:1.15rem; color:var(--iw-navy); }
.argumento p{ font-size:.98rem; }
@media (max-width: 960px){ .argumentos{ grid-template-columns:repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px){ .argumentos{ grid-template-columns:1fr; } }

/* ----- FAQ (sección 9): <details> nativo ----- */
.faq{ max-width:52rem; margin-inline:auto; }
.faq__item{ border-bottom:1px solid var(--iw-grey-200); }
.faq__item summary{
  position:relative; padding:1.25rem 3rem 1.25rem 0; cursor:pointer; list-style:none;
  font:600 clamp(1.05rem, 1.6vw, 1.2rem)/1.35 var(--fuente-titulos); color:var(--iw-navy);
}
.faq__item summary::-webkit-details-marker{ display:none; }
.faq__item summary::after{
  content:""; position:absolute; right:.5rem; top:50%; width:12px; height:12px; margin-top:-8px;
  border-right:2px solid var(--iw-blue); border-bottom:2px solid var(--iw-blue);
  transform:rotate(45deg); transition:transform .25s ease;
}
.faq__item[open] summary::after{ transform:rotate(-135deg); margin-top:-2px; }
.faq__item p{ padding-bottom:1.25rem; margin:0; }

/* ----- Contacto (sección 10) ----- */
.contacto__rejilla{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:clamp(2rem, 5vw, 4rem); align-items:start; }
.contacto__lista{ display:grid; gap:1.25rem; margin:0; }
.contacto__lista div{ display:grid; grid-template-columns:7rem 1fr; gap:.75rem; }
.contacto__lista dt{ font-weight:600; color:var(--iw-navy); }
.contacto__lista dd{ margin:0; }
.contacto__recordatorio{ padding:clamp(1.5rem, 3vw, 2.25rem); border-radius:var(--radio); background:var(--iw-white); border:1px solid var(--iw-grey-200); box-shadow:var(--sombra); }
.contacto__recordatorio h3{ color:var(--iw-navy); }
@media (max-width: 860px){ .contacto__rejilla{ grid-template-columns:1fr; } }
@media (max-width: 420px){ .contacto__lista div{ grid-template-columns:1fr; gap:.1rem; } }

/* ----- Pie (sección 11) ----- */
.pie{ background:var(--iw-navy); color:rgb(255 255 255 / .82); padding-block:clamp(3rem, 6vw, 4.5rem) 2rem; font-size:.95rem; }
.pie a{ color:var(--iw-white); }
.pie__rejilla{ display:grid; grid-template-columns:1.2fr 1fr 1fr; gap:2rem; }
.pie__logo{ width:150px; margin-bottom:1rem; }
.pie__titulo{ margin:0 0 .75rem; font:600 1rem/1.3 var(--fuente-titulos); color:var(--iw-white); }
.pie__lista{ margin:0; padding:0; list-style:none; display:grid; gap:.45rem; }
.pie address{ font-style:normal; }
.pie__sellos{ width:200px; margin-top:1rem; padding:.5rem; border-radius:8px; background:var(--iw-white); }
.pie__legal{ margin-top:2.5rem; padding-top:1.5rem; border-top:1px solid rgb(255 255 255 / .15); font-size:.85rem; }
@media (max-width: 860px){ .pie__rejilla{ grid-template-columns:1fr; } }

/* ----- Páginas legales y de error ----- */
.pagina-simple{ padding-top:calc(var(--cabecera) + 3rem); padding-bottom:var(--seccion); }
.pagina-simple .contenedor{ max-width:52rem; }
.pagina-simple h2{ font-size:clamp(1.4rem, 2.2vw, 1.75rem); margin-top:2.2rem; }
.pagina-simple h3{ font-size:1.15rem; margin-top:1.6rem; }
.pagina-simple ul{ padding-left:1.2rem; }
.pagina-simple table{ width:100%; border-collapse:collapse; font-size:.95rem; margin-bottom:1.5rem; }
.pagina-simple th, .pagina-simple td{ text-align:left; padding:.6rem; border-bottom:1px solid var(--iw-grey-200); vertical-align:top; }
.pendiente{ background:#FFF3CD; color:#5C4300; padding:0 .25em; border-radius:3px; }
.cabecera--solida{ background:var(--iw-navy); }
.error__codigo{ color:var(--iw-grey); font-weight:600; }

/* ----- Banner de cookies (§14.3): no modal, los tres botones con el mismo peso ----- */
.cookies{ position:fixed; inset:auto var(--margen) var(--margen); z-index:60; display:flex; justify-content:center; }
.cookies__caja{
  width:min(100%, 46rem); max-height:calc(100dvh - 2 * var(--margen)); overflow:auto;
  padding:1.25rem 1.5rem; border-radius:var(--radio); background:var(--iw-white); color:var(--iw-ink);
  box-shadow:0 20px 50px rgb(6 10 13 / .25); border:1px solid var(--iw-grey-200);
}
.cookies__titulo{ margin:0 0 .5rem; font-size:1.15rem; }
.cookies__titulo:focus{ outline:none; }
.cookies__caja p{ margin:0 0 1rem; font-size:.95rem; }
.cookies__opciones fieldset{ margin:0 0 1rem; padding:0; border:0; display:grid; gap:.5rem; }
.cookies__opciones legend{ font-weight:600; margin-bottom:.5rem; }
.cookies__opcion{ display:flex; align-items:center; gap:.6rem; min-height:44px; }
.cookies__opcion input{ width:1.2rem; height:1.2rem; accent-color:var(--iw-blue-dark); }
.cookies__opciones .boton{ margin-bottom:1rem; }
.cookies__botones{ display:flex; flex-wrap:wrap; gap:.75rem; }
.cookies__botones .boton{ flex:1 1 9rem; }
.enlace-boton{ padding:0; border:0; background:none; color:inherit; font:inherit; text-decoration:underline; cursor:pointer; }
.pie .enlace-boton{ color:var(--iw-white); }

/* ----- Efecto 4: aparición al hacer scroll ----- */
/* Solo se ocultan los elementos que el JS marca como pendientes (fuera de pantalla al cargar):
   sin JS, o por encima del pliegue, todo se ve desde el principio. */
.reveal-pendiente{ opacity:0; transform:translateY(24px); }
.reveal-pendiente.is-visible{ opacity:1; transform:none; transition:opacity .5s ease, transform .5s cubic-bezier(.2,.8,.2,1); transition-delay:var(--retardo, 0ms); }

/* ----- Regla absoluta (§5.4): nada se mueve si el usuario lo pide ----- */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important;
  }
  html{ scroll-behavior:auto; }
  .reveal-pendiente{ opacity:1; transform:none; }
}