/* Sitio CodeLAB: inicio y páginas de cada solución (estanque de hormigón, prefabricados, fosas y drenes).
   Estética de plano técnico en claro: fondo blanco con cuadrícula suave, líneas finas, cotas, rótulos en
   tipografía monoespaciada y azul técnico. Las apps (estanques.html y fosas-drenes/) tienen su propio estilo. */
:root {
    --fondo: #ffffff;
    --fondo-2: #f6f9fc;
    --panel: #ffffff;
    --panel-borde: #dde5ee;
    --linea: rgba(0, 102, 204, 0.05);
    --linea-fuerte: rgba(0, 102, 204, 0.10);
    --cian: #0a74da;          /* acento (dibujos, rótulos, cifras) */
    --azul: #0a74da;
    --azul-osc: #0b4f9c;
    --texto: #0f1d2b;
    --texto-2: #4a5a6b;
    --texto-3: #8796a5;
    --sombra: 0 1px 2px rgba(15, 29, 43, 0.04), 0 8px 24px rgba(15, 29, 43, 0.06);
    --mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Consolas, monospace;
    --sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --titulo: 'Archivo', 'Inter', system-ui, sans-serif;   /* ancha, como la letra del logo */
    --marino: #0c1733;                                      /* colores del logo */
    --marca-1: #0a6dff;
    --marca-2: #06d3ff;
    --radio: 14px;
    --ancho: 1540px;          /* ancho del contenido (con el texto base de 20 px se ve como un zoom del 130 %) */
    --barra: 80px;            /* alto del encabezado */
}

* { box-sizing: border-box; margin: 0; padding: 0; }
/* Tamaño base: 20 px en pantallas grandes, baja en notebooks y celulares (todo lo que usa rem crece con él) */
html { scroll-behavior: smooth; font-size: 125%; }
@media (max-width: 1440px) { html { font-size: 112.5%; } }
@media (max-width: 1100px) { html { font-size: 100%; } }
body {
    font-family: var(--sans);
    color: var(--texto);
    background-color: var(--fondo);
    /* Cuadrícula de plano: líneas menores cada 24 px y mayores cada 120 px */
    background-image:
        radial-gradient(1200px 600px at 75% -10%, rgba(10, 116, 218, 0.07), transparent 60%),
        linear-gradient(var(--linea-fuerte) 1px, transparent 1px),
        linear-gradient(90deg, var(--linea-fuerte) 1px, transparent 1px),
        linear-gradient(var(--linea) 1px, transparent 1px),
        linear-gradient(90deg, var(--linea) 1px, transparent 1px);
    background-size: auto, 120px 120px, 120px 120px, 24px 24px, 24px 24px;
    background-attachment: fixed;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
.contenedor { width: min(var(--ancho), 100% - 32px); margin-inline: auto; }

/* ── Encabezado ── */
.barra {
    position: sticky; top: 0; z-index: 50;
    background: rgba(255, 255, 255, 0.86); backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--panel-borde);
}
.barra .contenedor { display: flex; align-items: center; gap: 1.5rem; height: var(--barra); }
.marca { display: flex; align-items: center; gap: 0.6rem; font-weight: 800; letter-spacing: 0.02em; font-size: 1.15rem; }
.marca img { height: 1.6rem; width: auto; }
.marca b { color: var(--azul); }
.marca-sello {
    font-family: var(--mono); font-size: 0.68rem; font-weight: 500; color: var(--texto-3);
    border-left: 1px solid var(--panel-borde); padding-left: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase;
}
.nav { margin-left: auto; display: flex; gap: 0.3rem; flex-wrap: wrap; }
.nav a {
    font-size: 0.86rem; color: var(--texto-2); padding: 0.45rem 0.8rem; border-radius: 8px;
    transition: color 0.15s, background 0.15s;
}
.nav a:hover, .nav a[aria-current="page"] { color: var(--texto); background: rgba(10, 116, 218, 0.07); }
.nav a[aria-current="page"] { color: var(--cian); }

