/* Estilos comunes de todas las páginas de Welkia */
:root{
  --noche:#0D0D26;
  --noche-2:#16163A;
  --noche-3:#1F1F4D;
  --linea:rgba(199,184,255,.16);
  --lavanda:#C7B8FF;
  --electrico:#7B6CFF;
  --menta:#6FF0C4;
  --blanco:#F3F2FF;
  --suave:#A9A8C8;
  --titular:"Unbounded","Segoe UI",system-ui,sans-serif;
  --texto:"Instrument Sans","Segoe UI",system-ui,sans-serif;
  --ancho:76rem;
  --gutter:1rem;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--noche);color:var(--blanco);font:400 1.0625rem/1.6 var(--texto);-webkit-tap-highlight-color:transparent;overflow-x:hidden}
a{color:inherit}
:focus-visible{outline:3px solid var(--menta);outline-offset:3px;border-radius:6px}
h1,h2,h3{margin:0;font-family:var(--titular);font-weight:600;line-height:1.05;letter-spacing:-.03em;text-wrap:balance}
p{margin:0}
.envoltorio{max-width:var(--ancho);margin:0 auto;padding:0 var(--gutter)}

/* ---------- botones ---------- */
.boton{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;min-height:3.4rem;padding:0 1.6rem;border-radius:999px;font:600 1.0625rem/1 var(--texto);text-decoration:none;color:var(--noche);background:var(--lavanda);border:0;box-shadow:0 0 0 0 rgba(199,184,255,.5);transition:background-color .2s ease,box-shadow .25s ease,transform .1s ease}
.boton:active{transform:scale(.97)}
.boton svg{width:1.3rem;height:1.3rem;flex:none}
@media (hover:hover){.boton:hover{background:#fff;box-shadow:0 0 32px 4px rgba(123,108,255,.55)}}
.boton--fantasma{background:transparent;color:var(--blanco);box-shadow:inset 0 0 0 1.5px var(--linea)}
@media (hover:hover){.boton--fantasma:hover{background:rgba(199,184,255,.08);box-shadow:inset 0 0 0 1.5px var(--lavanda)}}

/* ---------- cabecera ---------- */
.cabecera{position:sticky;top:0;z-index:10;background:rgba(13,13,38,.72);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--linea)}
.cabecera .envoltorio{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:4.25rem}
.logo{font-family:var(--titular);font-weight:800;font-size:1.35rem;letter-spacing:-.04em;text-decoration:none;display:inline-flex;align-items:center;gap:.5rem}
.logo i{width:.6rem;height:.6rem;border-radius:50%;background:var(--menta);box-shadow:0 0 12px var(--menta)}
.cabecera nav{display:flex;align-items:center;gap:2rem;font-weight:500;font-size:.9375rem}
.cabecera nav a:not(.boton){text-decoration:none;color:var(--suave);display:none}
.cabecera nav a:not(.boton):hover{color:var(--blanco)}
.cabecera .boton{min-height:2.6rem;padding:0 1.1rem;font-size:.9375rem}

/* ---------- portada ---------- */
.portada{position:relative;padding:3rem 0 4rem;overflow:hidden;isolation:isolate}
/* rejilla de puntos y un halo que sigue al ratón */
.portada::before{content:"";position:absolute;inset:0;z-index:-2;background-image:radial-gradient(rgba(199,184,255,.22) 1px,transparent 1.5px);background-size:28px 28px;-webkit-mask-image:radial-gradient(ellipse 70% 60% at 60% 40%,#000 20%,transparent 75%);mask-image:radial-gradient(ellipse 70% 60% at 60% 40%,#000 20%,transparent 75%)}
.portada::after{content:"";position:absolute;z-index:-1;width:46rem;height:46rem;left:var(--x,70%);top:var(--y,40%);transform:translate(-50%,-50%);background:radial-gradient(circle,rgba(123,108,255,.38),rgba(123,108,255,0) 62%);pointer-events:none;transition:left .6s ease-out,top .6s ease-out}
.portada .envoltorio{display:grid;gap:3rem;align-items:center}
.estado{display:inline-flex;align-items:center;gap:.55rem;font-size:.9375rem;color:var(--suave);margin-bottom:1.5rem}
.estado i{width:.55rem;height:.55rem;border-radius:50%;background:var(--menta);box-shadow:0 0 0 0 rgba(111,240,196,.6)}
@media (prefers-reduced-motion:no-preference){.estado i{animation:latido 2s ease-out infinite}}
@keyframes latido{0%{box-shadow:0 0 0 0 rgba(111,240,196,.6)}100%{box-shadow:0 0 0 12px rgba(111,240,196,0)}}
.portada h1{font-size:clamp(2rem,5.4vw,4.4rem);font-weight:800;line-height:1}
.portada h1 span{display:block;color:var(--lavanda)}
.portada .entrada{font-size:clamp(1.0625rem,1.6vw,1.25rem);color:var(--suave);max-width:34rem;margin-top:1.75rem}
.portada .acciones{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:2.25rem}

/* el móvil con la conversación en directo */
.movil{justify-self:center;width:min(100%,24rem);background:linear-gradient(180deg,var(--noche-3),var(--noche-2));border:1px solid var(--linea);border-radius:2rem;padding:1.1rem;box-shadow:0 40px 80px -30px rgba(0,0,0,.8),0 0 0 8px rgba(199,184,255,.04)}
.movil-cabecera{display:flex;align-items:center;gap:.75rem;padding:.4rem .4rem 1rem;border-bottom:1px solid var(--linea)}
.avatar{width:2.5rem;height:2.5rem;border-radius:50%;display:grid;place-items:center;background:var(--electrico);font:800 .9rem/1 var(--titular);color:#fff;flex:none}
.movil-cabecera strong{display:block;font-size:.98rem;line-height:1.2}
.movil-cabecera small{display:flex;align-items:center;gap:.4rem;font-size:.8125rem;color:var(--menta)}
.movil-cabecera small::before{content:"";width:.45rem;height:.45rem;border-radius:50%;background:currentColor}
.movil-cabecera em{margin-left:auto;font-style:normal;font-size:.75rem;color:var(--suave);border:1px solid var(--linea);border-radius:999px;padding:.2rem .6rem}
.hilo{display:flex;flex-direction:column;gap:.6rem;padding:1rem .2rem .4rem;min-height:21rem}
.hora{align-self:center;font-size:.75rem;color:var(--suave);background:rgba(199,184,255,.08);border-radius:999px;padding:.2rem .7rem;margin-bottom:.2rem}
.burbuja{max-width:85%;padding:.65rem .9rem;font-size:.9375rem;line-height:1.45;border-radius:1.1rem}
.burbuja.cliente{align-self:flex-end;background:rgba(243,242,255,.1);border-bottom-right-radius:.3rem}
.burbuja.ia{align-self:flex-start;background:var(--electrico);color:#fff;border-bottom-left-radius:.3rem}
.burbuja.entra{animation:entra .35s cubic-bezier(.2,.8,.2,1) both}
@keyframes entra{from{opacity:0;transform:translateY(8px) scale(.97)}to{opacity:1;transform:none}}
.escribiendo{display:inline-flex;gap:.3rem;padding:.8rem 1rem}
.escribiendo b{width:.42rem;height:.42rem;border-radius:50%;background:#fff;opacity:.5;animation:punto 1s infinite}
.escribiendo b:nth-child(2){animation-delay:.15s}.escribiendo b:nth-child(3){animation-delay:.3s}
@keyframes punto{0%,100%{opacity:.35;transform:none}50%{opacity:1;transform:translateY(-3px)}}
.movil figcaption{text-align:center;font-size:.8125rem;color:var(--suave);padding-top:.6rem}

/* ---------- para quién ---------- */
.para-quien{border-top:1px solid var(--linea);border-bottom:1px solid var(--linea);padding:2rem 0}
.para-quien p{font-size:clamp(1.0625rem,2vw,1.35rem);color:var(--suave);max-width:52rem}
.para-quien strong{color:var(--blanco);font-weight:600}

/* ---------- servicios ---------- */
.servicios{padding:5rem 0 2rem}
.servicios > .envoltorio > h2{font-size:clamp(1.9rem,5vw,3.6rem);max-width:18ch;margin-bottom:3rem}
.servicio{display:grid;gap:2rem;align-items:center;padding:3rem 0;border-top:1px solid var(--linea)}
.servicio h3{font-size:clamp(1.5rem,3.4vw,2.4rem);margin-bottom:1rem}
.servicio p{color:var(--suave);font-size:1.125rem;max-width:34rem}
.servicio ul{list-style:none;margin:1.5rem 0 1.75rem;padding:0;display:grid;gap:.6rem}
.servicio li{display:flex;gap:.75rem;align-items:baseline}
.servicio li::before{content:"";flex:none;width:.5rem;height:.5rem;border-radius:2px;background:var(--menta);transform:translateY(-.1em) rotate(45deg)}
.enlace{display:inline-flex;align-items:center;gap:.5rem;font-weight:600;color:var(--lavanda);text-decoration:none;border-bottom:1.5px solid rgba(199,184,255,.4);padding-bottom:.15rem}
.enlace:hover{color:#fff;border-color:#fff}
.estrella-marca{display:inline-block;font-size:.8125rem;font-weight:600;color:var(--noche);background:var(--menta);border-radius:999px;padding:.2rem .7rem;margin-bottom:1rem}

/* paneles de cada servicio */
.panel{background:var(--noche-2);border:1px solid var(--linea);border-radius:1.5rem;padding:1.5rem;position:relative;overflow:hidden}
.panel::before{content:"";position:absolute;inset:-40% -20% auto auto;width:22rem;height:22rem;background:radial-gradient(circle,rgba(123,108,255,.28),transparent 65%);pointer-events:none}
.panel-titulo{display:flex;justify-content:space-between;align-items:center;font-size:.875rem;color:var(--suave);margin-bottom:1.25rem}
.panel-titulo b{color:var(--blanco);font-weight:600}

.onda{display:flex;align-items:center;gap:4px;height:4.5rem;margin-bottom:1.25rem}
.onda i{flex:1;border-radius:3px;background:linear-gradient(180deg,var(--lavanda),var(--electrico));height:var(--h)}
@media (prefers-reduced-motion:no-preference){.onda i{animation:onda 1.4s ease-in-out infinite alternate;animation-delay:var(--d)}}
@keyframes onda{to{transform:scaleY(.35)}}
.resumen{font-size:.9375rem;line-height:1.5;border-top:1px solid var(--linea);padding-top:1rem;color:var(--suave)}
.resumen b{color:var(--blanco);font-weight:600}

.buscador{background:rgba(243,242,255,.06);border:1px solid var(--linea);border-radius:999px;padding:.9rem 1.2rem;display:flex;gap:.75rem;align-items:center;font-size:1rem}
.buscador svg{width:1.2rem;height:1.2rem;flex:none;color:var(--lavanda)}
.cursor{display:inline-block;width:2px;height:1.1em;background:var(--lavanda);vertical-align:-.15em;margin-left:2px}
@media (prefers-reduced-motion:no-preference){.cursor{animation:parpadeo 1s steps(1) infinite}}
@keyframes parpadeo{50%{opacity:0}}
.revision{margin-top:1.25rem;display:grid;gap:.6rem;font-size:.9375rem}
.revision div{display:flex;justify-content:space-between;gap:1rem;padding:.7rem .9rem;border-radius:.8rem;background:rgba(243,242,255,.04);border:1px solid var(--linea)}
.revision span{color:var(--suave)}

.registro{list-style:none;margin:0;padding:0;display:grid;gap:.6rem}
.registro li{display:grid;grid-template-columns:auto 1fr;column-gap:.85rem;align-items:center;padding:.85rem 1rem;border-radius:.9rem;background:rgba(243,242,255,.04);border:1px solid var(--linea)}
.registro li::before{content:"";grid-row:span 2;width:1.6rem;height:1.6rem;border-radius:50%;background:var(--electrico) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E") center/60% no-repeat}
.registro b{font-weight:600}
.registro span{font-size:.9375rem;color:var(--suave)}

/* ---------- cómo trabajo ---------- */
.pasos{padding:5rem 0}
.pasos h2{font-size:clamp(1.9rem,5vw,3.6rem);margin-bottom:3rem}
.pasos ol{list-style:none;margin:0;padding:0;display:grid;gap:1rem;counter-reset:paso}
.pasos li{counter-increment:paso;position:relative;padding:1.75rem;border-radius:1.25rem;border:1px solid var(--linea);background:linear-gradient(180deg,rgba(123,108,255,.12),rgba(123,108,255,0))}
.pasos li::before{content:counter(paso);display:grid;place-items:center;width:2.6rem;height:2.6rem;border-radius:50%;background:var(--lavanda);color:var(--noche);font:800 1.05rem/1 var(--titular);margin-bottom:1.25rem}
.pasos strong{display:block;font-family:var(--titular);font-weight:600;font-size:1.2rem;letter-spacing:-.02em;margin-bottom:.5rem}
.pasos p{color:var(--suave)}

/* ---------- sobre mí ---------- */
.sobre-mi{padding:2rem 0 5rem}
.sobre-mi .envoltorio{display:grid;gap:2.5rem;align-items:center}
.foto{aspect-ratio:4/5;width:100%;max-width:22rem;border-radius:1.5rem;display:grid;place-items:center;color:var(--suave);background:radial-gradient(circle at 30% 20%,rgba(123,108,255,.35),transparent 60%),var(--noche-2);border:1px solid var(--linea)}
.sobre-mi h2{font-size:clamp(1.7rem,4vw,2.9rem);margin-bottom:1.5rem;max-width:20ch}
.sobre-mi p{font-size:1.125rem;color:var(--suave);max-width:36rem}
.sobre-mi p + p{margin-top:1rem}

/* ---------- contacto ---------- */
.contacto{padding:0 0 4rem}
.caja{position:relative;overflow:hidden;border-radius:2rem;padding:3rem 1.5rem;text-align:center;background:radial-gradient(ellipse 80% 90% at 50% 0%,rgba(123,108,255,.55),transparent 70%),var(--noche-2);border:1px solid var(--linea)}
.caja h2{font-size:clamp(2.1rem,7vw,5rem);font-weight:800}
.caja p{font-size:1.1875rem;color:var(--suave);margin:1rem auto 2rem;max-width:30rem}
.caja .acciones{display:flex;flex-wrap:wrap;justify-content:center;gap:.75rem}

/* ---------- pie ---------- */
.pie{border-top:1px solid var(--linea);padding:2rem 0;font-size:.9375rem;color:var(--suave)}
.pie .envoltorio{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1rem}
.pie .logo{font-size:1.1rem;color:var(--blanco)}
.pie nav{display:flex;flex-wrap:wrap;gap:1.25rem}
.pie nav a{text-decoration:none}
.pie nav a:hover{color:var(--blanco);text-decoration:underline}

/* ---------- tablet y ordenador ---------- */
@media (min-width:860px){
  :root{--gutter:2rem}
  .cabecera nav a:not(.boton){display:inline}
  .portada{padding:4rem 0 5rem}
  .portada .envoltorio{grid-template-columns:1.2fr .8fr;gap:3.5rem}
  .servicio{grid-template-columns:1fr 1fr;gap:5rem;padding:4rem 0}
  .servicio:nth-of-type(even) .panel{order:-1}
  .pasos ol{grid-template-columns:repeat(3,1fr)}
  .sobre-mi .envoltorio{grid-template-columns:22rem 1fr;gap:5rem}
  .caja{padding:5rem 3rem}
}
@media (prefers-reduced-motion:reduce){
  .portada::after{transition:none}
  .burbuja.entra{animation:none}
}

/* ---------- páginas interiores ---------- */
.cabecera nav a[aria-current="page"]{color:var(--blanco)}
.portada--interior{padding:3rem 0 3.5rem}
.portada--interior h1{font-size:clamp(2rem,5vw,3.9rem)}
.portada--interior .panel{width:100%;max-width:30rem;justify-self:center}
.miga{font-size:.9375rem;color:var(--suave);margin-bottom:1.25rem}
.miga a{color:var(--lavanda);text-decoration:none}
.miga a:hover{text-decoration:underline}

.bloque{padding:4rem 0;border-top:1px solid var(--linea)}
.bloque h2{font-size:clamp(1.7rem,4vw,2.8rem);margin-bottom:2rem;max-width:22ch}
.bloque > .envoltorio > p{color:var(--suave);font-size:1.125rem;max-width:40rem}
.bloque > .envoltorio > p + p{margin-top:1rem}

.funciones{list-style:none;margin:0;padding:0;display:grid;gap:2rem}
.funciones li{border-top:2px solid var(--electrico);padding-top:1.25rem}
.funciones h3{font-size:1.2rem;margin-bottom:.6rem}
.funciones p{color:var(--suave)}

.usos{margin:0;display:grid;gap:1.25rem}
.usos div{display:grid;gap:.25rem}
.usos dt{font-weight:600;font-size:1.0625rem}
.usos dd{margin:0;color:var(--suave)}

.nota{margin-top:2rem;padding:1.25rem 1.5rem;border-radius:1rem;border:1px solid var(--linea);background:rgba(199,184,255,.06);color:var(--suave);max-width:40rem}
.nota strong{color:var(--blanco)}

.preguntas{max-width:48rem}
.preguntas details{border-bottom:1px solid var(--linea)}
.preguntas summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:1rem;padding:1.25rem 0;font-weight:600;font-size:1.125rem}
.preguntas summary::-webkit-details-marker{display:none}
.preguntas summary::after{content:"+";font:600 1.4rem/1 var(--titular);color:var(--lavanda);transition:transform .2s ease}
.preguntas details[open] summary::after{transform:rotate(45deg)}
.preguntas details p{padding:0 0 1.25rem;color:var(--suave);max-width:42rem}

.contacto--interior{padding-top:4rem}

/* ---------- textos legales ---------- */
.documento{padding:3.5rem 0 5rem}
.documento .envoltorio{max-width:50rem}
.documento h1{font-size:clamp(2rem,5vw,3.2rem);margin-bottom:.75rem}
.documento .fecha{color:var(--suave);font-size:.9375rem;margin-bottom:2.5rem}
.documento h2{font-family:var(--titular);font-size:1.2rem;letter-spacing:-.01em;margin:2.5rem 0 .9rem}
.documento p,.documento li{color:#CFCEE6}
.documento p + p{margin-top:.9rem}
.documento ul{padding-left:1.25rem;margin:.75rem 0;display:grid;gap:.4rem}
.documento a{color:var(--lavanda)}
.documento dl{display:grid;gap:.5rem;margin:0}
.documento dl div{display:grid;gap:.1rem}
.documento dt{font-weight:600;color:var(--blanco)}
.documento dd{margin:0;color:#CFCEE6}
.pendiente{background:rgba(111,240,196,.15);color:var(--menta);border-radius:.3rem;padding:0 .3rem;font-weight:600}

/* ---------- pie con enlaces ---------- */
.pie .envoltorio{align-items:flex-start}
.pie p{margin-top:.4rem}

@media (min-width:860px){
  .portada--interior{padding:4.5rem 0 5rem}
  .funciones{grid-template-columns:repeat(2,1fr);gap:2.5rem 4rem}
  .usos{grid-template-columns:repeat(3,1fr);gap:2rem 3rem}
}

/* ---------- zona de trabajo ---------- */
.zona{padding:4rem 0;border-top:1px solid var(--linea)}
.zona h2{font-size:clamp(1.9rem,5vw,3.6rem);max-width:18ch;margin-bottom:1rem}
.zona-entrada{color:var(--suave);font-size:1.125rem;max-width:36rem;margin-bottom:2.5rem}
.comarcas{margin:0;display:grid;gap:1.5rem}
.comarcas div{border-left:2px solid var(--electrico);padding-left:1rem}
.comarcas dt{font-family:var(--titular);font-weight:600;font-size:1rem;letter-spacing:-.01em;margin-bottom:.35rem}
.comarcas dd{margin:0;color:var(--suave);font-size:.98rem}
.zona-pie{margin-top:2.5rem;color:var(--suave)}
@media (min-width:600px){.comarcas{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1000px){.comarcas{grid-template-columns:repeat(4,1fr);gap:2rem}}

/* Sobre mí sin foto (hasta que llegue la foto de Rosa) */
@media (min-width:860px){.sobre-mi .envoltorio.sin-foto{grid-template-columns:1fr;max-width:52rem}}

.documento dl + p{margin-top:1.25rem}