/* CSS estático de la página propia de negocio (Plan A/B). Las partes que sí
 * dependen de datos del negocio (--acento, y el @keyframes del slider del
 * hero cuando hay fotos) se quedan en un <style> chico e inline dentro de la
 * plantilla — este archivo solo usa esas variables vía var(), no las define. */

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
body {
    margin: 0; background: var(--papel); color: var(--tinta);
    font-family: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 17px; line-height: 1.55; -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
img, svg { max-width: 100%; display: block; }
.marco { max-width: 1120px; margin: 0 auto; padding: 0 1.5rem; }
h1, h2, h3 { text-wrap: balance; margin: 0; font-weight: 800; letter-spacing: -.01em; }
.etiqueta {
    font-size: .72rem; font-weight: 700; letter-spacing: .14em;
    text-transform: uppercase; color: var(--acento);
}

/* Marca Mi Vecino Sabe — discreta, enlaza de vuelta al directorio. Vive
   dentro de .nav-acciones (junto al botón de WhatsApp) para que ambos
   íconos compartan el mismo centrado vertical del flex del nav — antes
   era position:fixed e independiente del nav, con su propio tamaño fijo;
   coincidía más o menos con nav-cta en desktop mientras nav-cta tenía
   texto, pero en el modo circular de mobile (menos padding, caja más
   chica) el desalineamiento se volvía visible (bug real reportado por el
   usuario 2026-08-17). Fixed forzaba además el hack de padding-right en
   .marco de abajo, ya no hace falta. */
.marca-mvs {
    flex-shrink: 0; width: 2.5rem; height: 2.5rem; border-radius: 50%;
    background: color-mix(in srgb, var(--papel) 78%, transparent);
    backdrop-filter: blur(6px); border: 1px solid var(--linea);
    display: flex; align-items: center; justify-content: center;
    transition: border-color .15s ease, transform .15s ease;
}
.marca-mvs img { width: 1.35rem; height: 1.35rem; }
.marca-mvs:hover { border-color: var(--acento); transform: translateY(-1px); }
.marca-mvs:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }

/* Botón flotante para reabrir la promoción a demanda — el pop
   automático solo se muestra una vez al día por navegador (ver
   script más abajo), así que si al visitante se le pasó al
   cargar la página, este botón se lo vuelve a mostrar cuando
   quiera. Esquina inferior izquierda a propósito: la derecha ya
   tiene la marca (arriba) y la barra del carrito (abajo, Plan B).
   Visible desde el hero — antes se ocultaba hasta pasar el hero
   por un bug real del hero (min-height: 82vh, dejaba ver la
   siguiente sección), ya corregido (100vh/100dvh, ver más abajo);
   con eso resuelto, ya no hace falta esconder el botón. */
.btn-ver-promocion {
    position: fixed; left: 1.1rem; bottom: 1.1rem; z-index: 999;
    background: var(--acento); color: #fff; border: none;
    font: inherit; font-weight: 700; font-size: .85rem;
    padding: .7rem 1.1rem; border-radius: 999px; cursor: pointer;
    box-shadow: 0 8px 20px -6px color-mix(in srgb, var(--acento) 70%, transparent);
    animation: pulso-promocion 2.4s ease-in-out infinite;
}
.btn-ver-promocion:hover { transform: translateY(-2px); }
@keyframes pulso-promocion {
    0%, 100% { box-shadow: 0 8px 20px -6px color-mix(in srgb, var(--acento) 70%, transparent); }
    50% { box-shadow: 0 8px 26px -4px color-mix(in srgb, var(--acento) 95%, transparent); }
}
@media (prefers-reduced-motion: reduce) {
    .btn-ver-promocion { animation: none; }
}

/* Nav de nombre — fija arriba, visible desde que carga la página
   (el usuario esperaba verla de entrada, no que apareciera recién
   al hacer scroll como en la primera versión). */
