/* Estilos del sitio. Las variables están en tokens.css. */

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--papel)}
html,body{background:var(--papel) !important}
@media (prefers-color-scheme:dark){html,body{background:var(--papel) !important;color:var(--tinta) !important}}
body{font-family:var(--f-texto);color:var(--tinta);line-height:1.6;font-size:16px;overflow-x:hidden}
img{max-width:100%}
a{color:inherit}
.contenedor{max-width:var(--ancho);margin:0 auto;padding-left:var(--space-5);padding-right:var(--space-5)}
h1,h2,h3{font-family:var(--f-display);line-height:1.1;letter-spacing:-0.01em}

.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.saltar{position:absolute;left:-9999px;top:0;background:var(--marca);color:var(--sobre-marca);padding:12px 20px;z-index:100;border-radius:0 0 var(--radio-sm) 0}
.saltar:focus{left:0}

/* ── Botones ─────────────────────────────────────────────── */
.btn{display:inline-block;font-family:var(--f-texto);font-weight:600;font-size:16px;border:none;cursor:pointer;border-radius:var(--radio-pill);padding:13px 26px;text-decoration:none;transition:background .15s ease,color .15s ease;text-align:center}
.btn:focus-visible{outline:3px solid var(--marca-2);outline-offset:2px}
.btn-primario{background:var(--marca);color:var(--sobre-marca)}
.btn-primario:hover{background:var(--marca-oscuro)}
.btn-secundario{background:transparent;color:var(--marca);box-shadow:inset 0 0 0 2px var(--marca)}
.btn-secundario:hover{background:var(--marca);color:var(--sobre-marca)}
.btn--block{display:block;width:100%}

/* ── Cabecera ────────────────────────────────────────────── */
header{padding:var(--space-5) 0;background:var(--papel)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4)}
.logo-lockup{display:flex;align-items:center;gap:10px;text-decoration:none}
.logo-lockup img{width:40px;height:40px}
.logo-lockup span{font-family:var(--f-display);font-weight:800;font-size:21px}
.logo-lockup b{color:var(--marca);font-weight:800}
.nav nav{display:flex;gap:var(--space-4);align-items:center}
.nav nav a{text-decoration:none;font-weight:500;font-size:15px;color:var(--marca-2-tinta);white-space:nowrap}
.nav nav a:hover,.nav nav a[aria-current]{color:var(--tinta)}
.nav nav a.btn{color:var(--sobre-marca)}

/* Menú móvil: sin JavaScript no se pierde ningún enlace. */
.nav-abrir{display:none;background:none;border:0;cursor:pointer;padding:8px;color:var(--tinta)}
@media (max-width:1100px){
  .nav-abrir{display:block}
  .nav nav{position:absolute;left:0;right:0;top:100%;flex-direction:column;align-items:stretch;gap:0;background:var(--papel);border-bottom:2px solid var(--borde);padding:var(--space-4) var(--space-5);box-shadow:var(--sombra);z-index:20}
  .nav nav[hidden]{display:none}
  .nav nav a{padding:12px 0;font-size:17px}
  header{position:relative}
}

/* Idiomas: un control segmentado. El carril en bruma, y la pastilla del idioma
   activo en papel y magenta, flotando encima. Tres siglas sueltas se confundían
   con el resto del menú; así se ve que son un grupo y cuál está puesto. */
.idiomas{display:inline-flex;align-items:center;gap:2px;padding:3px;
  background:var(--bruma);border:1px solid var(--borde);border-radius:var(--radio-pill)}
.idiomas a{text-decoration:none;font-family:var(--f-texto);font-size:12px;font-weight:600;
  line-height:1;text-transform:uppercase;letter-spacing:.06em;padding:6px 10px;
  border-radius:var(--radio-pill);color:var(--marca-2-tinta);
  transition:color .16s ease,background .16s ease,box-shadow .16s ease}
/* El hover se queda a medio camino a propósito: si también se pusiera blanco del
   todo, competiría con la pastilla activa y dejaría de verse cuál está puesto. */
.idiomas a:hover{color:var(--tinta);background:rgba(255,255,255,.55)}
.idiomas a[aria-current]{background:var(--papel);color:var(--marca);
  box-shadow:0 0 0 1px rgba(23,36,43,.06),0 1px 3px rgba(23,36,43,.18)}
.idiomas a:focus-visible{outline:2px solid var(--marca-2);outline-offset:2px}
/* En el menú desplegable de móvil la fila es vertical: que no se estire a lo ancho. */
@media (max-width:1100px){
  .idiomas{align-self:flex-start;margin-top:var(--space-3)}
}

