/* ============================================================
   Sitioideal — Estilos de la plantilla básica de los negocios
   Los colores llegan como variables (--c-*) desde la paleta de cada negocio.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

/* ---------- Superficies (7.f) ----------
   Fondos, textos y líneas del sitio. Los diseños con fondo oscuro (Pizarrón, Navaja…)
   las cambian en body.diseno-{clave}; los demás se ven igual que siempre.
   Las tarjetas usan --s-tarjeta, que en una sección alterna cambia sola. */
:root {
    --s-fondo: var(--c-fondo);              /* página y secciones normales */
    --s-alterna: #fff;                      /* secciones alternas */
    --s-tarjeta: #fff;                      /* tarjetas sobre una sección normal */
    --s-tarjeta-alterna: var(--c-fondo);    /* tarjetas sobre una sección alterna */
    --s-encabezado: #fff;
    --s-claro: #fff;                        /* botones y cajas que siempre van en blanco */
    --s-texto: var(--c-texto);
    --s-titulo: var(--c-primario);          /* títulos, íconos y enlaces */
    --s-linea: rgba(0, 0, 0, .08);
    --s-linea-fuerte: rgba(0, 0, 0, .1);
    --s-tinte: #fff;                        /* base de los tintes del color principal */
}

.seccion { --s-seccion: var(--s-fondo); }
.seccion--alterna { --s-tarjeta: var(--s-tarjeta-alterna); --s-seccion: var(--s-alterna); }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
}

body {
    margin: 0;
    background: var(--s-fondo);
    color: var(--s-texto);
    font-family: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    font-size: 1.0625rem;
    line-height: 1.6;
}

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

a { color: var(--s-titulo); }

a:focus-visible {
    outline: 3px solid var(--c-acento);
    outline-offset: 3px;
}

/* Al saltar a una sección desde el menú, que el encabezado fijo no tape el título */
section[id] { scroll-margin-top: 90px; }

.contenedor {
    width: min(1120px, 100% - 40px);
    margin-inline: auto;
}

/* Enlace para saltar al contenido (lectores de pantalla y teclado) */
.saltar {
    position: absolute;
    left: 12px;
    top: -60px;
    z-index: 50;
    padding: 10px 16px;
    border-radius: 8px;
    background: var(--c-primario);
    color: var(--c-sobre-primario);
    font-weight: 700;
}
.saltar:focus { top: 12px; }

.icono {
    width: 1.25em;
    height: 1.25em;
    flex: none;
}

/* ---------- Aviso de vista previa (se va al hacer scroll; el encabezado queda arriba) ---------- */
.aviso-vista-previa {
    position: relative;
    z-index: 40;
    padding: 9px 16px;
    background: #FFF4D6;
    border-bottom: 1px solid #EFD38A;
    color: #5A3D00;
    font-size: .9rem;
    text-align: center;
}
.aviso-vista-previa a { color: #5A3D00; font-weight: 700; }

/* ---------- Encabezado ---------- */
.encabezado {
    position: sticky;
    top: 0;
    z-index: 20;
    background: var(--s-encabezado);
    border-bottom: 3px solid var(--c-primario);
}

.encabezado__interior {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    min-height: 72px;
}

.logo {
    display: flex;
    align-items: center;
    text-decoration: none;
}

.logo__imagen {
    display: block;
    height: 48px;
    width: auto;
    max-width: min(220px, 60vw);
}

.logo__nombre {
    font-size: 1.3rem;
    font-weight: 800;
    font-stretch: 110%;
    color: var(--s-titulo);
}

.menu {
    display: flex;
    flex-wrap: wrap;             /* con muchas secciones, en dos renglones en vez de salirse de lado (7.g) */
    justify-content: flex-end;
    gap: 4px 26px;
    padding-block: 8px;
}

.menu a {
    color: var(--s-texto);
    font-weight: 600;
    text-decoration: none;
}

.menu a:hover { color: var(--s-titulo); }

@media (max-width: 640px) {
    .menu { display: none; }   /* en celular bastan los botones y el botón flotante */
}

/* ---------- Portada ---------- */
.portada {
    position: relative;
    display: flex;
    align-items: flex-end;
    min-height: min(76vh, 660px);
    overflow: hidden;
    background: linear-gradient(135deg, var(--c-primario), var(--c-secundario));
    color: var(--c-sobre-portada);
}

.portada__foto,
.portada__foto img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.portada__foto img { object-fit: cover; }

/* Portada para celular (7.p): su propio punto de enfoque, en todos los diseños (Sitio::fotoPortada) */
@media (max-width: 700px) {
    img[data-enfoque-celular] { object-position: var(--enfoque-celular) !important; }
}

/* Oscurecer la foto abajo para que el texto se lea siempre */
.portada--con-foto::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, .75), rgba(0, 0, 0, .25) 55%, rgba(0, 0, 0, .1));
}

.portada__contenido {
    position: relative;
    z-index: 1;
    padding-block: 80px 60px;
}

.portada__giro {
    margin: 0 0 8px;
    font-size: .95rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    opacity: .9;
}

.portada h1 {
    max-width: 18ch;
    margin: 0 0 14px;
    font-size: clamp(2.3rem, 1.4rem + 4.2vw, 4.2rem);
    font-weight: 800;
    font-stretch: 112%;
    line-height: 1.04;
    letter-spacing: -.01em;
}

/* Sobre una foto, el nombre y el eslogan llevan sombra para leerse siempre */
.portada--con-foto h1,
.portada--con-foto .portada__eslogan { text-shadow: 0 2px 16px rgba(0, 0, 0, .35); }

/* Sin eslogan, los botones no deben quedar pegados al nombre */
.portada h1 + .botones { margin-top: 26px; }

.portada__eslogan {
    max-width: 38ch;
    margin: 0 0 30px;
    font-size: clamp(1.1rem, 1rem + .6vw, 1.4rem);
    opacity: .96;
}

/* ---------- Botones ---------- */
.botones {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.boton {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 22px;
    border-radius: 12px;
    font-size: 1.05rem;
    font-weight: 700;
    text-decoration: none;
    transition: transform .15s ease, box-shadow .15s ease;
}

.boton:hover { transform: translateY(-1px); }

.boton--principal {
    background: var(--c-acento);
    color: var(--c-sobre-acento);
    box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .5);
}

