/* =============================================================================
   [2026-09-12 16:32] resumen.css — LA VERSIÓN RESUMIDA DE LA WEB (index.html) y el paso entre versiones
   =============================================================================
   Encargo del usuario (2026-09-12): «la web actual es larga, con mucho contenido; quiero una web que
   concentre los puntos clave para que el visitante con prisa se quede con todo lo importante, con un
   botón para ir a la web completa al final y arriba, entre la flecha de arriba y el selector de idiomas».

   Reglas que se ha impuesto esta hoja:
   · NO toca css/web.css: todo lo de aquí son clases nuevas (`res-*`, `cambio-web`) o ajustes dentro de
     `.res-hero`. La web completa (completa.html) sigue exactamente como estaba, con esta hoja cargada
     solo para el botón de la barra.
   · Mismos tokens, mismo lenguaje visual: colores, radios, sombras y tipos salen de :root de web.css.
   · La pantalla de la portada es una figura `.uso` normal (js/uso-real.js, sin tocar) con
     `data-marco="pantalla"`, un valor que web.css no conoce: así no hereda el bisel del marco «kiosko»
     ni el del «panel» y se encaja en el hueco real de la foto con las variables --pantalla-*.
   ========================================================================== */

/* =====================================================================
   EL PASO ENTRE LAS DOS VERSIONES: mismo botón en las dos webs, en el mismo sitio
   (barra de arriba, entre la flecha de «ir arriba» y el selector de idiomas), con la
   misma pinta que esos dos controles: blanco, borde claro, sombra y azul de enlace.
   ===================================================================== */
.cambio-web {
    position: fixed; top: 12px; left: 50%; transform: translateX(-50%); z-index: 5;
    display: inline-flex; align-items: center; gap: 8px;
    max-width: calc(100vw - 200px);
    padding: 9px 18px;
    background: var(--blanco); border: 1px solid var(--marco-panel-borde); border-radius: var(--r-pill);
    box-shadow: 0 2px 10px rgba(3,20,50,.22);
    color: var(--azul-3); font-size: 14px; font-weight: 700; line-height: 1.1;
    text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    transition: transform .2s var(--suave), background-color .2s;
}
.cambio-web::after {
    content: ""; flex: none; width: 7px; height: 7px;
    border: 2px solid currentColor; border-left: 0; border-bottom: 0;
    transform: rotate(45deg);
}
.cambio-web:hover { background: var(--nube); transform: translateX(-50%) translateY(-2px); }
.cambio-web:active { transform: translateX(-50%); }
.cambio-web:focus-visible { outline: 3px solid var(--amarillo); outline-offset: 2px; }
/* Con la presentación abierta, la web de debajo está tapada: sus controles tampoco se ven. */
.intro-abierta .cambio-web { display: none; }
/* [2026-09-13 12:34, usuario: «el botón de ver la web completa debe estar arriba en centro»] SIEMPRE
   arriba y centrado, en todos los tamaños (antes bajaba al pie en pantallas estrechas y bajas).
   En las estrechas no cabe en una línea entre la flecha (46 px + 16 de margen) y el selector de
   idioma (~100 px + 16): ahí el hueco central se reserva simétrico —el ancho del control más ancho,
   el idioma, a cada lado— y el texto parte en dos líneas en vez de montarse encima de ellos. */
/* [2026-09-13 18:30, usuario: «en los móviles, el botón de ver la completa arriba no se ve bien»] REHECHO en móvil.
   MEDIDO con la letra de un móvil (Roboto y Liberation Sans: la web no carga Ubuntu y el Chrome de las pruebas sí la
   tenía, por eso las capturas anteriores salían bien): con la reserva fija de 128 px por lado el botón se partía en
   2-4 líneas (42-69 px de alto, más que la flecha y el idioma), se recortaba en alemán y neerlandés a 320-375 px y
   quedaba descentrado (74 px de hueco a la izquierda y 25 a la derecha).
   Ahora, en el mismo corte que web.css usa para móvil (≤820 px, donde la flecha mide 44 px a 10 px del borde y el
   idioma ~94×34 a 10 px, web.css:495-497): UNA línea, 34 px de alto como el idioma, y centrado DENTRO del hueco
   real entre los dos (left/right fijos + ancho al contenido + margin auto). */
