:root {
    --naranja: #f0812a;
    /* naranja-oscuro se oscureció de #d66c1a a #ad530d para cumplir contraste
       AA (4.5:1) como texto sobre blanco — el tono anterior fallaba (3.49:1). */
    --naranja-oscuro: #ad530d;
    --azul-burbuja: #bdeaea;
    --azul-burbuja-claro: #eaf9f9;
    --turquesa: #2fb8b8;
    /* turquesa-oscuro se oscureció de #1f8f8f a #187373 por la misma razón:
       el tono anterior no alcanzaba 4.5:1 como texto sobre blanco. */
    --turquesa-oscuro: #187373;
    --turquesa-mate: #4a8f8a;
    --naranja-mate: #c68a52;
    --oscuro: #17322d;
    --oscuro-claro: #1f4740;
    --texto: #2c2622;
    --texto-suave: #665f59;
    --fondo: #ffffff;
    --fondo-alterno: #fdf9f5;
    --borde: #ece4dc;
    --exito: #2f8f4e;
    --radio: 14px;
}

/* Tipografía de los títulos: Fredoka, gruesa y redondeada — nada de
   cursiva, para que se vea bold y directa como en la referencia. */
:root {
    --font-titulo: 'Fredoka', 'Segoe UI', sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    color: var(--texto);
    background: var(--fondo);
    line-height: 1.55;
}

/* Aparición suave de secciones al hacer scroll (ver footer.php) */
.reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal.visible { opacity: 1; transform: none; }

a { color: var(--naranja-oscuro); text-decoration: none; }
a:hover { text-decoration: underline; }

img { max-width: 100%; display: block; }

/* Íconos de línea (ver includes/iconos.php) — reemplazan a los emojis */
.icono-svg {
    display: inline-block;
    vertical-align: middle;
    flex-shrink: 0;
}
.icono-inline {
    vertical-align: -4px;
    margin-right: 2px;
}

.contenedor {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 20px;
}

/* ---------- Barra superior, oscura, con el WhatsApp a la vista ---------- */
.barra-superior {
    background: var(--oscuro);
    color: rgba(255,255,255,0.9);
    text-align: center;
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    padding: 7px 20px;
}
.barra-superior a { color: #fff; }
.barra-superior a:hover { text-decoration: underline; }

/* ---------- Header ---------- */
.sitio-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(255,255,255,0.96);
    border-bottom: 1px solid var(--borde);
    backdrop-filter: blur(4px);
}

/* Barra de navegación con el logo grande a la izquierda y los links +
   botón de WhatsApp agrupados a la derecha. En móvil, el logo se queda a
   la izquierda, el botón de hamburguesa a la derecha, y los links se
   despliegan debajo con el truco del checkbox (#nav-toggle). */
.barra-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    column-gap: 24px;
    padding: 6px 20px;
}

.logo-link { display: flex; align-items: center; gap: 8px; }
.logo-link img { height: 84px; width: auto; }