.boton--secundario {
    border: 2px solid currentColor;
    color: var(--c-sobre-portada);
    background: rgba(255, 255, 255, .08);
}

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

/* ---------- Secciones ---------- */
.seccion { padding-block: 76px; }

.seccion--alterna { background: var(--s-alterna); }

.seccion h2 {
    margin: 0 0 22px;
    font-size: clamp(1.7rem, 1.2rem + 1.6vw, 2.5rem);
    font-weight: 800;
    font-stretch: 108%;
    line-height: 1.15;
    color: var(--s-titulo);
}

/* ---------- Nosotros ---------- */
.nosotros {
    display: grid;
    gap: 34px;
}

@media (min-width: 860px) {
    .nosotros--con-foto {
        grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
        align-items: start;
        gap: 56px;
    }
}

.nosotros__texto { max-width: 65ch; }

.nosotros__parrafo {
    margin: 0 0 1em;
    font-size: 1.15rem;
}
.nosotros__parrafo:last-child { margin-bottom: 0; }

/* "Desde 1998 · Más de 27 años atendiéndote" */
.nosotros__desde {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: -4px 0 22px;
    padding: 8px 16px;
    border-radius: 14px;   /* en celular puede ocupar dos renglones */
    background: color-mix(in srgb, var(--c-primario) 10%, var(--s-tinte));
    font-size: .98rem;
    line-height: 1.35;
}
.nosotros__desde strong { color: var(--s-titulo); font-weight: 800; }
.nosotros__desde .icono { color: var(--s-titulo); }

/* La foto se ve completa: si es muy alta, el sitio la hace más angosta (no la recorta) */
.nosotros__foto {
    width: 100%;
    margin: 0;
    justify-self: center;
}

.nosotros__foto img {
    width: 100%;
    height: auto;
    border-radius: 18px;
    box-shadow: 0 18px 40px -24px rgba(0, 0, 0, .45);
}

.nosotros__foto figcaption {
    margin-top: 10px;
    font-size: .93rem;
    opacity: .75;
}

/* "Lo que nos hace especial" y "Nuestro equipo" */
.especial,
.equipo { margin-top: 52px; }

.especial__titulo,
.equipo__titulo {
    margin: 0 0 18px;
    font-size: 1.35rem;
    font-weight: 800;
    font-stretch: 106%;
    line-height: 1.2;
}

.especial__lista {
    display: grid;
    gap: 16px;
    margin: 0;
    padding: 0;
    list-style: none;
}

@media (min-width: 640px) {
    .especial__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .especial__lista--1 { grid-template-columns: minmax(0, 560px); }
}

/* 3, 5 o 6 puntos: de 3 en 3 (con 2 o 4 se quedan de 2 en 2) */
@media (min-width: 960px) {
    .especial__lista--3,
    .especial__lista--5,
    .especial__lista--6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.especial__punto {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 20px 22px;
    border: 1px solid var(--s-linea);
    border-radius: 16px;
    background: var(--s-tarjeta);
}

.especial__marca {
    display: grid;
    flex: none;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--c-primario);
    color: var(--c-sobre-primario);
}
.especial__marca .icono { width: 20px; height: 20px; stroke-width: 2.6; }

.especial__nombre {
    display: block;
    font-size: 1.08rem;
    font-weight: 800;
    line-height: 1.3;
}

.especial__texto {
    margin: 4px 0 0;
    font-size: .97rem;
    opacity: .82;
}

/* "Nuestro equipo": en celular, foto a la izquierda; en pantallas grandes, tarjetas */
.equipo { scroll-margin-top: 90px; }

.equipo__lista {
    display: grid;
    gap: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.persona {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 18px;
    border: 1px solid var(--s-linea);
    border-radius: 16px;
    background: var(--s-tarjeta);
}

.persona__foto {
    flex: none;
    width: 76px;
    height: 76px;
    border-radius: 50%;
    object-fit: cover;
}

.persona__foto--iniciales {
    display: grid;
    place-items: center;
    background: var(--c-primario);
    color: var(--c-sobre-primario);
    font-size: 1.6rem;
    font-weight: 800;
    font-stretch: 108%;
    letter-spacing: .02em;
}

.persona__datos { min-width: 0; }

.persona__nombre {
    margin: 0;
    font-size: 1.12rem;
    font-weight: 800;
    line-height: 1.25;
}

.persona__puesto {
    margin: 3px 0 0;
    color: var(--s-titulo);
    font-weight: 700;
    font-size: .98rem;
}

.persona__cedula {
    margin: 2px 0 0;
    font-size: .88rem;
    opacity: .7;
}

.persona__texto {
    margin: 8px 0 0;
    font-size: .95rem;
    opacity: .82;
}

@media (min-width: 640px) {
    .equipo__lista {
        grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
        gap: 18px;
    }

    .persona {
        flex-direction: column;
        align-items: center;
        padding: 26px 22px;
        text-align: center;
    }

    .persona__foto {
        width: 128px;
        height: 128px;
    }

    .persona__foto--iniciales { font-size: 2.5rem; }
}

/* ---------- Contacto ---------- */
.contacto {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px;
}

.contacto__item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 20px;
    border: 1px solid var(--s-linea);
    border-radius: 14px;
    background: var(--s-fondo);
    color: var(--s-texto);
    text-decoration: none;
    word-break: break-word;
}

.contacto__item:hover { border-color: var(--s-titulo); }

.contacto__icono {
    display: grid;
    place-items: center;
    flex: none;
    width: 50px;
    height: 50px;
    border-radius: 12px;
    background: var(--c-primario);
    color: var(--c-sobre-primario);
}

.contacto__titulo {
    display: block;
    font-weight: 700;
}

/* ---------- Pie ---------- */
.pie {
    padding-block: 30px 90px;   /* espacio para que el botón flotante no tape nada */
    background: var(--c-secundario);
    color: var(--c-sobre-secundario);
    font-size: .95rem;
}

.pie a { color: inherit; font-weight: 700; }

.pie__interior {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 8px 24px;
}