@media (max-width: 820px) {
    .cambio-web {
        /* MEDIDO: idioma 96 × 34 px en los 7 idiomas y con Roboto, Liberation y DejaVu (con el ancho fijo del código,
           más abajo); la flecha, 34 × 34 a 10 px del borde (ver «LOS TRES CONTROLES DE ARRIBA»).
           left = 10 + 34 + 8 · right = 10 + 96 + 8 */
        top: 10px; left: 52px; right: 114px;
        width: fit-content; max-width: calc(100vw - 166px); margin-inline: auto;
        transform: none; height: 34px; padding: 0 12px; gap: 6px;
        font-size: min(12px, 3.1vw); line-height: 1;
        white-space: nowrap; overflow: hidden; text-overflow: clip;
    }
    .cambio-web:hover { transform: translateY(-2px); }
    .cambio-web:active { transform: none; }
    .cambio-web::after { width: 6px; height: 6px; }
}
/* sin flechita cuando aprieta el ancho: 13 px más para el texto (el neerlandés, el más largo, ya no cabe con ella a 360) */
@media (max-width: 400px) {
    .cambio-web { padding: 0 10px; }
    .cambio-web::after { display: none; }
}
@media (max-width: 340px) { .cambio-web { padding: 0 8px; } }
/* [2026-09-13 18:50] El código del idioma («ES», «IT», «NL»…) con ancho fijo: medido, «IT» es más estrecho y el selector
   encogía 4-5 px, así que el botón de arriba (anclado a su borde) quedaba descentrado solo en italiano. Con el mismo ancho
   para los siete, el selector mide siempre lo mismo. Va en esta hoja porque la cargan las dos páginas. */
.idioma .codigo { display: inline-block; min-width: 1.6em; text-align: center; }

/* =====================================================================
   [2026-09-13 19:05, usuario: «el botón de arriba a la izquierda para ir arriba debe ser del mismo alto que los botones
   de ver la web completa y el selector de idiomas; deben ser los 3 de la misma altura»]
   LOS TRES CONTROLES DE ARRIBA, A LA MISMA ALTURA. Medido antes: en escritorio flecha 46, botón 35, idioma 36; en móvil
   flecha 44, botón 34, idioma 34. La referencia es el selector de idioma (su alto sale de su bandera y su relleno):
   36 px en escritorio y 34 en móvil. La flecha se ve de ese alto, pero su zona táctil sigue midiendo 44 × 44 (::before):
   web.css:497 la puso a 44 por ser el mínimo cómodo para el dedo, y eso no se pierde.
   ===================================================================== */
.arriba { width: 36px; height: 36px; }
.arriba svg { width: 18px; height: 18px; }
.arriba::before { content: ""; position: absolute; inset: -4px; }
.cambio-web { height: 36px; padding-top: 0; padding-bottom: 0; }
@media (max-width: 820px) {
    .arriba { width: 34px; height: 34px; }
    .arriba svg { width: 17px; height: 17px; }
    .arriba::before { inset: -5px; }
    .cambio-web { height: 34px; }
}

/* =====================================================================
   LA PORTADA DEL RESUMEN: el texto a la izquierda y la central a la derecha, con su
   pantalla pasando sola las siete escenas de la compra. Sin scroll clavado: aquí la
   máquina se está quieta y lo que se mueve es lo que enseña (decisión del usuario).
   ===================================================================== */
.res-hero {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .92fr);
    align-items: center; gap: 4vw;
    padding: 84px var(--seccion-x) 6vh;
    min-height: 88vh;
}
.res-hero__texto { max-width: 640px; }
.res-hero h1 {
    font-size: var(--t-portada); line-height: 1.03; letter-spacing: -.02em;
    text-wrap: balance; text-shadow: var(--sombra-titulo);
}
.res-hero h1 em { font-style: normal; color: var(--amarillo); }
/* [2026-09-15 09:49, petición del usuario: igualar el rótulo] «Lavandería autoservicio» es la misma clave (cap0.kicker)
   que el rótulo de la portada de la web completa, que va en amarillo (`.cap .kicker`, web.css:175); aquí heredaba el
   blanco de body porque `.res-hero` no es `.cap` ni `.azul`. */
.res-hero .kicker { color: var(--amarillo); }
.res-hero .lead { margin-top: 18px; font-size: var(--t-lead); color: var(--claro); max-width: 46ch; }
.res-hero .lista { margin-top: 22px; }
/* [2026-09-14 21:19, usuario: «hay 3 líneas con texto en negro que deberían estar en blanco»] La portada va sobre el azul
   pero no es `.azul`, así que su lista se quedaba con los colores oscuros de las secciones blancas (web.css:355 y :358).
   [2026-09-14 21:29, «misma info, mismo diseño»] Son las mismas tres frases que la portada de la web completa
   (completa.html:62-64), así que llevan sus colores (web.css:187, :189 y :190): texto claro sin sombra, negritas en
   blanco y el punto amarillo. */