/* ── Héroe ───────────────────────────────────────────────── */
.heroe{padding:56px var(--space-5) 80px}
.heroe-int{max-width:var(--ancho);margin:0 auto}
.heroe-rejilla{display:grid;grid-template-columns:1.15fr .85fr;gap:var(--space-7);align-items:center}
/* Sin min-width:0 la columna crece hasta el ancho del texto que teclea la demo
   del prompt (nowrap): la portada se pasaba de ancho en el móvil y la órbita,
   centrada en su columna, se movía a cada letra. */
.heroe-rejilla > *{min-width:0}
@media (max-width:840px){.heroe-rejilla{grid-template-columns:1fr}.orbita{order:-1;margin:0 auto}}
.heroe h1{font-size:clamp(36px,6.2vw,62px);font-weight:800;margin-bottom:var(--space-5)}
.heroe .sub{font-size:19px;color:var(--marca-2-tinta);max-width:46ch;margin-bottom:28px}
.datos-chips{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:28px}
.dato-chip{background:var(--bruma);border-radius:var(--radio-pill);padding:8px 18px;font-size:14px;font-weight:600;color:var(--marca-2-tinta)}
.dato-chip strong{color:var(--marca);font-family:var(--f-display);font-weight:800;font-size:16px;margin-right:4px}
.prompt-demo{display:flex;align-items:center;gap:10px;background:var(--papel);border-radius:var(--radio-pill);padding:8px 8px 8px 10px;border:2px solid var(--marca-2);width:100%;max-width:560px;min-width:0;margin-bottom:14px}
.prompt-demo .texto{flex:1;min-width:0;font-size:16px;min-height:24px;color:var(--tinta);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:default}
.prompt-demo .texto::after{content:"";display:inline-block;width:2px;height:18px;background:var(--marca);margin-left:2px;vertical-align:text-bottom;animation:parpadeo 1s steps(1) infinite}
/* Mientras teclea o borra, el cursor se queda fijo: parpadear a la vez que las
   letras aparecen se lee como un fallo de pintado, y quieto delata mejor que
   algo está escribiendo. El parpadeo vuelve en la pausa de lectura. */
.prompt-demo .texto[data-estado="escribiendo"]::after,
.prompt-demo .texto[data-estado="borrando"]::after{animation:none;opacity:1}
@keyframes parpadeo{50%{opacity:0}}

/* El rótulo que avisa de que esto es una animación. El punto que late es la
   parte que se ve de reojo; la palabra la confirma para quien se pare a leer. */
.prompt-demo__marca{flex-shrink:0;display:inline-flex;align-items:center;gap:6px;
  background:var(--bruma);border-radius:var(--radio-pill);padding:5px 11px;
  font-size:11px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
  color:var(--marca-2-tinta);user-select:none}
.prompt-demo__marca i{width:7px;height:7px;border-radius:50%;background:var(--marca);
  animation:latido 1.7s ease-in-out infinite}
@keyframes latido{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.3;transform:scale(.65)}}

.prompt-demo .btn{flex-shrink:0;padding:10px 20px}
/* En el móvil la frase entera no cabe al lado del botón y se quedaba en tres
   palabras y unos puntos suspensivos, que es justo lo contrario de lo que la
   demo quiere enseñar. Ahí el botón se retira —el mismo CTA está dos líneas más
   abajo— y la frase pasa a dos renglones con la altura ya reservada, para que al
   teclearse no empuje lo que tiene debajo. */
@media (max-width:560px){
  .prompt-demo{border-radius:var(--radio);padding:14px 18px;align-items:flex-start}
  .prompt-demo .btn{display:none}
  .prompt-demo .texto{white-space:normal;overflow:visible;text-overflow:clip;min-height:calc(2 * 1.6em)}
  .prompt-demo__marca{margin-top:1px}
}
.nota-prompt{font-size:14px;color:var(--marca-2-tinta);margin-bottom:28px}
.heroe-acciones{display:flex;gap:var(--space-3);flex-wrap:wrap}

.orbita{position:relative;width:min(320px,68vw);aspect-ratio:1}
/* height junto a width, y no solo width: los atributos width/height del <img>
   valen como CSS, así que sin declarar la altura aquí el atributo fijaba 255px,
   anulaba el bottom del inset y el logotipo salía estirado (198x255). */
.orbita img{position:absolute;inset:19%;width:62%;height:62%;object-fit:contain;transform:translateZ(0);backface-visibility:hidden}
.anillo{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}

.ondas{display:block;width:100%;height:56px;margin-bottom:-1px}
.ondas.pie{transform:scaleY(-1);margin-bottom:0;margin-top:-1px}