/* ---------- Botón flotante de WhatsApp ---------- */
.flotante {
    position: fixed;
    right: calc(18px + env(safe-area-inset-right, 0px));
    bottom: calc(18px + env(safe-area-inset-bottom, 0px));
    z-index: 30;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 15px;
    border-radius: 999px;
    background: #127C3B;
    color: #fff;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 10px 26px -8px rgba(0, 0, 0, .55);
}

.flotante .icono { width: 28px; height: 28px; }

.flotante__texto { display: none; }

@media (min-width: 720px) {
    .flotante { padding: 14px 22px 14px 18px; }
    .flotante__texto { display: inline; }
}

/* ---------- "Abierto ahora" ---------- */
.estado-ahora {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin: 22px 0 0;
    padding: 8px 16px;
    border-radius: 999px;
    background: rgba(0, 0, 0, .35);
    color: #fff;
    font-size: .98rem;
    text-decoration: none;
    backdrop-filter: blur(4px);
}

.estado-ahora__punto {
    flex: none;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #B8BFCC;
}

.estado-ahora--abierto .estado-ahora__punto { background: #3DDC6E; box-shadow: 0 0 0 4px rgba(61, 220, 110, .25); }
.estado-ahora--pronto .estado-ahora__punto { background: #FFB020; box-shadow: 0 0 0 4px rgba(255, 176, 32, .25); }
.estado-ahora--cerrado .estado-ahora__punto { background: #FF6B5A; }

/* Versión sobre fondo claro (sección de horario) */
.estado-ahora--claro {
    margin-top: 0;
    background: var(--s-tarjeta);
    color: var(--s-texto);
    border: 1px solid var(--s-linea-fuerte);
    backdrop-filter: none;
}
.estado-ahora--claro.estado-ahora--abierto .estado-ahora__punto { background: #1E9E4A; }
.estado-ahora--claro.estado-ahora--pronto .estado-ahora__punto { background: #D98200; }
.estado-ahora--claro.estado-ahora--cerrado .estado-ahora__punto { background: #C0392B; }

/* ---------- Horario ---------- */
.horario {
    display: grid;
    gap: 24px 56px;
}

@media (min-width: 820px) {
    .horario { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); align-items: start; }
}

.horario__nota {
    margin: 14px 0 0;
    font-size: .95rem;
    opacity: .85;
}

.horario__tabla {
    width: 100%;
    border-collapse: collapse;
    font-size: 1.05rem;
}

.horario__tabla th,
.horario__tabla td {
    padding: 13px 14px;
    border-bottom: 1px solid rgba(0, 0, 0, .08);
    text-align: left;
    vertical-align: top;
}

.horario__tabla th { font-weight: 600; }
.horario__tabla td { text-align: right; }

/* El día de hoy resaltado */
.horario__hoy th,
.horario__hoy td {
    font-weight: 800;
    background: color-mix(in srgb, var(--c-primario) 8%, transparent);
}
.horario__hoy th { box-shadow: inset 4px 0 0 var(--c-primario); }

.horario__etiqueta {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 8px;
    border-radius: 999px;
    background: var(--c-primario);
    color: var(--c-sobre-primario);
    font-size: .75rem;
    font-weight: 700;
    vertical-align: middle;
}

/* ---------- Ubicación y sucursales ---------- */
.mapa {
    height: 380px;
    margin-bottom: 24px;
    border: 1px solid var(--s-linea-fuerte);
    border-radius: 16px;
    background: #E8ECF2;
    z-index: 0;   /* que el mapa no tape el encabezado al bajar */
}

@media (max-width: 640px) {
    .mapa { height: 300px; }
}

.marcador-sucursal { background: none; border: 0; }

.sucursales {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px;
}

.sucursal {
    padding: 22px;
    border: 1px solid var(--s-linea);
    border-radius: 14px;
    background: var(--s-tarjeta);
}

.sucursal__nombre {
    margin: 0 0 8px;
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--s-titulo);
}

.sucursal__direccion {
    display: flex;
    gap: 8px;
    margin: 0 0 6px;
    font-size: 1.05rem;
}
.sucursal__direccion .icono { margin-top: 3px; color: var(--s-titulo); }

.sucursal__detalle {
    margin: 0 0 6px 30px;
    font-size: .95rem;
    opacity: .8;
}

.sucursal__botones {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
}

.boton-chico {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 14px;
    border: 1.5px solid var(--c-primario);
    border-radius: 10px;
    color: var(--s-titulo);
    font-weight: 700;
    font-size: .95rem;
    text-decoration: none;
}
.boton-chico:hover { background: color-mix(in srgb, var(--c-primario) 8%, transparent); }

.boton-chico--principal {
    background: var(--c-primario);
    color: var(--c-sobre-primario);
}
.boton-chico--principal:hover { background: var(--c-primario); filter: brightness(1.08); }

/* ---------- Servicios y menú ---------- */

/* Botones para saltar a cada categoría: se quedan arriba al bajar por la sección */
.catalogo__indice {
    position: sticky;
    top: 75px;   /* debajo del encabezado */
    z-index: 5;
    display: flex;
    gap: 8px;
    overflow-x: auto;
    margin: 0 -20px 26px;
    padding: 10px 20px;
    background: var(--s-seccion);
    scrollbar-width: none;
}
.catalogo__indice::-webkit-scrollbar { display: none; }

.catalogo__indice a {
    flex: none;
    padding: 8px 16px;
    border: 1.5px solid var(--c-primario);
    border-radius: 999px;
    color: var(--s-titulo);
    font-weight: 700;
    font-size: .95rem;
    white-space: nowrap;
    text-decoration: none;
}
.catalogo__indice a:hover { background: color-mix(in srgb, var(--c-primario) 8%, transparent); }

/* Al saltar a una categoría, que no la tapen el encabezado ni los botones de categorías */
.catalogo__grupo { scroll-margin-top: 150px; }
.catalogo__grupo + .catalogo__grupo { margin-top: 44px; }

.catalogo__categoria {
    margin: 0 0 4px;
    font-size: clamp(1.3rem, 1.1rem + .6vw, 1.6rem);
    font-weight: 800;
    font-stretch: 106%;
}

.catalogo__descripcion {
    margin: 0 0 10px;
    opacity: .8;
}

.catalogo__categoria + .carta,
.catalogo__categoria + .servicios { margin-top: 12px; }

/* Etiqueta "Recomendado" en el color de acento */
.destacado {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--c-acento);
    color: var(--c-sobre-acento);
    font-size: .8rem;
    font-weight: 700;
}
.destacado .icono { width: 14px; height: 14px; }

/* --- Menú: como una carta --- */
.carta {
    display: grid;
    gap: 0 56px;
    margin: 0;
    padding: 0;
    list-style: none;
}

@media (min-width: 900px) {
    .carta { grid-template-columns: 1fr 1fr; }
}

.platillo {
    display: flex;
    gap: 16px;
    padding: 18px 0;
    border-bottom: 1px solid rgba(0, 0, 0, .09);
}

.platillo__foto {
    flex: none;
    width: 88px;
    height: 88px;
    border-radius: 12px;
    object-fit: cover;
    background: rgba(0, 0, 0, .05);
}

.platillo__texto { flex: 1; min-width: 0; }

.platillo__fila {
    display: flex;
    flex-wrap: wrap;    /* 7.z.24: si el nombre y el precio no caben juntos (celular de 360 px, una palabra larga, precio con nota), el precio baja al siguiente renglón en vez de salirse de lado */
    align-items: baseline;
    gap: 2px 10px;
}

.platillo__nombre {
    margin: 0;
    font-size: 1.12rem;
    font-weight: 700;
    line-height: 1.3;
}

/* Línea punteada entre el nombre y el precio */
.platillo__puntos {
    flex: 1;
    min-width: 18px;
    border-bottom: 2px dotted rgba(0, 0, 0, .25);
    transform: translateY(-4px);
}

.platillo__precio {
    flex: none;
    max-width: 50%;
    margin-left: auto;   /* 7.z.24: si baja de renglón, a la derecha */
    color: var(--s-titulo);
    font-weight: 800;
    text-align: right;
}

.platillo__precio small {
    color: var(--s-texto);
    font-size: .85rem;
    font-weight: 500;
    opacity: .75;
}

.platillo__descripcion {
    margin: 4px 0 0;
    font-size: .97rem;
    opacity: .8;
}

.platillo .destacado { margin-top: 8px; }

/* --- Servicios: tarjetas --- */
/* Cada tarjeta con su propio alto: una sin foto no se estira para igualar a las que sí tienen */
.servicios {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    align-items: start;
    gap: 20px;
}

.servicio {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--s-linea);
    border-radius: 16px;
    background: var(--s-tarjeta);
}

.servicio__foto {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

.servicio__cuerpo {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    padding: 20px 22px 22px;
}

.servicio__nombre {
    margin: 0;
    font-size: 1.2rem;
    font-weight: 800;
    line-height: 1.25;
}

.servicio__precio {
    margin: 0;
    color: var(--s-titulo);
}
.servicio__precio strong { font-size: 1.1rem; font-weight: 800; }

.servicio__descripcion {
    margin: 0;
    font-size: .97rem;
    opacity: .82;
}

.servicio__accion { padding-top: 10px; }

/* --- Invitación a pedir por WhatsApp (menú) --- */
.catalogo__pedido {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px 24px;
    margin-top: 36px;
    padding: 22px 26px;
    border-radius: 16px;
    background: color-mix(in srgb, var(--c-primario) 9%, var(--s-tinte));
}

.catalogo__pedido p {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 700;
}

/* ---------- Páginas de aviso: muy pronto, estamos actualizando, suspendido ---------- */
.pausa-pagina {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
    border-top: 6px solid var(--c-primario);
}

.pausa {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: min(620px, 100% - 40px);
    margin-inline: auto;
    padding-block: 56px 40px;
    text-align: center;
}

.pausa__marca { margin-bottom: 40px; }

.pausa__logo {
    display: block;
    height: 72px;
    width: auto;
    max-width: min(280px, 70vw);
}

.pausa__nombre {
    font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.2rem);
    font-weight: 800;
    font-stretch: 112%;
    color: var(--s-titulo);
}

.pausa__icono {
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    margin-bottom: 20px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--c-primario) 12%, var(--s-tinte));
    color: var(--s-titulo);
}
.pausa__icono .icono { width: 30px; height: 30px; }