.nav-negocio {
    position: sticky; top: 0; z-index: 30;
    background: color-mix(in srgb, var(--papel) 92%, transparent);
    backdrop-filter: blur(8px); border-bottom: 1px solid var(--linea);
}
.nav-negocio .marco {
    display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
    padding-top: .85rem; padding-bottom: .85rem;
}
.nav-marca { display: flex; align-items: center; gap: .6rem; min-width: 0; }
.nav-logo { width: 32px; height: 32px; border-radius: 6px; object-fit: cover; flex-shrink: 0; }
.nav-nombre { font-weight: 800; font-size: 1.05rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav-links { display: flex; gap: 1.6rem; list-style: none; margin: 0; padding: 0; }
.nav-links a {
    text-decoration: none; font-size: .85rem; font-weight: 600; color: var(--tinta-suave);
    padding-bottom: 2px; border-bottom: 2px solid transparent;
    transition: color .15s ease, border-color .15s ease;
}
.nav-links a:hover { color: var(--tinta); border-color: var(--acento); }
.nav-acciones { display: flex; align-items: center; gap: .7rem; flex-shrink: 0; }
.nav-cta {
    display: inline-flex; align-items: center; gap: .4rem;
    background: var(--exito); color: #fff; text-decoration: none;
    font-weight: 700; font-size: .82rem; padding: .55rem .95rem;
    border-radius: 8px; white-space: nowrap; flex-shrink: 0;
}

/* Botón de menú — oculto en escritorio (ahí .nav-links ya se ve completo
   en el nav), solo aparece bajo el mismo breakpoint que esconde .nav-links. */
.nav-toggle {
    display: none; align-items: center; justify-content: center;
    width: 2.2rem; height: 2.2rem; border-radius: 50%; flex-shrink: 0;
    border: 1px solid var(--linea); background: transparent; color: var(--tinta);
    cursor: pointer; transition: border-color .15s ease;
}
.nav-toggle:hover { border-color: var(--acento); }

@media (max-width: 720px) {
    .nav-cta .nav-cta-texto { display: none; }
    .nav-cta { padding: .6rem; border-radius: 50%; }
    .nav-toggle { display: flex; }

    /* .nav-links pasa de fila horizontal (escritorio) a panel desplegable
       debajo de todo el nav — position:absolute respecto a .nav-negocio
       (el ancestro posicionado más cercano, sticky), así ocupa el ancho
       completo sin desarmar el flex row de .marco donde vive en el HTML.
       Reportado por el usuario 2026-08-17: antes simplemente desaparecía
       en pantallas angostas, sin ninguna forma de volver a verlo. */
    .nav-links {
        display: none;
        position: absolute; top: 100%; left: 0; right: 0;
        flex-direction: column; gap: 0; margin: 0; padding: .3rem 1.5rem .6rem;
        background: var(--papel); border-bottom: 1px solid var(--linea);
        box-shadow: 0 12px 20px -12px rgba(0, 0, 0, .25);
    }
    .nav-links.abierto { display: flex; }
    .nav-links li { border-top: 1px solid var(--linea); }
    .nav-links li:first-child { border-top: none; }
    .nav-links a { display: block; padding: .8rem 0; border-bottom: none; }
}

/* Hero — pantalla completa a propósito (antes 82vh dejaba ver un
   pedazo de "Quiénes somos" debajo, reportado por el usuario
   2026-08-17). Las dos líneas de min-height no son redundantes:
   la segunda (100dvh, alto real visible) sobreescribe a la primera
   solo en navegadores que la soportan — sin la línea de respaldo
   en 100vh, un navegador viejo que no reconozca "dvh" se quedaría
   sin min-height en absoluto. Contenido centrado verticalmente
   (antes "align-items: flex-end", pegado al piso — tenía sentido
   con el hero más bajo de antes, pero a pantalla completa quedaba
   demasiado abajo). */
.hero {
    position: relative; min-height: 100vh; min-height: 100dvh; display: flex; align-items: center;
    background: radial-gradient(ellipse 120% 90% at 15% 0%, color-mix(in srgb, var(--acento) 32%, transparent), transparent 60%), var(--tinta);
    color: var(--papel); overflow: hidden;
}
.hero::before {
    content: ""; position: absolute; inset: -20% -10%; z-index: 2;
    background-image: repeating-radial-gradient(circle at 82% 28%, transparent 0, transparent 38px, color-mix(in srgb, var(--acento) 16%, transparent) 39px, transparent 41px);
    opacity: .55;
}
/* Slider de fotos del hero (opcional, hasta 2 en Plan A / 5 en Plan B)
   — crossfade con CSS puro (sin JS/librería), pensado para conexión
   débil: solo <img> normales, la animación es la única "librería".
   Sin fotos subidas, el fondo se queda en el degradado de siempre. */
.hero-slider { position: absolute; inset: 0; z-index: 0; }
.hero-slider img {
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0;
}
.hero-slider img.hero-foto-fija { opacity: 1; }
.hero-scrim {
    position: absolute; inset: 0; z-index: 1;
    /* Mismo degradado + color de categoría del fondo original, ahora
       como capa encima de las fotos — el texto sigue siendo legible
       sobre cualquier foto que suba el negocio. */
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--tinta) 30%, transparent) 0%, color-mix(in srgb, var(--tinta) 75%, transparent) 55%, var(--tinta) 100%),
        radial-gradient(ellipse 120% 90% at 15% 0%, color-mix(in srgb, var(--acento) 22%, transparent), transparent 60%);
}
.hero-contenido { position: relative; z-index: 3; padding-top: 3.5rem; padding-bottom: 3.5rem; width: 100%; }
.hero-eyebrow { display: flex; align-items: center; gap: .6rem; margin-bottom: 1.4rem; }
.hero-eyebrow .etiqueta { color: color-mix(in srgb, var(--acento) 55%, var(--papel)); }
.hero-punto { width: 6px; height: 6px; border-radius: 50%; background: color-mix(in srgb, var(--acento) 55%, var(--papel)); }
.hero h1 { font-size: clamp(2.4rem, 7vw, 5rem); line-height: .98; color: var(--papel); max-width: 16ch; }
.hero-linea { font-size: clamp(1.05rem, 2vw, 1.25rem); color: color-mix(in srgb, var(--papel) 75%, transparent); margin-top: 1.3rem; max-width: 46ch; font-weight: 400; }
.hero-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 1.1rem; margin-top: 2.2rem; }
.btn-whatsapp {
    display: inline-flex; align-items: center; gap: .6rem;
    background: var(--exito); color: #fff; text-decoration: none;
    font-weight: 700; font-size: 1rem; padding: .95rem 1.6rem; border-radius: 10px;
    box-shadow: 0 8px 24px -8px color-mix(in srgb, var(--exito) 70%, transparent);
    transition: transform .15s ease, box-shadow .15s ease;
}
.btn-whatsapp:hover { transform: translateY(-2px); box-shadow: 0 12px 28px -8px color-mix(in srgb, var(--exito) 80%, transparent); }
.btn-whatsapp:focus-visible { outline: 2px solid var(--acento); outline-offset: 3px; }
.btn-calificar {
    display: inline-flex; align-items: center; gap: .6rem;
    background: transparent; color: var(--papel); text-decoration: none;
    font-weight: 700; font-size: 1rem; padding: .95rem 1.6rem; border-radius: 10px;
    border: 1px solid color-mix(in srgb, var(--papel) 40%, transparent);
    transition: border-color .15s ease, background .15s ease;
}
.btn-calificar:hover { border-color: var(--papel); background: color-mix(in srgb, var(--papel) 10%, transparent); }
.btn-calificar:focus-visible { outline: 2px solid var(--acento); outline-offset: 3px; }