.nav-links {
    display: flex;
    align-items: center;
    gap: 22px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.nav-links a {
    color: var(--texto);
    font-weight: 600;
    font-size: 0.95rem;
    transition: color 0.2s ease;
}
.nav-links a:hover { color: var(--naranja-oscuro); text-decoration: none; }

.btn-cita-nav {
    background: #25d366;
    color: #fff !important;
    padding: 9px 18px;
    border-radius: 999px;
    font-weight: 700;
}
.btn-cita-nav:hover { background: #1ebe5b; }

/* Antes era "display:none", lo que también lo sacaba del orden de
   tabulación y hacía imposible abrir el menú móvil solo con teclado.
   Con este patrón "visualmente oculto" sigue enfocable con Tab, y la
   barra espaciadora lo activa de forma nativa (es un checkbox real). */
.nav-toggle {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
.nav-toggle:focus-visible ~ .nav-toggle-label {
    outline: 3px solid var(--turquesa-oscuro);
    outline-offset: 2px;
    border-radius: 6px;
}
.nav-toggle-label {
    display: none;
    cursor: pointer;
    font-size: 1.6rem;
    padding: 4px 10px;
}

@media (max-width: 780px) {
    .barra-nav { flex-wrap: wrap; }
    .logo-link img { height: 56px; }
    .nav-toggle-label { display: block; }
    .nav-links {
        flex: 0 0 100%;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        background: #fff;
        max-height: 0;
        overflow: hidden;
        border-top: 1px solid var(--borde);
        transition: max-height 0.25s ease;
    }
    .nav-links li { border-top: 1px solid var(--borde); }
    .nav-links li:first-child { border-top: none; }
    .nav-links a { display: block; padding: 14px 20px; }
    .nav-toggle:checked ~ .nav-links { max-height: 300px; }
}

/* ---------- Hero: tarjeta contenida en tono claro, como la referencia ---------- */
.hero { padding: 36px 0 56px; }
.hero-card {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, var(--azul-burbuja-claro) 0%, #eef9f7 100%);
    border-radius: 32px;
    padding: 56px 54px;
}
.hero-grid {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 46px;
    align-items: center;
}
@media (max-width: 780px) {
    .hero-card { padding: 40px 26px; border-radius: 24px; }
    .hero-grid { grid-template-columns: 1fr; text-align: center; gap: 34px; }
}

.hero-titulo-grande {
    font-family: var(--font-titulo);
    font-weight: 700;
    font-size: clamp(2.5rem, 5.5vw, 3.6rem);
    line-height: 1.18;
    margin: 0 0 16px;
    display: flex;
    flex-direction: column;
}
/* Usan las variantes "oscuro" (no las bases --turquesa/--naranja) porque
   esas bases no cumplen el contraste mínimo de accesibilidad como texto. */
.hero-h1-color { color: var(--turquesa-oscuro); }
.texto-acento { color: var(--naranja-oscuro); }
.hero-titulo-marca {
    font-size: clamp(1.1rem, 2vw, 1.4rem);
    letter-spacing: 0.02em;
    margin-bottom: 4px;
}
.hero p.subtitulo {
    color: var(--texto-suave);
    font-size: 1.1rem;
    margin: 0 0 26px;
}
.hero-acciones { display: flex; gap: 14px; flex-wrap: wrap; }
@media (max-width: 780px) { .hero-acciones { justify-content: center; } }

/* Foto del hero: cuadrada, con un marco oscuro detrás y unos puntitos y
   un garabato decorativo, tal como en la referencia. */
.hero-foto-wrap {
    position: relative;
    max-width: 330px;
    margin: 0 auto;
}
.hero-marco-oscuro {
    position: absolute;
    inset: 9% -8% -8% 9%;
    background: var(--oscuro);
    border-radius: 30px;
    transform: rotate(-4deg);
    z-index: 0;
}
.hero-puntitos {
    position: absolute;
    left: -18px;
    top: 12%;
    width: 64px;
    height: 64px;
    background-image: radial-gradient(var(--naranja) 2.2px, transparent 2.5px);
    background-size: 13px 13px;
    opacity: 0.6;
    z-index: 2;
}
.hero-garabato {
    position: absolute;
    top: -16px;
    right: 8%;
    z-index: 2;
    color: var(--turquesa-mate);
}
.hero-foto {
    position: relative;
    z-index: 1;
    width: 100%;
    aspect-ratio: 1 / 1.05;
    object-fit: cover;
    border-radius: 24px;
    display: block;
    box-shadow: 0 20px 40px rgba(44,38,34,0.18);
}
.hero-foto-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 4.5rem;
    background: linear-gradient(135deg, var(--azul-burbuja-claro), #fff3e6);
}
.hero-foto-credito {
    position: relative;
    z-index: 1;
    font-size: 0.75rem;
    color: var(--texto-suave);
    margin: 10px 0 0;
    text-align: center;
}

/* Burbujas decorativas, sutiles, repartidas por las secciones del inicio.
   No estorban: no reciben clics y su color es muy tenue. */
.burbuja-decorativa {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
    animation: enolav-burbuja-flotar-lenta 9s ease-in-out infinite;
}
.burbuja-decorativa.naranja { background: rgba(240,129,42,0.13); }
.burbuja-decorativa.turquesa { background: rgba(93,199,199,0.28); }

@keyframes enolav-burbuja-flotar-lenta {
    0%, 100% { transform: translate(0,0); }
    50%      { transform: translate(8px, -16px); }
}

@media (prefers-reduced-motion: reduce) {
    .hero-foto-card::before,
    .hero-foto-lavadora,
    .hero-puerta-brillo::before,
    .hero-chip-lavando .spinner,
    .burbuja-foto,
    .burbuja-decorativa,
    .hero-marca-texto,
    .hero-marca-burbuja,
    .reveal {
        animation: none;
        transition: none;
        opacity: 1;
        transform: none;
    }
}

/* ---------- Franja de confianza (debajo del hero) ---------- */
.franja-confianza {
    position: relative;
    overflow: hidden;
    background: var(--fondo-alterno);
    border-top: 1px solid var(--borde);
    border-bottom: 1px solid var(--borde);
    padding: 22px 0;
}
.franja-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 18px;
}
.franja-item {
    display: flex;
    align-items: center;
    gap: 12px;
    justify-content: center;
}
.franja-icono {
    display: inline-flex;
    width: 40px;
    height: 40px;
    align-items: center;
    justify-content: center;
    background: #fff;
    border-radius: 50%;
    color: var(--naranja-oscuro);
    flex-shrink: 0;
}
.franja-item strong { display: block; font-size: 0.95rem; }
.franja-item span { display: block; color: var(--texto-suave); font-size: 0.85rem; }

/* ---------- Botones ---------- */
.btn {
    display: inline-block;
    padding: 13px 26px;
    border-radius: 999px;
    font-weight: 700;
    border: 2px solid transparent;
    cursor: pointer;
    font-size: 1rem;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 10px 20px rgba(44,38,34,0.15); }
.btn:active { transform: translateY(0); box-shadow: none; }

.btn-primario {
    background: var(--naranja);
    color: #fff !important;
}
.btn-primario:hover { background: var(--naranja-oscuro); text-decoration: none; }

.btn-secundario {
    background: transparent;
    border-color: var(--naranja);
    color: var(--naranja-oscuro) !important;
}
.btn-secundario:hover { background: var(--azul-burbuja-claro); text-decoration: none; }

.btn-whatsapp {
    background: #25d366;
    color: #fff !important;
}
.btn-whatsapp:hover { background: #1ebe5b; text-decoration: none; }

/* ---------- Secciones genéricas ---------- */
.seccion { padding: 56px 0; position: relative; overflow: hidden; }
.seccion.alterna { background: var(--fondo-alterno); }
.seccion h2 {
    font-family: var(--font-titulo);
    font-weight: 700;
    font-size: clamp(2.1rem, 4.2vw, 2.6rem);
    text-align: center;
    margin: 0 0 8px;
}
.seccion .intro {
    text-align: center;
    color: var(--texto-suave);
    max-width: 640px;
    margin: 0 auto 36px;
}

/* ---------- Por qué elegir enolav ---------- */
.compromiso-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 34px;
}
.compromiso-icono {
    display: inline-flex;
    margin-bottom: 14px;
}
.compromiso-item:nth-child(3n+1) .compromiso-icono { color: var(--turquesa-mate); }
.compromiso-item:nth-child(3n+2) .compromiso-icono { color: var(--naranja-mate); }
.compromiso-item:nth-child(3n+3) .compromiso-icono { color: var(--turquesa-mate); }
.compromiso-linea {
    display: block;
    width: 42px;
    height: 3px;
    border-radius: 2px;
    background: var(--borde);
    margin-bottom: 16px;
}
.compromiso-item h3 { margin: 0 0 8px; font-size: 1.12rem; }
.compromiso-item p { margin: 0; color: var(--texto-suave); font-size: 0.92rem; line-height: 1.6; }
@media (max-width: 780px) {
    .compromiso-grid { grid-template-columns: 1fr; text-align: center; gap: 30px; }
    .compromiso-icono { margin-left: auto; margin-right: auto; }
    .compromiso-linea { margin-left: auto; margin-right: auto; }
}

/* ---------- Ubicaciones ---------- */
.tarjetas {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 22px;
}
.tarjeta {
    background: #fff;
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    padding: 24px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.tarjeta:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 30px rgba(44,38,34,0.08);
}
.tarjeta h3 { margin-top: 0; }
.tarjeta .icono-bolita {
    display: inline-flex;
    width: 36px; height: 36px;
    align-items: center; justify-content: center;
    background: var(--azul-burbuja-claro);
    color: var(--naranja-oscuro);
    border-radius: 50%;
    margin-bottom: 10px;
}
.tarjeta-mapa {
    width: 100%;
    aspect-ratio: 4 / 3;
    border-radius: 10px;
    overflow: hidden;
    margin-top: 14px;
    border: 1px solid var(--borde);
}
.tarjeta-mapa iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}
/* ---------- Horario ---------- */
.horario-box {
    display: flex;
    align-items: center;
    gap: 16px;
    background: var(--azul-burbuja-claro);
    border-radius: var(--radio);
    padding: 22px 26px;
    max-width: 520px;
    margin: 0 auto;
}
.horario-box strong { font-size: 1.1rem; }

/* ---------- Precios ---------- */
.texto-destacado {
    margin: 0;
    font-size: 1.02rem;
}

/* Título con flechas decorativas a la derecha, como en la referencia
   (se usa en "Nuestros servicios" y podría reutilizarse en más secciones). */
.titulo-con-flechas {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 30px;
}
.titulo-con-flechas h2, .titulo-con-flechas .intro { text-align: left; margin: 0; }
.titulo-con-flechas .intro { margin-top: 8px; }
.flechas-decorativas { display: flex; gap: 10px; flex-shrink: 0; }
.flecha-circulo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 1px solid var(--borde);
    color: var(--texto-suave);
    font-size: 1.3rem;
    line-height: 1;
}
.flecha-circulo.activa { background: var(--turquesa-mate); border-color: var(--turquesa-mate); color: #fff; }
@media (max-width: 780px) {
    .titulo-con-flechas { flex-direction: column; align-items: center; text-align: center; }
    .titulo-con-flechas h2, .titulo-con-flechas .intro { text-align: center; }
}

/* Mini-adelanto de precios en la página de inicio, con foto (el detalle completo vive en precios.php) */
.servicios-preview-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 22px;
    margin-bottom: 34px;
}
.servicio-preview {
    background: #fff;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 12px 26px rgba(44,38,34,0.08);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.servicio-preview:hover { transform: translateY(-4px); box-shadow: 0 18px 34px rgba(44,38,34,0.13); }
.servicio-preview-foto { position: relative; aspect-ratio: 16/10.5; overflow: hidden; }
.servicio-preview-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.servicio-preview-cuerpo { padding: 18px 20px 22px; }
.servicio-preview-cuerpo h3 { margin: 0 0 6px; font-size: 1.05rem; }
.servicio-preview-cuerpo p { margin: 0 0 10px; color: var(--texto-suave); font-size: 0.9rem; }
.servicio-preview-cuerpo a { font-weight: 700; font-size: 0.88rem; color: var(--naranja-oscuro); }
.servicio-preview:nth-child(2n) .servicio-preview-cuerpo a { color: var(--turquesa-oscuro); }

/* Promoción de la cuponera, estilo "trato VIP" */
.promo-vip {
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    gap: 40px;
    align-items: center;
    background: var(--fondo-alterno);
    border-radius: 22px;
    padding: 30px;
}
.promo-vip-foto { border-radius: 16px; overflow: hidden; aspect-ratio: 4/5; }
.promo-vip-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.promo-vip h3 { margin: 0 0 10px; font-size: 1.6rem; font-family: var(--font-titulo); font-weight: 700; }
.promo-vip p { margin: 0 0 18px; color: var(--texto-suave); }

/* Botón oscuro reutilizable (enlaces y <button>, como el CTA de VIP y el del
   formulario de contacto). */
.btn-oscuro {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--oscuro);
    color: #fff !important;
    border: none;
    padding: 12px 26px;
    border-radius: 999px;
    font-weight: 700;
    font-size: 0.92rem;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.2s ease;
}
.btn-oscuro:hover { background: var(--oscuro-claro); text-decoration: none; }
@media (max-width: 780px) {
    .promo-vip { grid-template-columns: 1fr; text-align: center; }
    .promo-vip-foto { max-width: 320px; margin: 0 auto; }
}