.pausa__titulo {
    max-width: 18ch;
    margin: 0 0 12px;
    font-size: clamp(1.9rem, 1.3rem + 2.4vw, 2.9rem);
    font-weight: 800;
    font-stretch: 110%;
    line-height: 1.08;
    color: var(--s-titulo);
}

.pausa__texto {
    margin: 0;
    font-size: 1.15rem;
    opacity: .85;
}

.pausa__nota {
    margin: 6px 0 0;
    padding: 10px 18px;
    border-radius: 12px;
    background: var(--s-claro);
    border: 1px solid var(--s-linea);
    font-weight: 700;
}

.pausa__mientras {
    margin: 34px 0 12px;
    font-weight: 600;
}

.pausa__botones { justify-content: center; }

/* Sobre el fondo claro, el botón secundario va con el color primario */
.pausa .boton--secundario {
    border-color: var(--s-titulo);
    background: var(--s-claro);
    color: var(--s-titulo);
}

.pausa__dueno {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px 12px;
    margin-top: 44px;
    padding: 14px 20px;
    border-radius: 14px;
    background: var(--s-claro);
    border: 1px solid var(--s-linea);
    font-size: .98rem;
}

.pausa__dueno a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 700;
}

.pausa__pie {
    padding: 18px 20px 24px;
    font-size: .9rem;
    text-align: center;
    opacity: .75;
}
.pausa__pie a { color: inherit; font-weight: 700; }

/* ---------- Redes sociales ("Síguenos") ---------- */
.contacto + .redes { margin-top: 30px; }

.redes__titulo {
    margin: 0 0 12px;
    font-size: 1.15rem;
    font-weight: 800;
}