section { padding: 5rem 0; border-top: 1px solid var(--linea); }
.seccion-cabecera { margin-bottom: 2.6rem; max-width: 46ch; }
.seccion-cabecera h2 { font-size: clamp(1.6rem, 3.2vw, 2.2rem); margin-top: .5rem; }

/* Quiénes somos — editorial, texto con medida de lectura cómoda */
.quienes-texto { color: var(--tinta-suave); max-width: 65ch; }
.quienes-texto p + p { margin-top: 1.1rem; }

/* Servicios — solo Plan A (sin catálogo real), lista simple sin foto/precio */
.servicios-lista { color: var(--tinta-suave); max-width: 65ch; columns: 2; column-gap: 2rem; }
.servicios-lista li { break-inside: avoid; margin-bottom: .5rem; }
@media (max-width: 560px) { .servicios-lista { columns: 1; } }

/* Proyectos / Catálogo — grilla con acento periódico (cada 6º ítem
   más grande), robusta para cualquier cantidad de elementos (no
   depende de un total fijo como el primer mockup). */
.galeria {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    grid-auto-rows: 11rem; grid-auto-flow: dense; gap: .9rem;
}
.galeria-item:nth-child(6n+1) { grid-column: span 2; grid-row: span 2; }
.galeria-foto {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    background: var(--papel-hundido);
}
.galeria-foto img { width: 100%; height: 100%; object-fit: cover; }
.galeria-item { position: relative; border-radius: 4px; overflow: hidden; border: 1px solid var(--linea); }
.galeria-caption {
    position: absolute; left: 0; right: 0; bottom: 0; padding: 1.1rem 1rem .9rem;
    background: linear-gradient(to top, rgba(10,8,6,.82), transparent);
    color: #f5efe6; transform: translateY(8px); opacity: 0;
    transition: opacity .2s ease, transform .2s ease;
}
.galeria-item:hover .galeria-caption, .galeria-item:focus-within .galeria-caption { opacity: 1; transform: translateY(0); }
.galeria-caption .t { font-weight: 700; font-size: .95rem; }
.galeria-caption .d { font-size: .78rem; opacity: .85; margin-top: .15rem; }
@media (max-width: 720px) {
    .galeria { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 9rem; }
    .galeria-item:nth-child(6n+1) { grid-column: span 1; grid-row: span 1; }
    .galeria-caption { opacity: 1; transform: none; background: linear-gradient(to top, rgba(10,8,6,.75), transparent); }
}

