/* Sitio Demos Tecnología SpA: estilos compartidos por todas las páginas */
:root {
  --marino: #1E3151;
  --marino-2: #2B4062;
  --marino-osc: #142339;
  --dorado: #E4B042;
  --dorado-hover: #D7A035;
  --dorado-texto: #8E6201;
  --sobre-dorado: #162641;
  --fondo: #F4F7FB;
  --superficie: #FCFDFF;
  --borde: #DAE0E9;
  --texto: #182232;
  --texto-2: #455063;
  --sobre-marino: #EEF2F9;
  --sobre-marino-2: #B3BFD2;
  --radio: 16px;
  --sombra: 0 1px 2px rgb(20 35 57 / .06), 0 8px 24px rgb(20 35 57 / .08);
}
* { box-sizing: border-box; margin: 0; }
html { scroll-behavior: smooth; }
body { font-family: "Plus Jakarta Sans", system-ui, sans-serif; background: var(--fondo); color: var(--texto); line-height: 1.6; -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
.contenedor { width: min(1140px, 100% - 32px); margin-inline: auto; }
:focus-visible { outline: 3px solid var(--dorado); outline-offset: 3px; border-radius: 6px; }

/* Botones */
.btn { display: inline-flex; align-items: center; gap: 8px; padding: 13px 22px; border-radius: 999px; font-weight: 700; font-size: .95rem; transition: background .2s, transform .2s, border-color .2s; }
.btn:hover { transform: translateY(-1px); }
.btn-dorado { background: var(--dorado); color: var(--sobre-dorado); }
.btn-dorado:hover { background: var(--dorado-hover); }
.btn-linea { border: 1.5px solid rgb(238 242 249 / .35); color: var(--sobre-marino); }
.btn-linea:hover { border-color: var(--dorado); }

/* Cabecera */
.cabecera { position: sticky; top: 0; z-index: 10; background: rgb(30 49 81 / .92); backdrop-filter: blur(10px); border-bottom: 1px solid rgb(255 255 255 / .08); }
.cabecera .contenedor { display: flex; align-items: center; justify-content: space-between; height: 72px; }
.cabecera img { height: 38px; width: auto; }
.menu { display: flex; align-items: center; gap: 28px; color: var(--sobre-marino-2); font-weight: 600; font-size: .93rem; }
.menu a:not(.btn):hover { color: var(--dorado); }
.menu .btn { padding: 10px 18px; }

/* Hero */
.hero { background: radial-gradient(1200px 500px at 85% -10%, #2E4A78 0%, transparent 60%), var(--marino); color: var(--sobre-marino); padding: 88px 0 110px; overflow: hidden; }
.hero .contenedor { display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center; }
.etiqueta { display: inline-flex; align-items: center; gap: 8px; font-size: .8rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--dorado); }
.etiqueta::before { content: ""; width: 22px; height: 2px; background: currentColor; }
.hero h1 { font-size: clamp(2.3rem, 4.6vw, 3.6rem); line-height: 1.08; font-weight: 800; letter-spacing: -.025em; margin: 18px 0 20px; color: #fff; }
.hero h1 em { font-style: normal; color: var(--dorado); }
.hero p.bajada { font-size: 1.12rem; color: var(--sobre-marino-2); max-width: 34em; }
.acciones { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.datos { display: flex; gap: 36px; margin-top: 44px; padding-top: 28px; border-top: 1px solid rgb(255 255 255 / .1); }
.datos strong { display: block; font-size: 1.5rem; color: #fff; }
.datos span { font-size: .85rem; color: var(--sobre-marino-2); }

/* Maqueta del panel en el hero */
.maqueta { position: relative; }
.ventana { background: var(--superficie); color: var(--texto); border-radius: 18px; box-shadow: 0 30px 80px rgb(0 0 0 / .35); overflow: hidden; transform: rotate(-1.5deg); }
.ventana-barra { display: flex; gap: 6px; padding: 12px 16px; background: var(--fondo); border-bottom: 1px solid var(--borde); }
.ventana-barra i { width: 10px; height: 10px; border-radius: 50%; background: var(--borde); }
.ventana-cuerpo { padding: 20px; display: grid; gap: 12px; }
.ventana-titulo { display: flex; justify-content: space-between; align-items: baseline; }
.ventana-titulo b { font-size: 1rem; }
.ventana-titulo small { color: var(--texto-2); font-size: .78rem; }
.kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.kpi { background: var(--fondo); border-radius: 12px; padding: 12px; }
.kpi small { display: block; color: var(--texto-2); font-size: .72rem; }
.kpi b { font-size: 1.25rem; }
.ruta { display: flex; align-items: center; gap: 12px; padding: 11px 12px; border: 1px solid var(--borde); border-radius: 12px; font-size: .85rem; }
.ruta .punto { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: #E3ECFA; flex: none; }
.ruta .punto svg { width: 18px; height: 18px; stroke: var(--marino); }
.ruta div { flex: 1; min-width: 0; }
.ruta div small { display: block; color: var(--texto-2); font-size: .75rem; }
.estado { font-size: .72rem; font-weight: 700; padding: 4px 10px; border-radius: 999px; white-space: nowrap; }
.estado.entregado { background: #D9F3DD; color: #206B38; }
.estado.enruta { background: #D9ECFF; color: #065DA0; }
.estado.llegando { background: #FFEAC8; color: #905100; }
.flotante { position: absolute; left: -28px; bottom: -30px; background: var(--dorado); color: var(--sobre-dorado); border-radius: 14px; padding: 14px 18px; box-shadow: 0 16px 40px rgb(0 0 0 / .3); font-size: .85rem; font-weight: 600; display: flex; align-items: center; gap: 10px; }
.flotante svg { width: 22px; height: 22px; stroke: var(--sobre-dorado); }

/* Secciones */
section { padding: 96px 0; }
.encabezado { max-width: 640px; margin-bottom: 48px; }
.encabezado .etiqueta { color: var(--dorado-texto); }
.encabezado h2 { font-size: clamp(1.8rem, 3.2vw, 2.5rem); line-height: 1.15; letter-spacing: -.02em; margin: 12px 0 14px; font-weight: 800; color: var(--marino); }
.encabezado p { color: var(--texto-2); font-size: 1.05rem; }

.grilla { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.tarjeta { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); padding: 28px 24px; transition: transform .25s, box-shadow .25s, border-color .25s; }
.tarjeta:hover { transform: translateY(-4px); box-shadow: var(--sombra); border-color: transparent; }
.icono { width: 48px; height: 48px; border-radius: 14px; background: var(--marino); display: grid; place-items: center; margin-bottom: 20px; }
.icono svg { width: 24px; height: 24px; stroke: var(--dorado); }
.tarjeta h3 { font-size: 1.1rem; color: var(--marino); margin-bottom: 8px; }
.tarjeta p { color: var(--texto-2); font-size: .94rem; }

/* Producto destacado */
.producto { background: var(--superficie); border-block: 1px solid var(--borde); }
.producto .contenedor { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.lista { list-style: none; padding: 0; display: grid; gap: 14px; margin: 28px 0 32px; }
.lista li { display: flex; gap: 12px; align-items: flex-start; color: var(--texto-2); }
.lista li svg { width: 22px; height: 22px; flex: none; stroke: var(--dorado-texto); margin-top: 2px; }
.lista b { color: var(--texto); }
.producto .btn-dorado { box-shadow: 0 8px 20px rgb(228 176 66 / .35); }
.panel-planes { background: var(--marino); color: var(--sobre-marino); border-radius: 22px; padding: 36px; position: relative; overflow: hidden; }
.panel-planes::after { content: ""; position: absolute; right: -60px; top: -60px; width: 220px; height: 220px; background: url(demos-escudo.svg) center / contain no-repeat; opacity: .08; filter: brightness(4); }
.panel-planes h3 { color: #fff; font-size: 1.3rem; margin-bottom: 6px; }
.panel-planes > p { color: var(--sobre-marino-2); font-size: .92rem; margin-bottom: 24px; }
.plan { display: flex; justify-content: space-between; align-items: center; padding: 14px 0; border-top: 1px solid rgb(255 255 255 / .1); }
.plan span { font-weight: 600; }
.plan small { display: block; color: var(--sobre-marino-2); font-size: .8rem; font-weight: 400; }
.plan b { color: var(--dorado); font-size: 1.1rem; white-space: nowrap; }
.panel-planes .nota { margin-top: 18px; font-size: .82rem; color: var(--sobre-marino-2); }

/* Proceso */
.pasos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; counter-reset: paso; }
.paso { position: relative; padding-top: 56px; }
.paso::before { counter-increment: paso; content: "0" counter(paso); position: absolute; top: 0; left: 0; font-size: 2.2rem; font-weight: 800; color: var(--dorado); line-height: 1; }
.paso::after { content: ""; position: absolute; top: 18px; left: 64px; right: 0; height: 1px; background: var(--borde); }
.paso:last-child::after { display: none; }
.paso h3 { color: var(--marino); font-size: 1.08rem; margin-bottom: 6px; }
.paso p { color: var(--texto-2); font-size: .93rem; }

/* Proyectos */
.proyectos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.proyecto { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); overflow: hidden; }
.proyecto .portada { height: 140px; display: grid; place-items: center; }
.proyecto .portada svg { width: 56px; height: 56px; stroke-width: 1.4; }
.proyecto .cuerpo { padding: 22px 24px 26px; }
.proyecto h3 { color: var(--marino); font-size: 1.08rem; margin-bottom: 6px; }
.proyecto p { color: var(--texto-2); font-size: .93rem; }
.chip { display: inline-block; margin-top: 14px; font-size: .75rem; font-weight: 700; color: var(--dorado-texto); background: #FBF3DD; padding: 4px 10px; border-radius: 999px; }

/* Contacto */
.contacto { padding: 0 0 96px; }
.cta { background: radial-gradient(700px 300px at 100% 0%, #2E4A78 0%, transparent 70%), var(--marino); border-radius: 28px; padding: 64px; color: var(--sobre-marino); display: grid; grid-template-columns: 1.3fr 1fr; gap: 40px; align-items: center; }
.cta h2 { color: #fff; font-size: clamp(1.7rem, 3vw, 2.4rem); line-height: 1.15; letter-spacing: -.02em; margin-bottom: 12px; }
.cta p { color: var(--sobre-marino-2); }
.cta .acciones { justify-content: flex-end; margin-top: 0; }

/* Pie */
footer { background: var(--marino-osc); color: var(--sobre-marino-2); padding: 48px 0 32px; font-size: .9rem; }
footer .fila { display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; padding-bottom: 28px; border-bottom: 1px solid rgb(255 255 255 / .08); }
footer img { height: 34px; width: auto; }
footer nav { display: flex; gap: 24px; flex-wrap: wrap; }
footer a:hover { color: var(--dorado); }
footer .legal { padding-top: 22px; font-size: .82rem; }

/* Aparición al hacer scroll */
.revelar { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.revelar.visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .revelar { opacity: 1; transform: none; transition: none; }
  .btn, .tarjeta { transition: none; }
}

/* Responsivo */
@media (max-width: 980px) {
  .hero .contenedor, .producto .contenedor, .cta { grid-template-columns: 1fr; }
  .grilla, .pasos { grid-template-columns: repeat(2, 1fr); }
  .proyectos { grid-template-columns: 1fr 1fr; }
  .paso::after { display: none; }
  .cta .acciones { justify-content: flex-start; }
  .maqueta { max-width: 520px; }
}
@media (max-width: 720px) {
  .menu a:not(.btn) { display: none; }
  .hero { padding: 56px 0 80px; }
  section { padding: 72px 0; }
  .grilla, .pasos, .proyectos { grid-template-columns: 1fr; }
  .datos { gap: 22px; flex-wrap: wrap; }
  .cta { padding: 40px 24px; border-radius: 22px; }
  .flotante { left: 8px; bottom: -24px; }
  .ventana { transform: none; }
  .panel-planes { padding: 28px 22px; }
}

/* Video */
.video { border-radius: 22px; overflow: hidden; box-shadow: 0 30px 70px rgb(20 35 57 / .25); background: #000; }
.video video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; }
.seccion-video { background: var(--marino); color: var(--sobre-marino); }
.seccion-video .encabezado h2 { color: #fff; }
.seccion-video .encabezado p { color: var(--sobre-marino-2); }
.seccion-video .encabezado .etiqueta { color: var(--dorado); }

/* Menú: página activa */
.menu a[aria-current="page"] { color: var(--dorado); }

/* Enlaces de tarjetas de proyecto */
a.proyecto { display: block; transition: transform .25s, box-shadow .25s; }
a.proyecto:hover { transform: translateY(-4px); box-shadow: var(--sombra); }
.ver-mas { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; margin-left: 8px; font-weight: 700; font-size: .85rem; color: var(--marino); }

/* Páginas de proyecto */
.hero-proyecto { padding: 72px 0 80px; }
.hero-proyecto .contenedor { grid-template-columns: 1fr 1fr; }
.hero-proyecto img.destacado { border-radius: 20px; box-shadow: 0 30px 80px rgb(0 0 0 / .35); }
.miga { font-size: .85rem; color: var(--sobre-marino-2); margin-bottom: 8px; }
.miga a:hover { color: var(--dorado); }
.galeria { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.galeria figure { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); overflow: hidden; }
.galeria img, .galeria video { width: 100%; height: auto; display: block; }
.galeria figcaption { padding: 16px 20px 18px; color: var(--texto-2); font-size: .93rem; }
.galeria figcaption b { display: block; color: var(--marino); font-size: 1rem; margin-bottom: 2px; }
.perfiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.perfiles .tarjeta ul { padding-left: 18px; color: var(--texto-2); font-size: .93rem; display: grid; gap: 6px; margin-top: 10px; }

/* Tema Tu Club de Lectura (verde y rosado de su marca) */
.tema-club .hero { background: radial-gradient(1000px 500px at 85% -10%, #2C7A5C 0%, transparent 60%), #1F5C45; }
.tema-club .hero h1 em { color: #FF8DBE; }
.tema-club .hero .etiqueta { color: #F8BC31; }
.tema-club .icono { background: #1F5C45; }
.tema-club .icono svg { stroke: #F8BC31; }

@media (max-width: 980px) {
  .hero-proyecto .contenedor, .perfiles { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .galeria { grid-template-columns: 1fr; }
}