/* =====================================================================
   PÁGINA DE PRECIOS — diseño destacado, propio de precios.php
   ===================================================================== */

/* ---------- Banner superior, tono claro y elegante, con corte diagonal ---------- */
.precios-banner {
    position: relative;
    overflow: hidden;
    text-align: center;
    color: var(--texto);
    padding: 64px 0 100px;
    background: linear-gradient(120deg, var(--fondo-alterno) 0%, #f4ece0 50%, #edf5f3 100%);
    clip-path: polygon(0 0, 100% 0, 100% 87%, 0 100%);
}
.precios-banner-inner { position: relative; z-index: 1; }
.precios-banner-etiqueta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: transparent;
    border: 1.5px solid var(--naranja-oscuro);
    color: var(--naranja-oscuro);
    padding: 6px 16px;
    border-radius: 999px;
    font-weight: 700;
    font-size: 0.78rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom: 20px;
}
.precios-banner h1 {
    font-family: var(--font-titulo);
    font-weight: 700;
    font-size: clamp(2.5rem, 5.5vw, 3.4rem);
    line-height: 1.15;
    margin: 0 0 16px;
    color: var(--texto);
}
.precios-banner p {
    max-width: 540px;
    margin: 0 auto;
    color: var(--texto-suave);
    font-size: 1.05rem;
}
.burbuja-decorativa.clara { background: rgba(74,143,138,0.14); }