/* Cuenta (sitio.js): «Registrarse» o el nombre con «Salir» */
.cuenta { margin-left: auto; display: flex; align-items: center; gap: 0.6rem; font-size: 0.86rem; }
.cuenta-ingresar {
    font-weight: 650; color: #fff; padding: 0.5rem 1rem; border-radius: 8px;
    background: linear-gradient(135deg, var(--azul), var(--azul-osc));
}
.cuenta-panel { white-space: nowrap; font-weight: 650; color: #fff; padding: 0.45rem 0.9rem; border-radius: 8px; background: linear-gradient(135deg, var(--azul), var(--azul-osc)); }
.cuenta-premium {
    white-space: nowrap; font-weight: 700; letter-spacing: 0.02em; color: #3a2600; padding: 0.45rem 0.9rem; border-radius: 8px;
    background: linear-gradient(135deg, #f7d774, #d4a017 55%, #b8860b); box-shadow: 0 2px 10px rgba(184, 134, 11, 0.35);
}
.cuenta-premium:hover { filter: brightness(1.06); }
.cuenta-panel[aria-current="page"] { background: rgba(10, 116, 218, 0.1); color: var(--cian); }
.cuenta-nombre { color: var(--texto); font-weight: 600; max-width: 14ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cuenta-salir { background: none; border: 1px solid var(--panel-borde); border-radius: 8px; padding: 0.4rem 0.8rem; font: inherit; color: var(--texto-2); cursor: pointer; }
.cuenta-salir:hover { border-color: var(--azul); color: var(--cian); }

/* ── Páginas legales (/privacidad/, /condiciones/) ── */
.legal { padding: 4rem 0 3rem; }
.legal-contenedor { max-width: 860px; }
.legal h1 { margin: 1rem 0 0.4rem; }
.legal-fecha { font-family: var(--mono); font-size: 0.75rem; color: var(--texto-3); margin-bottom: 1.2rem; }
.legal section { margin-top: 2.2rem; }
.legal h2 { font-size: 1.3rem; margin-bottom: 0.7rem; }
.legal p, .legal li { color: var(--texto-2); line-height: 1.7; }
.legal p + p, .legal p + ul, .legal ul + p { margin-top: 0.7rem; }
.legal ul { padding-left: 1.3rem; display: grid; gap: 0.35rem; }
.legal a { color: var(--cian); text-decoration: underline; text-underline-offset: 2px; }
.legal code { font-family: var(--mono); font-size: 0.85em; background: var(--fondo-2); padding: 0.1rem 0.35rem; border-radius: 4px; }
.legal-otros { margin-top: 3rem; padding-top: 1.2rem; border-top: 1px solid var(--panel-borde); font-size: 0.9rem; }

/* ── Página de ingreso (/ingresar/) ── */
.acceso { padding: 5rem 0 6rem; }
.acceso [hidden] { display: none !important; }
.acceso-contenedor { display: grid; grid-template-columns: 1.1fr 1fr; gap: 4rem; align-items: center; }
.acceso-texto h1 { margin: 1rem 0 1.2rem; }
.acceso-panel { background: var(--panel); border: 1px solid var(--panel-borde); border-radius: var(--radio); box-shadow: var(--sombra); padding: 2rem; }
.acceso-pestanas { display: flex; gap: 0.3rem; margin-bottom: 1.5rem; border-bottom: 1px solid var(--panel-borde); }
.acceso-pestana {
    background: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; padding: 0.6rem 1rem;
    font: 600 0.95rem var(--sans); color: var(--texto-2); cursor: pointer;
}
.acceso-pestana.activa { color: var(--cian); border-bottom-color: var(--azul); }
.acceso-google {
    display: flex; align-items: center; justify-content: center; gap: 0.7rem; padding: 0.8rem 1rem; border-radius: 10px;
    border: 1px solid var(--panel-borde); background: #fff; color: var(--texto); font-weight: 650; font-size: 0.95rem;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.acceso-google:hover { border-color: var(--azul); box-shadow: 0 4px 14px rgba(10, 116, 218, 0.12); }
.acceso-google svg { width: 20px; height: 20px; }
.acceso-separador { display: flex; align-items: center; gap: 0.8rem; margin: 1.2rem 0; color: var(--texto-3); font-size: 0.8rem; }
.acceso-separador::before, .acceso-separador::after { content: ''; flex: 1; height: 1px; background: var(--panel-borde); }
.acceso-error-google:not(:empty) { margin-bottom: 1rem; }
.acceso-form { display: grid; gap: 1rem; }
.acceso-form label { display: grid; gap: 0.35rem; font-size: 0.85rem; font-weight: 600; color: var(--texto-2); }
.acceso-form label small { font-weight: 400; color: var(--texto-3); }
.acceso-form input {
    font: 1rem var(--sans); padding: 0.75rem 0.9rem; border: 1px solid var(--panel-borde); border-radius: 10px; color: var(--texto);
}
.acceso-form input:focus { outline: none; border-color: var(--azul); box-shadow: 0 0 0 3px rgba(10, 116, 218, 0.12); }
.acceso-form .boton { justify-content: center; }
.acceso-form .boton:disabled { opacity: 0.6; cursor: wait; }
.acceso-error { color: #b42318; font-size: 0.85rem; min-height: 1.2em; }
.acceso-error:empty { min-height: 0; }
.acceso-legal { margin-top: 1.2rem; font-size: 0.78rem; color: var(--texto-3); text-align: center; }
.acceso-legal a { color: var(--cian); text-decoration: underline; }

/* ── Tipografía ── */
.rotulo {
    font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--azul);
    display: inline-flex; align-items: center; gap: 0.6rem;
}
.rotulo::before { content: ''; width: 22px; height: 1px; background: var(--azul); }
h1, h2 { font-family: var(--titulo); font-stretch: 118%; color: var(--marino); }
h1 { font-size: clamp(2.1rem, 4.6vw, 3.6rem); line-height: 1.06; letter-spacing: -0.02em; font-weight: 800; }
h2 { font-size: clamp(1.5rem, 2.8vw, 2.2rem); line-height: 1.15; letter-spacing: -0.015em; font-weight: 750; }
h3 { font-size: 1.12rem; font-weight: 700; letter-spacing: -0.01em; }
.acento { background: linear-gradient(90deg, var(--marca-1), var(--marca-2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lead { font-size: 1.12rem; color: var(--texto-2); max-width: 640px; }

/* ── Botones ── */
.botones { display: flex; gap: 0.8rem; flex-wrap: wrap; }
.boton {
    display: inline-flex; align-items: center; gap: 0.55rem; font-weight: 650; font-size: 0.95rem;
    padding: 0.8rem 1.3rem; border-radius: 10px; border: 1px solid transparent; cursor: pointer;
    transition: transform 0.15s, box-shadow 0.15s, background 0.15s, border-color 0.15s;
}
.boton-principal { background: linear-gradient(135deg, var(--azul), var(--azul-osc)); color: #fff; box-shadow: 0 8px 22px rgba(10, 116, 218, 0.25); }
.boton-principal:hover { transform: translateY(-1px); box-shadow: 0 12px 30px rgba(10, 116, 218, 0.32); }
.boton-linea { border-color: var(--panel-borde); color: var(--texto); background: var(--panel); }
.boton-linea:hover { border-color: var(--azul); color: var(--cian); }
.boton svg { width: 18px; height: 18px; }

/* ── Portada (hero) ── */
.portada { padding: 5.5rem 0 4rem; }
.portada .contenedor { display: grid; grid-template-columns: 1.05fr 1fr; gap: 3rem; align-items: center; }
.portada-texto { display: flex; flex-direction: column; gap: 1.3rem; }
.normas { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.4rem; }
.norma {
    font-family: var(--mono); font-size: 0.72rem; color: var(--texto-2); letter-spacing: 0.04em;
    border: 1px solid var(--panel-borde); background: var(--panel); padding: 0.3rem 0.65rem; border-radius: 999px;
}
.norma b { color: var(--cian); font-weight: 600; }

/* Lámina técnica: marco con esquinas y cajetín, donde va el dibujo de cada solución */
.lamina {
    position: relative; border: 1px solid var(--linea-fuerte); border-radius: 6px; padding: 1.4rem;
    background: var(--panel);
    box-shadow: 0 24px 60px rgba(15, 29, 43, 0.10), inset 0 0 0 6px rgba(10, 116, 218, 0.03);
}
.lamina::before, .lamina::after {
    content: ''; position: absolute; width: 18px; height: 18px; border: 2px solid var(--azul);
}
.lamina::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
.lamina::after { bottom: -1px; right: -1px; border-left: 0; border-top: 0; }
.lamina svg { width: 100%; height: auto; color: var(--cian); }
.cajetin {
    display: grid; grid-template-columns: 1fr auto auto; margin-top: 1rem; border: 1px solid var(--panel-borde);
    font-family: var(--mono); font-size: 0.68rem; color: var(--texto-3); letter-spacing: 0.06em; text-transform: uppercase;
}
.cajetin span { padding: 0.45rem 0.7rem; border-left: 1px solid var(--panel-borde); }
.cajetin span:first-child { border-left: 0; color: var(--texto-2); }
.cajetin b { color: var(--cian); font-weight: 500; }

/* Dibujos: animación de trazado */
.trazo { stroke-dasharray: 1400; stroke-dashoffset: 1400; animation: trazar 2.6s ease forwards; }
.trazo-2 { animation-delay: 0.5s; }
.trazo-3 { animation-delay: 1s; }
.aparece { opacity: 0; animation: aparecer 0.8s ease forwards 1.6s; }
@keyframes trazar { to { stroke-dashoffset: 0; } }
@keyframes aparecer { to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .trazo, .aparece { animation: none; stroke-dashoffset: 0; opacity: 1; } }

/* ── Secciones ── */
.seccion { padding: 4.5rem 0; border-top: 1px solid var(--panel-borde); }
.seccion-cabeza { display: flex; flex-direction: column; gap: 0.8rem; margin-bottom: 2.4rem; max-width: 720px; }
.seccion-cabeza p { color: var(--texto-2); }

/* Tarjetas de soluciones (inicio) */
.soluciones { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }
.solucion {
    position: relative; display: flex; flex-direction: column; gap: 1rem; padding: 1.6rem;
    background: var(--panel); box-shadow: var(--sombra);
    border: 1px solid var(--panel-borde); border-radius: var(--radio); overflow: hidden;
    transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
}
.solucion:hover { transform: translateY(-4px); border-color: rgba(10, 116, 218, 0.5); box-shadow: 0 22px 50px rgba(10, 116, 218, 0.14); }
.solucion-num { font-family: var(--mono); font-size: 0.72rem; color: var(--texto-3); letter-spacing: 0.12em; }
.solucion-dibujo {
    height: 150px; display: grid; place-items: center; color: var(--cian);
    border: 1px dashed rgba(10, 116, 218, 0.22); border-radius: 8px; background: var(--fondo-2);
}
.solucion-dibujo svg { width: 84%; height: 128px; }
.solucion p { color: var(--texto-2); font-size: 0.93rem; flex: 1; }
.solucion-pie { display: flex; align-items: center; justify-content: space-between; font-weight: 650; color: var(--cian); font-size: 0.92rem; }
.solucion-pie .norma { color: var(--texto-3); }

/* Cifras / ventajas */
/* Planes (index.html #planes) */
.planes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }
.plan { display: flex; flex-direction: column; gap: 0.6rem; padding: 1.8rem; background: var(--panel); border: 1px solid var(--panel-borde); border-radius: var(--radio); box-shadow: var(--sombra); }
.plan h3 { display: flex; align-items: center; gap: 0.6rem; margin: 0; font-size: 1.6rem; color: var(--marino); }
.plan-lema { margin: 0; color: var(--texto-2); }
.plan-precio { display: flex; align-items: center; gap: 0.6rem; margin: 0.6rem 0; min-height: 3rem; }
.plan-precio strong { font-family: var(--titulo); font-stretch: 118%; font-size: 2.2rem; color: var(--marino); line-height: 1; }
.plan-precio span { font-size: 0.78rem; color: var(--texto-3); line-height: 1.3; }
.plan .boton { justify-content: center; }
.plan-premium { border-color: #d4a017; box-shadow: 0 8px 28px rgba(184, 134, 11, 0.18); }
.plan-boton-premium { color: #3a2600; font-weight: 700; background: linear-gradient(135deg, #f7d774, #d4a017 55%, #b8860b); box-shadow: 0 8px 22px rgba(184, 134, 11, 0.3); }
.plan-boton-premium:hover { transform: translateY(-1px); filter: brightness(1.06); }
.plan-boton-premium.cargando { opacity: 0.6; cursor: wait; }
.plan-lista { list-style: none; margin: 1rem 0 0; padding: 1rem 0 0; border-top: 1px solid var(--panel-borde); display: grid; gap: 0.55rem; font-size: 0.93rem; color: var(--texto-2); }
.plan-lista li { position: relative; padding-left: 1.5rem; }
.plan-lista li::before { content: '✓'; position: absolute; left: 0; color: var(--azul); font-weight: 700; }
.plan-lista li.plan-no { color: var(--texto-3); }
.plan-lista li.plan-no::before { content: '—'; color: var(--texto-3); }
.plan-lista li.plan-titulo { padding-left: 0; font-weight: 650; color: var(--texto); }
.plan-lista li.plan-titulo::before { content: none; }
.plan-nota { margin: 0; font-size: 0.82rem; line-height: 1.4; color: var(--texto-3); }
/* Pase Entrega: una franja a lo ancho bajo los planes, con el nombre, el precio y lo que incluye lado a lado */
.plan-pase { grid-column: 1 / -1; display: grid; grid-template-columns: 1.2fr auto 1fr; align-items: center; gap: 2.2rem; }
.plan-pase-texto, .plan-pase-precio { display: flex; flex-direction: column; gap: 0.6rem; }
.plan-pase .plan-lista { margin: 0; padding: 0; border-top: 0; }
@media (max-width: 900px) { .planes { grid-template-columns: 1fr; } .plan-pase { grid-template-columns: 1fr; gap: 1rem; } }

.cifras { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--panel-borde); border: 1px solid var(--panel-borde); border-radius: var(--radio); overflow: hidden; }
.cifra { background: var(--panel); padding: 1.5rem; }
.cifra strong { display: block; font-family: var(--mono); font-size: 1.5rem; color: var(--cian); font-weight: 600; }
.cifra span { color: var(--texto-2); font-size: 0.88rem; }

/* Funciones (páginas) */
.funciones { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.funcion { padding: 1.4rem; border: 1px solid var(--panel-borde); border-radius: var(--radio); background: var(--panel); box-shadow: var(--sombra); }
.funcion-num { font-family: var(--mono); font-size: 0.72rem; color: var(--azul); letter-spacing: 0.1em; }
.funcion h3 { margin: 0.5rem 0 0.4rem; }
.funcion p { color: var(--texto-2); font-size: 0.92rem; }

/* Entregables */
.entregables { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 1rem; }
.entregable {
    display: flex; gap: 0.9rem; align-items: flex-start; padding: 1.1rem 1.2rem;
    border: 1px solid var(--panel-borde); border-radius: 12px; background: var(--panel); box-shadow: var(--sombra);
}
.entregable svg { width: 34px; height: 34px; flex: none; color: var(--cian); }
.entregable strong { display: block; font-size: 0.95rem; }
.entregable span { color: var(--texto-2); font-size: 0.84rem; }

/* Cómo comenzar: pasos con su video */
.pasos { display: flex; flex-direction: column; gap: 1.4rem; counter-reset: paso; }
.paso {
    display: grid; grid-template-columns: 1fr 1.25fr; gap: 2rem; align-items: center; padding: 1.6rem;
    border: 1px solid var(--panel-borde); border-radius: var(--radio); background: var(--panel); box-shadow: var(--sombra);
}
.paso:nth-child(even) .paso-texto { order: 2; }
.paso-texto { display: flex; flex-direction: column; gap: 0.6rem; }
.paso-num { font-family: var(--mono); font-size: 0.75rem; color: var(--azul); letter-spacing: 0.14em; }
.paso-texto p { color: var(--texto-2); font-size: 0.95rem; }
.paso-texto ul { list-style: none; color: var(--texto-2); font-size: 0.9rem; display: flex; flex-direction: column; gap: 0.3rem; }
.paso-texto li::before { content: '›'; color: var(--cian); margin-right: 0.5rem; }
.video {
    position: relative; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden;
    border: 1px solid var(--panel-borde); background: var(--fondo-2);
}
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-vacio {
    position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 0.7rem;
    background:
        linear-gradient(var(--linea) 1px, transparent 1px) 0 0 / 20px 20px,
        linear-gradient(90deg, var(--linea) 1px, transparent 1px) 0 0 / 20px 20px;
    color: var(--texto-3); font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase;
}
.video-vacio i {
    width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; background: var(--panel);
    border: 1px solid rgba(10, 116, 218, 0.3); color: var(--cian); font-style: normal; font-size: 1.1rem;
}

/* Llamado final */
.llamado {
    display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap;
    padding: 2rem 2.2rem; border-radius: var(--radio); border: 1px solid rgba(10, 116, 218, 0.28);
    background: linear-gradient(120deg, rgba(10, 116, 218, 0.08), rgba(10, 116, 218, 0.02));
}
.llamado p { color: var(--texto-2); }

/* Migas */
.migas { font-family: var(--mono); font-size: 0.74rem; color: var(--texto-3); letter-spacing: 0.08em; text-transform: uppercase; }
.migas a:hover { color: var(--cian); }

/* ── Pie: cajetín de plano ── */
.pie { border-top: 1px solid var(--panel-borde); padding: 2.5rem 0 3rem; margin-top: 2rem; }
.pie-cajetin {
    display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; border: 1px solid var(--panel-borde); border-radius: 8px; overflow: hidden;
    font-size: 0.84rem;
}
.pie-cajetin div { padding: 0.9rem 1rem; border-left: 1px solid var(--panel-borde); background: var(--panel); }
.pie-cajetin div:first-child { border-left: 0; }
.pie-cajetin small { display: block; font-family: var(--mono); font-size: 0.66rem; color: var(--texto-3); letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 0.2rem; }
.pie-cajetin a:hover { color: var(--cian); }

/* ── Inicio: escena con el corte del terreno ── */
.escena { padding: 3.5rem 0 2.5rem; }
.escena-texto { display: flex; flex-direction: column; gap: 1.1rem; max-width: 860px; margin-bottom: 2.2rem; }
.titular { font-size: clamp(2.2rem, 5.2vw, 4.2rem); }
.escena-texto .lead { max-width: 760px; }
/* Portada: título a la izquierda, video del software a la derecha */
.escena-portada { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.5fr); gap: 2.5rem; align-items: center; margin-bottom: 2.2rem; }
.escena-portada .escena-texto { margin-bottom: 0; }
.escena-portada .titular { font-size: clamp(2rem, 3.8vw, 3.6rem); }   /* un poco más chico: el video ocupa más */
.portada-video { display: block; width: 100%; height: auto; background: #000; border: 1px solid var(--panel-borde); border-radius: var(--radio); box-shadow: var(--sombra); }
.escena-texto .lead strong { color: var(--marino); font-weight: 650; }
.corte {
    position: relative; border: 1px solid var(--panel-borde); border-radius: 18px; padding: 1rem 1rem 0.9rem;
    background: var(--panel); box-shadow: 0 30px 80px rgba(12, 23, 51, 0.10);
}
.corte::before, .corte::after { content: ''; position: absolute; width: 22px; height: 22px; border: 2px solid var(--marca-1); }
.corte::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; border-top-left-radius: 18px; }
.corte::after { bottom: -1px; right: -1px; border-left: 0; border-top: 0; border-bottom-right-radius: 18px; }
.corte svg { width: 100%; height: auto; cursor: crosshair; }
.corte .cajetin { margin-top: 0.6rem; }
#coordenadas { display: inline-block; min-width: 14ch; }

/* Agua por las tuberías: trazos que avanzan en el sentido del flujo */
.flujo { stroke-dasharray: 8 14; animation: fluir 1.4s linear infinite; }
.flujo-servidas { stroke-dasharray: 5 13; animation-duration: 2.2s; opacity: 0.85; }
.flujo-3d { stroke-dasharray: 18 26; animation: fluir-3d 1.3s linear infinite; filter: drop-shadow(0 0 6px rgba(6, 211, 255, 0.9)); }
@keyframes fluir-3d { to { stroke-dashoffset: -88; } }
.corte-3d svg { cursor: default; border-radius: 10px; }
@keyframes fluir { to { stroke-dashoffset: -44; } }

/* Zonas (cada solución): al pasar el mouse se destaca y las demás se atenúan */
.zona { cursor: pointer; transition: opacity 0.25s; }
.zona-fondo { fill: rgba(10, 109, 255, 0); stroke: rgba(10, 109, 255, 0); stroke-width: 1.5; stroke-dasharray: 6 5; transition: fill 0.25s, stroke 0.25s; }
.zona:hover .zona-fondo, .zona:focus-visible .zona-fondo { fill: rgba(10, 109, 255, 0.05); stroke: rgba(10, 109, 255, 0.55); }
.corte svg:has(.zona:hover) .zona:not(:hover) { opacity: 0.35; }
.zona:focus { outline: none; }
.hito-punto { fill: url(#marca); stroke: #fff; stroke-width: 2; }
.hito-pulso { fill: rgba(10, 109, 255, 0.25); transform-box: fill-box; transform-origin: center; animation: latir 2.2s ease-out infinite; }
.hito-num { font-family: var(--mono); font-size: 8px; font-weight: 600; fill: #fff; text-anchor: middle; }
@keyframes latir { from { transform: scale(0.6); opacity: 0.9; } to { transform: scale(2.4); opacity: 0; } }
.etiqueta rect { fill: var(--marino); transition: fill 0.25s; }
.etiqueta text { font-family: var(--sans); font-size: 12.5px; font-weight: 600; fill: #fff; text-anchor: middle; }
.zona:hover .etiqueta rect { fill: var(--marca-1); }

/* Vitrina: láminas reales del software */
.vitrina { display: grid; grid-template-columns: 1.25fr 1fr; gap: 3rem; align-items: center; margin-bottom: 4.5rem; }
.vitrina:last-child { margin-bottom: 0; }
.vitrina-inversa .vitrina-imagen { order: 2; }
.vitrina-imagen { display: block; perspective: 1400px; }
.vitrina-imagen img {
    width: 100%; height: auto; border-radius: 6px; border: 1px solid var(--panel-borde); background: #fff;
    box-shadow: 0 2px 0 rgba(12, 23, 51, 0.04), 0 28px 60px rgba(12, 23, 51, 0.16);
    transform: rotateY(9deg) rotateX(3deg); transition: transform 0.45s ease, box-shadow 0.45s ease;
}
.vitrina-inversa .vitrina-imagen img { transform: rotateY(-9deg) rotateX(3deg); }
.vitrina-imagen:hover img { transform: none; box-shadow: 0 34px 80px rgba(10, 109, 255, 0.20); }
.vitrina-texto { display: flex; flex-direction: column; align-items: flex-start; gap: 0.9rem; }
.vitrina-texto h3 { font-family: var(--titulo); font-stretch: 118%; font-size: 1.7rem; color: var(--marino); }
.vitrina-texto p { color: var(--texto-2); }

/* Premium: alcantarillado de edificios (sección oscura del inicio, sello y tarjeta del panel) */
.sello-premium {
    display: inline-flex; align-items: center; gap: 0.35rem; font-family: var(--mono); font-size: 0.68rem; font-weight: 600;
    letter-spacing: 0.12em; text-transform: uppercase; color: #3a2a00; padding: 0.28rem 0.6rem; border-radius: 999px;
    background: linear-gradient(135deg, #ffe08a, #f2b630);
}
.sello-premium::before { content: '★'; font-size: 0.8em; }
.premium { background: radial-gradient(120% 90% at 85% 0%, #14306b 0%, var(--marino) 60%); color: #dbe6f5; border-top: 0; }
.premium h2, .premium .vitrina-texto h3 { color: #fff; }
.premium .rotulo { color: var(--marca-2); }
.premium .rotulo::before { background: var(--marca-2); }
.premium .seccion-cabeza p, .premium .vitrina-texto p, .premium .solucion-num { color: #b7c6dc; }
.premium .vitrina-imagen img { border-color: rgba(255, 255, 255, 0.12); background: #0f1f45; }
.premium-lista { display: grid; gap: 0.45rem; padding: 0; margin: 0; list-style: none; font-size: 0.93rem; }
.premium-lista li::before { content: '▸ '; color: var(--marca-2); }
.premium .boton-linea { background: transparent; color: #fff; border-color: rgba(255, 255, 255, 0.28); }
.premium .boton-linea:hover { border-color: var(--marca-2); color: var(--marca-2); }
.nav a.nav-premium { color: #9a6a00; font-weight: 600; }
.pie-logo { height: 18px; width: auto; margin-top: 0.2rem; }
/* Colaborador en el pie */
.colaborador {
    display: flex; align-items: center; justify-content: center; gap: 1.2rem; margin-top: 1.4rem; padding: 1.1rem;
    border: 1px solid var(--panel-borde); border-radius: 10px; background: var(--panel);
}
.colaborador span { font-family: var(--mono); font-size: 0.72rem; color: var(--texto-3); letter-spacing: 0.12em; text-transform: uppercase; }
.colaborador img { height: 4.6rem; width: auto; }
.creditos { margin-top: 0.9rem; font-size: 0.74rem; color: var(--texto-3); }
.creditos a { color: var(--texto-2); text-decoration: underline; text-underline-offset: 2px; }
.creditos a:hover { color: var(--marca-1); }

/* ── Páginas de solución: ficha, pestañas y paneles ── */
.ficha { padding: 2.6rem 0 1.8rem; }
.ficha .migas { display: block; margin-bottom: 1.2rem; }
.ficha-fila { display: grid; grid-template-columns: 1.5fr 1fr; gap: 2.5rem; align-items: end; }
.ficha-texto { display: flex; flex-direction: column; gap: 0.9rem; }
.ficha-texto h1 { font-size: clamp(2rem, 4.2vw, 3.3rem); }
.ficha-acciones { display: flex; flex-wrap: wrap; gap: 0.7rem; align-items: center; justify-content: flex-start; }
.ficha-acciones .normas { flex-basis: 100%; }

.pestanas {
    position: sticky; top: var(--barra); z-index: 40; background: rgba(255, 255, 255, 0.92); backdrop-filter: blur(10px);
    border-top: 1px solid var(--panel-borde); border-bottom: 1px solid var(--panel-borde);
}
.pestanas .contenedor { display: flex; gap: 0.3rem; overflow-x: auto; scrollbar-width: none; }
.pestanas button {
    position: relative; flex: none; font: inherit; font-size: 0.92rem; font-weight: 600; color: var(--texto-2);
    background: none; border: 0; padding: 1rem 1.1rem; cursor: pointer; transition: color 0.15s;
}
.pestanas button::after {
    content: ''; position: absolute; left: 0.9rem; right: 0.9rem; bottom: -1px; height: 3px; border-radius: 3px 3px 0 0;
    background: linear-gradient(90deg, var(--marca-1), var(--marca-2)); transform: scaleX(0); transition: transform 0.25s;
}
.pestanas button:hover { color: var(--marino); }
.pestanas button[aria-selected="true"] { color: var(--marino); }
.pestanas button[aria-selected="true"]::after { transform: scaleX(1); }
.panel { padding: 2.5rem 0 1rem; animation: entrar 0.35s ease; }
@keyframes entrar { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* Resumen: datos bajo la escena */
.datos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 1.6rem; }
.dato { padding: 1.2rem 1.3rem; border-left: 3px solid var(--marca-1); background: var(--fondo-2); border-radius: 0 10px 10px 0; }
.dato h3 { font-size: 1rem; margin-bottom: 0.3rem; color: var(--marino); }
.dato p { color: var(--texto-2); font-size: 0.9rem; }

/* Puntos de la escena: al pasar el mouse muestran su globo */
.punto { cursor: help; }
.punto:focus { outline: none; }
.globo { opacity: 0; pointer-events: none; transition: opacity 0.2s, transform 0.2s; }
.punto:hover .globo, .punto:focus .globo { opacity: 1; }
.globo rect { fill: var(--marino); filter: drop-shadow(0 8px 16px rgba(12, 23, 51, 0.25)); }
.globo-titulo { font-family: var(--sans); font-size: 12.5px; font-weight: 700; fill: #fff; }
.globo-detalle { font-family: var(--sans); font-size: 11px; fill: #9fd8ff; }
.punto:hover .hito-punto { fill: var(--marino); }

/* Cómo comenzar: pasos a la izquierda, video del paso elegido a la derecha */
.guia { display: grid; grid-template-columns: 300px 1fr; gap: 1.6rem; align-items: start; }
.guia-pasos { display: flex; flex-direction: column; gap: 0.6rem; }
.guia-paso {
    display: flex; flex-direction: column; gap: 0.25rem; text-align: left; font: inherit; cursor: pointer;
    padding: 1rem 1.1rem; border-radius: 12px; border: 1px solid var(--panel-borde); background: var(--panel);
    transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}
.guia-paso:hover { border-color: rgba(10, 109, 255, 0.45); transform: translateX(2px); }
.guia-paso.activo { border-color: var(--marca-1); box-shadow: 0 10px 26px rgba(10, 109, 255, 0.14); background: linear-gradient(90deg, rgba(10, 109, 255, 0.06), #fff); }
.guia-paso-titulo { font-weight: 650; color: var(--marino); }
.guia-detalle { display: flex; flex-direction: column; gap: 1.2rem; animation: entrar 0.3s ease; }
.guia-texto { display: flex; flex-direction: column; gap: 0.5rem; }
.guia-texto p { color: var(--texto-2); }
.guia-texto ul { list-style: none; color: var(--texto-2); font-size: 0.92rem; display: flex; gap: 1.2rem; flex-wrap: wrap; }
.guia-texto li::before { content: '›'; color: var(--marca-1); margin-right: 0.45rem; font-weight: 700; }

/* Láminas reales */
.laminas-reales { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; margin-bottom: 1.8rem; }
.lamina-real img {
    width: 100%; height: auto; border-radius: 6px; border: 1px solid var(--panel-borde);
    box-shadow: 0 20px 50px rgba(12, 23, 51, 0.12); transition: transform 0.3s, box-shadow 0.3s;
}
.lamina-real a:hover img { transform: translateY(-3px); box-shadow: 0 28px 60px rgba(10, 109, 255, 0.18); }
.lamina-real figcaption { font-family: var(--mono); font-size: 0.74rem; color: var(--texto-3); margin-top: 0.6rem; letter-spacing: 0.04em; }

/* Visor de láminas */
.visor { position: fixed; inset: 0; z-index: 100; display: flex; flex-direction: column; background: rgba(12, 23, 51, 0.92); backdrop-filter: blur(6px); }
.visor[hidden] { display: none; }
.visor-barra { display: flex; align-items: center; gap: 1rem; padding: 0.8rem 1.2rem; color: #fff; }
.visor-titulo { font-weight: 650; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.visor-ayuda { font-family: var(--mono); font-size: 0.75rem; color: #9fd8ff; letter-spacing: 0.04em; }
.visor-cerrar {
    font: inherit; font-size: 1.1rem; color: #fff; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.25);
    width: 40px; height: 40px; border-radius: 10px; cursor: pointer;
}
.visor-cerrar:hover { background: var(--marca-1); border-color: var(--marca-1); }
.visor-area { flex: 1; overflow: auto; display: grid; place-items: center; padding: 0 1.2rem 1.2rem; cursor: zoom-out; }
.visor-area img {
    max-width: 100%; max-height: calc(100vh - 90px); width: auto; height: auto; background: #fff; border-radius: 4px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45); cursor: zoom-in;
}
.visor.zoom .visor-area { place-items: start; }
.visor.zoom .visor-area img { max-width: none; max-height: none; width: auto; cursor: zoom-out; }   /* tamaño real (2800 px) */
@media (max-width: 640px) { .visor-ayuda { display: none; } }

@media (prefers-reduced-motion: reduce) { .flujo, .hito-pulso { animation: none; } }

/* ── Responsivo ── */
@media (max-width: 960px) {
    .portada .contenedor, .paso { grid-template-columns: 1fr; }
    .paso:nth-child(even) .paso-texto { order: 0; }
    .soluciones, .funciones, .vitrina, .ficha-fila, .datos, .guia, .laminas-reales { grid-template-columns: 1fr; gap: 1.5rem; }
    .guia-pasos { flex-direction: row; overflow-x: auto; }
    .guia-paso { flex: none; width: 230px; }
    .vitrina-inversa .vitrina-imagen { order: 0; }
    .vitrina-imagen img, .vitrina-inversa .vitrina-imagen img { transform: none; }
    .cifras { grid-template-columns: repeat(2, 1fr); }
    .pie-cajetin { grid-template-columns: 1fr 1fr; }
    .pie-cajetin div:nth-child(3) { border-left: 0; }
    .pie-cajetin div { border-top: 1px solid var(--panel-borde); }
    .acceso-contenedor { grid-template-columns: 1fr; gap: 2rem; }
}
@media (max-width: 640px) {
    :root { --barra: 64px; }
    .portada { padding: 3rem 0 2.5rem; }
    .marca-sello, .nav { display: none; }
    .cuenta { margin-left: auto; }
    .cuenta-nombre { display: none; }
    .acceso { padding: 2.5rem 0 3rem; }
    .cajetin { grid-template-columns: 1fr; }
    .cajetin span { border-left: 0; border-top: 1px solid var(--panel-borde); }
    .cajetin span:first-child { border-top: 0; }
    .llamado { padding: 1.5rem; }
}