/* ============================================================
   Delego — estilos compartidos de las PÁGINAS INTERIORES
   Deriva del sistema visual de la landing (v11): paleta Océano,
   ámbar SOLO para acciones y señales, secciones cálidas #faf6ef.
   La landing conserva su CSS propio en línea; este archivo es
   solo para funcionalidades / migracion / seguridad-y-datos /
   nosotros / terminos / privacidad.
   ============================================================ */
:root{
  --tinta:#0b2334; --tinta-2:#11374f; --tinta-3:#175070;
  --acento:#1f7fa8; --acento-hover:#2795c4; --acento-claro:#e3f1f7;
  --claro:#7ec8e8; --claro-2:#cfe3ee; --claro-3:#bfe0ef; --claro-4:#8fb8cc;
  --claro-texto:#e4eff6;
  --oscuro:#081c29;
  --gris:#5a6a72;
  --fondo:#f6f9fb; --blanco:#ffffff; --borde:#dde5ea;
  --calido:#faf6ef; --calido-borde:#ece2d2;
  --contraste:#f0a92e; --contraste-hover:#f7b845; --contraste-oscuro:#8a5d10;
}
*{margin:0;padding:0;box-sizing:border-box}
h1,h2,h3{font-family:'Barlow Semi Condensed','Arial Narrow',Arial,sans-serif}
body{font-family:'Barlow','Segoe UI',system-ui,sans-serif,system-ui,-apple-system,sans-serif;color:var(--tinta);background:var(--fondo);line-height:1.6;font-size:17px}
.contenedor{max-width:1020px;margin:0 auto;padding:0 24px}
section{padding:64px 0;scroll-margin-top:82px}
.ico{width:28px;height:28px;stroke:var(--acento);stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round}