/* ── Secciones ───────────────────────────────────────────── */
.seccion-bruma{background:var(--bruma);padding:80px 0 var(--space-9)}
.seccion-blanca{padding:var(--space-9) var(--space-5)}
.seccion-blanca .int,.cierre .int{max-width:var(--ancho);margin:0 auto}
h2.titulo{font-size:clamp(28px,4.5vw,40px);font-weight:800;margin-bottom:var(--space-3)}
p.sub-seccion{color:var(--marca-2-tinta);max-width:56ch;margin-bottom:44px;font-size:18px}

.linea-fases{list-style:none;counter-reset:fase;display:grid;grid-template-columns:repeat(4,1fr);gap:0}
@media (max-width:1100px){.linea-fases{grid-template-columns:repeat(2,1fr)}}
@media (max-width:840px){.linea-fases{grid-template-columns:1fr}}
.linea-fases li{counter-increment:fase;padding:var(--space-5) var(--space-5) var(--space-5) 0;border-top:3px solid var(--borde-fuerte)}
.linea-fases li::before{content:counter(fase);font-family:var(--f-display);font-weight:800;font-size:26px;color:var(--marca-2-tinta);display:block;margin-bottom:var(--space-2)}
.linea-fases li:nth-child(even)::before{color:var(--marca)}
.linea-fases li strong{font-family:var(--f-display);font-weight:600;font-size:18px;display:block;margin-bottom:6px}
.linea-fases li span{font-size:14px;color:var(--marca-2-tinta)}
.linea-fases li em{font-style:normal;font-size:13px;font-weight:600;color:var(--tinta);display:block;margin-top:10px}
.linea-fases li:nth-child(even) em{color:var(--marca-oscuro)}
@media (max-width:840px){.linea-fases li{border-top:none;border-left:3px solid var(--borde-fuerte);padding:var(--space-4) 0 var(--space-4) var(--space-5)}}

.revelar{opacity:0;transform:translateY(16px);transition:opacity .5s ease,transform .5s ease}
.revelar.visto{opacity:1;transform:none}

.ejemplos{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:var(--space-4);margin-bottom:var(--space-7)}
.ejemplo{background:var(--bruma);border-radius:var(--radio);padding:var(--space-5)}
.seccion-bruma .ejemplo{background:var(--papel)}
.ejemplo .pedido{font-size:16px;font-weight:600;margin-bottom:10px}
.ejemplo .pedido::before{content:"«"}
.ejemplo .pedido::after{content:"»"}
.ejemplo .resultado{font-size:14px;color:var(--marca-2-tinta)}

.iconos{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px}
.icono-item{display:flex;gap:14px;align-items:flex-start;background:var(--papel);border:1px solid var(--borde);border-radius:var(--radio);padding:var(--space-5);transition:transform .2s ease,border-color .2s ease}
.icono-item:hover{transform:translateY(-3px);border-color:var(--marca-2)}
.icono-item svg{flex-shrink:0;margin-top:2px}
.icono-item h3{font-size:17px;font-weight:600;margin-bottom:4px}
.icono-item p{font-size:14px;color:var(--marca-2-tinta)}

/* Cuatro sectores. Con auto-fit y un mínimo de 270px solo caben tres en los
   992px de contenido, y la cuarta se quedaba sola en una segunda fila. Se
   fijan los tramos a mano —4, 2 y 1— para que nunca sobre una huérfana.
   Si algún día hay un quinto sector, hay que volver a mirar esto. */