/* ---------- Barra de categorías, "flotando" sobre el corte del banner ---------- */
.precios-chips-wrap {
    position: relative;
    z-index: 2;
    margin-top: -54px;
    margin-bottom: 10px;
}
.precios-chips {
    background: #fff;
    border-radius: 999px;
    box-shadow: 0 16px 34px rgba(44,38,34,0.18);
    padding: 10px;
    display: flex;
    gap: 8px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.precios-chips::-webkit-scrollbar { height: 6px; }
.precios-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    padding: 10px 18px;
    border-radius: 999px;
    font-weight: 700;
    font-size: 0.85rem;
    color: var(--texto);
    background: var(--fondo-alterno);
    transition: background 0.2s ease, color 0.2s ease, transform 0.15s ease;
}
.precios-chip:hover {
    background: var(--naranja-oscuro);
    color: #fff !important;
    text-decoration: none;
    transform: translateY(-2px);
}

/* ---------- Tarjetas "boleto" por categoría ---------- */
.precios-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
    gap: 30px;
    margin: 10px 0 44px;
}
.ticket-precio {
    scroll-margin-top: 110px;
    position: relative;
    background: #fff;
    border-radius: 18px;
    border: 1px solid var(--borde);
    border-top: 3px solid transparent;
    box-shadow: 0 10px 26px rgba(44,38,34,0.07);
    overflow: hidden;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.ticket-precio:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 40px rgba(44,38,34,0.14);
}
.ticket-precio.naranja { border-top-color: var(--naranja-mate); }
.ticket-precio.turquesa { border-top-color: var(--turquesa-mate); }
.ticket-precio-header {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 26px 26px 20px;
    border-bottom: 1px solid var(--borde);
}
.ticket-precio-header span:last-child {
    font-family: var(--font-titulo);
    font-weight: 700;
    font-size: 1.12rem;
    letter-spacing: 0.01em;
    color: var(--texto);
}
.ticket-precio.naranja .ticket-precio-icono {
    background: rgba(198,138,82,0.13);
    color: var(--naranja-mate);
}
.ticket-precio.turquesa .ticket-precio-icono {
    background: rgba(74,143,138,0.13);
    color: var(--turquesa-mate);
}
.ticket-precio-icono {
    display: inline-flex;
    width: 46px;
    height: 46px;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}