.redes__lista {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.red {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-width: 100%;   /* (7.j) en celulares de 360 px, un usuario largo no desborda la página */
    padding: 11px 18px;
    border: 1.5px solid var(--c-primario);
    border-radius: 999px;
    background: var(--s-tarjeta);
    color: var(--s-texto);
    text-decoration: none;
}
.red:hover { background: color-mix(in srgb, var(--c-primario) 8%, var(--s-tinte)); }

.red__nombre {
    color: var(--s-titulo);
    font-weight: 800;
}

.red__usuario {
    min-width: 0;
    overflow-wrap: anywhere;
    font-size: .95rem;
    opacity: .75;
}

.red .icono {
    width: 16px;
    height: 16px;
    color: var(--s-titulo);
}

/* En el pie: enlaces de texto */
.pie__redes a { font-weight: 700; }

/* En las páginas de aviso, centradas */
.pausa .redes { margin-top: 30px; }
.pausa .redes__lista { justify-content: center; }

/* ---------- Galería ---------- */
.galeria {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

@media (min-width: 700px) {
    .galeria { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
}

@media (min-width: 960px) {
    .galeria { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.galeria__foto {
    display: block;
    overflow: hidden;
    border-radius: 12px;
    background: rgba(0, 0, 0, .06);
}

.galeria__foto img {
    width: 100%;
    height: auto;
    aspect-ratio: 1;
    object-fit: cover;
    transition: transform .3s ease;
}

.galeria__foto:hover img { transform: scale(1.04); }

@media (prefers-reduced-motion: reduce) {
    .galeria__foto img { transition: none; }
    .galeria__foto:hover img { transform: none; }
}

/* "Ver N fotos más": al abrirlo, el botón se va y las demás siguen en la cuadrícula */
.galeria__mas > .galeria { margin-top: 10px; }
@media (min-width: 700px) {
    .galeria__mas > .galeria { margin-top: 14px; }
}

.galeria__ver-mas {
    display: flex;
    align-items: center;
    gap: 8px;
    width: fit-content;
    margin: 22px auto 0;
    padding: 12px 20px;
    border: 2px solid var(--c-primario);
    border-radius: 12px;
    background: var(--s-claro);
    color: var(--s-titulo);
    font-weight: 700;
    list-style: none;
    cursor: pointer;
}
.galeria__ver-mas::-webkit-details-marker { display: none; }
.galeria__ver-mas:hover { background: color-mix(in srgb, var(--c-primario) 8%, var(--s-tinte)); }
.galeria__ver-mas:focus-visible { outline: 3px solid var(--c-acento); outline-offset: 3px; }
.galeria__mas[open] > .galeria__ver-mas { display: none; }

/* ---------- Visor de fotos (pantalla completa, oscura) ---------- */
.visor-abierto { overflow: hidden; }

.visor {
    width: 100vw;
    max-width: none;
    height: 100vh;
    height: 100dvh;
    max-height: none;
    margin: 0;
    padding: 0;
    border: 0;
    background: rgba(12, 14, 18, .96);
    color: #fff;
}
.visor::backdrop { background: rgba(12, 14, 18, .96); }

.visor__marco {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 64px 76px 18px;
}

.visor__foto {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: calc(100vh - 150px);
    max-height: calc(100dvh - 150px);
    border-radius: 6px;
    object-fit: contain;
    transition: opacity .15s ease;
}
.visor__foto--cargando { opacity: .35; }

.visor__pie {
    max-width: 70ch;
    min-height: 1.5em;
    margin-top: 14px;
    font-size: 1rem;
    line-height: 1.5;
    text-align: center;
}

.visor__cuenta {
    margin-left: 6px;
    opacity: .65;
    font-size: .92rem;
    white-space: nowrap;
}

.visor__boton {
    position: absolute;
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .14);
    color: #fff;
    cursor: pointer;
}
.visor__boton:hover { background: rgba(255, 255, 255, .26); }
.visor__boton:focus-visible { outline: 3px solid var(--c-acento); outline-offset: 2px; }
.visor__boton .icono { width: 26px; height: 26px; }
.visor__boton[hidden] { display: none; }

.visor__cerrar { top: 12px; right: 12px; }
.visor__anterior { top: 50%; left: 14px; transform: translateY(-50%); }
.visor__siguiente { top: 50%; right: 14px; transform: translateY(-50%); }

/* Celular: la foto a todo lo ancho y las flechas abajo, a los lados del pie */
@media (max-width: 640px) {
    .visor__marco { padding: 64px 8px 84px; }
    .visor__foto { max-height: calc(100vh - 160px); max-height: calc(100dvh - 160px); }
    .visor__pie { padding: 0 8px; font-size: .95rem; }
    .visor__anterior,
    .visor__siguiente { top: auto; bottom: 16px; transform: none; }
}

/* ---------- Avisos (franja arriba del sitio) ---------- */
.aviso {
    background: var(--c-acento);
    color: var(--c-sobre-acento);
}
.aviso + .aviso { border-top: 1px solid rgba(0, 0, 0, .12); }

.aviso__interior {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding-block: 12px;
}

.aviso__interior .icono { margin-top: 2px; }

.aviso__texto {
    margin: 0;
    line-height: 1.45;
}

.aviso__dias { font-weight: 600; }

.aviso__detalle {
    display: block;
    font-size: .95rem;
    opacity: .9;
}

/* ---------- Promociones ---------- */
.promociones {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    align-items: start;
    gap: 20px;
}

/* Una sola promoción: tarjeta más ancha, sin estirarse de más */
.promociones--1 { grid-template-columns: minmax(0, 560px); }

.promocion {
    overflow: hidden;
    border: 1px solid var(--s-linea);
    border-radius: 16px;
    background: var(--s-tarjeta);
}

/* La foto o el volante se ven completos (sin recortar) */
.promocion__foto {
    width: 100%;
    height: auto;
    max-height: 460px;
    object-fit: contain;
    background: color-mix(in srgb, var(--c-primario) 6%, var(--s-tinte));
}

.promocion__cuerpo {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 20px 22px 22px;
}

.promocion__etiquetas {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0;
}

.promocion__dias,
.promocion__hoy {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: .85rem;
    font-weight: 700;
}

.promocion__dias {
    background: color-mix(in srgb, var(--c-primario) 10%, var(--s-tinte));
    color: var(--s-titulo);
}

.promocion__hoy {
    background: var(--c-acento);
    color: var(--c-sobre-acento);
}

.promocion__titulo {
    margin: 0;
    font-size: 1.3rem;
    font-weight: 800;
    font-stretch: 106%;
    line-height: 1.2;
}

.promocion__descripcion {
    margin: 0;
    font-size: .97rem;
    opacity: .85;
}

.promocion__vigencia {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    color: var(--s-titulo);
    font-size: .92rem;
    font-weight: 700;
}
.promocion__vigencia .icono { width: 16px; height: 16px; }

.promocion__accion { padding-top: 6px; }

/* ---------- Preguntas frecuentes (acordeón con <details>) ---------- */
.preguntas {
    display: grid;
    gap: 12px;
    max-width: 820px;
}

.pregunta {
    border: 1px solid var(--s-linea);
    border-radius: 14px;
    background: var(--s-tarjeta);
}

.pregunta__titulo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 20px;
    font-size: 1.08rem;
    font-weight: 700;
    line-height: 1.35;
    list-style: none;
    cursor: pointer;
}
.pregunta__titulo::-webkit-details-marker { display: none; }
.pregunta__titulo:hover { color: var(--s-titulo); }
.pregunta__titulo:focus-visible { outline: 3px solid var(--c-acento); outline-offset: 2px; border-radius: 14px; }

/* Signo + que se vuelve − al abrir */
.pregunta__signo {
    position: relative;
    flex: none;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--c-primario) 10%, var(--s-tinte));
}
.pregunta__signo::before,
.pregunta__signo::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 12px;
    height: 2.5px;
    border-radius: 2px;
    background: var(--s-titulo);
    transform: translate(-50%, -50%);
    transition: transform .2s ease;
}
.pregunta__signo::after { transform: translate(-50%, -50%) rotate(90deg); }
.pregunta[open] .pregunta__signo::after { transform: translate(-50%, -50%) rotate(0deg); }

