/* IT Labs Marbella — hoja de estilos de la landing
   Paleta y tipografía según docs/06-identidad-visual.md
   Fuentes autoalojadas a propósito: cargarlas desde Google expone la IP del visitante
   a un tercero sin base jurídica clara. Ver web/LEEME.md */

@font-face{font-family:'Space Grotesk';src:url('../fonts/space-grotesk-latin-700-normal.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'Space Grotesk';src:url('../fonts/space-grotesk-latin-500-normal.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Inter';src:url('../fonts/inter-latin-400-normal.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Inter';src:url('../fonts/inter-latin-500-normal.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Inter';src:url('../fonts/inter-latin-600-normal.woff2') format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'JetBrains Mono';src:url('../fonts/jetbrains-mono-latin-500-normal.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'JetBrains Mono';src:url('../fonts/jetbrains-mono-latin-700-normal.woff2') format('woff2');font-weight:700;font-display:swap}

:root{
  --tinta:#101E33;
  --tinta-80:rgba(16,30,51,.80);
  --tinta-60:rgba(16,30,51,.60);
  --ambar:#FFB020;
  --niebla:#F5F7FA;
  --acero:#8A94A6;
  --verde:#1FA971;
  --naranja:#E8A33D;
  --rojo:#D64545;
  --linea:#E2E7EF;
  --blanco:#fff;
  --radio:14px;
  --ancho:1120px;
  --tit:'Space Grotesk',system-ui,-apple-system,'Segoe UI',Arial,sans-serif;
  --texto:'Inter',system-ui,-apple-system,'Segoe UI',Arial,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,Consolas,'Courier New',monospace;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;font-family:var(--texto);font-size:17px;line-height:1.65;
  color:var(--tinta);background:var(--blanco);-webkit-font-smoothing:antialiased;
  overflow-x:hidden;   /* red de seguridad: nada debe provocar scroll lateral */
}
img,svg{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3{font-family:var(--tit);font-weight:700;line-height:1.15;letter-spacing:-.02em;margin:0 0 .5em}
h1{font-size:clamp(2rem,5.2vw,3.5rem)}
h2{font-size:clamp(1.5rem,3.4vw,2.3rem)}
h3{font-size:1.15rem;letter-spacing:-.01em}
p{margin:0 0 1em}
.contenedor{width:100%;max-width:var(--ancho);margin:0 auto;padding:0 24px}
.seccion{padding:clamp(56px,8vw,104px) 0}
/* Con cabecera fija, un salto de ancla esconde el titulo detras de ella */
section[id]{scroll-margin-top:86px}
.seccion--niebla{background:var(--niebla)}
.seccion--tinta{background:var(--tinta);color:var(--blanco)}
.seccion--tinta h1,.seccion--tinta h2,.seccion--tinta h3{color:var(--blanco)}
/* Los antetítulos y los números van en monoespaciada: es el guiño técnico
   de la identidad (JetBrains Mono para datos) y da el aire de estudio técnico. */
.antetitulo{
  font-family:var(--mono);font-weight:500;font-size:.76rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--acero);margin:0 0 14px
}
.antetitulo::before{content:"// ";opacity:.55}
.seccion--tinta .antetitulo{color:var(--ambar)}
.entradilla{font-size:1.12rem;color:var(--tinta-80);max-width:62ch}
.seccion--tinta .entradilla{color:rgba(255,255,255,.78)}

/* Cabecera */
.cabecera{
  position:sticky;top:0;z-index:50;background:rgba(16,30,51,.96);
  backdrop-filter:saturate(140%) blur(8px);border-bottom:1px solid rgba(255,255,255,.08)
}
.cabecera .contenedor{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-top:14px;padding-bottom:14px}
.cabecera img{width:172px}
.cabecera .tel{color:rgba(255,255,255,.75);font-size:.92rem;text-decoration:none}
.cabecera .tel:hover{color:var(--ambar)}
.nav-acciones{display:flex;align-items:center;gap:18px}

/* Botones */
.boton{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--tit);font-weight:700;font-size:1rem;text-decoration:none;
  padding:15px 28px;border-radius:10px;border:2px solid transparent;cursor:pointer;
  transition:transform .12s ease,box-shadow .12s ease,background .15s ease
}
.boton--principal{background:var(--ambar);color:var(--tinta)}
.boton--principal:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(255,176,32,.35)}
.boton--fantasma{background:transparent;color:var(--blanco);border-color:rgba(255,255,255,.35)}
.boton--fantasma:hover{border-color:var(--ambar);color:var(--ambar)}
.boton--ancho{width:100%;padding:17px 28px;font-size:1.05rem}