.res-hero .lista li { border-color: var(--linea-clara); color: var(--claro); }
.res-hero .lista li:last-child { border-bottom: 1px solid var(--linea-clara); }   /* [2026-09-14 21:44] la raya de cierre de la gemela (web.css:188) */
.res-hero .lista li i { background: var(--amarillo); }
.res-hero .lista b { color: #fff; }

/* la fila de acciones de la portada */
.res-acciones { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.res-boton {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 14px 24px; border-radius: var(--r-pill);
    font-size: 16px; font-weight: 700; text-decoration: none;
    background: var(--oro); color: #23180a;
    box-shadow: 0 10px 26px rgba(3,20,50,.3);
    transition: transform .2s var(--suave), filter .2s;
}
.res-boton:hover { transform: translateY(-2px); filter: brightness(1.06); }
.res-boton--fantasma {
    background: transparent; color: #fff; box-shadow: none;
    border: 1px solid var(--linea-clara);
}
.res-boton--fantasma:hover { background: var(--fondo-tarjeta-oscura); }
.res-boton:focus-visible { outline: 3px solid var(--amarillo); outline-offset: 3px; }

/* --- la central y el hueco real de su pantalla --- */
.res-maquina { position: relative; justify-self: center; width: 100%; max-width: 520px; }
.res-maquina img.chasis {
    display: block; width: 100%; height: auto;
    filter: none; border-radius: var(--r-maquina);
    box-shadow: var(--sombra-maquina);
}
/* La figura se encaja en el bisel con las MISMAS medidas que usa la escena de la web completa
   (web.css: --pantalla-left/top/w/h, medidas a píxel sobre la foto). */
.res-pantalla {
    position: absolute;
    left: var(--pantalla-left); top: var(--pantalla-top);
    width: var(--pantalla-w); height: var(--pantalla-h);
    margin: 0; opacity: 1; transform: none;   /* la entrada por scroll de .uso aquí no pinta nada */
}
.res-pantalla .marco {
    width: 100%; height: 100%;
    aspect-ratio: auto !important;            /* lo pone uso-real.js con la proporción de las capturas */
    max-width: none; margin: 0; border: 0;
    border-radius: 2px; box-shadow: none;
    background: var(--pantalla-reposo);
}
.res-pantalla .barra { left: 8px; right: 8px; top: 7px; }
.res-pantalla .barra i { padding: 4px 0; }

/* =====================================================================
   LOS BLOQUES DEL RESUMEN: los mismos de la web completa, con menos aire y sin las
   tiras largas de capturas. Solo se ajusta el ritmo vertical; el resto lo pone web.css.
   ===================================================================== */
.res .bloque { padding: 9vh var(--seccion-x); }
.res .bloque .lead { max-width: 78ch; }
.res .tira3 { margin-top: 5vh; }
.res .pasos { margin-top: 4vh; }
.res .uso { --uso-alto: 58vh; }
.res .tira3 .uso { --uso-alto: 52vh; }
.res .vivo { margin-top: 3vh; }

/* dos columnas para «lo que sabes de tu negocio»: las viñetas y una captura al lado */
.res-dos {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: 4vw; align-items: center; margin-top: 4vh;
}
.res-dos h3 { margin-top: 0; }

/* la comparativa recortada a lo que de verdad separa los dos modelos */
.res .cmp { margin-top: 0; }
.res .caja-tabla { margin-top: 4vh; }

/* el cierre: el paso a la web completa, en grande, antes del contacto */
.res-final {
    display: grid; justify-items: center; gap: 14px; text-align: center;
    padding: 8vh var(--seccion-x) 2vh;
}
/* [2026-09-13 17:05] Sin titular ni párrafo (el usuario los quitó), la franja blanca quedaba vacía con un botón
   suelto: ahora el botón va sobre el cielo, en blanco con letra azul, como el de la barra de arriba. */
.res-final .res-boton { background: var(--blanco); color: var(--azul-3); }

@media (max-width: 820px) {
    .res-hero {
        grid-template-columns: 1fr; gap: 3vh;
        padding: 72px var(--seccion-x) 4vh; min-height: 0;
    }
    /* [2026-09-13 17:05] en móvil, primero el titular: con la máquina delante, el visitante con prisa
       abría la web y no leía qué es hasta desplazarse (visto en la captura a 390×844) */
    .res-maquina { max-width: 330px; }
    .res-dos { grid-template-columns: 1fr; }
    .res .bloque { padding: 7vh var(--seccion-x); }
}