/* ══ AQORA · forma TRADICIONAL: la identidad del agua, QUIETA ══
   La forma moderna es un buceo (túnel, luz, burbujas en movimiento). La tradicional no se mueve, pero no tiene por qué ser blanca: aquí cada estación toma
   los azules del agua —bandas claras de aguas someras que alternan con bandas profundas de petróleo y azul tinta— y lo que la moderna pone en capas
   (ondas de la superficie, burbujas, círculos de profundidad, el símbolo de la marca, el medidor) queda como fondo estático, hecho solo con CSS y
   SVG en línea (sin imágenes, sin animación, sin 3D). Las ventanas (tarjetas) siguen claras: sobresalen de las bandas oscuras como en la moderna.
   Solo la forma tradicional de aqora.html: todo cuelga de html[data-modo="tradicional"]. La moderna, la intro y RealControl no cambian.
   PARA REVERTIR: quitar el <link> de este archivo en aqora.html.
   ══ */

:root,.aq{
  --aq-agua-clara:#E9F6F8;                                              /* aguas someras: la banda clara */
  --aq-agua-bruma:#D7EDF1;                                              /* la misma agua, con un poco más de profundidad */
  --aq-agua-profunda:color-mix(in srgb,var(--aqora-fuerte) 40%,var(--ink));   /* petróleo */
  --aq-agua-tinta:#0B2B42;                                              /* azul tinta */
}

/* ── Bandas ───────────────────────────────────────────────── */
html[data-modo="tradicional"] .aq :is(#hoy,#bloqueo,#naves,#centros,#buceo,#turnos,#registro,#equipos,#simultaneas,#salmoneras,#indicadores,#medida){
  position:relative;overflow:hidden;background-image:none!important;border-color:transparent!important}
html[data-modo="tradicional"] .aq :is(#hoy,#bloqueo,#naves,#centros,#buceo,#turnos,#registro,#equipos,#simultaneas,#salmoneras,#indicadores,#medida) > .wrap{
  position:relative;z-index:1}