.verticales{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media (max-width:1000px){.verticales{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.verticales{grid-template-columns:1fr}}
.vertical-card{display:block;text-decoration:none;background:var(--papel);border:2px solid var(--borde);border-radius:var(--radio);padding:22px;transition:border-color .2s ease,transform .2s ease}
.vertical-card:hover{border-color:var(--marca);transform:translateY(-3px)}
.vertical-card h3{font-size:20px;font-weight:800;margin:var(--space-3) 0 6px}
.vertical-card p{font-size:14px;color:var(--marca-2-tinta)}

.cierre{background:linear-gradient(135deg,var(--marca) 0%,var(--marca-oscuro) 100%);color:var(--sobre-marca);padding:var(--space-9) var(--space-5);text-align:center}
.cierre h2{font-size:clamp(28px,5vw,44px);font-weight:800;margin-bottom:var(--space-4)}
.cierre p{max-width:48ch;margin:0 auto var(--space-6);color:var(--suave)}
.cierre .btn{background:var(--papel);color:var(--marca-oscuro)}
.cierre .btn:hover{background:var(--bruma);color:var(--marca-oscuro)}

/* ── Páginas interiores ──────────────────────────────────── */
.page-hero{background:var(--bruma);padding:var(--space-7) var(--space-5) var(--space-8)}
.page-hero .wrap{max-width:var(--ancho);margin:0 auto}
.page-hero h1{font-size:clamp(30px,5vw,48px);font-weight:800;margin-bottom:var(--space-4)}
.page-hero__lead{font-size:19px;color:var(--marca-2-tinta);max-width:var(--medida)}
.eyebrow{font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--marca);margin-bottom:var(--space-3)}
.breadcrumb{font-size:14px;color:var(--marca-2-tinta);margin-bottom:var(--space-5)}
.breadcrumb a{text-decoration:none}
.breadcrumb a:hover{text-decoration:underline}
.breadcrumb span[aria-hidden]{margin:0 var(--space-2);opacity:.5}

/* Prosa: páginas legales y quiénes somos */
.prosa{max-width:var(--medida);padding:var(--space-8) var(--space-5);margin:0 auto}
.prosa h2{font-size:26px;font-weight:800;margin:var(--space-7) 0 var(--space-4)}
.prosa h3{font-size:19px;font-weight:600;margin:var(--space-6) 0 var(--space-3)}
.prosa p,.prosa li{margin-bottom:var(--space-4)}
.prosa ul,.prosa ol{padding-left:var(--space-5)}
.prosa a{color:var(--marca);text-decoration:underline;text-underline-offset:2px}
.prosa a:hover{color:var(--marca-oscuro)}
/* Fichas de las otras aplicaciones: el logotipo manda, porque quien llega desde
   una de ellas la reconoce antes por la marca que por el nombre escrito. Van en
   tarjeta y sin viñeta, que no son una lista de la prosa sino dos salidas. */
.prosa .productos{list-style:none;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4);margin-bottom:var(--space-5)}
@media (max-width:680px){.prosa .productos{grid-template-columns:1fr}}
.prosa .productos li{margin:0;padding:var(--space-5);background:var(--bruma);border:1px solid var(--borde);border-radius:var(--radio-sm)}
.prosa .productos img{height:38px;width:auto;max-width:100%;display:block;margin-bottom:var(--space-4)}
.prosa .productos p{font-size:15px;margin-bottom:var(--space-3)}
.prosa .productos__enlace{font-weight:600;font-size:14px;text-decoration:none;word-break:break-all}
.prosa .productos__enlace:hover{text-decoration:underline}
.prosa table{width:100%;border-collapse:collapse;margin-bottom:var(--space-5);font-size:15px}
.prosa th,.prosa td{text-align:left;padding:var(--space-3);border-bottom:1px solid var(--borde);vertical-align:top}
.prosa th{font-weight:600;background:var(--bruma)}
/* La tabla de identidad es de dos columnas y no lleva carril con scroll: sin
   permitir el corte, el correo y la razón social fijaban un ancho mínimo de
   365px y la página legal se desbordaba en el móvil. */
.prosa .tabla-identidad td{overflow-wrap:anywhere}
.prosa .actualizado{font-size:14px;color:var(--marca-2-tinta);margin-bottom:var(--space-6)}