/* Portada */
.portada{background:var(--tinta);color:var(--blanco);position:relative;overflow:hidden}
/* v67, mejora 8: rejilla de puntos estatica en vez de lineas (antes: dos linear-gradient de 34 px) */
.portada::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(900px 420px at 78% -8%,rgba(255,176,32,.14),transparent 62%),
    radial-gradient(circle,rgba(255,255,255,.11) 1px,transparent 1.5px) 0 0/22px 22px;
  mask-image:linear-gradient(180deg,#000 10%,transparent 85%)
}
.portada .contenedor{position:relative;z-index:1;padding-top:clamp(56px,8vw,96px);padding-bottom:clamp(56px,8vw,96px)}
.portada-rejilla{display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:center}
/* Portada sin tarjeta lateral: una sola columna, con el texto contenido */
.portada--simple .entradilla{max-width:56ch}
/* El límite de 18ch es para el eslogan, no para el h1 entero: si se aplicara al
   h1 estrangularía también el subtítulo descriptivo que lleva dentro. */
.portada--simple h1 .h1-eslogan{max-width:18ch}
.portada h1{color:var(--blanco);margin-bottom:.35em}
.portada h1 em{font-style:normal;color:var(--ambar)}

/* El h1 lleva dentro DOS piezas: el eslogan, que manda visualmente, y una línea
   descriptiva más pequeña. Google lee el encabezado entero —servicio y ciudad
   incluidos— y el visitante sigue viendo primero la marca. No se oculta nada:
   las dos se leen, solo cambian de tamaño. Ver docs/25-seo.md §4. */
.portada h1 .h1-eslogan{display:block}
.portada h1 .h1-sub{
  display:block;margin-top:.55em;
  font-family:var(--texto);font-size:clamp(1rem,1.5vw,1.25rem);
  font-weight:400;line-height:1.45;letter-spacing:0;
  color:rgba(255,255,255,.82);max-width:46ch
}

/* Selector de idioma */
.idiomas{display:flex;align-items:center;gap:6px;font-family:var(--mono);font-size:.76rem}
.idiomas a,.idiomas span{
  padding:4px 7px;border-radius:6px;text-decoration:none;letter-spacing:.06em;
  text-transform:uppercase;line-height:1
}
.idiomas a{color:rgba(255,255,255,.62)}
.idiomas a:hover{color:var(--ambar);background:rgba(255,255,255,.08)}
.idiomas [aria-current="true"]{color:var(--tinta);background:var(--ambar);font-weight:700}
.idiomas .sep{color:rgba(255,255,255,.28);padding:0}
.portada .entradilla{font-size:1.2rem;color:rgba(255,255,255,.82);margin-bottom:28px}
.portada-acciones{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:26px}
.portada-notas{display:flex;flex-wrap:wrap;gap:8px 22px;font-size:.92rem;color:rgba(255,255,255,.62);margin:0;padding:0;list-style:none}
.portada-notas li::before{content:"✓";color:var(--ambar);font-weight:700;margin-right:8px}

/* Tarjeta de muestra del informe */
.muestra{background:var(--blanco);color:var(--tinta);border-radius:var(--radio);padding:22px;box-shadow:0 26px 60px rgba(0,0,0,.34)}
.muestra-cab{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--linea);padding-bottom:12px;margin-bottom:14px}
.muestra-cab strong{font-family:var(--tit);font-size:.95rem}
.muestra-cab span{font-size:.78rem;color:var(--acero)}
.hallazgo{display:flex;align-items:flex-start;gap:12px;padding:10px 0;border-bottom:1px dashed var(--linea);font-size:.93rem}
.hallazgo:last-child{border-bottom:0}
.pastilla{
  flex:0 0 auto;font-family:var(--tit);font-weight:700;font-size:.66rem;letter-spacing:.08em;
  text-transform:uppercase;padding:4px 9px;border-radius:999px;color:var(--blanco);margin-top:2px
}
.pastilla--alto{background:var(--rojo)}
.pastilla--medio{background:var(--naranja)}
.pastilla--bajo{background:var(--verde)}
.muestra-pie{font-size:.78rem;color:var(--acero);margin:14px 0 0;text-align:center}

/* Rejillas */
.rejilla{display:grid;gap:24px}
.rejilla--2{grid-template-columns:repeat(2,1fr)}
.rejilla--3{grid-template-columns:repeat(3,1fr)}
.tarjeta{background:var(--blanco);border:1px solid var(--linea);border-radius:var(--radio);padding:26px}
.seccion--tinta .tarjeta{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.12)}
.tarjeta p:last-child{margin-bottom:0}
.tarjeta{transition:border-color .15s ease,transform .15s ease}
.tarjeta:hover{border-color:var(--ambar);transform:translateY(-2px)}
.tarjeta .num{
  font-family:var(--mono);font-weight:700;font-size:.8rem;color:var(--ambar);
  display:inline-block;margin-bottom:10px;letter-spacing:.06em
}
/* Rejilla que se adapta sola: sirve igual para 6 servicios que para 8 */
.rejilla--auto{grid-template-columns:repeat(auto-fit,minmax(272px,1fr))}
/* Cuatro en fila en pantalla ancha, sin dejar una huerfana */
.rejilla--4{grid-template-columns:repeat(auto-fit,minmax(215px,1fr))}
/* Última celda: en vez de dejar un hueco, capta */
.tarjeta--cta{background:var(--tinta);border-color:var(--tinta);color:var(--blanco);display:flex;flex-direction:column;justify-content:center}
.tarjeta--cta h3{color:var(--blanco)}
.tarjeta--cta p{color:rgba(255,255,255,.78)}
.tarjeta--cta:hover{border-color:var(--ambar);transform:translateY(-2px)}