.borrador{background:#e7ebe9;color:#4b5f5a;text-align:center;font-weight:600;font-size:.8rem;padding:5px 12px;letter-spacing:.03em}

header{background:rgba(255,255,255,.97);border-bottom:1px solid var(--borde);position:sticky;top:0;z-index:50}
.nav{display:flex;align-items:center;justify-content:space-between;padding:13px 0;gap:16px}
.logo{font-size:1.35rem;font-weight:800;color:var(--tinta);text-decoration:none;letter-spacing:-.02em}
.logo .punto{color:var(--acento)}
.nav ul{display:flex;gap:8px;list-style:none;flex-wrap:wrap;align-items:center}
.nav a{color:var(--gris);text-decoration:none;font-size:.9rem;font-weight:600;padding:10px 8px;display:inline-block}
.nav a:hover{color:var(--acento)}
.nav a.activo{color:var(--tinta)}
.cta-mini{background:var(--acento);color:#fff !important;padding:9px 18px !important;border-radius:8px}

.btn{display:inline-block;padding:14px 30px;border-radius:10px;font-weight:700;text-decoration:none;font-size:1.02rem}
.btn-primario{background:var(--contraste);color:#26210f;box-shadow:0 6px 18px rgba(240,169,46,.25)}
.btn-primario:hover{background:var(--contraste-hover)}
.btn-secundario{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.45)}
.btn-secundario:hover{border-color:#fff;background:rgba(255,255,255,.06)}

/* Cabecera interior: compacta, mismo degradado + textura del hero de la landing */
.hero-interior{
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='420' height='420' viewBox='0 0 420 420'><g fill='none' stroke='%23ffffff' stroke-opacity='0.05' stroke-width='1.4'><path d='M0 60 Q105 10 210 60 T420 60'/><path d='M0 130 Q105 80 210 130 T420 130'/><path d='M0 200 Q105 150 210 200 T420 200'/><path d='M0 270 Q105 220 210 270 T420 270'/><path d='M0 340 Q105 290 210 340 T420 340'/><path d='M0 410 Q105 360 210 410 T420 410'/></g></svg>"),
    linear-gradient(165deg,var(--tinta) 0%,var(--tinta-2) 65%,var(--tinta-3) 100%);
  color:#fff;padding:56px 0}
.hero-interior .kicker{color:var(--claro);font-weight:800;text-transform:uppercase;font-size:.8rem;letter-spacing:.14em;display:block;margin-bottom:12px}
.hero-interior h1{font-size:2.5rem;line-height:1.15;letter-spacing:-.03em;max-width:20em}
.hero-interior h1 em{font-style:normal;color:var(--claro)}
.hero-interior p.sub{font-size:1.12rem;color:var(--claro-2);margin-top:14px;max-width:36em}

.titulo-seccion{font-size:1.7rem;letter-spacing:-.02em;margin-bottom:12px}
.sub-seccion{color:var(--gris);max-width:44em;margin:0 0 34px}
.seccion-blanca{background:var(--blanco)}
.seccion-calida{background:var(--calido);border-top:1px solid var(--calido-borde);border-bottom:1px solid var(--calido-borde)}

/* Bloques de área (funcionalidades): tarjeta con título, bajada y lista con ✓ */
.area{background:var(--blanco);border:1px solid var(--borde);border-radius:18px;padding:32px 34px;margin-bottom:22px}
.seccion-blanca .area{background:var(--fondo)}
.area .a-cabeza{display:flex;align-items:center;gap:13px;margin-bottom:6px}
.area .a-cabeza .ico{width:30px;height:30px;flex-shrink:0}
.area h2{font-size:1.35rem;letter-spacing:-.02em}
.area .a-bajada{color:var(--gris);font-size:.98rem;margin-bottom:18px;max-width:52em}
.area ul{list-style:none;display:grid;grid-template-columns:repeat(2,1fr);gap:6px 26px}
.area li{font-size:.92rem;color:var(--gris);padding:4px 0 4px 22px;position:relative;line-height:1.5}
.area li::before{content:"✓";position:absolute;left:0;color:var(--acento);font-weight:800}
.area li b{color:var(--tinta)}
/* Señal ámbar: SOLO para el diferenciador (misma regla que la landing) */
.area.destacada{border:1.5px solid var(--contraste);box-shadow:0 10px 26px rgba(240,169,46,.14)}
.sello-ambar{display:inline-block;background:var(--contraste);color:#26210f;font-size:.64rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em;border-radius:20px;padding:3px 10px;vertical-align:middle;margin-left:8px}

/* Muestra visual por área (funcionalidades): espacio reservado para la captura
   o el video REAL de la plataforma — jamás ilustración genérica. */
.a-media{margin-top:18px;border:1.5px dashed var(--borde);border-radius:12px;background:var(--fondo);min-height:150px;display:flex;align-items:center;justify-content:center;text-align:center;color:var(--gris);font-size:.85rem;padding:16px}
.a-media img,.a-media video{width:100%;height:auto;border-radius:10px;display:block}
/* Con imagen real dentro: hoja sobre fondo, sin borde punteado */
figure.a-media{border:1px solid var(--borde);background:var(--fondo);padding:22px;flex-direction:column;gap:0}
figure.a-media img{max-width:560px;margin:0 auto;box-shadow:0 14px 38px rgba(11,35,52,.16);border-radius:6px}
figure.a-media figcaption{margin-top:12px;font-size:.8rem;color:var(--gris)}

/* Carrusel de muestras: deslizar en el teléfono (scroll-snap), flechas y puntos
   en escritorio. Un documento por "slide". */
.carrusel{position:relative;margin-top:18px;border:1px solid var(--borde);border-radius:12px;background:var(--fondo);padding:22px 22px 16px}
.c-pista{display:flex;gap:22px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.c-pista::-webkit-scrollbar{display:none}
.c-pista figure{flex:0 0 100%;scroll-snap-align:center;margin:0;text-align:center}
.c-pista img{max-width:560px;width:100%;height:auto;margin:0 auto;box-shadow:0 14px 38px rgba(11,35,52,.16);border-radius:6px;display:block}
.c-pista figcaption{margin-top:12px;font-size:.8rem;color:var(--gris)}
.c-flecha{position:absolute;top:45%;transform:translateY(-50%);width:42px;height:42px;border-radius:50%;border:1px solid var(--borde);background:var(--blanco);color:var(--acento);font-size:1.6rem;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 14px rgba(11,35,52,.14);z-index:2}
.c-flecha:hover{color:var(--acento-hover);border-color:var(--acento)}
.c-prev{left:10px}
.c-next{right:10px}
.c-puntos{display:flex;gap:7px;justify-content:center;margin-top:14px}
.c-puntos button{width:9px;height:9px;border-radius:50%;border:0;background:var(--borde);cursor:pointer;padding:0}
.c-puntos button.on{background:var(--acento)}
@media (max-width:880px){
  .carrusel{padding:14px 14px 12px}
  .c-flecha{width:34px;height:34px;font-size:1.3rem}
}

/* Pasos numerados (migración) */
.pasos{display:grid;gap:16px;max-width:820px}
.paso{display:flex;gap:18px;background:var(--blanco);border:1px solid var(--borde);border-radius:16px;padding:26px 28px;align-items:flex-start}
.paso .n{background:var(--acento);color:#fff;min-width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:800;flex-shrink:0}
.paso h3{font-size:1.08rem;margin-bottom:4px}
.paso p{font-size:.94rem;color:var(--gris)}
.paso p b{color:var(--tinta)}

/* Dos columnas incluye / no incluye */
.dos-col{display:grid;grid-template-columns:1fr 1fr;gap:22px;align-items:start}
.caja{background:var(--blanco);border:1px solid var(--borde);border-radius:16px;padding:28px 30px}
.caja h3{font-size:1.05rem;margin-bottom:12px}
.caja ul{list-style:none}
.caja li{font-size:.92rem;color:var(--gris);padding:5px 0 5px 22px;position:relative;line-height:1.5}
.caja li::before{content:"✓";position:absolute;left:0;color:var(--acento);font-weight:800}
.caja.neutra li::before{content:"—";color:var(--gris);font-weight:700}
.caja p.nota{font-size:.85rem;color:var(--gris);margin-top:12px}

/* Ítems de seguridad (misma pieza de la landing) */
.lista-seguridad{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:16px}
.item-seg{display:flex;gap:13px;background:var(--blanco);border:1px solid var(--borde);border-radius:12px;padding:20px}
.seccion-blanca .item-seg{background:var(--fondo)}
.item-seg .ico{flex-shrink:0;width:24px;height:24px;margin-top:2px}
.item-seg h4{font-size:.98rem;margin-bottom:3px}
.item-seg p{font-size:.9rem;color:var(--gris)}

/* Prosa (nosotros, términos, privacidad) */
.prosa{max-width:760px}
.prosa h2{font-size:1.35rem;letter-spacing:-.02em;margin:34px 0 10px}
.prosa h2:first-child{margin-top:0}
.prosa p{color:var(--gris);margin-bottom:14px}
.prosa p b,.prosa li b{color:var(--tinta)}
.prosa ul,.prosa ol{margin:0 0 14px 22px;color:var(--gris)}
.prosa li{margin-bottom:6px}
.prosa .fecha{font-size:.85rem;color:var(--gris)}
.prosa .cita-grande{font-size:1.3rem;line-height:1.55;color:var(--tinta);font-weight:400;margin-bottom:18px}
.prosa .cita-grande b{color:var(--acento);font-weight:700}

/* Principios (nosotros): numerados, sobrios */
.principios{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:8px}
.principio{background:var(--blanco);border:1px solid var(--borde);border-radius:14px;padding:24px 26px}
.principio .num{color:var(--acento);font-weight:800;font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;display:block;margin-bottom:6px}
.principio h3{font-size:1.02rem;margin-bottom:6px;letter-spacing:-.01em}
.principio p{font-size:.9rem;color:var(--gris)}

/* CTA final (idéntico a la landing) */
.cta-final{background:linear-gradient(160deg,var(--tinta),var(--tinta-2));color:#fff;text-align:center}
.cta-final h2{font-size:1.8rem;margin-bottom:12px;letter-spacing:-.02em}
.cta-final p{color:var(--claro-2);margin-bottom:26px;max-width:34em;margin-left:auto;margin-right:auto}
.cta-final .botones{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.garantias-cta{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:26px}
.garantias-cta span{display:flex;align-items:center;gap:7px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.15);border-radius:99px;padding:7px 15px;font-size:.85rem;color:var(--claro-2)}
.garantias-cta span::before{content:"✓";color:var(--contraste);font-weight:800}

footer{background:var(--oscuro);color:var(--claro-4);padding:32px 0;font-size:.9rem}
footer .contenedor{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}
footer a{color:inherit}

.wsp-flotante{position:fixed;bottom:18px;left:18px;z-index:100;background:var(--acento);width:56px;height:56px;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 24px rgba(14,42,38,.35)}
.wsp-flotante svg{width:30px;height:30px;fill:#fff}
.wsp-flotante:hover{background:var(--acento-hover)}

@media (max-width:880px){
  .hero-interior h1{font-size:1.85rem}
  .area ul,.dos-col,.principios{grid-template-columns:1fr}
  .area{padding:26px 22px}
  .titulo-seccion{font-size:1.45rem}
  .nav ul li{display:none}
  .nav ul li:last-child{display:block}
}

/* Muestras reales en Funcionalidades (7-oct-2026) */
.a-media.a-fotos{padding:0;border-style:solid;background:#fff;overflow:hidden;min-height:0}
.a-media.a-fotos img{display:block;width:100%;height:auto;border-radius:10px}
.a-media.a-tel{display:flex;gap:18px;justify-content:center;align-items:flex-start;background:var(--fondo);padding:22px}
.a-media.a-angosta{background:var(--fondo);padding:22px}
.a-media.a-angosta img{max-width:420px;margin:0 auto;box-shadow:0 14px 38px rgba(11,35,52,.16)}
.a-media.a-tel img{width:min(240px,44%);border-radius:18px;box-shadow:0 16px 36px rgba(11,35,52,.18)}