/* ── Formulario de contacto ──────────────────────────────── */
.split{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-7);align-items:start;max-width:var(--ancho);margin:0 auto}
@media (max-width:840px){.split{grid-template-columns:1fr}}
.band{padding:var(--space-9) var(--space-5);background:var(--bruma)}
.band h2{font-size:clamp(26px,4vw,36px);font-weight:800;margin-bottom:var(--space-4)}
.band .lead{color:var(--marca-2-tinta);font-size:18px;margin-bottom:var(--space-4)}
.band__meta{font-size:14px;color:var(--marca-2-tinta)}
.form-card{background:var(--papel);border:2px solid var(--borde);border-radius:var(--radio);padding:var(--space-6)}
.form-grid{display:flex;flex-direction:column;gap:var(--space-4)}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4)}
@media (max-width:520px){.form-row{grid-template-columns:1fr}}
.field label{display:block;font-size:14px;font-weight:600;margin-bottom:6px}
.field input,.field textarea{width:100%;font-family:var(--f-texto);font-size:16px;color:var(--tinta);background:var(--papel);border:2px solid var(--borde);border-radius:var(--radio-sm);padding:11px 14px}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--marca-2)}
.field textarea{resize:vertical;min-height:110px}
.check{display:flex;gap:10px;align-items:flex-start;font-size:14px;color:var(--marca-2-tinta)}
.check input{margin-top:3px;accent-color:var(--marca);width:18px;height:18px;flex-shrink:0}
.check a{color:var(--marca)}
.form-status{display:block;border-radius:var(--radio-sm);padding:var(--space-4)}
.form-status--ok{background:#E7F6EC;border:2px solid #1E7B45;color:#14532D}
.form-status--ok strong{display:block;margin-bottom:4px}
.form-status--error{background:#FDECEC;border:2px solid #B3261E;color:#7F1D1D}
.form-status--error span{display:block}
/* Aviso de configuración pendiente. Solo se pinta en local (ver
   inc/parts/contacto.php): es para quien monta el sitio, no para quien lo lee. */
.form-status--aviso{background:#FFF8E6;border:2px solid #B58900;color:#7A5B00}
.form-status--aviso strong{display:block;margin-bottom:4px}
.form-status--aviso span{display:block}

/* ── Pie ─────────────────────────────────────────────────── */
footer{padding:var(--space-8) 0 var(--space-6);font-size:14px;color:var(--marca-2-tinta);background:var(--papel);border-top:1px solid var(--borde)}
.pie-rejilla{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:var(--space-6);margin-bottom:var(--space-6)}
@media (max-width:760px){.pie-rejilla{grid-template-columns:1fr 1fr}}
@media (max-width:460px){.pie-rejilla{grid-template-columns:1fr}}
.pie-rejilla h2{font-family:var(--f-texto);font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--tinta);margin-bottom:var(--space-3)}
.pie-rejilla ul{list-style:none}
.pie-rejilla li{margin-bottom:var(--space-2)}
.pie-rejilla a{text-decoration:none}
.pie-rejilla a:hover{color:var(--tinta);text-decoration:underline}
.pie-legal{display:flex;justify-content:space-between;gap:var(--space-4);flex-wrap:wrap;padding-top:var(--space-5);border-top:1px solid var(--borde)}

/* ── Banner de cookies ───────────────────────────────────── */
.consent{position:fixed;left:var(--space-4);right:var(--space-4);bottom:var(--space-4);z-index:60;background:var(--papel);border:2px solid var(--marca-2);border-radius:var(--radio);padding:var(--space-5);box-shadow:var(--sombra);max-width:560px;margin:0 auto}
.consent[hidden]{display:none}
.consent h2{font-size:18px;font-weight:800;margin-bottom:var(--space-2)}
.consent p{font-size:14px;color:var(--marca-2-tinta);margin-bottom:var(--space-4)}
.consent a{color:var(--marca)}
.consent__acciones{display:flex;gap:10px;flex-wrap:wrap}
.consent__acciones .btn{flex:1;min-width:140px;padding:11px 20px;font-size:15px}

@media (prefers-reduced-motion:reduce){
  .prompt-demo .texto::after{animation:none}
  .prompt-demo__marca i{animation:none}
  .revelar{opacity:1;transform:none;transition:none}
  .icono-item:hover,.vertical-card:hover{transform:none}
  html{scroll-behavior:auto}
}

/* ── Maqueta de navegador (verticales) ───────────────────── */
.mock{position:relative;width:min(340px,82vw);margin:0 auto}
.mock-marco{background:var(--papel);border:2px solid var(--borde);border-radius:22px;padding:14px;box-shadow:var(--sombra)}
.mock-topo{display:flex;gap:6px;margin-bottom:var(--space-3)}
.mock-topo i{width:9px;height:9px;border-radius:50%;background:var(--borde)}
.mock-topo i:first-child{background:var(--marca-2)}
.mock-marco>svg{display:block;width:100%;height:auto}
.flotante{position:absolute;right:-6px;bottom:var(--space-5);background:var(--papel);border:2px solid var(--marca-2);border-radius:var(--radio-sm);padding:9px 14px;font-size:13px;font-weight:600;box-shadow:var(--sombra-sm);display:flex;gap:var(--space-2);align-items:center;animation:flotar 5s ease-in-out infinite;max-width:88%}
.flotante svg{flex-shrink:0}
.flotante b{color:var(--marca)}
@keyframes flotar{50%{transform:translateY(-7px)}}
@media (max-width:840px){.mock{margin-bottom:var(--space-2)}}
@media (prefers-reduced-motion:reduce){.flotante{animation:none}}

/* En fábricas, alojamientos y mantenimiento el botón del lienzo es ancho
   («Pedir presupuesto», «Avisar de avería»), así que la etiqueta flotante sube
   para no taparlo. */
.mock--fabricas .flotante,
.mock--alojamientos .flotante,
.mock--mantenimiento .flotante{bottom:82px}

/* Selector y captcha del formulario */
.field select{width:100%;font-family:var(--f-texto);font-size:16px;color:var(--tinta);background:var(--papel);border:2px solid var(--borde);border-radius:var(--radio-sm);padding:11px 14px}
.field select:focus{outline:none;border-color:var(--marca-2)}
.field__label{display:block;font-size:14px;font-weight:600;margin-bottom:6px}
/* El widget de Google mide 302px: en móvil se encoge para no desbordar. */
.field--captcha{overflow:hidden}
@media (max-width:360px){.field--captcha .g-recaptcha{transform:scale(.85);transform-origin:0 0}}

/* Aviso dentro de un texto largo: algo que el lector debe comprobar por su cuenta. */
.prosa .aviso{background:#FFF8E6;border-left:4px solid #B58900;border-radius:0 var(--radio-sm) var(--radio-sm) 0;padding:var(--space-4);font-size:15px}

/* ── Desplegable de sectores en la cabecera ──────────────────
   Va sobre <details> nativo: se abre sin JavaScript, se maneja con el teclado
   sin código propio y sus enlaces están siempre en el HTML. */
.nav-grupo{position:relative}
.nav-grupo>summary{display:flex;align-items:center;gap:6px;cursor:pointer;list-style:none;
  font-weight:500;font-size:15px;color:var(--marca-2-tinta);white-space:nowrap;padding:4px 0}
.nav-grupo>summary::-webkit-details-marker{display:none}
.nav-grupo>summary::marker{content:""}
.nav-grupo>summary:hover{color:var(--tinta)}
.nav-grupo>summary:focus-visible{outline:3px solid var(--marca-2);outline-offset:4px;border-radius:4px}
.nav-grupo>summary svg{transition:transform .15s ease}
.nav-grupo[open]>summary svg{transform:rotate(180deg)}
/* Estamos dentro de una de las verticales: el grupo se marca como el resto del menú. */
.nav-grupo[data-actual]>summary{color:var(--tinta)}

.nav-panel{position:absolute;top:calc(100% + 16px);left:50%;transform:translateX(-50%);
  width:min(700px,calc(100vw - 48px));display:grid;grid-template-columns:1fr 1fr;
  background:var(--papel);border:2px solid var(--borde);border-radius:var(--radio);
  box-shadow:var(--sombra);padding:var(--space-2);z-index:30}
.nav-panel a{display:flex;gap:var(--space-3);align-items:flex-start;padding:var(--space-3);
  border-radius:var(--radio-sm);text-decoration:none;white-space:normal;transition:background .15s ease}
.nav-panel a:hover,.nav-panel a[aria-current]{background:var(--bruma)}
.nav-panel a svg{flex-shrink:0;margin-top:2px}
.nav-panel strong{display:block;font-family:var(--f-display);font-size:15px;font-weight:600;color:var(--tinta)}
.nav-panel small{display:block;font-size:13px;line-height:1.4;color:var(--marca-2-tinta);margin-top:2px}

/* En el menú plegado el panel deja de flotar y se lee como una lista más. */
@media (max-width:1100px){
  .nav-grupo{width:100%}
  .nav-grupo>summary{padding:12px 0;font-size:17px;justify-content:space-between}
  .nav-panel{position:static;transform:none;width:auto;grid-template-columns:1fr;border:0;
    box-shadow:none;background:transparent;padding:0 0 var(--space-3)}
  .nav-panel a{padding:10px 0 10px var(--space-4)}
}
@media (prefers-reduced-motion:reduce){
  .nav-grupo>summary svg,.nav-panel a{transition:none}
}

/* ── Selector del formulario ─────────────────────────────────
   Sin la flecha del sistema, que en cada plataforma es de un color y un tamaño
   distintos y rompía la simetría con el resto de campos. */
.field select{appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:44px;
  background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%233E6E77' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 15px center;background-size:16px}
.field select:hover{border-color:var(--marca-2)}

/* ── Retrato del responsable (quiénes somos) ─────────────────
   El anillo repite el gesto del imagotipo: turquesa fuera, magenta dentro. */
.hero-persona{display:grid;grid-template-columns:1fr auto;gap:var(--space-7);align-items:center}
@media (max-width:760px){.hero-persona{grid-template-columns:1fr;gap:var(--space-5);justify-items:start}}
.avatar{width:176px;height:176px;border-radius:50%;object-fit:cover;background:var(--bruma);
  border:5px solid var(--papel);box-shadow:0 0 0 3px var(--marca-2),0 0 0 7px rgba(181,0,141,.18),var(--sombra)}
@media (max-width:760px){.avatar{width:128px;height:128px}}

/* ── Páginas de bloque ───────────────────────────────────────
   El desarrollo de una tarjeta de «qué incluye tu web». Reutilizan la banda
   de página interior, la rejilla de iconos y las tarjetas de ejemplo; lo que
   viene aquí es solo lo que no existía: el titular con icono, el resumen
   citable y las dos listas nuevas. */
.bloque-titular{display:flex;gap:var(--space-4);align-items:flex-start;margin-bottom:var(--space-4)}
.bloque-titular svg{flex-shrink:0;margin-top:6px}
.bloque-titular h1{margin-bottom:0}
@media (max-width:560px){
  .bloque-titular{gap:var(--space-3)}
  .bloque-titular svg{width:32px;height:32px;margin-top:2px}
}

/* La respuesta en una frase, que es lo que se cita y lo que se lee si no se
   lee nada más. Va destacada con la barra de marca, no con una caja: una caja
   más en el hero competía con la entradilla. */
.bloque-resumen{max-width:var(--medida);margin-top:var(--space-6);padding-left:var(--space-5);
  border-left:4px solid var(--marca);font-size:17px;color:var(--tinta)}
.page-hero .actualizado{font-size:14px;color:var(--marca-2-tinta);margin-top:var(--space-4)}

/* Lo que hacemos nosotros: lista con marca de verificación dibujada en el
   fondo, para no meter un SVG por elemento. */
.lista-marcas{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4) var(--space-6)}
@media (max-width:760px){.lista-marcas{grid-template-columns:1fr}}
.lista-marcas li{padding-left:34px;background-repeat:no-repeat;background-position:0 2px;background-size:22px;
  background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%23B5008D' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E")}
.lista-marcas strong{display:block;font-family:var(--f-display);font-weight:600;font-size:17px;margin-bottom:4px}
.lista-marcas span{font-size:15px;color:var(--marca-2-tinta)}

/* Fuentes: lo que permite comprobar de dónde sale cada cifra. Se ven como
   referencias, no como enlaces de navegación. */
.fuentes{list-style:none;border-top:1px solid var(--borde)}
.fuentes li{padding:var(--space-4) 0;border-bottom:1px solid var(--borde)}
.fuentes a{font-weight:600;color:var(--marca);text-decoration:none}
.fuentes a:hover{text-decoration:underline}
.fuentes span{display:block;font-size:14px;color:var(--marca-2-tinta);margin-top:2px}

.bloque-volver{margin-top:var(--space-6)}
.bloque-volver a{font-weight:600;text-decoration:none}
.bloque-volver a:hover{text-decoration:underline}

/* Tarjeta de la rejilla cuando lleva a su propia página. La flecha aparece al
   pasar por encima: en reposo la rejilla se lee igual que antes. */
a.icono-item{text-decoration:none;color:inherit}
a.icono-item h3::after{content:"→";margin-left:8px;color:var(--marca);opacity:0;transition:opacity .2s ease,transform .2s ease;display:inline-block}
a.icono-item:hover h3::after,a.icono-item:focus-visible h3::after{opacity:1;transform:translateX(3px)}
@media (prefers-reduced-motion:reduce){
  a.icono-item h3::after{transition:none}
}

/* Puente entre un bloque de sector y el bloque general del mismo asunto. */
.bloque-vertambien{margin-top:var(--space-7);padding-top:var(--space-4);border-top:1px solid var(--borde);
  font-size:15px;color:var(--marca-2-tinta)}
.bloque-vertambien a{font-weight:600}

/* ── Planes y precios ────────────────────────────────────── */
/* Tres tarjetas iguales salvo la del medio, que es la que se recomienda: se
   distingue con el borde de marca y una pastilla, no agrandándola, para que las
   tres cifras sigan alineadas y se puedan comparar de un vistazo. */
.planes{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-5);align-items:stretch}
@media (max-width:960px){.planes{grid-template-columns:1fr;max-width:440px;margin:0 auto}}

.plan{display:flex;flex-direction:column;background:var(--papel);border:1px solid var(--borde);
  border-radius:var(--radio);padding:var(--space-6);position:relative}
.plan--destacado{border:2px solid var(--marca);box-shadow:var(--sombra)}
.plan__badge{position:absolute;top:-13px;left:var(--space-6);right:var(--space-6);margin:0;
  background:var(--marca);color:var(--sobre-marca);border-radius:var(--radio-pill);padding:5px 14px;
  font-size:12.5px;font-weight:600;text-align:center;line-height:1.5}
.plan__nombre{font-family:var(--f-display);font-size:24px;font-weight:800;margin-bottom:var(--space-2)}
.plan__resumen{font-size:15px;color:var(--marca-2-tinta);margin-bottom:var(--space-5)}

/* La cifra grande es el alta, y la mensualidad va justo debajo con el mismo
   peso visual que tiene en la factura: se paga cada mes, no se esconde. */
.plan__precio{display:flex;align-items:baseline;flex-wrap:wrap;gap:8px;margin-bottom:var(--space-2)}
.plan__cifra{font-family:var(--f-display);font-size:38px;font-weight:800;color:var(--marca);line-height:1.1}
.plan__etiqueta{font-size:14px;color:var(--marca-2-tinta)}
.plan__mensual{display:flex;align-items:baseline;gap:8px;padding-bottom:var(--space-5);
  margin-bottom:var(--space-5);border-bottom:1px solid var(--borde)}
.plan__mensual strong{font-family:var(--f-display);font-size:21px;font-weight:600}
.plan__mensual span{font-size:14px;color:var(--marca-2-tinta)}

.plan__para{font-size:15px;color:var(--tinta);margin-bottom:var(--space-5)}
.plan__para span{display:block;font-size:12px;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--marca);margin-bottom:6px}

.plan__rotulo{font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--marca-2-tinta);margin-bottom:var(--space-3)}
.plan__lista{list-style:none;margin-bottom:var(--space-6);display:grid;gap:10px}
.plan__lista li{padding-left:28px;font-size:15px;background-repeat:no-repeat;background-position:0 3px;background-size:18px;
  background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23B5008D' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E")}
/* El botón, pegado abajo: con listas de distinta longitud, si no, quedaban a
   tres alturas distintas y la comparación se rompía. */
.plan__lista+.btn{margin-top:auto}

/* Y lo mismo con todo lo demás. Una tarjeta de precio solo sirve si las tres
   cifras están a la misma altura: si el resumen de una ocupa cuatro líneas y el
   de otra tres, el ojo compara «690 €» con una frase. Con subgrid las tres
   tarjetas comparten las filas de la rejilla madre y cada tramo —nombre,
   resumen, precio, mensualidad, para quién, lista y botón— queda alineado sin
   fijar alturas a ojo, que se rompen en cuanto se traduce el texto.
   Donde no haya subgrid, la columna flexible de arriba sigue funcionando. */
@supports (grid-template-rows:subgrid){
  @media (min-width:961px){
    .planes{grid-template-rows:repeat(8,auto);row-gap:0}
    .plan{display:grid;grid-template-rows:subgrid;grid-row:span 8}
  }
}

.planes-notas{margin-top:var(--space-7);padding-top:var(--space-5);border-top:1px solid var(--borde);
  max-width:var(--medida)}
.planes-notas p{font-size:15px;color:var(--marca-2-tinta);margin-bottom:var(--space-3)}
.planes-notas p:last-child{margin-bottom:0}
.planes-notas a{color:var(--marca);font-weight:600;text-decoration:underline;text-underline-offset:2px}
.planes-notas a:hover{color:var(--marca-oscuro)}

/* Comparativa y añadidos. La primera columna se queda fija al desplazar en
   horizontal: sin ella, en un móvil se acaba leyendo «Sí · No · Sí» sin saber
   de qué. */
.tabla-scroll{overflow-x:auto}
.tabla-planes{width:100%;border-collapse:collapse;font-size:15px;min-width:560px}
.tabla-planes th,.tabla-planes td{text-align:left;padding:var(--space-3) var(--space-4);
  border-bottom:1px solid var(--borde);vertical-align:top}
.tabla-planes thead th{font-family:var(--f-display);font-weight:800;font-size:17px;
  background:var(--bruma);border-bottom:2px solid var(--borde-fuerte)}
.tabla-planes thead th.es-plan{color:var(--marca)}
.tabla-planes tbody th{font-weight:600;background:var(--papel);position:sticky;left:0}
.tabla-planes tbody tr:hover th,.tabla-planes tbody tr:hover td{background:var(--bruma)}
.tabla-planes td{color:var(--marca-2-tinta)}
.tabla-planes--extras{min-width:0}

/* ── Buzón de materiales ─────────────────────────────────────
   La lista de lo que un cliente ya nos ha mandado. Miniatura si es imagen y la
   extensión en un recuadro si no lo es: lo que importa es reconocer de un
   vistazo si falta algo, no admirar el archivo. */
.materiales{list-style:none;padding:0;margin:0;display:grid;gap:var(--space-3)}
.materiales li{display:flex;gap:var(--space-4);align-items:center;background:var(--papel);
  border:1px solid var(--borde);border-radius:var(--radio-sm);padding:var(--space-3)}
.materiales img{width:96px;height:72px;object-fit:cover;border-radius:var(--radio-sm);flex-shrink:0}
.materiales__ext{width:96px;height:72px;flex-shrink:0;display:grid;place-items:center;
  background:var(--bruma);border-radius:var(--radio-sm);font-size:13px;font-weight:700;
  color:var(--marca-2-tinta);letter-spacing:.04em}
.materiales__dato{flex:1;min-width:0}
.materiales__dato strong{display:block;font-size:15px;overflow-wrap:anywhere}
.materiales__dato small{color:var(--marca-2-tinta)}
.materiales__quitar{background:none;border:0;cursor:pointer;font-family:var(--f-texto);
  font-size:14px;font-weight:600;color:var(--marca-2-tinta);text-decoration:underline;padding:6px}
.materiales__quitar:hover{color:var(--marca)}