.ticket-precio-cuerpo { padding: 6px 26px 22px; }
.ticket-precio-fila {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 12px 0;
    border-bottom: 1px solid var(--fondo-alterno);
}
.ticket-precio-fila:last-child { border-bottom: none; }
.ticket-precio-fila .fila-desc { color: var(--texto); font-size: 0.95rem; }
.ticket-precio-fila .fila-lider {
    flex: 1;
    min-width: 10px;
    border-bottom: 1px dotted var(--borde);
    margin-bottom: 4px;
}
.ticket-precio-fila .fila-precio {
    font-family: var(--font-titulo);
    font-weight: 700;
    white-space: nowrap;
    font-size: 1.05rem;
    color: var(--naranja-oscuro);
}
.ticket-precio.turquesa .fila-precio { color: var(--turquesa-oscuro); }

/* ---------- Tarjetas destacadas: entrega a domicilio y cuponera ---------- */
.destacados-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
    margin-bottom: 10px;
}
.destacado-precio {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    background: #fff;
    border: 1px solid var(--borde);
    clip-path: polygon(0 0, 100% 0, 100% 88%, 92% 100%, 0 100%);
    padding: 34px 30px;
    color: var(--texto);
    box-shadow: 0 14px 30px rgba(44,38,34,0.07);
}
.destacado-precio.naranja { border-top: 4px solid var(--naranja-mate); }
.destacado-precio.turquesa { border-top: 4px solid var(--turquesa-mate); }
.destacado-precio > * { position: relative; z-index: 1; }
.destacado-precio-icono {
    display: inline-flex;
    width: 50px;
    height: 50px;
    align-items: center;
    justify-content: center;
    background: var(--fondo-alterno);
    border-radius: 50%;
    margin-bottom: 16px;
}
.destacado-precio.naranja .destacado-precio-icono { color: var(--naranja-mate); }
.destacado-precio.turquesa .destacado-precio-icono { color: var(--turquesa-mate); }
.destacado-precio h3 { margin: 0 0 8px; font-size: 1.18rem; color: var(--texto); }
.destacado-precio p { margin: 0; color: var(--texto-suave); }
.destacado-ribbon {
    position: absolute;
    top: 16px;
    right: -36px;
    z-index: 2;
    background: var(--turquesa-oscuro);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 5px 42px;
    transform: rotate(40deg);
    box-shadow: 0 4px 10px rgba(0,0,0,0.14);
}
.destacado-precio .cuponera-premios { margin-top: 16px; }
.destacado-precio .cuponera-premio {
    background: var(--fondo-alterno);
    border-color: var(--borde);
    color: var(--texto);
}