/* claras (aguas someras) */
html[data-modo="tradicional"] .aq :is(#hoy,#buceo,#simultaneas,#medida){background-color:var(--aq-agua-clara)!important}
html[data-modo="tradicional"] .aq :is(#naves,#registro,#indicadores){background-color:var(--aq-agua-bruma)!important}
/* profundas */
html[data-modo="tradicional"] .aq :is(#bloqueo,#turnos,#salmoneras){background-color:var(--aq-agua-profunda)!important}
html[data-modo="tradicional"] .aq :is(#centros,#equipos){background-color:var(--aq-agua-tinta)!important}

/* El pie y la demostración: el mismo petróleo, no un negro neutro */
html[data-modo="tradicional"] .aq .pie{background:color-mix(in srgb,var(--aq-agua-profunda) 62%,var(--ink-2))}
html[data-modo="tradicional"] .aq .sec.demo{
  background:
    radial-gradient(ellipse 52% 70% at 12% 0%,color-mix(in srgb,var(--aqora) 24%,transparent),transparent 70%),
    radial-gradient(ellipse 40% 60% at 100% 100%,color-mix(in srgb,var(--aqora) 14%,transparent),transparent 70%),
    var(--aq-agua-profunda)}

/* ── Texto sobre las bandas oscuras (lo mismo que .ink, con el aqua en lugar del dorado) ── */
/* las bandas oscuras aclaran los grises de la tinta (los de la forma estándar bajan a ~3,9:1 sobre el petróleo) */
html[data-modo="tradicional"] .aq :is(#bloqueo,#centros,#turnos,#equipos,#salmoneras,#demo,.pie){
  --on-ink-2:color-mix(in srgb,var(--on-ink) 88%,var(--aq-agua-profunda));--on-ink-3:color-mix(in srgb,var(--on-ink) 74%,var(--aq-agua-profunda))}
/* el color claro va en los bloques de texto de la banda; las ventanas conservan el suyo */
html[data-modo="tradicional"] .aq :is(#bloqueo,#centros,#turnos,#equipos,#salmoneras) :is(.sec-head,.split-t){color:var(--on-ink)}
html[data-modo="tradicional"] .aq :is(#bloqueo,#centros,#turnos,#equipos,#salmoneras) .eyebrow{color:var(--aqora-claro)}
html[data-modo="tradicional"] .aq :is(#bloqueo,#centros,#turnos,#equipos,#salmoneras) .h2{color:var(--on-ink)}
html[data-modo="tradicional"] .aq :is(#bloqueo,#centros,#turnos,#equipos,#salmoneras) .h2 .soft{color:var(--aqora-claro)}
html[data-modo="tradicional"] .aq :is(#bloqueo,#centros,#turnos,#equipos,#salmoneras) .lead{color:var(--on-ink-2)}
html[data-modo="tradicional"] .aq :is(#bloqueo,#centros,#turnos,#equipos,#salmoneras) .lista span{color:var(--on-ink-2)}
html[data-modo="tradicional"] .aq :is(#bloqueo,#centros,#turnos,#equipos,#salmoneras) .lista .lm{
  background:color-mix(in srgb,var(--aqora-claro) 10%,transparent);border-color:color-mix(in srgb,var(--aqora-claro) 30%,transparent);color:var(--aqora-claro)}
html[data-modo="tradicional"] .aq :is(#bloqueo,#centros,#turnos,#equipos,#salmoneras) .punto{border-color:var(--ink-line)}
html[data-modo="tradicional"] .aq :is(#bloqueo,#centros,#turnos,#equipos,#salmoneras) .punto .ico{color:var(--aqora-claro)}
html[data-modo="tradicional"] .aq :is(#bloqueo,#centros,#turnos,#equipos,#salmoneras) .punto p{color:var(--on-ink-2)}
/* las notas que van directamente sobre la banda (no dentro de una ventana) */
html[data-modo="tradicional"] .aq :is(#bloqueo,#centros,#turnos,#equipos,#salmoneras) .ciclo-nota{color:var(--on-ink-2)}
html[data-modo="tradicional"] .aq :is(#bloqueo,#centros,#turnos,#equipos,#salmoneras) .ciclo-nota b{color:var(--on-ink)}
/* sobre las claras, el acento es el aqua profundo y el titular, la tinta */
html[data-modo="tradicional"] .aq :is(#hoy,#naves,#buceo,#registro,#simultaneas,#indicadores,#medida) .h2 .soft{color:var(--aqora-fuerte)}
/* las ventanas flotan sobre el agua oscura, como en la moderna */
html[data-modo="tradicional"] .aq :is(#bloqueo,#centros,#turnos,#equipos,#salmoneras) :is(.vg,.form,.phone,.tablet){box-shadow:var(--shadow-float)}

/* ── Lo que la moderna pone en capas, aquí como fondo fijo ───────
   ::before = ondas de la superficie (franja superior), burbujas, círculos de profundidad y el medidor (solo marcas); ::after = el símbolo de la marca
   como marca de agua. Todo en SVG/CSS en línea y bajo el contenido (z-index 0, sin eventos). */
html[data-modo="tradicional"] .aq :is(#hoy,#bloqueo,#naves,#centros,#buceo,#turnos,#registro,#equipos,#simultaneas,#salmoneras,#indicadores,#medida)::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-repeat:repeat-x,no-repeat,no-repeat,no-repeat,no-repeat;
  background-position:0 0,right 6% bottom 10%,left bottom,right 14px top 50%,right 14px top 50%;
  background-size:320px 48px,190px 230px,640px 640px,8px min(64%,520px),16px min(64%,520px)}

/* sobre las bandas oscuras: ondas y burbujas del aqua claro, círculos de profundidad y medidor en aqua suave */
html[data-modo="tradicional"] .aq :is(#bloqueo,#centros,#turnos,#equipos,#salmoneras)::before{
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='48' viewBox='0 0 320 48' fill='none' stroke='%235CC4CD' stroke-width='1.2'%3E%3Cpath d='M0 12c40 0 40 10 80 10s40-10 80-10 40 10 80 10 40-10 80-10' opacity='.26'/%3E%3Cpath d='M0 30c40 0 40 10 80 10s40-10 80-10 40 10 80 10 40-10 80-10' opacity='.14'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='190' height='230' viewBox='0 0 190 230' fill='none' stroke='%235CC4CD' stroke-width='1.2'%3E%3Ccircle cx='150' cy='190' r='9' opacity='.34'/%3E%3Ccircle cx='118' cy='150' r='5' opacity='.3'/%3E%3Ccircle cx='160' cy='118' r='14' opacity='.24'/%3E%3Ccircle cx='92' cy='88' r='7' opacity='.26'/%3E%3Ccircle cx='138' cy='52' r='20' opacity='.16'/%3E%3Ccircle cx='60' cy='30' r='4' opacity='.24'/%3E%3Ccircle cx='40' cy='170' r='6' opacity='.2'/%3E%3C/svg%3E"),
    radial-gradient(circle at 0 100%,transparent 0 60px,color-mix(in srgb,var(--aqora-claro) 14%,transparent) 60px 61px,transparent 61px 130px,color-mix(in srgb,var(--aqora-claro) 10%,transparent) 130px 131px,transparent 131px 210px,color-mix(in srgb,var(--aqora-claro) 7%,transparent) 210px 211px,transparent 211px 300px,color-mix(in srgb,var(--aqora-claro) 5%,transparent) 300px 301px,transparent 301px),
    repeating-linear-gradient(to bottom,color-mix(in srgb,var(--aqora-claro) 40%,transparent) 0 1px,transparent 1px 18px),
    repeating-linear-gradient(to bottom,color-mix(in srgb,var(--aqora-claro) 55%,transparent) 0 2px,transparent 2px 90px)}

/* sobre las claras: las mismas capas en el aqua profundo, más tenues */
html[data-modo="tradicional"] .aq :is(#hoy,#naves,#buceo,#registro,#simultaneas,#indicadores,#medida)::before{
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='48' viewBox='0 0 320 48' fill='none' stroke='%23056B75' stroke-width='1.2'%3E%3Cpath d='M0 12c40 0 40 10 80 10s40-10 80-10 40 10 80 10 40-10 80-10' opacity='.2'/%3E%3Cpath d='M0 30c40 0 40 10 80 10s40-10 80-10 40 10 80 10 40-10 80-10' opacity='.1'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='190' height='230' viewBox='0 0 190 230' fill='none' stroke='%23056B75' stroke-width='1.2'%3E%3Ccircle cx='150' cy='190' r='9' opacity='.3'/%3E%3Ccircle cx='118' cy='150' r='5' opacity='.26'/%3E%3Ccircle cx='160' cy='118' r='14' opacity='.2'/%3E%3Ccircle cx='92' cy='88' r='7' opacity='.22'/%3E%3Ccircle cx='138' cy='52' r='20' opacity='.14'/%3E%3Ccircle cx='60' cy='30' r='4' opacity='.2'/%3E%3Ccircle cx='40' cy='170' r='6' opacity='.16'/%3E%3C/svg%3E"),
    radial-gradient(circle at 0 100%,transparent 0 60px,color-mix(in srgb,var(--aqora-fuerte) 14%,transparent) 60px 61px,transparent 61px 130px,color-mix(in srgb,var(--aqora-fuerte) 10%,transparent) 130px 131px,transparent 131px 210px,color-mix(in srgb,var(--aqora-fuerte) 7%,transparent) 210px 211px,transparent 211px 300px,color-mix(in srgb,var(--aqora-fuerte) 5%,transparent) 300px 301px,transparent 301px),
    repeating-linear-gradient(to bottom,color-mix(in srgb,var(--aqora-fuerte) 34%,transparent) 0 1px,transparent 1px 18px),
    repeating-linear-gradient(to bottom,color-mix(in srgb,var(--aqora-fuerte) 48%,transparent) 0 2px,transparent 2px 90px)}

/* el símbolo de la marca, como marca de agua, en tres bandas profundas */
html[data-modo="tradicional"] .aq :is(#bloqueo,#turnos,#salmoneras)::after{
  content:"";position:absolute;z-index:0;pointer-events:none;left:clamp(-90px,-4vw,-30px);top:50%;width:min(36vw,420px);aspect-ratio:1;transform:translateY(-50%);
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 240' fill='none' stroke='%235CC4CD' stroke-width='5' stroke-linecap='round'%3E%3Cpath d='M90 50H62a12 12 0 0 0-12 12v28M150 50h28a12 12 0 0 1 12 12v28M90 190H62a12 12 0 0 1-12-12v-28M150 190h28a12 12 0 0 0 12-12v-28' opacity='.12'/%3E%3Ccircle cx='120' cy='120' r='31' fill='%235CC4CD' stroke='none' opacity='.08'/%3E%3Ccircle cx='120' cy='120' r='56' stroke-width='1.5' opacity='.1'/%3E%3C/svg%3E") center/contain no-repeat}

/* el hero: ondas al pie, el símbolo de la marca y círculos de profundidad (la luz y la rejilla de arriba ya eran del hero) */
html[data-modo="tradicional"] .aq .aq-hero{
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='48' viewBox='0 0 320 48' fill='none' stroke='%235CC4CD' stroke-width='1.2'%3E%3Cpath d='M0 12c40 0 40 10 80 10s40-10 80-10 40 10 80 10 40-10 80-10' opacity='.26'/%3E%3Cpath d='M0 30c40 0 40 10 80 10s40-10 80-10 40 10 80 10 40-10 80-10' opacity='.14'/%3E%3C/svg%3E") left bottom/320px 48px repeat-x,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 240' fill='none' stroke='%235CC4CD' stroke-width='5' stroke-linecap='round'%3E%3Cpath d='M90 50H62a12 12 0 0 0-12 12v28M150 50h28a12 12 0 0 1 12 12v28M90 190H62a12 12 0 0 1-12-12v-28M150 190h28a12 12 0 0 0 12-12v-28' opacity='.12'/%3E%3Ccircle cx='120' cy='120' r='31' fill='%235CC4CD' stroke='none' opacity='.08'/%3E%3Ccircle cx='120' cy='120' r='56' stroke-width='1.5' opacity='.1'/%3E%3C/svg%3E") left -60px bottom -40px/min(34vw,440px) no-repeat,
    radial-gradient(circle at 100% 100%,transparent 0 80px,color-mix(in srgb,var(--aqora-claro) 12%,transparent) 80px 81px,transparent 81px 170px,color-mix(in srgb,var(--aqora-claro) 8%,transparent) 170px 171px,transparent 171px 270px,color-mix(in srgb,var(--aqora-claro) 5%,transparent) 270px 271px,transparent 271px) right bottom/720px 720px no-repeat,
    radial-gradient(ellipse 55% 60% at 88% 18%,rgba(7,140,153,.30),transparent 70%),
    radial-gradient(ellipse 45% 55% at 0% 100%,rgba(7,140,153,.18),transparent 70%),
    linear-gradient(to bottom,var(--ink) 0%,color-mix(in srgb,var(--aq-agua-profunda) 70%,var(--ink)) 100%);
  background-color:color-mix(in srgb,var(--aq-agua-profunda) 55%,var(--ink))}

@media (max-width:900px){
  /* en el teléfono, sin medidor ni burbujas: solo las ondas y los círculos */
  html[data-modo="tradicional"] .aq :is(#hoy,#bloqueo,#naves,#centros,#buceo,#turnos,#registro,#equipos,#simultaneas,#salmoneras,#indicadores,#medida)::before{
    background-size:320px 48px,0 0,420px 420px,0 0,0 0}
  html[data-modo="tradicional"] .aq :is(#bloqueo,#turnos,#salmoneras)::after{opacity:.6}
}