.pregunta__respuesta {
    padding: 0 20px 18px;
    opacity: .88;
}
.pregunta__respuesta p { margin: 0 0 .8em; }
.pregunta__respuesta p:last-child { margin-bottom: 0; }

@media (prefers-reduced-motion: reduce) {
    .pregunta__signo::before,
    .pregunta__signo::after { transition: none; }
}

/* ---------- Testimonios ---------- */
.testimonios {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
    align-items: start;
    gap: 20px;
}

.testimonios__mas > .testimonios { margin-top: 20px; }
.testimonios__mas[open] > .galeria__ver-mas { display: none; }

.testimonio {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 0;
    padding: 26px 24px 22px;
    border: 1px solid var(--s-linea);
    border-radius: 16px;
    background: var(--s-tarjeta);
}

/* Comillas grandes y suaves en la esquina */
.testimonio > .icono {
    position: absolute;
    top: 18px;
    right: 18px;
    width: 34px;
    height: 34px;
    color: var(--s-titulo);
    opacity: .18;
    fill: currentColor;   /* comillas rellenas */
}

.testimonio__estrellas {
    margin: 0;
    font-size: 1.1rem;
    letter-spacing: 2px;
    line-height: 1;
}

.estrella { color: rgba(0, 0, 0, .15); }
.estrella--llena { color: #E8A317; }

.testimonio__texto {
    margin: 0;
    font-size: 1.02rem;
    line-height: 1.6;
}
.testimonio__texto p { margin: 0 0 .7em; }
.testimonio__texto p:last-child { margin-bottom: 0; }

.testimonio__autor {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 4px;
    padding-top: 14px;
    border-top: 1px solid rgba(0, 0, 0, .07);
    line-height: 1.3;
}

.testimonio__iniciales {
    display: grid;
    flex: none;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--c-primario);
    color: var(--c-sobre-primario);
    font-weight: 800;
    font-size: .95rem;
}

.testimonio__detalle {
    display: block;
    font-size: .9rem;
    opacity: .7;
}

/* ============================================================
   Piezas para los diseños (7.f)
   ============================================================ */

/* ---------- "Lo más pedido" (seccion_destacados.php) ---------- */
.destacados__lista {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr));
    gap: 18px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.destacado-tarjeta {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--s-linea);
    border-radius: 18px;
    background: var(--s-tarjeta);
}