/* Catálogo (Plan B) — precio + control de cantidad, mismo
   comportamiento/JS que la ficha compartida de siempre, solo con
   los tokens de color de esta página. */
.catalogo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1.1rem; }
.producto-card { border: 1px solid var(--linea); border-radius: 6px; overflow: hidden; background: var(--papel); display: flex; flex-direction: column; }
.producto-card img, .producto-card .producto-sin-foto {
    width: 100%; height: 190px; object-fit: contain; background: var(--papel-hundido); display: flex; align-items: center; justify-content: center; color: var(--tinta-suave);
}
.producto-card-cuerpo { padding: 1rem; display: flex; flex-direction: column; flex-grow: 1; }
.producto-nombre { font-weight: 700; }
.producto-precio { color: var(--acento); font-weight: 700; margin: .3rem 0 .6rem; }
.producto-descripcion { color: var(--tinta-suave); font-size: .88rem; margin-bottom: .8rem; }
.producto-cantidad { display: flex; align-items: center; justify-content: center; gap: .85rem; margin-top: auto; }
.btn-cantidad {
    width: 2.1rem; height: 2.1rem; border-radius: 50%; border: 1px solid var(--linea);
    background: var(--papel); color: var(--tinta); font-size: 1.1rem; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
}
.btn-cantidad:hover { border-color: var(--acento); color: var(--acento); }
.cantidad-valor { min-width: 1.4rem; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; }

.carrito-barra {
    position: sticky; bottom: 1rem; z-index: 10;
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    background: var(--papel); border: 1px solid var(--linea); border-radius: 10px;
    padding: .85rem 1.1rem; margin-top: 1.3rem; box-shadow: 0 4px 16px rgba(0,0,0,.18);
    width: 100%; text-align: left; cursor: pointer; font: inherit; color: var(--tinta);
}
.carrito-modal-overlay, .producto-modal-overlay {
    display: none; position: fixed; inset: 0; background: rgba(10,8,6,.55);
    z-index: 1000; align-items: center; justify-content: center; padding: 1.5rem;
}
.carrito-modal-overlay.abierto, .producto-modal-overlay.abierto { display: flex; }
.carrito-modal {
    background: var(--papel); border-radius: 10px; width: min(420px, 100%);
    max-height: 80vh; overflow-y: auto; padding: 1.25rem; box-shadow: 0 12px 40px rgba(0,0,0,.3);
}
.carrito-modal-fila { display: flex; align-items: center; justify-content: space-between; padding: .5rem 0; border-bottom: 1px solid var(--linea); }
.carrito-modal-total { border-top: 1px solid var(--linea); font-size: 1.1rem; padding-top: .8rem; margin-top: .8rem; }
.carrito-domicilio { padding-top: .6rem; border-top: 1px solid var(--linea); }
.carrito-domicilio-check { display: flex; align-items: center; gap: .5rem; font-size: .9rem; cursor: pointer; }
.carrito-domicilio-input {
    width: 100%; box-sizing: border-box; margin-top: .5rem; padding: .6rem .7rem;
    border-radius: 8px; border: 1px solid var(--linea); background: var(--papel);
    color: var(--tinta); font: inherit;
}
.carrito-domicilio-recogida { margin: .5rem 0 0 0; font-size: .85rem; color: color-mix(in srgb, var(--tinta) 65%, transparent); }
.producto-modal {
    background: var(--papel); border-radius: 10px; width: min(480px, 100%);
    max-height: 85vh; overflow-y: auto; position: relative; box-shadow: 0 12px 40px rgba(0,0,0,.35);
}
.producto-modal-cerrar {
    position: absolute; top: .75rem; right: .75rem; z-index: 1; width: 2.2rem; height: 2.2rem;
    border-radius: 50%; border: none; background: var(--papel); box-shadow: 0 1px 4px rgba(0,0,0,.25);
    cursor: pointer; font-size: 1.1rem; color: var(--tinta);
}
.producto-modal-foto { width: 100%; height: 280px; object-fit: contain; background: var(--papel-hundido); }
.producto-modal-cuerpo { padding: 1.25rem; }
.producto-modal-nombre { font-size: 1.4rem; font-weight: 700; }
.producto-modal-precio { font-size: 1.2rem; font-weight: 700; color: var(--acento); margin: .4rem 0; }
.producto-modal-descripcion { color: var(--tinta-suave); }
.producto-cantidad-grande { display: flex; align-items: center; justify-content: center; gap: 1.2rem; margin-top: 1rem; }
.producto-cantidad-grande .btn-cantidad { width: 2.6rem; height: 2.6rem; }
.producto-cantidad-grande .cantidad-valor { font-size: 1.3rem; }