/* Navegación por secciones en la cabecera */
.nav-secciones{display:flex;gap:22px;margin-left:auto;margin-right:6px}
.nav-secciones a{
  font-family:var(--mono);font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;
  color:rgba(255,255,255,.66);text-decoration:none
}
.nav-secciones a:hover{color:var(--ambar)}
@media (max-width:1040px){ .nav-secciones{display:none} }

/* Lista de revisión */
.revision{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:14px 34px}
.revision li{padding-left:30px;position:relative;color:var(--tinta-80)}
.revision li::before{
  content:"";position:absolute;left:0;top:.55em;width:14px;height:2px;background:var(--ambar)
}
.revision h3{display:block;margin:0 0 2px;color:var(--tinta);font-weight:600;font-size:1rem;letter-spacing:0}

/* Autodiagnóstico */
.chequeo{background:var(--blanco);border:1px solid var(--linea);border-radius:var(--radio);padding:28px}
.chequeo ul{list-style:none;margin:0 0 18px;padding:0}
.chequeo li{border-bottom:1px solid var(--linea)}
.chequeo li:last-child{border-bottom:0}
.chequeo label{display:flex;gap:14px;align-items:flex-start;padding:13px 0;cursor:pointer;font-size:.97rem}
.chequeo input{width:20px;height:20px;accent-color:var(--ambar);margin-top:2px;flex:0 0 auto}
.marcador{border-top:2px solid var(--tinta);padding-top:18px;display:flex;align-items:center;gap:16px}
.marcador-num{font-family:var(--tit);font-weight:700;font-size:2.4rem;line-height:1;color:var(--tinta)}
.marcador-txt{font-size:.97rem;color:var(--tinta-80);margin:0}

