/* ============================================================
   Sitioideal — Diseño «Espuma» (autolavados, car wash, detallado y estética automotriz) · paso 7.z.33
   Va encima de sitio.css. Fresco y reluciente, como autolavado: cielo y agua del color del negocio con
   burbujas grandes y suaves, el nombre en letras redondas de letrero (Righteous) y los textos en Albert Sans.
   La foto de portada va en la entrada del túnel de lavado (un arco con su marco) con la cortina de tiras
   colgando arriba, burbujas alrededor y el letrero de «Entrada» con su flecha y el horario; abajo, una orilla
   de espuma. Los servicios son paquetes de lavado (franja del color del negocio con burbujas, foto, tiempo,
   precio grande y «Agendar»); las fotos van recién lavadas, con su brillo. Los títulos llevan tres burbujas.
   Los textos usan un azul tinta (el color principal oscurecido) para que siempre se lean.
   HTML propio: app/vistas/sitio/disenos/espuma/
   ============================================================ */

.diseno-espuma {
    --es-titulo: "Righteous", "Archivo", system-ui, sans-serif;
    --es-letra: "Albert Sans", "Archivo", system-ui, sans-serif;
    --es-fondo: color-mix(in srgb, var(--c-fondo) 25%, #F6FBFE);
    --es-alterna: color-mix(in srgb, var(--c-primario) 7%, #EBF5FB);
    --es-blanco: #FFFFFF;
    --es-tinta: color-mix(in srgb, var(--c-primario) 25%, #0F1F2E);
    --es-tinta-suave: color-mix(in srgb, var(--es-tinta) 78%, transparent);
    --es-principal: color-mix(in srgb, var(--c-primario) 85%, #000);
    --es-agua: color-mix(in srgb, var(--c-primario) 40%, #8FD8F8);
    --es-agua-suave: color-mix(in srgb, var(--c-primario) 10%, #E6F6FD);
    --es-borde: color-mix(in srgb, var(--es-tinta) 12%, transparent);
    --es-borde-fuerte: color-mix(in srgb, var(--es-tinta) 26%, transparent);
    --es-sombra: 0 18px 32px -22px color-mix(in srgb, var(--es-tinta) 60%, transparent), 0 1px 3px rgba(15, 31, 46, .08);
    /* Una burbuja: brillo arriba a la izquierda, centro transparente y orilla de agua */
    --es-burbuja: radial-gradient(circle at 32% 28%, rgba(255, 255, 255, .95) 0 8%, rgba(255, 255, 255, 0) 9.5%),
                  radial-gradient(circle at 50% 50%, rgba(255, 255, 255, .06) 0 56%, rgba(255, 255, 255, .7) 68%, color-mix(in srgb, var(--es-agua) 55%, transparent) 100%);

    /* Superficies (sitio.css) */
    --s-fondo: var(--es-fondo);
    --s-alterna: var(--es-alterna);
    --s-tarjeta: var(--es-blanco);
    --s-tarjeta-alterna: var(--es-blanco);
    --s-encabezado: var(--es-blanco);
    --s-texto: var(--es-tinta);
    --s-titulo: var(--es-principal);
    --s-linea: var(--es-borde);
    --s-linea-fuerte: var(--es-borde-fuerte);

    background: var(--es-fondo);
    font-family: var(--es-letra);
    font-size: 1.03rem;
}

/* Donde el navegador puede, cada color se ajusta solo lo necesario para leerse sobre lo claro */
@supports (color: oklch(from red l c h)) {
    .diseno-espuma {
        --es-principal: oklch(from var(--c-primario) min(l, .47) c h);
        --es-tinta: oklch(from color-mix(in srgb, var(--c-primario) 25%, #0F1F2E) min(l, .28) c h);
    }
}

/* Letras redondas de letrero en los títulos (Righteous solo tiene un grueso) */
.diseno-espuma h1,
.diseno-espuma h2,
.diseno-espuma h3,
.diseno-espuma h4,
.diseno-espuma .logo__nombre,
.diseno-espuma .especial__titulo,
.diseno-espuma .equipo__titulo,
.diseno-espuma .persona__nombre,
.diseno-espuma .promocion__titulo,
.diseno-espuma .servicio__nombre,
.diseno-espuma .sucursal__nombre,
.diseno-espuma .redes__titulo {
    font-family: var(--es-titulo);
    font-stretch: normal;
    font-weight: 400 !important;
    letter-spacing: .005em;
}

/* ---------- Encabezado: blanco con su orilla de agua ---------- */
.diseno-espuma .encabezado {
    border-bottom: 3px solid var(--es-agua);
    background: color-mix(in srgb, var(--es-blanco) 94%, transparent);
    backdrop-filter: saturate(1.2) blur(10px);
}
.diseno-espuma .logo__nombre { color: var(--es-tinta); font-size: 1.55rem; }
.diseno-espuma .menu { column-gap: 22px; }
.diseno-espuma .menu a { color: var(--es-tinta); font-size: .95rem; font-weight: 600; }
.diseno-espuma .menu a:hover { color: var(--es-principal); }

/* ---------- Botones: redondos y brillosos, como recién encerados ---------- */
.diseno-espuma .boton {
    border-radius: 999px;
    font-family: var(--es-letra);
    font-stretch: normal;
    font-weight: 800;
    letter-spacing: .01em;
    transition: transform .12s ease, box-shadow .12s ease;
}
.diseno-espuma .boton--principal {
    border: 0;
    background: linear-gradient(180deg, rgba(255, 255, 255, .24), rgba(255, 255, 255, 0) 55%), var(--es-principal);
    color: #FFFFFF;
    box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .18), 0 12px 22px -12px color-mix(in srgb, var(--es-principal) 85%, #000);
}
.diseno-espuma .boton--secundario {
    border: 2px solid color-mix(in srgb, var(--es-tinta) 22%, transparent);
    background: var(--es-blanco);
    color: var(--es-tinta);
}
.diseno-espuma .boton--secundario:hover { border-color: var(--es-principal); color: var(--es-principal); }
.diseno-espuma .boton:hover { transform: translateY(-2px); }
.diseno-espuma .boton-chico { border-radius: 999px; font-weight: 700; }

@media (prefers-reduced-motion: reduce) {
    .diseno-espuma .boton { transition: none; }
    .diseno-espuma .boton:hover { transform: none; }
}

/* ---------- Portada: cielo, agua y burbujas ---------- */
.es-portada {
    position: relative;
    padding-top: clamp(40px, 6vw, 84px);
    overflow: hidden;
    background:
        radial-gradient(55% 60% at 80% 42%, color-mix(in srgb, var(--c-primario) 16%, transparent), transparent 70%),
        linear-gradient(180deg, color-mix(in srgb, var(--c-primario) 5%, #F4FBFF), color-mix(in srgb, var(--c-primario) 14%, #DDF1FB));
    color: var(--es-tinta);
}

/* Las burbujas grandes del fondo (solo adorno) */
.es-portada__burbujas { position: absolute; inset: 0; pointer-events: none; }
.es-burbuja { position: absolute; border-radius: 50%; background: var(--es-burbuja); opacity: .75; }
.es-burbuja--1 { top: 7%; left: -46px; width: 130px; height: 130px; }
.es-burbuja--2 { top: 4%; left: 47%; width: 46px; height: 46px; }
.es-burbuja--3 { bottom: 20%; left: 44%; width: 30px; height: 30px; }
.es-burbuja--4 { top: 3%; right: 3%; width: 84px; height: 84px; }
.es-burbuja--5 { bottom: 12%; right: -40px; width: 150px; height: 150px; }

.es-portada__rejilla {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 46px;
    align-items: center;
    padding-bottom: 76px;
}

@media (min-width: 900px) {
    .es-portada__rejilla { grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: 56px; }
}

/* El giro en una pastilla con su gota */
.es-giro {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-width: 100%;
    margin: 0 0 18px;
    padding: 7px 16px 7px 12px;
    border: 2px solid color-mix(in srgb, var(--es-agua) 60%, transparent);
    border-radius: 999px;
    background: var(--es-blanco);
    color: var(--es-principal);
    font-size: .86rem;
    font-weight: 800;
    letter-spacing: .08em;
    line-height: 1.25;
    text-transform: uppercase;
    box-sizing: border-box;
}
.es-giro .icono { flex: none; width: 18px; height: 18px; fill: color-mix(in srgb, var(--es-agua) 45%, transparent); }
.es-giro > span { overflow-wrap: anywhere; }

.es-portada__nombre {
    margin: 0 0 16px;
    color: var(--es-tinta);
    font-size: clamp(2.9rem, 1.5rem + 4.8vw, 5.6rem);
    line-height: 1;
    overflow-wrap: anywhere;
}
.es-portada__nombre--medio { font-size: clamp(2.6rem, 1.4rem + 4vw, 4.8rem); }
.es-portada__nombre--largo { font-size: clamp(2.2rem, 1.25rem + 3.2vw, 3.9rem); }

.es-portada__eslogan {
    max-width: 40ch;
    margin: 0 0 28px;
    color: var(--es-tinta-suave);
    font-size: clamp(1.1rem, 1rem + .5vw, 1.32rem);
    line-height: 1.55;
}

.es-portada__botones { gap: 14px; }
.es-portada__estado { margin-top: 26px; }
.diseno-espuma .estado-ahora--claro { border-radius: 999px; border-color: var(--es-borde); background: var(--es-blanco); box-shadow: var(--es-sombra); }

/* La entrada del túnel de lavado: un arco con su marco */
.es-portada__visual {
    position: relative;
    justify-self: center;
    width: min(100%, 420px);
    padding: 24px 24px 58px;
    box-sizing: border-box;
}

.es-tunel {
    position: relative;
    padding: 14px;
    border-radius: 50% 50% 26px 26px / 38% 38% 26px 26px;
    background: linear-gradient(180deg, #FFFFFF, color-mix(in srgb, var(--c-primario) 10%, #E7F1F7));
    box-shadow: 0 30px 50px -30px color-mix(in srgb, var(--es-tinta) 75%, transparent), 0 0 0 1px var(--es-borde);
}

.es-tunel__foto {
    position: relative;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    border-radius: 50% 50% 16px 16px / 40% 40% 16px 16px;
    background: var(--es-agua-suave);
}
.es-tunel__foto picture,
.es-tunel__foto picture img { width: 100%; height: 100%; }
.es-tunel__foto picture img { object-fit: cover; }
/* La nota de IA abajo de la cortina, donde no la tapa el letrero de «Entrada» */
.es-tunel__foto > .marca-ia--foto { top: 40%; bottom: auto; }

/* Sin foto: la inicial y el giro sobre el agua */
.es-tunel__foto--inicial {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 34% 14% 12%;
    background:
        radial-gradient(circle at 24% 72%, rgba(255, 255, 255, .22) 0 18px, transparent 19px),
        radial-gradient(circle at 78% 82%, rgba(255, 255, 255, .18) 0 11px, transparent 12px),
        linear-gradient(180deg, var(--es-principal), color-mix(in srgb, var(--es-principal) 70%, #000));
    background-color: var(--es-principal);
    color: #FFFFFF;
    text-align: center;
    box-sizing: border-box;
}
.es-tunel__inicial { font-family: var(--es-titulo); font-size: clamp(5rem, 3.5rem + 5vw, 8rem); line-height: .9; }
.es-tunel__subtitulo { font-size: .8rem; font-weight: 800; letter-spacing: .14em; line-height: 1.35; text-transform: uppercase; overflow-wrap: anywhere; }

/* La cortina de tiras suaves que cuelga arriba del túnel (solo adorno) */
.es-cortina {
    position: absolute;
    inset: 0 0 auto;
    z-index: 1;
    display: flex;
    gap: 3px;
    height: 30%;
    padding: 0 3px;
    pointer-events: none;
}
.es-cortina > span {
    flex: 1;
    height: 100%;
    border-radius: 0 0 9px 9px;
    background: linear-gradient(90deg, rgba(255, 255, 255, .38), rgba(255, 255, 255, 0) 55%), var(--c-primario);
    box-shadow: 0 4px 6px -3px rgba(0, 0, 0, .25);
    opacity: .9;
    transform-origin: top center;
}
.es-cortina > span:nth-child(3n+2) { height: 86%; background: linear-gradient(90deg, rgba(255, 255, 255, .45), rgba(255, 255, 255, 0) 55%), var(--c-acento); }
.es-cortina > span:nth-child(3n) { height: 94%; background: linear-gradient(90deg, rgba(255, 255, 255, .6), rgba(255, 255, 255, .2) 55%), #FFFFFF; }
.es-cortina > span:nth-child(4n) { height: 78%; }

/* Se mece un poquito, como cuando pasa un auto */
@media (prefers-reduced-motion: no-preference) {
    .es-cortina > span { animation: es-mecer 3.6s ease-in-out infinite alternate; }
    .es-cortina > span:nth-child(even) { animation-delay: -1.8s; }
}
@keyframes es-mecer {
    from { rotate: -2.5deg; }
    to { rotate: 2.5deg; }
}

/* Las burbujas alrededor del túnel y el destello (solo adorno) */
.es-pompa { position: absolute; z-index: 3; border-radius: 50%; background: var(--es-burbuja); pointer-events: none; }
.es-pompa--1 { top: 4px; right: 2px; width: 62px; height: 62px; }
.es-pompa--2 { top: 70px; right: -6px; width: 30px; height: 30px; }
.es-pompa--3 { top: 46%; left: 2px; width: 40px; height: 40px; }
.es-chispa { position: absolute; top: 14%; left: 10px; z-index: 3; width: 34px; height: 34px; color: var(--c-acento); filter: drop-shadow(0 3px 4px rgba(15, 31, 46, .25)); }
.es-chispa .icono { width: 100%; height: 100%; fill: currentColor; }

/* El letrero de «Entrada» con su flecha y el horario (lleva al horario) */
.es-entrada {
    position: absolute;
    left: 0;   /* a la izquierda: la flecha apunta al túnel y a la derecha queda el botón de promociones (7.z.9) */
    bottom: 6px;
    z-index: 4;
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-width: 66%;
    padding: 10px 38px 11px 18px;
    background: var(--c-acento);
    color: var(--c-sobre-acento);
    line-height: 1.2;
    text-decoration: none;
    clip-path: polygon(0 0, calc(100% - 24px) 0, 100% 50%, calc(100% - 24px) 100%, 0 100%);
    filter: drop-shadow(0 10px 12px rgba(15, 31, 46, .28));
    box-sizing: border-box;
}
.es-entrada strong { display: inline-flex; align-items: center; gap: 4px; font-family: var(--es-titulo); font-size: 1.35rem; font-weight: 400; letter-spacing: .03em; line-height: 1; text-transform: uppercase; }
.es-entrada strong .icono { width: 20px; height: 20px; stroke-width: 3; }
.es-entrada span { font-size: .78rem; font-weight: 700; }
.es-entrada span:last-child { font-size: .9rem; font-weight: 800; }
.es-entrada:hover { filter: drop-shadow(0 10px 12px rgba(15, 31, 46, .28)) brightness(1.05); }

/* La orilla de espuma que se junta con la sección de abajo (solo adorno) */
.es-espuma {
    position: absolute;
    right: 0;
    bottom: -1px;
    left: 0;
    height: 44px;
    background:
        radial-gradient(circle at 50% 100%, var(--s-fondo) 0 21px, transparent 22px) 0 100% / 46px 44px repeat-x,
        radial-gradient(circle at 50% 100%, var(--s-fondo) 0 14px, transparent 15px) 23px 100% / 46px 30px repeat-x,
        linear-gradient(var(--s-fondo), var(--s-fondo)) 0 100% / 100% 10px no-repeat;
    pointer-events: none;
}

@media (max-width: 599.98px) {
    .es-portada__visual { width: min(100%, 340px); padding: 18px 18px 54px; }
    .es-pompa--1 { width: 48px; height: 48px; }
    .es-pompa--2 { top: 56px; width: 24px; height: 24px; }
    .es-pompa--3 { width: 30px; height: 30px; }
    .es-chispa { width: 28px; height: 28px; }
    .es-entrada { max-width: 76%; padding: 8px 34px 9px 14px; }
    .es-entrada strong { font-size: 1.15rem; }
    .es-entrada span { font-size: .72rem; }
    .es-entrada span:last-child { font-size: .8rem; }
    .es-burbuja--2,
    .es-burbuja--3 { display: none; }
    .es-espuma { height: 34px; background-size: 36px 34px, 36px 24px, 100% 8px; background-position: 0 100%, 18px 100%, 0 100%; }
}

/* ---------- Secciones ---------- */
.diseno-espuma .seccion { padding-block: clamp(56px, 7vw, 92px); }

.diseno-espuma .seccion h2 {
    color: var(--es-tinta);
    font-size: clamp(2rem, 1.35rem + 2.1vw, 2.9rem);
    line-height: 1.1;
}

/* Tres burbujas sobre cada título */
.diseno-espuma .seccion h2::before,
.es-cabeza::before {
    content: "";
    display: block;
    width: 62px;
    height: 26px;
    margin-bottom: 12px;
    background:
        radial-gradient(circle at 34% 30%, rgba(255, 255, 255, .9) 0 2px, transparent 2.5px) 0 2px / 24px 24px no-repeat,
        radial-gradient(circle, var(--es-principal) 0 11px, transparent 11.5px) 0 2px / 24px 24px no-repeat,
        radial-gradient(circle, var(--es-agua) 0 7.5px, transparent 8px) 26px 8px / 16px 16px no-repeat,
        radial-gradient(circle, var(--c-acento) 0 5px, transparent 5.5px) 46px 0 / 11px 11px no-repeat;
}
.es-cabeza { margin-bottom: 26px; }
.es-cabeza h2 { margin: 0 !important; }
/* En las secciones propias las burbujas van arriba de todo (sobre el antetítulo) */
.diseno-espuma .es-cabeza h2::before { content: none; }

.es-antetitulo {
    margin: 0 0 8px;
    color: var(--es-principal);
    font-size: .84rem;
    font-weight: 800;
    letter-spacing: .16em;
    line-height: 1.3;
    text-transform: uppercase;
}

/* ---------- Servicios: paquetes de lavado ---------- */
.diseno-espuma .catalogo__indice a {
    border: 2px solid color-mix(in srgb, var(--es-tinta) 18%, transparent);
    border-radius: 999px;
    background: var(--es-blanco);
    color: var(--es-tinta);
    font-weight: 700;
    white-space: nowrap;
}
.diseno-espuma .catalogo__indice a:hover { border-color: var(--es-principal); background: var(--es-blanco); color: var(--es-principal); }

.es-grupo + .es-grupo { margin-top: 54px; }

.es-grupo__nombre {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 6px;
    color: var(--es-tinta);
    font-size: clamp(1.5rem, 1.25rem + .8vw, 1.9rem);
}
.es-grupo__nombre .icono {
    flex: none;
    width: 42px;
    height: 42px;
    padding: 8px;
    border-radius: 50%;
    background: var(--es-agua-suave);
    color: var(--es-principal);
    box-sizing: border-box;
}
.es-grupo__descripcion { max-width: 64ch; margin: 0 0 12px; color: var(--es-tinta-suave); }

.es-paquetes {
    display: grid;
    gap: 30px;
    margin: 22px 0 0;
    padding: 8px 0 0;
    list-style: none;
}
@media (min-width: 640px) {
    .es-paquetes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 26px; }
}
@media (min-width: 1000px) {
    .es-paquetes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.es-paquete {
    position: relative;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--es-borde);
    border-radius: 22px;
    background: var(--es-blanco);
    box-shadow: var(--es-sombra);
    color: var(--es-tinta);
}
.es-paquete--destacado { border-color: transparent; box-shadow: 0 0 0 3px var(--c-acento), var(--es-sombra); }

/* La franja de arriba con burbujas, el dibujo y el nombre */
.es-paquete__cabeza {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 74px;
    padding: 16px 20px;
    border-radius: 21px 21px 0 0;
    background:
        radial-gradient(circle at 90% 26%, rgba(255, 255, 255, .2) 0 13px, transparent 14px),
        radial-gradient(circle at 79% 74%, rgba(255, 255, 255, .16) 0 8px, transparent 9px),
        radial-gradient(circle at 96% 82%, rgba(255, 255, 255, .14) 0 5px, transparent 6px),
        linear-gradient(135deg, var(--es-principal), color-mix(in srgb, var(--es-principal) 72%, #000));
    background-color: var(--es-principal);   /* debajo del degradado: el color que cuenta para el contraste */
    color: #FFFFFF;
    box-sizing: border-box;
}
.es-paquete--destacado .es-paquete__cabeza { padding-right: 112px; }
.es-paquete__icono {
    flex: none;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .18);
}
.es-paquete__icono .icono { width: 22px; height: 22px; }
.es-paquete__nombre { margin: 0; color: #FFFFFF; font-size: 1.4rem; line-height: 1.12; overflow-wrap: anywhere; }

/* «El favorito»: una calcomanía del acento con su estrella */
.es-paquete__sello {
    position: absolute;
    top: -12px;
    right: 14px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 13px 6px;
    border-radius: 999px;
    background: var(--c-acento);
    box-shadow: 0 8px 14px -8px rgba(15, 31, 46, .6);
    color: var(--c-sobre-acento);
    font-size: .74rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    rotate: 3deg;
}
.es-paquete__sello .icono { width: 14px; height: 14px; fill: currentColor; }

.es-paquete__foto {
    position: relative;
    margin: 14px 14px 0;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    border-radius: 14px;
    background: var(--es-agua-suave);
}
.es-paquete__foto img { width: 100%; height: 100%; object-fit: cover; }
/* Sin foto: el dibujo de su grupo entre burbujas */
.es-paquete__foto--dibujo {
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        radial-gradient(circle at 18% 30%, rgba(255, 255, 255, .9) 0 9px, transparent 10px),
        radial-gradient(circle at 80% 70%, rgba(255, 255, 255, .8) 0 14px, transparent 15px),
        radial-gradient(circle at 70% 22%, rgba(255, 255, 255, .7) 0 5px, transparent 6px),
        var(--es-agua-suave);
    color: var(--es-principal);
}
.es-paquete__foto--dibujo .icono { width: 28%; height: auto; aspect-ratio: 1; }

.es-paquete__cuerpo { flex: 1; padding: 14px 20px 0; }
.es-paquete__descripcion { margin: 0; color: var(--es-tinta-suave); font-size: .98rem; line-height: 1.5; }
.es-paquete__tiempo { display: inline-flex; align-items: center; gap: 6px; margin: 10px 0 0; font-size: .92rem; font-weight: 700; }
.es-paquete__tiempo .icono { width: 17px; height: 17px; color: var(--es-principal); }
.diseno-espuma .es-paquete .ficha-ver { margin-top: 10px; color: var(--es-principal); }

.es-paquete__pie {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    margin: 16px 20px 20px;
    padding-top: 14px;
    border-top: 2px dotted var(--es-borde-fuerte);
}

/* El precio grande, como en el letrero del autolavado */
.es-precio { display: flex; flex-direction: column; margin: 0; color: var(--es-tinta); line-height: 1.05; }
.es-precio small { color: var(--es-principal); font-size: .66rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.es-precio strong { font-family: var(--es-titulo); font-size: 2rem; font-weight: 400; letter-spacing: 0; white-space: nowrap; }
.es-precio .es-precio__unidad { margin-top: 3px; color: var(--es-tinta-suave); font-size: .8rem; font-weight: 600; letter-spacing: 0; text-transform: none; }
/* Sin precio: la nota */
.es-precio--sin strong,
.es-precio .es-precio__sin { font-family: var(--es-letra); font-size: 1rem; font-weight: 800; white-space: normal; }

.es-agendar {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 11px 18px;
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, 0) 55%), var(--es-principal);
    box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .18);
    color: #FFFFFF;
    font-size: .9rem;
    font-weight: 800;
    text-decoration: none;
    white-space: nowrap;
}
.es-agendar .icono { width: 16px; height: 16px; }
.es-agendar:hover { filter: brightness(1.1); }

/* ---------- Galería: «Así quedan», recién lavados ---------- */
.es-relucientes {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px 16px;
    margin: 0;
    padding: 8px 0 0;
    list-style: none;
}
@media (min-width: 700px) {
    .es-relucientes { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 22px; }
}
@media (min-width: 960px) {
    .es-relucientes { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.galeria__mas > .es-relucientes { margin-top: 22px; }

.diseno-espuma .es-brillo__enlace {
    position: relative;
    display: block;
    padding: 6px;
    overflow: visible;
    border-radius: 22px;
    background: var(--es-blanco);
    box-shadow: var(--es-sombra);
    color: var(--es-tinta);
    text-decoration: none;
}
.diseno-espuma .es-brillo__enlace:focus-visible { outline: 3px solid var(--es-principal); outline-offset: 3px; }

.es-brillo__foto { position: relative; display: block; aspect-ratio: 1; overflow: hidden; border-radius: 17px; background: var(--es-agua-suave); }
.es-brillo__foto img { width: 100%; height: 100%; object-fit: cover; }
/* El brillo de recién lavado que cruza la foto */
.es-brillo__foto::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(118deg, transparent 30%, rgba(255, 255, 255, .3) 37%, rgba(255, 255, 255, .08) 43%, transparent 47%);
    transition: translate .5s ease;
    pointer-events: none;
}
.es-brillo__enlace:hover .es-brillo__foto::after { translate: 22% 0; }

.es-brillo__pie {
    display: block;
    min-height: calc(1.3em + 12px);   /* con o sin pie, todas del mismo alto (cuenta el relleno) */
    padding: 8px 6px 4px;
    overflow: hidden;
    font-size: .88rem;
    font-weight: 700;
    line-height: 1.3;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
    .es-brillo__foto::after { transition: none; }
    .es-brillo__enlace:hover .es-brillo__foto::after { translate: none; }
}

@media (max-width: 599.98px) {
    .diseno-espuma .es-brillo__enlace { padding: 5px; border-radius: 18px; }
    .es-brillo__foto { border-radius: 14px; }
    .es-brillo__pie { font-size: .8rem; }
}

.diseno-espuma .galeria__ver-mas { border-radius: 999px; }

/* ---------- Lo demás: tarjetas blancas redondas ---------- */
.diseno-espuma .testimonio,
.diseno-espuma .promocion,
.diseno-espuma .pregunta,
.diseno-espuma .contacto__item,
.diseno-espuma .sucursal,
.diseno-espuma .especial__punto,
.diseno-espuma .persona,
.diseno-espuma .servicio,
.diseno-espuma .destacado-tarjeta { border-color: var(--es-borde); border-radius: 18px; box-shadow: var(--es-sombra); }
.diseno-espuma .promocion__foto { border-radius: 18px 18px 0 0; }
.diseno-espuma .promocion__hoy { background: var(--c-acento); color: var(--c-sobre-acento); }
.diseno-espuma .testimonio__texto { font-size: 1.05rem; line-height: 1.6; }
.diseno-espuma .testimonio > .icono { color: var(--es-principal); opacity: .25; }
.diseno-espuma .testimonio__iniciales,
.diseno-espuma .contacto__icono,
.diseno-espuma .especial__marca,
.diseno-espuma .persona__foto--iniciales,
.diseno-espuma .pregunta__signo { border-radius: 50%; background: var(--es-agua-suave); color: var(--es-principal); }
.diseno-espuma .nosotros__foto img { border: 8px solid #fff; border-radius: 22px; box-shadow: var(--es-sombra); }
.diseno-espuma .nosotros__desde { border: 1px solid var(--es-borde); border-radius: 999px; background: var(--es-blanco); color: var(--es-tinta); }
.diseno-espuma .nosotros__desde strong,
.diseno-espuma .nosotros__desde .icono { color: var(--es-principal); }
.diseno-espuma .mapa { border: 6px solid #fff; border-radius: 18px; box-shadow: var(--es-sombra); }

/* El horario en una tabla blanca redonda, con el día de hoy marcado */
.diseno-espuma .horario__tabla { overflow: hidden; border: 1px solid var(--es-borde); border-collapse: separate; border-spacing: 0; border-radius: 18px; background: var(--es-blanco); box-shadow: var(--es-sombra); }
.diseno-espuma .horario__tabla th,
.diseno-espuma .horario__tabla td { padding-inline: 18px; border-bottom-color: var(--es-borde); }
.diseno-espuma .horario__tabla td { font-weight: 700; font-variant-numeric: tabular-nums; }
.diseno-espuma .horario__tabla tr:last-child th,
.diseno-espuma .horario__tabla tr:last-child td { border-bottom: 0; }
.diseno-espuma .horario__hoy th,
.diseno-espuma .horario__hoy td { background: var(--es-agua-suave); }
.diseno-espuma .horario__hoy th { box-shadow: inset 4px 0 0 var(--es-principal); }
.diseno-espuma .horario__etiqueta { border-radius: 999px; background: var(--es-principal); color: #FFFFFF; }

/* ---------- Pie con su orilla de burbujas y barra del celular ---------- */
.diseno-espuma .pie { position: relative; border-top: 0; background: var(--es-tinta); color: rgba(240, 248, 252, .86); }
.diseno-espuma .pie::before {
    content: "";
    position: absolute;
    top: -17px;
    right: 0;
    left: 0;
    height: 18px;
    background: radial-gradient(circle at 50% 100%, var(--es-tinta) 0 13px, transparent 13.5px) 0 0 / 30px 18px repeat-x;
    pointer-events: none;
}
.diseno-espuma .barra-acciones { background: color-mix(in srgb, var(--es-blanco) 95%, transparent); backdrop-filter: blur(10px); }
.diseno-espuma .barra-acciones__boton--principal { border-radius: 999px; font-weight: 800; }