/* =============================================================================
   [2026-09-13 16:50] marca.css — LA MARCA LAVANDIO en la web (las dos páginas)
   =============================================================================
   Renombrado a Lavandio (usuario, 2026-09-13). El logotipo elegido el 2026-09-12 es la opción 03
   («El interruptor»): assets/lavandio-logo-negativo.svg, a curvas, generado por scripts/lavandio-logo.py.
   · Logotipo: donde la web ponía la marca como tal (la presentación y el cierre).
   · «io» de color dentro del texto: el usuario pidió «el io de lavandio en otro color que se identifique
     con tecnología». Colores con su contraste calculado:
       - sobre blanco, #1f7ec9, el azul del círculo del logo: 4,30:1;
       - sobre las secciones azules (transparentes sobre el degradado, con la sombra de texto de web.css:208),
         #9ae8f7, un cian claro: 4,66:1 sobre --azul-4 y 3,12:1 sobre --azul-3. El cian del logo (#21bddb)
         se perdía ahí: 2,86 y 1,92.
     Sin color en la tarjeta del club de la presentación ni en las etiquetas de la tabla: ya tienen fondo propio.
   ========================================================================== */

.marca-io { color: #1f7ec9; }
.azul .marca-io { color: #9ae8f7; }
.azul .blanca .marca-io { color: #1f7ec9; }   /* la tabla comparativa es una caja blanca DENTRO de una sección azul */

/* el logotipo en la presentación: ocupa el sitio del antiguo rótulo con el nombre provisional */
.intro__marca .marca-logo {
    display: block; height: clamp(38px, 5vw, 58px); width: auto; margin: 0 auto;
    /* sin filter: drop-shadow — medido en esta web, un filtro bajaba la portada de 57 a 11 fps sin GPU (web.css:62-66) */
}

/* el logotipo en el cierre: donde iba el nombre provisional en grande */
.cierre .marca-cierre { margin: 0; line-height: 0; }
.cierre .marca-cierre img {
    display: inline-block; height: clamp(56px, 8vw, 118px); width: auto; max-width: 100%;
}

/* [2026-09-13 17:45, usuario: «echo en falta el logo en la primera página de las webs»] El logotipo encabeza la
   portada de las dos webs: en el resumen (.res-hero) y en el primer capítulo de la escena de la completa (.cap.portada),
   encima de «Lavandería autoservicio». En la completa va DENTRO del capítulo, así que se funde con él al bajar. */
.marca-portada {
    display: block; width: auto; max-width: 100%;
    height: clamp(40px, 4.2vw, 64px); margin-bottom: clamp(16px, 2.2vh, 26px);
}
@media (max-width: 820px) { .marca-portada { height: 38px; margin-bottom: 12px; } }
/* [2026-09-13 20:40] En la web COMPLETA, en móvil, la portada va DENTRO de la escena y la central se pinta por encima del
   texto. MEDIDO (scratchpad/diag-logo-portada-movil.js): el logo (38 + 12 px) empuja el texto hacia arriba y en pantallas
   bajas la máquina lo TAPA (a 375×667 el texto empezaba 52 px dentro del chasis, a 360×640 61 px; sin logo, 2 y 11): del
   logo solo se leía «La». A 390×844 cabía con 2 px. En esas pantallas bajas el logo de la portada de la completa no se
   muestra; el visitante ya lo ha visto en el resumen y en la presentación, y el texto queda donde estaba antes. */
@media (max-width: 820px) and (max-height: 820px) {
    .cap.portada .marca-portada { display: none; }
}