/* Formulario */
.form-rejilla{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.campo{display:flex;flex-direction:column;gap:7px;margin-bottom:18px}
.campo--ancho{grid-column:1 / -1}
label{font-size:.88rem;font-weight:600;color:var(--tinta)}
.seccion--tinta label{color:rgba(255,255,255,.9)}
input[type=text],input[type=email],input[type=tel],select,textarea{
  font-family:var(--texto);font-size:1rem;color:var(--tinta);background:var(--blanco);
  border:1px solid var(--linea);border-radius:10px;padding:13px 14px;width:100%
}
input:focus,select:focus,textarea:focus{outline:3px solid rgba(255,176,32,.45);border-color:var(--ambar)}
textarea{min-height:110px;resize:vertical}
.consent{display:flex;gap:12px;align-items:flex-start;font-size:.86rem;color:rgba(255,255,255,.72);line-height:1.5}
.consent input{width:20px;height:20px;accent-color:var(--ambar);flex:0 0 auto;margin-top:2px}
.consent a{color:var(--ambar)}
.trampa{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-nota{font-size:.84rem;color:rgba(255,255,255,.55);margin-top:14px}

/* Verificación «eres una persona». La resuelve el navegador solo: esta línea
   existe para que se vea que ha pasado algo, no para pedir nada al visitante. */
.verificacion{
  display:flex;align-items:center;gap:9px;
  font-size:.86rem;line-height:1.35;margin:20px 0 0;
  color:rgba(255,255,255,.62)
}
.verificacion::before{
  content:'';flex:0 0 auto;width:16px;height:16px;border-radius:50%;
  border:2px solid rgba(255,255,255,.28);box-sizing:border-box;
  display:flex;align-items:center;justify-content:center;
  font:700 10px/1 var(--texto);color:#0B1524
}
.verificacion[data-estado='trabajando']::before{
  border-top-color:var(--ambar);animation:girando .8s linear infinite
}
.verificacion[data-estado='hecho']{color:rgba(255,255,255,.78)}
.verificacion[data-estado='hecho']::before{
  content:'\2713';border-color:var(--verde);background:var(--verde)
}
.verificacion[data-estado='aviso']{color:var(--naranja)}
.verificacion[data-estado='aviso']::before{border-color:var(--naranja)}
@keyframes girando{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){
  .verificacion[data-estado='trabajando']::before{animation:none;border-top-color:var(--ambar)}
}
#enviar[disabled]{opacity:.55;cursor:progress}
.aviso{border-left:3px solid var(--rojo);background:rgba(214,69,69,.10);padding:12px 16px;border-radius:0 8px 8px 0;margin-bottom:22px;font-size:.93rem}

/* Familias de servicio: desplegables nativos, sin JavaScript */
.familia{
  border:1px solid var(--linea);border-radius:var(--radio);background:var(--blanco);
  margin-bottom:14px;overflow:hidden;transition:border-color .15s ease
}
.familia:hover{border-color:var(--ambar)}
.familia summary{
  display:flex;align-items:center;gap:16px;cursor:pointer;list-style:none;
  font-family:var(--tit);font-weight:700;font-size:1.22rem;color:var(--tinta);
  padding:22px 26px
}
.familia summary::-webkit-details-marker{display:none}
.familia summary::after{
  content:"+";margin-left:auto;font-family:var(--mono);font-weight:700;
  font-size:1.5rem;color:var(--ambar);line-height:1
}
.familia[open] summary::after{content:"–"}
.familia summary:focus-visible{outline:3px solid rgba(255,176,32,.5);outline-offset:-3px}
.fam-num{font-family:var(--mono);font-size:.8rem;font-weight:700;color:var(--ambar)}
.familia-cuerpo{padding:0 26px 24px}
/* Evaluación dentro de cada servicio */
.eval-intro{color:var(--tinta-60);font-size:.95rem;margin:0 0 14px;padding-bottom:12px;border-bottom:1px solid var(--linea)}
.familia-cuerpo .hallazgo:last-child{border-bottom:0;padding-bottom:0}
.familia-cuerpo .revision{grid-template-columns:repeat(2,1fr);gap:14px 34px}
@media (max-width:900px){ .familia-cuerpo .revision{grid-template-columns:1fr} }

/* Listas de tareas del mantenimiento */
.tareas{list-style:none;margin:0;padding:0}
.tareas li{position:relative;padding-left:20px;margin-bottom:9px;font-size:.95rem;color:rgba(255,255,255,.78);line-height:1.5}
.tareas li::before{content:"";position:absolute;left:0;top:.62em;width:8px;height:2px;background:var(--ambar)}
.tareas li:last-child{margin-bottom:0}
.tareas strong{color:var(--blanco)}

/* Principios: cómo se trabaja */
.principios{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:26px 30px;margin-top:38px;padding-top:30px;border-top:1px solid var(--linea)}
.principio h3{margin-bottom:.3em}
.principio p{color:var(--tinta-80);margin:0;font-size:.97rem}
.principio .marca{display:block;font-family:var(--mono);font-weight:700;color:var(--ambar);font-size:1.35rem;line-height:1;margin-bottom:10px}

/* Tira de tecnologías */
.tecnologias{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px;padding:0;list-style:none}
.tecnologias li{
  font-family:var(--tit);font-size:.86rem;font-weight:500;color:var(--tinta-80);
  border:1px solid var(--linea);background:var(--blanco);border-radius:999px;padding:7px 15px
}
.seccion--tinta .tecnologias li{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.16);color:rgba(255,255,255,.82)}

/* Caso tipo */
.caso{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border:1px solid var(--linea);border-radius:var(--radio);overflow:hidden;margin-top:30px}
.caso > div{padding:22px;border-right:1px solid var(--linea)}
.caso > div:last-child{border-right:0;background:var(--niebla)}
.caso h3{font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--acero);font-family:var(--tit);font-weight:500;margin-bottom:8px}
.caso p{margin:0;font-size:.95rem;color:var(--tinta-80)}
.caso strong{color:var(--tinta)}
.caso-nota{font-size:.84rem;color:var(--acero);margin-top:12px}

/* Firma del fundador */
.firma{display:grid;grid-template-columns:auto 1fr;gap:22px;align-items:center}
.firma img{width:84px;border-radius:12px}

/* Pie */
.pie{background:var(--tinta);color:rgba(255,255,255,.62);font-size:.9rem;padding:44px 0 34px;border-top:1px solid rgba(255,255,255,.08)}
.pie a{color:rgba(255,255,255,.78)}
.pie a:hover{color:var(--ambar)}
.pie-rejilla{display:flex;flex-wrap:wrap;justify-content:space-between;gap:24px;align-items:flex-start}
.pie img{width:150px;margin-bottom:12px}
.pie-enlaces{display:flex;flex-wrap:wrap;gap:18px;margin:0;padding:0;list-style:none}
.eslogan-pie{font-family:var(--tit);color:var(--ambar);font-size:.95rem;margin-top:6px}