.destacado-tarjeta__foto {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

.destacado-tarjeta__cuerpo { padding: 16px 18px 20px; }

.destacado-tarjeta__nombre {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 800;
    line-height: 1.25;
}

.destacado-tarjeta__precio { margin: 6px 0 0; }
.destacado-tarjeta__precio strong { color: var(--s-titulo); font-size: 1.2rem; font-weight: 800; }
.destacado-tarjeta__precio small { margin-left: 4px; opacity: .75; }

.destacado-tarjeta__descripcion {
    margin: 8px 0 0;
    font-size: .95rem;
    opacity: .82;
}

.destacados__ver-todo { margin: 26px 0 0; text-align: center; }

/* ---------- Barra fija de botones en el celular (barra_acciones.php) ---------- */
.barra-acciones {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 30;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: 8px;
    padding: 8px 10px calc(8px + env(safe-area-inset-bottom, 0px));
    background: var(--s-encabezado);
    border-top: 1px solid var(--s-linea-fuerte);
    box-shadow: 0 -10px 26px -14px rgba(0, 0, 0, .45);
}

/* WhatsApp ocupa el doble que los otros dos */
.barra-acciones--con-whatsapp { grid-template-columns: minmax(0, 2.3fr); grid-auto-columns: minmax(0, 1fr); }

.barra-acciones__boton {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-height: 54px;
    padding: 6px 4px;
    border-radius: 14px;
    color: var(--s-texto);
    font-size: .8rem;
    font-weight: 700;
    line-height: 1.15;
    text-align: center;
    text-decoration: none;
}

.barra-acciones__boton--principal {
    flex-direction: row;
    gap: 6px;
    padding-inline: 6px;
    background: var(--barra-principal, #127C3B);
    color: var(--barra-principal-texto, #fff);
    font-size: 1rem;
}

.barra-acciones__boton .icono { width: 22px; height: 22px; }

/* Con la barra, el pie deja espacio abajo y el botón flotante solo sale en pantallas grandes */
.pie--con-barra { padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }

@media (max-width: 719.98px) {
    .flotante--escritorio { display: none; }
}

@media (min-width: 720px) {
    .barra-acciones { display: none; }
    .pie--con-barra { padding-bottom: 90px; }
}

/* ---------- Imagen generada con IA (7.j) ----------
   Nota chiquita en cursiva. 'foto': sobre la foto, abajo al centro (dentro de su caja);
   'sobre': igual, para una foto suelta en una tarjeta; 'esquina': abajo a la izquierda
   (portadas con texto encima); 'texto': en línea, junto al nombre o al pie.
   El contenedor de la foto queda como referencia sin pisar el position que ya tenga. */
:where(:has(> .marca-ia--foto, > .marca-ia--esquina)) { position: relative; }

.marca-ia {
    font-size: .72rem;
    font-style: italic;
    font-weight: 400;
    line-height: 1.35;
    letter-spacing: .01em;
    text-transform: none;
    text-shadow: none;
}

.marca-ia--foto,
.marca-ia--esquina {
    position: absolute;
    bottom: 8px;
    z-index: 2;
    width: max-content;
    max-width: calc(100% - 16px);
    padding: 2px 9px;
    border-radius: 10px;
    background: rgba(0, 0, 0, .58);
    color: #fff;
    text-align: center;
    text-wrap: balance;   /* si no cabe en un renglón (fotos muy chicas), dos renglones parejos */
    pointer-events: none;
}

.marca-ia--foto { left: 50%; transform: translateX(-50%); }
.marca-ia--esquina { bottom: 10px; left: 12px; }   /* abajo a la izquierda: a la derecha va el botón flotante */

/* 'sobre': justo después de una foto suelta dentro de una tarjeta; sube sobre la foto sin mover nada */
.marca-ia--sobre {
    position: relative;
    z-index: 2;
    display: block;
    align-self: center;
    width: max-content;
    max-width: calc(100% - 16px);
    height: 20px;
    margin: -28px auto 8px;
    padding: 0 9px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(0, 0, 0, .58);
    color: #fff;
    line-height: 20px;
    white-space: nowrap;
    text-overflow: ellipsis;
    pointer-events: none;
}

.marca-ia--texto { display: block; margin-top: 3px; }

/* Miniaturas de galería en el celular: la nota un poco más chica para que quepa en un renglón */
@media (max-width: 599.98px) {
    .galeria__foto > .marca-ia--foto { padding-inline: 7px; font-size: .66rem; }
}
@media (max-width: 379.98px) {
    .galeria__foto > .marca-ia--foto { font-size: .62rem; }
}

.visor__ia { display: block; margin-top: 2px; font-size: .8rem; font-style: italic; opacity: .85; }
.visor__ia[hidden] { display: none; }

.pie__ia { flex-basis: 100%; margin: 0; font-size: .8rem; font-style: italic; opacity: .9; }

/* Texto redactado con ayuda de IA (7.k): nota chiquita en cursiva al final de la sección */
.marca-ia-texto { margin: 26px 0 0; font-size: .8rem; font-style: italic; line-height: 1.4; }

/* ============================================================
   Ficha de cada servicio o platillo (7.u.2)
   Se abre al dar clic en la tarjeta o en «Ver las 5 fotos» / «Ver más».
   Toma los colores del diseño: --s-tarjeta, --s-texto, --s-titulo y --c-*.
   ============================================================ */
[data-ficha] { cursor: pointer; }
[data-ficha]:hover .ficha-ver span { text-decoration-thickness: 2px; }

.ficha-ver {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    margin-right: 16px;   /* si a su lado va otro botón (Navaja: «Lo quiero») */
    color: var(--s-titulo);
    font-size: .92rem;
    font-weight: 700;
    line-height: 1.3;
    text-decoration: none;
}
.ficha-ver span { text-decoration: underline; text-underline-offset: 3px; }
.ficha-ver .icono { flex: none; width: 18px; height: 18px; }
.ficha-ver:focus-visible { outline: 3px solid var(--c-acento); outline-offset: 3px; border-radius: 4px; }

.ficha-abierta { overflow: hidden; }

.ficha {
    width: min(980px, calc(100vw - 40px));
    max-width: none;
    max-height: calc(100vh - 48px);
    max-height: calc(100dvh - 48px);
    padding: 0;
    overflow: hidden;
    border: 0;
    border-radius: 16px;
    /* 7.z.3: la tarjeta va encima del fondo del sitio, así la ficha siempre es sólida.
       En los diseños oscuros (Pizarrón, Navaja) la tarjeta es semitransparente y, sola,
       dejaba ver el menú detrás de la ficha. En los demás se ve igual que antes. */
    background: linear-gradient(var(--s-tarjeta), var(--s-tarjeta)) var(--s-fondo);
    color: var(--s-texto);
    box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .55);
}
.ficha::backdrop { background: rgba(10, 13, 20, .66); }

.ficha__marco {
    max-height: inherit;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.ficha__cerrar {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 4;
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .94);
    color: #111;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .25);
    cursor: pointer;
}
.ficha__cerrar .icono { width: 22px; height: 22px; }
.ficha__cerrar:focus-visible { outline: 3px solid var(--c-acento); outline-offset: 2px; }

.ficha__contenido {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    align-items: start;
}
.ficha__contenido--sin-fotos { grid-template-columns: minmax(0, 1fr); }
.ficha__contenido--sin-fotos .ficha__cuerpo { padding-right: 72px; }

/* Galería: una foto a la vez, se desliza con el dedo. En computadora se queda fija al bajar por el texto */
.ficha__galeria { position: relative; background: #101114; }
@media (min-width: 760px) {
    .ficha__galeria { position: sticky; top: 0; }
}

.ficha__fotos {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    aspect-ratio: 4 / 3;
}
.ficha__fotos::-webkit-scrollbar { display: none; }
.ficha__fotos:focus-visible { outline: 3px solid var(--c-acento); outline-offset: -3px; }

.ficha__foto {
    position: relative;
    flex: 0 0 100%;
    margin: 0;
    scroll-snap-align: start;
}
.ficha__foto img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ficha__flecha {
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    margin-block: auto;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .9);
    color: #111;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .25);
    cursor: pointer;
    /* centrado en la foto (sin contar las miniaturas de abajo) */
    transform: translateY(-38px);
}
.ficha__flecha .icono { width: 22px; height: 22px; }
.ficha__flecha--anterior { left: 12px; }
.ficha__flecha--siguiente { right: 12px; }
.ficha__flecha:focus-visible { outline: 3px solid var(--c-acento); outline-offset: 2px; }

.ficha__cuenta {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 2;
    margin: 0;
    padding: 2px 10px;
    border-radius: 999px;
    background: rgba(0, 0, 0, .6);
    color: #fff;
    font-size: .82rem;
    font-weight: 600;
}

.ficha__miniaturas {
    display: flex;
    gap: 6px;
    padding: 10px;
    overflow-x: auto;
    scrollbar-width: thin;
}
.ficha__miniatura {
    flex: 0 0 56px;
    width: 56px;
    height: 56px;
    padding: 0;
    overflow: hidden;
    border: 2px solid transparent;
    border-radius: 8px;
    background: none;
    opacity: .55;
    cursor: pointer;
}
.ficha__miniatura img { width: 100%; height: 100%; object-fit: cover; }
.ficha__miniatura[aria-current="true"] { border-color: #fff; opacity: 1; }
.ficha__miniatura:hover { opacity: .9; }
.ficha__miniatura:focus-visible { outline: 3px solid var(--c-acento); outline-offset: 1px; }

/* Datos */
.ficha__cuerpo {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: 30px 30px 28px;
}
.ficha__categoria {
    margin: 0;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    opacity: .7;
}
.ficha__nombre {
    margin: 0;
    padding-right: 36px;   /* que no lo tape la ✕ cuando no hay fotos */
    color: var(--s-titulo);
    font-size: clamp(1.45rem, 1.2rem + 1vw, 2rem);
    line-height: 1.2;
}
.ficha__precio { margin: 0; font-size: 1.12rem; }
.ficha__precio strong { color: var(--s-titulo); font-size: 1.3rem; }
.ficha__precio span { opacity: .8; }
.ficha__descripcion { margin: 0; font-weight: 600; }
.ficha__mas { font-size: 1rem; }
.ficha__mas p { margin: 0 0 .8em; }
.ficha__mas p:last-child { margin-bottom: 0; }
.ficha__cuerpo .marca-ia-texto { margin-top: 4px; }
.ficha__accion { margin-top: 8px; }

/* Celular: la ficha ocupa toda la pantalla; las fotos arriba y los datos abajo */
@media (max-width: 759.98px) {
    .ficha {
        width: 100vw;
        height: 100vh;
        height: 100dvh;
        max-height: none;
        margin: 0;
        border-radius: 0;
    }
    .ficha__marco { height: 100%; max-height: none; }
    .ficha__contenido { grid-template-columns: minmax(0, 1fr); }
    .ficha__contenido--sin-fotos .ficha__cuerpo { padding-top: 64px; padding-right: 20px; }
    .ficha__cuerpo { padding: 20px 20px 32px; }
    .ficha__nombre { padding-right: 0; }
    .ficha__flecha { width: 38px; height: 38px; }
    .ficha__flecha--anterior { left: 8px; }
    .ficha__flecha--siguiente { right: 8px; }
    .ficha__accion { align-self: stretch; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
    .ficha__fotos { scroll-behavior: auto; }
}

/* ---------- 7.z.9: Botón especial de promociones (boton_promociones.php) ----------
   Flotante, con el color de acento del negocio y un anillo blanco para que se distinga en
   cualquier fondo. Sale solo si hoy hay promociones.
   Celular: abajo a la izquierda (el de WhatsApp va a la derecha); en los diseños con barra
   de botones, arriba de la barra.
   Computadora: a la derecha, arriba del de WhatsApp (abajo a la izquierda tapaba el botón
   principal de la portada). */
.boton-promos {
    position: fixed;
    left: calc(18px + env(safe-area-inset-left, 0px));
    bottom: calc(18px + env(safe-area-inset-bottom, 0px));
    z-index: 30;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 52px;
    padding: 9px 10px 9px 16px;
    border-radius: 999px;
    background: var(--c-acento);
    color: var(--c-sobre-acento);
    font-size: 1rem;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: .01em;
    text-decoration: none;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, .9), 0 12px 28px -8px rgba(0, 0, 0, .55);
    transform-origin: 25% 80%;
    animation: boton-promos-llamar 7s ease-in-out 2s infinite;
}

.boton-promos:hover,
.boton-promos:focus-visible {
    color: var(--c-sobre-acento);
    filter: brightness(1.06);
    animation-play-state: paused;
}

.boton-promos .icono { flex: none; width: 24px; height: 24px; }

.boton-promos__cuantas {
    display: inline-grid;
    place-items: center;
    min-width: 28px;
    height: 28px;
    padding: 0 8px;
    border-radius: 999px;
    background: var(--c-sobre-acento);
    color: var(--c-acento);
    font-size: .9rem;
    font-weight: 800;
}

/* Un pequeño movimiento cada 7 segundos para llamar la atención */
@keyframes boton-promos-llamar {
    0%, 84%, 100% { transform: none; }
    87% { transform: rotate(-5deg) scale(1.07); }
    90% { transform: rotate(4deg) scale(1.07); }
    93% { transform: rotate(-2deg) scale(1.03); }
    96% { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .boton-promos { animation: none; }
}

/* Que el botón no tape el final del pie */
body:has(.boton-promos) .pie:not(.pie--con-barra) { padding-bottom: 84px; }

@media (max-width: 719.98px) {
    /* Con la barra de botones abajo, el botón va arriba de ella */
    .boton-promos--con-barra { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
    body:has(.boton-promos) .pie--con-barra { padding-bottom: calc(160px + env(safe-area-inset-bottom, 0px)); }
}

@media (min-width: 720px) {
    /* En computadora, a la derecha y arriba del botón de WhatsApp (o en su lugar, si no hay WhatsApp) */
    .boton-promos {
        left: auto;
        right: calc(18px + env(safe-area-inset-right, 0px));
        bottom: calc(86px + env(safe-area-inset-bottom, 0px));
        transform-origin: 75% 80%;
    }
    body:not(:has(.flotante)) .boton-promos { bottom: calc(18px + env(safe-area-inset-bottom, 0px)); }
    body:has(.boton-promos) .pie,
    body:has(.boton-promos) .pie--con-barra { padding-bottom: 150px; }
}