:root{
  --tinta:#0b2b2a;
  --tinta-2:#0f3b38;
  --verde:#14b8a6;
  --verde-claro:#2dd4bf;
  --verde-oscuro:#0d9488;
  --ambar:#f59e0b;
  --papel:#f7faf9;
  --gris:#5b6b77;
  --linea:#e3ebee;
  --blanco:#fff;
  --radio:18px;
  --radio-sm:12px;
  --sombra:0 8px 26px rgba(11,43,42,.06);
  --sombra-alta:0 20px 46px rgba(11,43,42,.16);
  --max:1080px;
  --fuente:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --titulo:"Fraunces",Georgia,"Times New Roman",serif;
}
/* La letra de los titulares viaja CON la página: no se pide a ningún servidor
   ajeno (nada de Google Fonts en tiempo de visita). Es variable, así que un solo
   fichero cubre todos los grosores. Si no llegara a cargar, entran Georgia y una
   serif de sistema: la página nunca se queda sin letra. */
@font-face{
  font-family:"Fraunces";
  src:url("fuentes/fraunces-latin.woff2") format("woff2-variations");
  font-weight:400 900;
  font-style:normal;
  font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
/* La cabecera es fija: sin este margen, al pulsar «Qué es» el título de la
   sección queda escondido debajo y parece que no saltó. */
section[id]{scroll-margin-top:84px}
::selection{background:var(--verde);color:#04201e}
body{
  margin:0;font-family:var(--fuente);color:var(--tinta);background:var(--blanco);
  line-height:1.65;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block}
a{color:var(--verde-oscuro);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2{font-family:var(--titulo);font-weight:700;line-height:1.06;margin:0 0 18px;letter-spacing:-.021em;text-wrap:balance;font-variation-settings:"opsz" 120}
h3{font-weight:700;line-height:1.2;margin:0 0 16px;letter-spacing:-.015em;text-wrap:balance}
h2{font-size:clamp(1.75rem,3.4vw,2.6rem);font-weight:600}
p{margin:0 0 16px;text-wrap:pretty}
p:last-child{margin-bottom:0}
:focus-visible{outline:3px solid var(--ambar);outline-offset:3px;border-radius:6px}
.texto{max-width:var(--max);margin:0 auto}
.grande{font-size:1.15rem;line-height:1.6}

/* ---------- cabecera ---------- */
.cabecera{
  position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;
  gap:16px;padding:12px clamp(16px,3vw,32px);background:rgba(255,255,255,.92);
  backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--linea);flex-wrap:wrap;
}
.cabecera .marca{display:inline-flex;align-items:center}
.cabecera .logo{height:32px;width:auto}
.cabecera .nav{display:flex;align-items:center;gap:clamp(14px,2vw,24px);flex-wrap:wrap}
.cabecera .nav a{color:var(--tinta);font-weight:600;font-size:.95rem}
.cabecera .nav a:hover{color:var(--verde-oscuro);text-decoration:none}

/* Menú de móvil: casilla oculta + botón de tres rayas. En escritorio no se ven. */
.menu-check{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.menu-boton{display:none}

/* ---------- botones ---------- */
.acciones{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.boton{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:15px 26px;border-radius:var(--radio-sm);font-weight:700;font-size:1rem;
  border:2px solid transparent;transition:transform .16s ease,box-shadow .16s ease,background .16s ease;
  text-decoration:none;cursor:pointer;
}
.boton:hover{text-decoration:none;transform:translateY(-2px)}
.boton:active{transform:translateY(0) scale(.985)}
.boton-verde{background:var(--verde);color:#04201e;box-shadow:0 10px 24px rgba(20,184,166,.32)}
.boton-verde:hover{background:var(--verde-claro)}
.boton-borde{border-color:rgba(110,231,217,.7);color:#eafaf7}
.boton-borde:hover{background:rgba(255,255,255,.08)}
.boton-sm{padding:11px 18px;font-size:.92rem}

/* ---------- hero ---------- */
.hero{
  position:relative;overflow:hidden;text-align:center;color:#eafaf7;
  padding:clamp(72px,9vw,124px) clamp(18px,4vw,32px) clamp(64px,7vw,104px);
  background:radial-gradient(130% 120% at 12% -10%,#12524c 0%,#0b2b2a 52%,#071e1c 100%);
}
.hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(52% 60% at 88% 8%,rgba(45,212,191,.26),transparent 68%),
             radial-gradient(46% 50% at 6% 100%,rgba(245,158,11,.12),transparent 70%);
}
/* Sello de la casa: una retícula muy tenue, como una hoja de cuadrícula de
   laboratorio. Da textura sin robar protagonismo al texto. */
.hero::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.16) 1.4px,transparent 1.5px);
  background-size:26px 26px;
  -webkit-mask-image:radial-gradient(120% 78% at 50% 0%,#000 8%,transparent 72%);
  mask-image:radial-gradient(120% 78% at 50% 0%,#000 8%,transparent 72%);
}
.hero-caja{position:relative;max-width:860px;margin:0 auto}
.hero h1{font-size:clamp(2.5rem,6.2vw,4.35rem);color:#fff;margin-bottom:24px;font-weight:700;line-height:1.02;letter-spacing:-.03em;font-variation-settings:"opsz" 144}
.hero .sub{font-size:clamp(1.05rem,2.2vw,1.28rem);color:#c6ece5;max-width:660px;margin:0 auto 32px;line-height:1.7}
.hero .lema{
  font-family:var(--titulo);font-weight:500;font-size:1.08rem;letter-spacing:-.005em;
  color:var(--verde-claro);margin-bottom:18px;
}
.hero .micro,.cierre .micro{font-size:.87rem;color:#9fd8ce;margin-top:20px}
.chips{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:10px;padding:0;margin:34px 0 0}
.chips li{
  font-size:.84rem;font-weight:600;padding:7px 14px;border-radius:999px;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);color:#d6f4ef;
}
.chips-claro li{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.28);color:#fff}

/* ---------- secciones ---------- */
.seccion{padding:clamp(56px,7vw,88px) clamp(18px,4vw,32px)}
.seccion-gris{background:var(--papel)}
.seccion-verde{background:linear-gradient(160deg,var(--verde-oscuro),#0b6b64);color:#fff}
.seccion-verde h2{color:#fff}
.seccion-verde p{color:#dcf5f1}
.conexion{text-align:center}
.conexion p{max-width:760px;margin-left:auto;margin-right:auto}
.conexion .chips{justify-content:center}

/* ---------- dos columnas ---------- */
.dos-col{display:grid;grid-template-columns:1.5fr 1fr;gap:clamp(24px,4vw,52px);max-width:var(--max);margin:0 auto;align-items:start}

/* ---------- listas ---------- */
.lista-buena{list-style:none;margin:0;padding:26px;background:#fff;border:1px solid var(--linea);border-radius:var(--radio);box-shadow:var(--sombra);display:grid;gap:16px}
.lista-buena li{display:flex;gap:12px;align-items:flex-start;font-weight:600;color:var(--tinta-2);font-size:.98rem;line-height:1.45}
.tick{flex:none;width:22px;height:22px;border-radius:50%;background:var(--verde);position:relative;margin-top:1px}
.tick::after{content:"";position:absolute;left:7px;top:4px;width:6px;height:11px;border:solid #04201e;border-width:0 2.5px 2.5px 0;transform:rotate(45deg)}

.lista-problema{list-style:none;padding:0;margin:0;display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.lista-problema li{background:#fff;border:1px solid var(--linea);border-radius:var(--radio);padding:20px 22px;box-shadow:var(--sombra)}
.lista-problema strong{display:block;margin-bottom:4px;color:var(--tinta)}

/* ---------- rejilla y tarjetas ---------- */
.rejilla{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:22px;margin-top:32px}
.tarjeta{
  position:relative;background:#fff;border:1px solid var(--linea);border-radius:var(--radio);
  padding:30px 26px;box-shadow:var(--sombra);transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}
.tarjeta::before{content:"";position:absolute;left:26px;right:26px;top:0;height:3px;border-radius:0 0 3px 3px;background:linear-gradient(90deg,var(--verde),var(--verde-claro))}
.tarjeta:hover{transform:translateY(-5px);box-shadow:var(--sombra-alta);border-color:#cfe6e2}
.tarjeta h3{font-family:var(--titulo);font-size:1.32rem;font-weight:600;margin-bottom:8px;letter-spacing:-.012em;line-height:1.16}
.tarjeta p{margin:0;color:var(--gris)}
.tarjeta p.lead{color:var(--tinta);font-weight:600;margin-bottom:12px}
/* Detalle de cada bloque de «Lo que resuelve» (viñetas cortas). */
.detalle{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.detalle li{position:relative;padding-left:18px;font-size:.94rem;color:var(--gris);line-height:1.5}
.detalle li::before{content:"";position:absolute;left:0;top:.62em;width:7px;height:7px;border-radius:50%;background:var(--verde)}
.icono{
  display:inline-flex;align-items:center;justify-content:center;width:58px;height:58px;border-radius:17px;
  background:linear-gradient(145deg,rgba(20,184,166,.2),rgba(45,212,191,.07));color:var(--verde-oscuro);
  margin-bottom:18px;box-shadow:inset 0 0 0 1px rgba(20,184,166,.2);
}
.icono svg{width:28px;height:28px}

/* ---------- pasos (cómo empezamos) ---------- */
.pasos{list-style:none;padding:0;margin:32px 0 0;display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:22px}
.pasos>li{background:#fff;border:1px solid var(--linea);border-radius:var(--radio);padding:26px 24px;box-shadow:var(--sombra)}
.paso-num{display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:14px;background:var(--tinta);color:var(--verde-claro);font-family:var(--titulo);font-weight:700;font-size:1.4rem;margin-bottom:14px}
.pasos h3{font-family:var(--titulo);font-size:1.22rem;font-weight:600;margin-bottom:6px;letter-spacing:-.012em}
.pasos p{margin:0;color:var(--gris)}

/* ---------- planes (paquetes, sin importes) ---------- */
.rejilla-planes{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.plan-para{display:inline-block;font-size:.76rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--verde-oscuro);margin:0 0 10px}
.plan-extra{display:inline-block;margin:12px 0 0;padding:6px 12px;border-radius:12px;font-size:.83rem;font-weight:700;line-height:1.3;color:var(--verde-oscuro);background:rgba(20,184,166,.1);border:1px solid rgba(20,184,166,.3)}
.plan-extra-suave{color:var(--gris);background:rgba(100,116,139,.08);border-color:rgba(100,116,139,.24)}

/* ---------- nota al pie de una sección ---------- */
.nota{color:var(--gris);font-size:.95rem;margin-top:24px;max-width:780px}
.nota strong{color:var(--tinta)}
.sub-cabeza{margin:40px 0 0;font-size:1.15rem}

/* ---------- faq ---------- */
.faq{margin-top:28px;display:grid;gap:12px}
.faq details{background:#fff;border:1px solid var(--linea);border-radius:var(--radio);box-shadow:var(--sombra);overflow:hidden}
.faq summary{
  cursor:pointer;list-style:none;padding:20px 54px 20px 22px;font-weight:700;position:relative;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";position:absolute;right:24px;top:50%;width:10px;height:10px;
  border-right:2.5px solid var(--verde-oscuro);border-bottom:2.5px solid var(--verde-oscuro);
  transform:translateY(-70%) rotate(45deg);transition:transform .18s ease;
}
.faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.faq details[open] summary{border-bottom:1px solid var(--linea)}
.faq details p{padding:16px 22px 20px;margin:0;color:var(--gris)}

/* ---------- cierre y pie ---------- */
.cierre{background:var(--tinta);color:#fff;text-align:center}
.cierre h2{color:#fff;max-width:760px;margin-left:auto;margin-right:auto}
.cierre p{color:#cfe9e4;max-width:620px;margin-left:auto;margin-right:auto}
.cierre .acciones{margin-top:26px}

.pie{background:var(--papel);color:var(--gris);text-align:center;padding:52px clamp(18px,4vw,32px);border-top:1px solid var(--linea)}
.pie .logo{height:28px;width:auto;margin:0 auto 14px}
.pie p{margin-bottom:10px}
.pie a{color:var(--verde-oscuro);font-weight:600}

/* ---------- responsive ---------- */
@media (max-width:860px){
  .dos-col{grid-template-columns:1fr}
}
@media (max-width:760px){
  .cabecera{padding:10px 16px;gap:10px}
  .cabecera .marca{margin-right:auto}
  /* Marca y botón algo más pequeños para que la fila entera (marca + entrar +
     tres rayas) quepa de una vez y el botón del menú no caiga a otra línea. */
  .cabecera .logo{height:26px}
  /* El "Iniciar sesión" de la cabecera, más discreto en móvil. */
  .cabecera .boton-sm{order:2;padding:9px 14px;font-size:.85rem}
  /* Botón de tres rayas: abre y cierra el menú (la casilla la marca el navegador). */
  .menu-boton{
    display:inline-flex;flex-direction:column;justify-content:center;gap:5px;
    width:44px;height:44px;border-radius:12px;cursor:pointer;order:3;
    border:1px solid var(--linea);background:#fff;
  }
  .menu-boton span{display:block;width:20px;height:2px;border-radius:2px;background:var(--tinta);margin:0 auto}
  .menu-check:checked ~ .menu-boton span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .menu-check:checked ~ .menu-boton span:nth-child(2){opacity:0}
  .menu-check:checked ~ .menu-boton span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  .menu-check:focus-visible ~ .menu-boton{outline:3px solid var(--ambar);outline-offset:3px}
  /* Las secciones se despliegan colgando de la cabecera (no empujan la página). */
  .cabecera .nav{
    position:absolute;left:0;right:0;top:100%;
    flex-direction:column;align-items:stretch;gap:0;
    padding:0 16px;background:#fff;
    max-height:0;overflow:hidden;
  }
  .menu-check:checked ~ .nav{max-height:360px;box-shadow:0 16px 26px rgba(11,43,42,.12)}
  .cabecera .nav a{padding:14px 2px;font-size:1rem;border-top:1px solid var(--linea)}
  .cabecera .nav a:first-child{border-top:0}
  .boton{width:100%;max-width:340px}
  .acciones{flex-direction:column;align-items:center}
  .boton-sm{width:auto}
  /* En la portada, la CTA sí va a todo lo ancho, pero el "Iniciar sesión"
     secundario se queda a su tamaño natural: no debe competir con la CTA. */
  .hero .acciones .boton-borde{width:auto;padding:12px 22px}
  .tarjeta{padding:24px 20px}
}
@media (prefers-reduced-motion:reduce){
  *{scroll-behavior:auto!important;transition:none!important}
  .boton:hover,.tarjeta:hover{transform:none}
}
/* En pantalla táctil el «hover» se queda pegado tras el toque: se anula el
   desplazamiento para que no baile nada. */
@media (hover:none){
  .boton:hover{transform:none}
  .tarjeta:hover{transform:none;box-shadow:var(--sombra);border-color:var(--linea)}
}

/* ---------- banda de módulos ----------
   Una franja oscura con los módulos en grande: es el respiro visual entre las
   capturas y lo que viene después, y dice de un vistazo qué entra en el mismo
   sistema. Sin iconos ni adornos: la tipografía hace el trabajo. */
.banda{background:linear-gradient(155deg,var(--tinta) 0%,var(--tinta-2) 100%);color:#e9f8f5;padding:clamp(52px,7vw,88px) 24px}
.banda .texto{max-width:var(--max);margin:0 auto;text-align:center}
.banda-intro{color:var(--verde-claro);font-size:1.02rem;margin:0 0 26px}
.banda-modulos{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:12px 40px}
.banda-modulos li{font-family:var(--titulo);font-size:clamp(1.45rem,3.2vw,2.45rem);font-weight:600;letter-spacing:-.02em;line-height:1.1}

/* ---------- capturas de la aplicación ----------
   Son pantallas reales de la app, tomadas con datos de demostración. La barra de
   arriba va difuminada para no enseñar el usuario interno de la casa. */
.pantallas{display:grid;gap:26px;margin-top:32px}
.pantalla{margin:0}
.pantalla img{
  display:block;width:100%;height:auto;background:#fff;border-radius:14px;
  border:1px solid var(--linea);box-shadow:0 18px 40px rgba(11,43,42,.14);
}
.pantalla figcaption{margin-top:12px;font-size:.95rem;color:var(--gris)}
@media (min-width:900px){
  .pantallas{grid-template-columns:1fr 1fr;gap:30px}
  .pantalla:first-child{grid-column:1 / -1}
}

/* ---------- vídeo de presentación ----------
   Va alojado en el propio sitio (no es un iframe de Drive): se reproduce sin
   permisos de terceros ni reproductor ajeno. `preload="none"` deja el póster y
   no descarga los 36 MB hasta que alguien le da al play. */
.video-marco{margin:32px 0 0;max-width:calc(var(--max) - 40px)}
.video-marco video{
  display:block;width:100%;height:auto;aspect-ratio:16/9;background:#04201e;
  border-radius:14px;border:1px solid var(--linea);box-shadow:0 18px 40px rgba(11,43,42,.14);
}

/* ---------- animaciones (CSS nativo: 0 KB de JavaScript) ----------
   Todo va dentro de «prefers-reduced-motion: no-preference»: si el sistema pide
   reducir movimiento, no se aplica nada y la página se ve igual de completa.
   El revelado al hacer scroll usa «animation-timeline: view()» (Chrome/Edge y
   Safari actuales). Donde no exista, el @supports lo desactiva y todo el
   contenido queda visible desde el primer momento: es una mejora, nunca un
   requisito para poder leer la página. */
@media (prefers-reduced-motion:no-preference){

  /* El elemento sube y aparece. Se usa como estado final con «both», así que
     nunca deja contenido oculto si la animación no llega a correr. */
  @keyframes aparecer{
    from{opacity:0;transform:translateY(18px)}
    to{opacity:1;transform:none}
  }

  /* 1) Entrada del hero al abrir la página, en cascada corta. */
  .hero .lema{animation:aparecer .5s .05s both}
  .hero h1{animation:aparecer .6s .12s both}
  .hero .sub{animation:aparecer .6s .22s both}
  .hero .acciones{animation:aparecer .6s .32s both}
  .hero .chips{animation:aparecer .6s .42s both}

  /* 2) Lo demás aparece a medida que entra en pantalla, atado al scroll. */
  @supports (animation-timeline:view()){
    section.seccion h2,
    .tarjeta,
    .lista-problema li,
    .pasos > li,
    .chips li,
    .faq details{
      animation:aparecer linear both;
      animation-timeline:view();
      animation-range:entry 0% entry 55%;
    }
    /* El título de cada sección se adelanta un poco al resto del bloque. */
    section.seccion h2{animation-range:entry 0% entry 38%}
  }
}

/* ---------- página de tutoriales ----------
   Reutiliza la cabecera, las secciones y el marco de vídeo de la portada. Solo
   añade lo propio: la etiqueta del perfil, la ficha de datos y la lista de lo
   que se ve en cada recorrido. */
.seccion-compacta{padding-top:clamp(26px,3.5vw,40px);padding-bottom:clamp(26px,3.5vw,40px)}
.nota-arriba{margin-top:0;max-width:none}
.hero-tutoriales{padding-top:clamp(56px,7vw,92px);padding-bottom:clamp(52px,6vw,80px)}
.hero-tutoriales h1{font-size:clamp(2.3rem,5.4vw,3.7rem)}
.tutorial-cabeza{max-width:860px}
.tutorial-etiqueta{
  display:inline-block;font-size:.78rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.09em;color:var(--verde-oscuro);margin:0 0 12px;
}
.tutorial-datos{
  list-style:none;display:flex;flex-wrap:wrap;gap:10px;padding:0;margin:20px 0 0;
}
.tutorial-datos li{
  font-size:.84rem;font-weight:600;padding:7px 14px;border-radius:999px;
  background:rgba(20,184,166,.1);border:1px solid rgba(20,184,166,.28);color:var(--verde-oscuro);
}
/* Los tutoriales son 1600×1000: 16:10, no 16:9. Así no queda franja negra. */
.video-marco-10 video{aspect-ratio:16/10}
.tutorial-detalle{
  background:#fff;border:1px solid var(--linea);border-radius:var(--radio);
  padding:26px 28px;box-shadow:var(--sombra);margin-top:26px;
}
.tutorial-detalle h3{font-family:var(--titulo);font-size:1.2rem;font-weight:600;margin:0 0 16px;letter-spacing:-.012em}
@media (min-width:760px){
  .tutorial-detalle .detalle{grid-template-columns:1fr 1fr;gap:10px 28px}
}
@media (max-width:760px){
  .tutorial-detalle{padding:22px 20px}
  .tutorial-datos li{font-size:.8rem}
}