/* ---------- Panel de contacto, a color, con puntitos decorativos ---------- */
.panel-contacto {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    background: linear-gradient(135deg, var(--turquesa-mate) 0%, var(--turquesa-oscuro) 100%);
    clip-path: polygon(0 0, 96% 0, 100% 14%, 100% 100%, 0 100%);
    padding: 54px 30px;
    text-align: center;
    color: #fff;
}
.panel-contacto::before, .panel-contacto::after {
    content: "";
    position: absolute;
    z-index: 0;
    width: 100px;
    height: 100px;
    background-image: radial-gradient(rgba(255,255,255,0.4) 2.4px, transparent 2.8px);
    background-size: 16px 16px;
    pointer-events: none;
}
.panel-contacto::before { top: -14px; left: -14px; }
.panel-contacto::after { bottom: -14px; right: -14px; }
.panel-contacto > * { position: relative; z-index: 1; }
.panel-contacto h2, .panel-contacto p, .panel-contacto .intro { color: #fff; }
.panel-contacto .intro { color: rgba(255,255,255,0.92); }
.panel-contacto .btn-whatsapp { background: #fff; color: var(--turquesa-oscuro) !important; }
.panel-contacto .btn-whatsapp:hover { background: #eafaf8; }

/* Variante del panel de contacto con formulario visual (página de inicio):
   los campos arman un mensaje que se manda por WhatsApp al enviarlos —
   no se guarda nada en ningún lado. */
.panel-contacto-grid {
    display: grid;
    grid-template-columns: 0.8fr 1.2fr;
    gap: 40px;
    align-items: center;
    text-align: left;
}
.panel-contacto-intro h2, .panel-contacto-intro .intro { text-align: left; }
.form-fila-dos { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.campo-flotante { margin-bottom: 14px; }
.campo-flotante label {
    display: block;
    font-size: 0.8rem;
    font-weight: 700;
    margin-bottom: 5px;
    color: rgba(255,255,255,0.9);
}
.campo-flotante input, .campo-flotante textarea {
    width: 100%;
    border: none;
    border-radius: 10px;
    padding: 11px 14px;
    font-family: inherit;
    font-size: 0.92rem;
    background: rgba(255,255,255,0.95);
    color: var(--texto);
}
.campo-flotante textarea { resize: vertical; }
.check-consentimiento {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    cursor: pointer;
    margin: 2px 0 14px;
    font-size: 0.85rem;
    color: rgba(255,255,255,0.9);
    line-height: 1.4;
}
.check-consentimiento input {
    margin-top: 3px;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    accent-color: var(--oscuro);
}
.check-consentimiento a { color: #fff; text-decoration: underline; }
.form-contacto-enviar { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 4px; }
.form-contacto-enviar span { color: rgba(255,255,255,0.85); font-size: 0.88rem; }
.form-contacto-enviar span a { color: #fff; text-decoration: underline; }
@media (max-width: 860px) {
    .panel-contacto-grid { grid-template-columns: 1fr; text-align: center; }
    .panel-contacto-intro h2, .panel-contacto-intro .intro { text-align: center; }
    .form-fila-dos { grid-template-columns: 1fr; }
    .form-contacto-enviar { justify-content: center; }
}

@media (max-width: 600px) {
    .precios-banner { padding: 52px 0 96px; }
    .precios-chips-wrap { margin-top: -44px; }
}

/* ---------- Nosotros: misión / visión / por qué elegir / valores ----------
   Un solo degradado suave (turquesa mate → naranja mate) que se funde sin
   costura dura, cortado en diagonal — nada de bloques planos partidos a
   la mitad ni rayas de dos colores. Los títulos usan Fredoka en negritas
   (--font-titulo). Las cuadrículas usan columnas fijas que cierran parejo
   con la cantidad de elementos, para que nunca quede una fila a medias. */

.mv-grid {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    clip-path: polygon(0 0, 92% 0, 100% 9%, 100% 100%, 0 100%);
    margin-bottom: 30px;
    background: var(--borde);
    box-shadow: 0 16px 36px rgba(44,38,34,0.08);
    border-radius: 4px;
}
.mv-card {
    position: relative;
    background: #fff;
    padding: 48px 44px 52px;
}
.mv-card::before {
    content: "";
    position: absolute;
    top: 0; left: 0;
    width: 54px;
    height: 5px;
}
.mv-mision::before { background: var(--turquesa-mate); }
.mv-vision::before { background: var(--naranja-mate); }
.mv-icono {
    display: inline-flex;
    width: 42px;
    height: 42px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--fondo-alterno);
    margin-bottom: 16px;
}
.mv-mision .mv-icono { color: var(--turquesa-mate); }
.mv-vision .mv-icono { color: var(--naranja-mate); }
.mv-card h3 {
    margin: 0 0 12px;
    font-size: 1.6rem;
    font-weight: 700;
    font-family: var(--font-titulo);
    color: var(--texto);
}
.mv-card p {
    margin: 0;
    color: var(--texto-suave);
    line-height: 1.6;
    font-size: 1.02rem;
}

.nosotros-valores-titulo {
    text-align: center;
    font-size: 1.7rem;
    font-weight: 700;
    font-family: var(--font-titulo);
    margin: 0 0 18px;
    color: var(--texto);
}
.valores-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 13px;
}
.valor-chip {
    display: flex;
    align-items: center;
    gap: 11px;
    background: #fff;
    border: 1px solid var(--borde);
    border-radius: 4px 16px 4px 16px;
    padding: 14px 17px;
    color: var(--texto);
    font-weight: 600;
    font-size: 0.9rem;
    box-shadow: 0 8px 18px rgba(44,38,34,0.05);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.valor-chip:hover { transform: translateY(-3px); box-shadow: 0 14px 24px rgba(44,38,34,0.1); }
.valor-icono {
    display: inline-flex;
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #fff;
}
.valor-chip.turquesa .valor-icono { background: var(--turquesa-mate); }
.valor-chip.naranja .valor-icono { background: var(--naranja-mate); }

@media (max-width: 780px) {
    .mv-grid { grid-template-columns: 1fr; gap: 12px; clip-path: none; border-radius: 16px; background: transparent; }
    .mv-card { padding: 34px 26px 38px; border-radius: 16px; border: 1px solid var(--borde); }
    .valores-grid { grid-template-columns: 1fr; }
}

/* ---------- Misión y visión ---------- */
.mision-vision-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 22px;
}
.mision-vision-tarjeta {
    background: linear-gradient(160deg, var(--azul-burbuja-claro) 0%, #fff 60%);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    padding: 30px 28px;
}
.mision-vision-icono {
    display: inline-flex;
    width: 48px;
    height: 48px;
    align-items: center;
    justify-content: center;
    color: var(--naranja-oscuro);
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 4px 12px rgba(44,38,34,0.08);
    margin-bottom: 14px;
}
.mision-vision-tarjeta h3 {
    margin: 0 0 10px;
    color: var(--naranja-oscuro);
    font-size: 1.15rem;
}
.mision-vision-tarjeta p {
    margin: 0;
    color: var(--texto);
    line-height: 1.6;
}

/* ---------- Galería de fotos ----------
   Flex en vez de grid: así, aunque cambie la cantidad de fotos, la última
   fila (si queda incompleta) se centra en vez de dejar un hueco pegado
   a la izquierda. */
.galeria-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
}
.galeria-item {
    flex: 1 1 180px;
    max-width: 200px;
    border: none;
    padding: 0;
    margin: 0;
    background: none;
    cursor: zoom-in;
    border-radius: 14px;
    overflow: hidden;
    aspect-ratio: 4/3;
    box-shadow: 0 1px 3px rgba(44,38,34,0.08);
}
.galeria-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.35s ease;
}
.galeria-item:hover img { transform: scale(1.08); }

/* Cada sucursal tiene su propio bloque de fotos, con un pequeño
   encabezado (nombre + dirección) para que quede claro cuál es cuál. */
.galeria-sucursal { margin-bottom: 40px; }
.galeria-sucursal:last-child { margin-bottom: 0; }
.galeria-sucursal-titulo {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px 10px;
    font-family: var(--font-titulo);
    font-weight: 700;
    font-size: 1.2rem;
    color: var(--texto);
    margin: 0 0 16px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--borde);
}
.galeria-sucursal-titulo .icono-svg { color: var(--naranja-oscuro); flex-shrink: 0; }
.galeria-sucursal-direccion {
    font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    font-weight: 400;
    font-size: 0.85rem;
    color: var(--texto-suave);
}

.lightbox {
    position: fixed;
    inset: 0;
    background: rgba(20,16,14,0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
    padding: 30px;
}
.lightbox[hidden] { display: none; }
.lightbox img {
    max-width: 92vw;
    max-height: 88vh;
    border-radius: 10px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.5);
}
.lightbox-cerrar {
    position: absolute;
    top: 18px;
    right: 24px;
    background: rgba(255,255,255,0.15);
    color: #fff;
    border: none;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
}
.lightbox-cerrar:hover { background: rgba(255,255,255,0.28); }

/* ---------- Cuponera ---------- */
.cuponera-premios {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 14px;
}
.cuponera-premio {
    background: #fff;
    border: 1px dashed var(--naranja);
    color: var(--naranja-oscuro);
    font-weight: 700;
    font-size: 0.85rem;
    padding: 6px 12px;
    border-radius: 999px;
}

/* ---------- Lavadoras ---------- */
.producto {
    background: #fff;
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.producto:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 30px rgba(44,38,34,0.1);
}
.producto img { width: 100%; aspect-ratio: 4/3; object-fit: cover; background: var(--azul-burbuja-claro); }
.producto-cuerpo { padding: 18px 20px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.producto-cuerpo h3 { margin: 0; font-size: 1.05rem; }
.producto-cuerpo p { margin: 0; color: var(--texto-suave); font-size: 0.92rem; flex: 1; }
.producto-precio { font-size: 1.25rem; font-weight: 800; color: var(--naranja-oscuro); }
.etiqueta-ejemplo {
    display: inline-block;
    background: #fff3e6;
    color: var(--naranja-oscuro);
    font-size: 0.75rem;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: 999px;
    margin-bottom: 4px;
    width: fit-content;
}

/* ---------- Formulario de citas ---------- */
.form-cita {
    background: #fff;
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    padding: 30px;
    max-width: 620px;
    margin: 0 auto;
}
.campo { margin-bottom: 18px; }
.campo label { display: block; font-weight: 700; margin-bottom: 6px; font-size: 0.92rem; }
.campo input, .campo select, .campo textarea {
    width: 100%;
    padding: 11px 13px;
    border: 1px solid var(--borde);
    border-radius: 8px;
    font-size: 1rem;
    font-family: inherit;
}
.campo textarea { resize: vertical; min-height: 80px; }
.fila-dos { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 560px) { .fila-dos { grid-template-columns: 1fr; } }

.mensaje-exito {
    background: #eafbf0;
    border: 1px solid #b7e6c6;
    color: var(--exito);
    padding: 16px 20px;
    border-radius: 10px;
    margin-bottom: 20px;
    font-weight: 600;
}
.mensaje-error {
    background: #fff5f2;
    border: 1px solid #f0b199;
    color: #a3401b;
    padding: 16px 20px;
    border-radius: 10px;
    margin-bottom: 20px;
    font-weight: 600;
}

/* ---------- Footer ---------- */
.sitio-footer {
    position: relative;
    background: var(--oscuro);
    color: #e9e2da;
    padding: 40px 0 24px;
    margin-top: 40px;
}
.sitio-footer::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--naranja-mate), var(--turquesa-mate));
}
.sitio-footer a { color: #b9ded9; }
.footer-grid h4 { font-family: var(--font-titulo); font-weight: 700; font-size: 1.15rem; }
.footer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 24px;
    margin-bottom: 24px;
}
.footer-grid h4 { margin: 0 0 10px; color: #fff; }
.footer-grid p, .footer-grid a { display: block; font-size: 0.92rem; color: #cfc6bc; margin-bottom: 4px; }
.footer-redes {
    display: flex;
    gap: 10px;
    margin-top: 4px;
}
.footer-red-icono {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(255,255,255,0.08);
    color: #e9e2da;
    transition: background 0.2s ease, color 0.2s ease, transform 0.15s ease;
}
.footer-red-icono:hover {
    background: var(--naranja);
    color: #fff;
    text-decoration: none;
    transform: translateY(-2px);
}
.footer-copy {
    text-align: center;
    font-size: 0.82rem;
    color: #a89d90;
    border-top: 1px solid #453d36;
    padding-top: 18px;
}
.footer-legal-links {
    display: block;
    margin-top: 8px;
}
.footer-legal-links a { color: #a89d90; }
.footer-legal-links a:hover { color: #fff; }

/* ---------- Botón flotante de WhatsApp ---------- */
.whatsapp-flotante {
    position: fixed;
    bottom: 22px;
    right: 22px;
    background: #25d366;
    color: #fff;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 16px rgba(0,0,0,0.25);
    z-index: 60;
    font-size: 1.6rem;
}
.whatsapp-flotante:hover { text-decoration: none; background: #1ebe5b; }

/* ---------- Admin ---------- */
.admin-caja {
    max-width: 420px;
    margin: 80px auto;
    background: #fff;
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    padding: 30px;
}
.admin-tabla { width: 100%; border-collapse: collapse; background: #fff; }
.admin-tabla th, .admin-tabla td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--borde);
    text-align: left;
    font-size: 0.92rem;
}
.admin-tabla th { background: var(--fondo-alterno); }
.estado-pill {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 700;
}
.estado-pendiente { background: #fff3e6; color: var(--naranja-oscuro); }
.estado-confirmada { background: #e6f3ff; color: #1a5fb0; }
.estado-atendida { background: #eafbf0; color: var(--exito); }
.estado-cancelada { background: #fdeaea; color: #b02a2a; }

/* ---------- Páginas legales (aviso de privacidad, términos, cookies) ---------- */
.legal-contenido {
    max-width: 760px;
    margin: 0 auto;
}
.legal-actualizado {
    color: var(--texto-suave);
    font-size: 0.9rem;
    margin: -6px 0 28px;
}
.legal-aviso-caja {
    background: var(--fondo-alterno);
    border: 1px solid var(--borde);
    border-left: 4px solid var(--naranja-mate);
    border-radius: 10px;
    padding: 16px 20px;
    margin-bottom: 30px;
    font-size: 0.92rem;
    color: var(--texto-suave);
}
.legal-contenido h3 {
    font-family: var(--font-titulo);
    font-weight: 700;
    font-size: 1.25rem;
    color: var(--texto);
    margin: 34px 0 10px;
}
.legal-contenido h3:first-of-type { margin-top: 0; }
.legal-contenido p { margin: 0 0 14px; color: var(--texto); }
.legal-contenido ul, .legal-contenido ol {
    margin: 0 0 14px;
    padding-left: 22px;
    color: var(--texto);
}
.legal-contenido li { margin-bottom: 6px; }
.legal-contenido a { color: var(--naranja-oscuro); font-weight: 600; }
.legal-contenido strong { color: var(--texto); }
.legal-nota-riesgo {
    background: #fdeaea;
    border: 1px solid #f3c9c9;
    border-radius: 10px;
    padding: 14px 18px;
    font-size: 0.88rem;
    color: #7a2020;
    margin: 18px 0;
}
.legal-nota-riesgo strong { color: #7a2020; }