/* Pops "Calificar" y "Promoción" (doc 11 del vault, mockup aprobado
   2026-08-10) — reutilizan .producto-modal-overlay/.producto-modal
   (mismo overlay centrado que ya usa el catálogo) en vez de un
   patrón nuevo, solo con su propio contenido. */
.pop-modal-cuerpo { padding: 1.6rem 1.5rem; text-align: center; }
.pop-modal-etiqueta { font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--acento); margin-bottom: .5rem; }
.pop-modal-cuerpo h3 { font-size: 1.3rem; margin: 0 0 .6rem; }
.pop-modal-cuerpo p { color: var(--tinta-suave); font-size: .92rem; margin: 0 0 1.2rem; }
.pop-calificar-estrellas { font-size: 2rem; letter-spacing: .2rem; color: var(--acento); margin-bottom: 1rem; }
.pop-promocion-imagen { width: 100%; height: 200px; object-fit: contain; background: var(--papel-hundido); border-radius: 8px; margin-bottom: 1rem; }
.pop-promocion-precio { font-size: 1.25rem; font-weight: 700; color: var(--acento); margin: -.6rem 0 1rem; }
.pop-modal-cta { display: block; width: 100%; box-sizing: border-box; justify-content: center; }

/* Testimonios (destacados) y Opiniones (el resto) comparten el mismo
   estilo de tarjeta — ver Calificacion.destacado. */
.testimonios-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1.1rem; }
.testimonio-card { border: 1px solid var(--linea); border-radius: 6px; padding: 1.4rem; background: var(--papel); }
.testimonio-estrellas { color: var(--acento); font-size: .9rem; letter-spacing: .1em; margin-bottom: .8rem; }
.testimonio-texto { color: var(--tinta-suave); font-size: .95rem; }
.testimonios-mas-opiniones { display: inline-block; margin-top: 1.6rem; color: var(--acento); font-weight: 600; font-size: .95rem; text-decoration: underline; text-underline-offset: 3px; }

/* Contacto — bloque de cierre */
.contacto { background: var(--papel-hundido); }
.contacto-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 3rem; }
.contacto h2 { font-size: clamp(1.9rem, 4vw, 2.8rem); max-width: 14ch; }
.contacto-datos { display: flex; flex-direction: column; gap: 1.2rem; margin-top: 1.8rem; }
.dato { display: flex; gap: .9rem; align-items: baseline; flex-wrap: wrap; }
.dato .k { font-size: .74rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--acento); min-width: 6.5rem; }
.dato .v { color: var(--tinta); font-weight: 500; }
.redes { display: flex; flex-wrap: wrap; gap: .5rem 1.2rem; margin-top: 1.6rem; }
.redes a { font-size: .85rem; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; color: var(--tinta-suave); }
.redes a:hover { color: var(--acento); }
.mapa-marco { border-radius: 8px; border: 1px solid var(--linea); overflow: hidden; aspect-ratio: 4/3; }
.mapa-marco iframe { width: 100%; height: 100%; border: 0; }
@media (max-width: 820px) { .contacto-grid { grid-template-columns: 1fr; gap: 2rem; } }
@media (max-width: 820px) { .galeria { grid-auto-rows: 10rem; } }

footer {
    border-top: 1px solid var(--linea); padding: 2rem 0 3rem;
    display: flex; flex-wrap: wrap; gap: .5rem 1.2rem; align-items: center; justify-content: space-between;
    font-size: .82rem; color: var(--tinta-suave);
}
footer a { color: var(--tinta-suave); text-decoration: none; }
footer a:hover { color: var(--acento); }