@media (max-width:900px){
  .portada-rejilla{grid-template-columns:1fr;gap:38px}
  .rejilla--3,.rejilla--2,.rejilla--4,.form-rejilla,.revision,.principios{grid-template-columns:1fr}
  .caso{grid-template-columns:1fr}
  .caso > div{border-right:0;border-bottom:1px solid var(--linea)}
  .cabecera .tel{display:none}
}
@media (max-width:560px){
  body{font-size:16px}
  .cabecera img{width:132px}
  .cabecera .contenedor{gap:12px}
  /* El botón de cabecera NO se estira: si ocupa el 100% empuja el logo fuera */
  .cabecera .boton{padding:11px 16px;font-size:.88rem}
  /* Los de portada y formulario sí, pero apilados, no en fila */
  .portada-acciones{flex-direction:column;align-items:stretch}
  .portada-acciones .boton{width:100%}
  .antetitulo{letter-spacing:.12em;font-size:.72rem}
  .portada-notas{flex-direction:column;gap:6px}
  .marcador-num{font-size:2rem}
  .firma{grid-template-columns:1fr;gap:14px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .boton{transition:none}
}

/* Titulo de pagina interior. Es un h1 por jerarquia y accesibilidad, pero
   conserva el tamano que tenia como h2: el cambio es semantico, no visual. */
.titulo-pagina{font-size:clamp(1.5rem,3.4vw,2.3rem)}
/* Apartados numerados de las paginas legales. Mismo caso: suben de h3 a h2 para
   que no haya salto de nivel bajo el h1, y se ven exactamente igual que antes. */
.apartado{font-size:1.15rem;letter-spacing:-.01em}

/* --- Paginas de sector (/servicios/, /en/services/) --------------------------
   Anadido el 21/09/2026 con las tres paginas de sector. Dos clases nuevas y
   nada mas: las paginas reutilizan .portada--simple, .revision, .tarjeta y
   .rejilla que ya existian. */

/* Ruta de migas, sobre el fondo tinta de la cabecera de pagina interior */
.migas{
  font-family:var(--mono);font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;
  color:rgba(255,255,255,.55);margin:0 0 22px
}
.migas a{color:rgba(255,255,255,.78);text-decoration:none;border-bottom:1px solid transparent}
.migas a:hover{color:var(--ambar);border-bottom-color:var(--ambar)}
.migas span[aria-hidden]{margin:0 8px;color:rgba(255,255,255,.35)}

/* Preguntas frecuentes. Van como h3 + p y NO como <details>: el contenido de un
   <details> cerrado no lo recogen igual los resumenes de IA, que es justo para
   lo que esta este bloque. Ver docs/25-seo.md */
.faq h3{margin:30px 0 .35em;padding-top:22px;border-top:1px solid var(--linea)}
.faq h3:first-child{margin-top:12px;padding-top:0;border-top:0}
.faq p{color:var(--tinta-80);margin-bottom:0}

/* Los botones en linea de las llamadas a la accion de las paginas de sector */
.seccion--tinta .boton + .boton{margin-left:10px}
@media (max-width:560px){
  .seccion--tinta .boton{display:block;margin:0 auto 10px}
  .seccion--tinta .boton + .boton{margin-left:auto}
}

/* Enlace de la portada a la pagina de sector, al pie de cada desplegable */
.fam-mas{margin:18px 0 0}
.fam-mas a{
  font-family:var(--mono);font-size:.82rem;font-weight:700;letter-spacing:.04em;
  color:var(--tinta);text-decoration:none;border-bottom:2px solid var(--ambar);padding-bottom:2px
}
.fam-mas a::after{content:" \2192"}
.fam-mas a:hover{color:var(--ambar)}

/* --- Antes estilos en linea (04/10/2026, v64) --------------------------------
   La CSP del .htaccess lleva style-src 'self', que BLOQUEA todo atributo style="".
   En produccion esos estilos nunca se aplicaban: el boton «Volver a la web» de las
   legales salia blanco sobre blanco. Regla: en el HTML no se escribe style="" nunca;
   se anade aqui una clase. Las u-* llevan !important porque sustituyen a estilos en
   linea, que ganaban a cualquier selector. */
.boton--fantasma.boton--claro{color:var(--tinta);border-color:var(--linea)}
.boton--fantasma.boton--claro:hover{color:var(--tinta);border-color:var(--ambar);background:rgba(255,176,32,.12)}
.aviso-php{font-family:system-ui,Arial,sans-serif;max-width:620px;margin:80px auto;padding:0 24px;color:#101E33}
.u-ambar{color:var(--ambar)!important}
.u-tinta{color:#101E33!important}
.u-texto-claro{color:rgba(255,255,255,.80)!important;max-width:62ch!important}
.u-centro{text-align:center!important}
.u-pantalla{min-height:62vh!important;display:flex!important;align-items:center!important}
.u-gap48-arriba{gap:48px!important;align-items:start!important}
.u-gap48-centro{align-items:center!important;gap:48px!important}
.u-mw720{max-width:720px!important}
.u-mw780{max-width:780px!important}
.u-mw820{max-width:820px!important}
.u-m0{margin:0!important}
.u-mb8-solo{margin:0 0 8px!important}
.u-centrado-mb24{margin:0 auto 24px!important}
.u-mt14{margin-top:14px!important}
.u-mt18{margin-top:18px!important}
.u-mt22{margin-top:22px!important}
.u-mt28{margin-top:28px!important}
.u-mt30{margin-top:30px!important}
.u-mt32{margin-top:32px!important}
.u-mt34{margin-top:34px!important}
.u-mt1-6em{margin-top:1.6em!important}
.u-mb015em{margin-bottom:.15em!important}
.u-mb26{margin-bottom:26px!important}
.u-mb32{margin-bottom:32px!important}
.u-mb34{margin-bottom:34px!important}
.u-mb38{margin-bottom:38px!important}
.u-fs1-4{font-size:1.4rem!important}
.u-fecha{color:var(--acero)!important;font-size:.9rem!important;margin-top:34px!important}
.u-nota{font-size:.9rem!important;color:var(--tinta-60)!important;margin-bottom:0!important}
.u-nota-sin-margen{color:var(--tinta-60)!important;font-size:.92rem!important}
.u-mono-gris{font-family:var(--mono)!important;font-size:.82rem!important;color:var(--acero)!important;letter-spacing:.06em!important;margin-bottom:1.1em!important}
.u-codigo-php{color:#8A94A6!important;font-size:.82rem!important;margin-top:34px!important}

/* --- Movimiento v67 (paquete 2, docs/33-propuesta-movimiento.md) -----------------------------------
   Reglas: solo transform y opacity; nada se oculta si no hay JavaScript o si el
   visitante pide menos movimiento; el hover, solo con raton de verdad.
   Curvas de docs: emil-design-eng / animate. No inventar otras. */
:root{
  --ease-out:cubic-bezier(0.23,1,0.32,1);
  --ease-in-out:cubic-bezier(0.77,0,0.175,1);
}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* 1. Terminal de la portada ------------------------------------------------- */
/* Sin esto, una linea larga del terminal ensancha la columna y la pagina se sale por la derecha en movil */
.portada-rejilla > *{min-width:0}
.terminal{
  margin:0;background:#0B1524;border:1px solid rgba(255,255,255,.10);border-radius:var(--radio);
  padding:16px 20px 20px;font-family:var(--mono);font-size:.8rem;line-height:1.5;
  color:rgba(255,255,255,.86);box-shadow:0 26px 60px rgba(0,0,0,.34)
}
.t-cab{
  display:block;font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(255,255,255,.62);border-bottom:1px solid rgba(255,255,255,.08);
  padding-bottom:10px;margin:0 0 12px
}
.t-cmd{margin:0 0 8px;color:var(--blanco);overflow-wrap:anywhere}
.t-cmd::before{content:">";color:var(--ambar);font-weight:700;margin-right:.6em}
.t-linea{display:grid;grid-template-columns:8.5em 1fr auto;gap:10px;align-items:baseline;padding:4px 0}
.t-clave{color:var(--acero)}
.t-linea .pastilla{color:var(--tinta)}           /* contraste: punto 7 de la revision 28 */
.t-linea .pastilla--alto{color:var(--blanco)}
.t-fin{margin:10px 0 0;color:var(--verde)}
.t-cursor{
  display:inline-block;width:.62em;height:2px;background:var(--ambar);
  margin-left:.35em;vertical-align:-.1em
}
@media (max-width:560px){
  .terminal{font-size:.74rem;padding:14px 14px 16px}
  .t-linea{grid-template-columns:7.2em 1fr auto;gap:8px}
  .t-linea--extra{display:none}
}
@media (prefers-reduced-motion:no-preference){
  /* Sin JS el comando aparece entero a 1,1 s. Con JS se escribe letra a letra. */
  .t-cmd-texto{animation:t-aparece 1ms 1.1s both}
  .t-cmd-texto.t-escribiendo{animation:none}
  .t-escribiendo .t-car{animation:t-aparece 1ms both;animation-delay:calc(var(--i) * 24ms + 120ms)}
  .t-linea,.t-fin{animation:t-entra 260ms var(--ease-out) both}
  .t-linea:nth-child(3){animation-delay:1.45s}
  .t-linea:nth-child(4){animation-delay:1.7s}
  .t-linea:nth-child(5){animation-delay:1.95s}
  .t-linea:nth-child(6){animation-delay:2.2s}
  .t-linea:nth-child(7){animation-delay:2.45s}
  .t-fin{animation-delay:2.85s}
  .t-cursor{animation:t-parpadeo 1s steps(1,end) 2.85s 6 both}
}
@keyframes t-aparece{from{opacity:0}to{opacity:1}}
@keyframes t-entra{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@keyframes t-parpadeo{50%{opacity:0}}

/* 2. Red conectada y vigilada (animated beam) -------------------------------
   Lienzo de 100 x 60 unidades: entradas en x=14, centro en (50,30), salida en x=86.
   Longitudes y angulos calculados (hypot y atan2 de dx=36, dy=+-11/+-22). */
.red{margin:0}
/* En las paginas con red, el titulo necesita mas ancho que el dibujo */
@media (min-width:901px){ .portada-rejilla--red{grid-template-columns:1.3fr .7fr} }
.red-lienzo{position:relative;aspect-ratio:5 / 3;width:100%;max-width:520px;margin:0 auto}
.red-linea{
  position:absolute;left:14%;height:2px;margin-top:-1px;transform-origin:0 50%;
  background:rgba(255,255,255,.14);overflow:hidden;border-radius:2px
}
.red-linea--1{top:13.333%;width:42.19%;transform:rotate(31.43deg)}
.red-linea--2{top:31.667%;width:37.64%;transform:rotate(16.99deg)}
.red-linea--3{top:50%;width:36%}
.red-linea--4{top:68.333%;width:37.64%;transform:rotate(-16.99deg)}
.red-linea--5{top:86.667%;width:42.19%;transform:rotate(-31.43deg)}
.red-linea--salida{left:50%;top:50%;width:36%;background:rgba(255,176,32,.22)}
.red-pulso{
  position:absolute;inset:0;transform:translateX(-100%);
  background:linear-gradient(90deg,transparent 55%,rgba(255,176,32,.85))
}
.red-nodo{
  position:absolute;left:14%;transform:translate(-50%,-50%);z-index:1;white-space:nowrap;
  font-family:var(--mono);font-size:.72rem;letter-spacing:.03em;line-height:1;
  padding:7px 11px;border-radius:999px;background:#0B1524;
  border:1px solid rgba(255,255,255,.18);color:rgba(255,255,255,.86)
}
.red-nodo--1{top:13.333%}.red-nodo--2{top:31.667%}.red-nodo--3{top:50%}
.red-nodo--4{top:68.333%}.red-nodo--5{top:86.667%}
.red-nodo--salida{left:86%;top:50%;border-color:var(--ambar);color:var(--ambar)}
.red-centro{position:absolute;left:50%;top:50%;width:17%;transform:translate(-50%,-50%);z-index:1}
.red-centro img{width:100%;height:auto;border-radius:22%}
.red-centro::after{
  content:"";position:absolute;inset:0;border-radius:22%;
  border:1px solid var(--ambar);opacity:0
}
.red-pie{
  font-family:var(--mono);font-size:.76rem;letter-spacing:.04em;text-align:center;
  color:rgba(255,255,255,.62);margin:14px 0 0
}
@media (max-width:560px){ .red-nodo{font-size:.64rem;padding:6px 8px} }
@media (prefers-reduced-motion:no-preference){
  .red-pulso{animation:red-viaja 2.8s linear infinite}
  .red-linea--2 .red-pulso{animation-delay:-.9s}
  .red-linea--3 .red-pulso{animation-delay:-2.1s}
  .red-linea--4 .red-pulso{animation-delay:-.4s}
  .red-linea--5 .red-pulso{animation-delay:-1.6s}
  .red-linea--salida .red-pulso{animation-duration:5.6s;animation-delay:-1s}
  .red-centro::after{animation:red-ping 2.8s var(--ease-out) infinite}
  .red.en-pausa .red-pulso,.red.en-pausa .red-centro::after{animation-play-state:paused}
}
@keyframes red-viaja{to{transform:translateX(100%)}}
@keyframes red-ping{from{opacity:.55;transform:scale(1)}to{opacity:0;transform:scale(1.4)}}

/* 3. Hallazgos que entran escalonados (una sola vez) ------------------------ */
@media (prefers-reduced-motion:no-preference){
  .revelar .hallazgo{
    opacity:0;transform:translateY(6px);
    transition:opacity 280ms var(--ease-out),transform 280ms var(--ease-out)
  }
  .revelar.es-visible .hallazgo{opacity:1;transform:none}
  .revelar .hallazgo:nth-child(3){transition-delay:45ms}
  .revelar .hallazgo:nth-child(4){transition-delay:90ms}
  .revelar .hallazgo:nth-child(5){transition-delay:135ms}
  .revelar .hallazgo:nth-child(6){transition-delay:180ms}
  .revelar .hallazgo:nth-child(7){transition-delay:225ms}
  .revelar .hallazgo:nth-child(8){transition-delay:270ms}
}

/* 4. Proceso 01-02-03: una linea ambar que avanza de tarjeta en tarjeta ------
   Solo CSS: las paginas de servicio no cargan app.js y no se les anade una
   peticion. La linea avanza con el scroll (animation-timeline), sin escuchar el
   scroll desde JS. Sin soporte (Firefox) o con reducir movimiento, el filo se ve
   entero y quieto desde el principio. */
#como .rejilla--3 > .tarjeta,#approach .rejilla--3 > .tarjeta{position:relative}
#como .rejilla--3 > .tarjeta::before,#approach .rejilla--3 > .tarjeta::before{
  content:"";position:absolute;left:var(--radio);right:var(--radio);top:-1px;height:2px;
  background:var(--ambar);transform-origin:0 50%
}
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    #como .rejilla--3,#approach .rejilla--3{view-timeline-name:--proceso}
    #como .rejilla--3 > .tarjeta::before,#approach .rejilla--3 > .tarjeta::before{
      animation:proceso-linea linear both;animation-timing-function:var(--ease-in-out);
      animation-timeline:--proceso;animation-range:cover 4% cover 18%
    }
    #como .rejilla--3 > .tarjeta:nth-child(2)::before,#approach .rejilla--3 > .tarjeta:nth-child(2)::before{animation-range:cover 14% cover 28%}
    #como .rejilla--3 > .tarjeta:nth-child(3)::before,#approach .rejilla--3 > .tarjeta:nth-child(3)::before{animation-range:cover 24% cover 38%}
  }
}
@keyframes proceso-linea{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* 5. Haz que recorre el borde del formulario (border beam), 2 vueltas -------- */
.haz-marco{position:relative;border:1px solid rgba(255,255,255,.12);border-radius:var(--radio);padding:24px}
.haz{position:absolute;inset:-1px;pointer-events:none;border-radius:inherit;overflow:hidden;transition:opacity 200ms ease}
.haz-lado{position:absolute;overflow:hidden}
.haz-lado--arr{top:0;left:0;right:0;height:2px}
.haz-lado--der{top:0;right:0;bottom:0;width:2px}
.haz-lado--aba{bottom:0;left:0;right:0;height:2px}
.haz-lado--izq{top:0;left:0;bottom:0;width:2px}
.haz-luz{position:absolute;inset:0;opacity:0}
.haz-lado--arr .haz-luz{background:linear-gradient(90deg,transparent 40%,var(--ambar))}
.haz-lado--der .haz-luz{background:linear-gradient(180deg,transparent 40%,var(--ambar))}
.haz-lado--aba .haz-luz{background:linear-gradient(270deg,transparent 40%,var(--ambar))}
.haz-lado--izq .haz-luz{background:linear-gradient(0deg,transparent 40%,var(--ambar))}
.haz-marco.haz-apagado .haz{opacity:0}
@media (prefers-reduced-motion:no-preference){
  .haz-marco.es-visible .haz-luz{animation:5s linear 2 both}
  .haz-marco.es-visible .haz-lado--arr .haz-luz{animation-name:haz-arr}
  .haz-marco.es-visible .haz-lado--der .haz-luz{animation-name:haz-der}
  .haz-marco.es-visible .haz-lado--aba .haz-luz{animation-name:haz-aba}
  .haz-marco.es-visible .haz-lado--izq .haz-luz{animation-name:haz-izq}
}
/* Los lados verticales son mas largos: se les da mas tiempo (34 % y 34 %) */
@keyframes haz-arr{0%{opacity:1;transform:translateX(-100%)}16%{opacity:1;transform:translateX(100%)}16.01%,100%{opacity:0}}
@keyframes haz-der{0%,16%{opacity:0;transform:translateY(-100%)}16.01%{opacity:1;transform:translateY(-100%)}50%{opacity:1;transform:translateY(100%)}50.01%,100%{opacity:0}}
@keyframes haz-aba{0%,50%{opacity:0;transform:translateX(100%)}50.01%{opacity:1;transform:translateX(100%)}66%{opacity:1;transform:translateX(-100%)}66.01%,100%{opacity:0}}
@keyframes haz-izq{0%,66%{opacity:0;transform:translateY(100%)}66.01%{opacity:1;transform:translateY(100%)}99.99%{opacity:1;transform:translateY(-100%)}100%{opacity:0}}

/* 6. Microinteracciones: desplegable, pulsacion y verificacion -------------- */
@media (prefers-reduced-motion:no-preference){
  .familia[open] .familia-cuerpo:not(.revelar){animation:abrir 220ms var(--ease-out)}
  .boton{transition:transform 160ms var(--ease-out),box-shadow .15s ease,background-color .15s ease,border-color .15s ease,color .15s ease}
  .boton:active{transform:scale(.97)}
  .verificacion[data-estado='hecho']::before{animation:aparecer-check 220ms var(--ease-out)}
}
@keyframes abrir{from{opacity:0;transform:translateY(-4px)}}
@keyframes aparecer-check{from{opacity:.3;transform:scale(.8)}}

/* 7. Transicion suave entre paginas (navegacion interna). Firefox la ignora sin romper nada */
@media (prefers-reduced-motion:no-preference){
  @view-transition{navigation:auto}
  .cabecera{view-transition-name:cabecera}
  ::view-transition-old(root),::view-transition-new(root){animation-duration:180ms;animation-timing-function:var(--ease-out)}
}

/* 9. Sombra de la cabecera fija: aparece solo al bajar. Solo CSS (scroll-timeline):
   las paginas de servicio no cargan app.js. Sin soporte, la cabecera queda como antes */
@supports (animation-timeline:scroll()){
  .cabecera::after{
    content:"";position:absolute;left:0;right:0;top:100%;height:14px;pointer-events:none;
    background:linear-gradient(180deg,rgba(8,16,30,.35),transparent);opacity:0;
    animation:sombra-cabecera linear both;animation-timeline:scroll(root);animation-range:0 64px
  }
}
@keyframes sombra-cabecera{to{opacity:1}}