/* =========================================================
   QueBuscasRD — Estilos de la página del negocio
   assets/css/negocio.css

   REDISEÑO VISUAL COMPLETO (la lógica de negocio.php no cambió:
   mismas clases, mismos ids, mismo HTML — solo se ve distinto).

   Esta es la vitrina por la que cada negocio paga su plan: tiene
   que sentirse como un local de verdad, no como una tarjeta de
   SaaS genérica. El sistema de diseño es deliberadamente NEUTRO
   (tinta, papel, líneas finas) para que el color QUE ELIGE CADA
   NEGOCIO (--primario-negocio, --boton, --deco por oficio) sea
   lo que de verdad destaca en su página — el marco no compite
   con la marca del negocio, la enmarca.

   Se carga así, desde negocio.php:
       $cssExtra = [ASSETS_URL . '/css/negocio.css'];
   después de app.css (que ya resuelve botones, alertas, inputs).
   ========================================================= */


* { box-sizing: border-box; }

:root {

    --fuente-titulo: 'Schibsted Grotesk', system-ui, Arial, sans-serif;
    --fuente-texto:  'Schibsted Grotesk', system-ui, Arial, sans-serif;
    --fuente-num:    'Schibsted Grotesk', system-ui, Arial, sans-serif;

    /* El negocio trae los suyos desde negocio_diseno; estos son
       solo el respaldo si no ha personalizado nada. */
    --primario-negocio: var(--primario, #18334E);
    --secundario: var(--acento, #1D7B7F);
    --fondo-negocio: var(--fondo, #ffffff);
    --texto-negocio: var(--texto, #171A2B);

    /* Tinta y papel: neutros premium, no el azul-lavanda genérico
       de antes. El color de marca del negocio hace el resto. */
    --tinta: #171A2B;
    --texto: #3C4257;
    --gris: #6B7280;
    --gris-claro: #9AA0B4;
    --fondo: #ffffff;
    --fondo-alt: #F4F4F9;
    --blanco: #ffffff;
    --borde: #DEDEEA;
    --borde-fuerte: #C9C9D9;

    --verde-fondo: #EEF5EE;   --verde-texto: #3E6B46;
    --amarillo-fondo: #F4F4F9; --amarillo-texto: #946B2D;
    --rojo-fondo: #F8ECE9;    --rojo-texto: #A14434;

    --sombra-sm: 0 2px 8px rgba(23, 26, 43, .06);
    --sombra-md: 0 10px 26px rgba(23, 26, 43, .09);
    --sombra-lg: 0 24px 56px rgba(23, 26, 43, .16);
    --radio: 14px;
    --radio-lg: 10px;
    --trans: .2s cubic-bezier(.4, 0, .2, 1);

    /* Sombra del marco (portada + perfil + secciones, fusionados
       en un solo bloque): un tinte de tinta, no de un azul fijo —
       así funciona con cualquier color que elija el negocio. */
    --sombra-marco:
        0 1px 2px rgba(23, 26, 43, .05),
        0 20px 48px rgba(23, 26, 43, .10);
}


body {
    margin: 0;
    font-family: var(--fuente-texto);
    background: var(--fondo-alt);
    color: var(--texto-negocio);
    -webkit-font-smoothing: antialiased;
}

html { scrollbar-width: thin; scrollbar-color: #D7D5CC transparent; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background-color: #D7D5CC; border-radius: 20px; }
::-webkit-scrollbar-thumb:hover { background-color: #B7B4A8; }

h1, h2, h3, h4 { font-family: var(--fuente-titulo); color: var(--tinta); }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button { font: inherit; }

.contenedor { width: min(1180px, calc(100% - 32px)); margin: 0 auto; }


/*
|--------------------------------------------------------------------------
| HEADER
|--------------------------------------------------------------------------
*/

.header {
    position: sticky;
    top: 0;
    z-index: 100;
    border-bottom: 1px solid var(--borde);
    background: rgba(255, 255, 255, .92);
    backdrop-filter: saturate(160%) blur(14px);
}

.header-contenido {
    min-height: 62px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
}

.marca { display: flex; align-items: center; gap: 8px; }
.marca-icono { width: 38px; height: 38px; border-radius: 9px; object-fit: contain; }
.marca-texto { font-family: var(--fuente-titulo); font-weight: 800; letter-spacing: -.01em; font-size: 20px; line-height: 1; color: var(--primario-negocio); }

/* Mismo logo que el resto del sitio: grande en escritorio, chico en
   móvil, para que no empuje "Directorio" y el carrito fuera de pantalla. */
.marca-chica { display: none; }
@media (max-width: 640px) {
    .marca-grande { display: none; }
    .marca-chica { display: inline-flex; }
}

.header-derecha { display: flex; align-items: center; gap: 18px; }

.volver {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 13.5px; font-weight: 600; color: var(--gris);
    transition: color var(--trans);
}
.volver:hover { color: var(--tinta); }

.carrito {
    position: relative;
    display: inline-flex; align-items: center; gap: 8px;
    min-height: 40px; padding: 0 15px;
    border-radius: 999px;
    background: var(--tinta);
    color: #fff;
    font-size: 13.5px; font-weight: 700;
    transition: filter var(--trans);
}
.carrito:hover { filter: brightness(1.15); }
.carrito svg { width: 17px; height: 17px; }
.carrito-cantidad {
    display: inline-grid; place-items: center;
    min-width: 19px; height: 19px; padding: 0 4px;
    border-radius: 999px;
    background: var(--primario-negocio);
    color: #fff; font-size: 11px; font-weight: 800;
}

@media (max-width: 560px) {
    .carrito .texto { display: none; }
    .carrito { padding: 0 11px; }
}


/*
|--------------------------------------------------------------------------
| ALERTAS
|--------------------------------------------------------------------------
*/

.alertas { width: min(1180px, calc(100% - 32px)); margin: 16px auto 0; display: grid; gap: 10px; }
.alerta { padding: 13px 16px; border-radius: var(--radio); font-size: 13.5px; font-weight: 600; }
.alerta.exito { background: var(--verde-fondo); color: var(--verde-texto); }
.alerta.error { background: var(--rojo-fondo); color: var(--rojo-texto); }


/*
|--------------------------------------------------------------------------
| MARCO: ficha-negocio + tarjeta-seccion, fusionados en un bloque
|--------------------------------------------------------------------------
*/

body.pagina-negocio .contenedor { width: min(1180px, calc(100% - 32px)); max-width: 1180px !important; }
body.pagina-negocio .ficha-negocio .contenedor { width: 100%; margin: 0; }

.ficha-negocio {
    width: 100%;
    margin: 22px 0 0;
    border-radius: var(--radio-lg);
    border: 1px solid var(--borde);
    overflow: hidden;
    background: #fff;
    box-shadow: var(--sombra-marco);
}

.tarjeta-seccion {
    width: 100%;
    padding: 30px 32px;
    background: #fff;
    border-radius: var(--radio-lg);
}

.seccion { padding: 0; }
.seccion + .seccion { margin-top: 2px; }
.seccion .contenedor > .tarjeta-seccion { border-top: 1px solid var(--borde); }
.seccion-alt .tarjeta-seccion { background: var(--fondo-alt); }


/*
|--------------------------------------------------------------------------
| PORTADA
|--------------------------------------------------------------------------
*/

.portada {
    position: relative;
    width: 100%;
    aspect-ratio: 21 / 8;
    min-height: 160px;
    max-height: 300px;
    overflow: hidden;
    background: var(--primario-negocio);
}

.portada:not(.preset) { background: linear-gradient(135deg, var(--primario-negocio), color-mix(in srgb, var(--primario-negocio) 55%, #0b0d1a)); }

.portada img {
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: center 25%;
}

.portada-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(0,0,0,.32) 100%);
    pointer-events: none;
}

.portada-marca {
    position: absolute; inset: 0; z-index: 2;
    display: flex; align-items: center; gap: 18px;
    padding: 0 34px;
}

.portada-marca-icono {
    width: 58px; height: 58px; flex: 0 0 58px;
    border-radius: 16px;
    border: 1.5px solid rgba(255,255,255,.45);
    background: rgba(255,255,255,.12);
    backdrop-filter: blur(6px);
    display: grid; place-items: center;
    color: #fff;
}
.portada-marca-icono svg { width: 28px; height: 28px; stroke-width: 1.7; }

.portada-marca-nombre {
    color: #fff;
    font-family: var(--fuente-titulo);
    font-size: 27px; font-weight: 800;
    letter-spacing: -.015em; line-height: 1.15;
    text-shadow: 0 2px 16px rgba(0,0,0,.28);
}


/*
|--------------------------------------------------------------------------
| PERFIL SOCIAL (avatar sobre la portada)
|--------------------------------------------------------------------------
*/

.perfil { position: relative; z-index: 5; }

.perfil-social {
    position: relative;
    isolation: isolate;
    padding: 0 32px 28px;
    display: flex; flex-direction: column; gap: 20px;
    background: transparent !important;
}

.perfil-deco {
    position: absolute; z-index: -1;
    right: 30px; bottom: 8px;
    width: 108px; height: 108px;
    color: var(--deco, var(--primario-negocio));
    opacity: .12;
    pointer-events: none;
}
.perfil-deco svg { width: 100%; height: 100%; stroke-width: 1.6; }

.avatar-negocio {
    width: 116px; height: 116px;
    flex: 0 0 auto;
    margin-top: -52px;
    border: 4px solid #fff;
    border-radius: 22px;
    background: #fff;
    display: grid; place-items: center;
    overflow: hidden;
    position: relative; z-index: 6;
    box-shadow: var(--sombra-md);
}
.avatar-negocio img { width: 100%; height: 100%; object-fit: cover; }
.avatar-negocio i.ph-duotone {
    font-size: 50px;
    color: var(--deco, var(--primario-negocio));
    --ph-duotone-secondary-opacity: .28;
}

.perfil-social-cuerpo { min-width: 0; display: flex; flex-direction: column; gap: 16px; }

.perfil-social-cabecera {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 22px; flex-wrap: wrap;
}

.perfil-social-titulos { min-width: 0; flex: 1 1 280px; }

.categoria {
    margin-bottom: 8px;
    display: inline-flex; align-items: center; gap: 6px;
    color: var(--deco, var(--primario-negocio));
    font-size: 11.5px; font-weight: 800;
    text-transform: uppercase; letter-spacing: .07em;
}
.categoria svg { width: 14px; height: 14px; }

.perfil-social-titulos h1 {
    margin: 2px 0 10px;
    font-size: 29px;
    letter-spacing: -.015em;
    line-height: 1.15;
}

.perfil-meta-row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }

.perfil-meta-ubicacion { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--gris); }
.perfil-meta-ubicacion svg { width: 15px; height: 15px; }

.perfil-rating { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; color: inherit; }
.perfil-rating-num { font-family: var(--fuente-num); font-size: 15.5px; font-weight: 800; color: var(--tinta); }
.perfil-rating-estrellas { display: inline-flex; gap: 1px; }
.perfil-rating-estrellas i, .perfil-rating-estrellas svg { width: 16px; height: 16px; color: #DCDAD2; }
.perfil-rating-estrellas span.llena i, .perfil-rating-estrellas span.llena svg { color: #F2A93C; fill: #F2A93C; }
.perfil-rating-total { font-size: 12px; color: var(--gris); }
.perfil-rating:hover .perfil-rating-total { text-decoration: underline; }

.estado-horario-publico {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 6px 12px; border-radius: 999px;
    font-size: 11.5px; font-weight: 800;
}
.estado-horario-publico.abierto { background: var(--verde-fondo); color: var(--verde-texto); }
.estado-horario-publico.cerrado { background: #F4F4F9; color: #B5530F; }
.estado-horario-publico svg { width: 15px; height: 15px; }

.perfil-social .acciones-contacto { flex: 0 0 auto; flex-direction: row; flex-wrap: wrap; gap: 9px; }

.perfil-bio { margin: 0; max-width: 680px; color: var(--texto); line-height: 1.65; font-size: 14.5px; }

.perfil-chips { display: flex; gap: 9px; flex-wrap: wrap; }
.perfil-chip {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 8px 13px;
    border: 1px solid var(--borde);
    border-radius: 999px;
    background: #fff;
    color: var(--tinta);
    font-size: 12px; font-weight: 700;
}
.perfil-chip svg { width: 14px; height: 14px; color: var(--deco, var(--primario-negocio)); }

@media (max-width: 720px) {
    .perfil-social { padding: 0 20px 22px; }
    .avatar-negocio { width: 86px; height: 86px; margin-top: -40px; border-radius: 17px; border-width: 3px; }
    .avatar-negocio i.ph-duotone { font-size: 36px; }
    .perfil-social-titulos h1 { font-size: 22px; }
    .perfil-social .acciones-contacto { width: 100%; }
    .perfil-social .acciones-contacto .btn-contacto { flex: 1 1 auto; }
    .perfil-deco { right: -14px; bottom: -14px; width: 118px; height: 118px; opacity: .1; }
}


/*
|--------------------------------------------------------------------------
| CONTACTO — botones de acción
|--------------------------------------------------------------------------
*/

.acciones-contacto { display: flex; flex-direction: column; gap: 9px; }

.btn-contacto {
    min-height: 44px;
    padding: 0 18px;
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    border-radius: 11px;
    font-size: 13px; font-weight: 800;
    white-space: nowrap;
    transition: transform var(--trans), filter var(--trans), background var(--trans), border-color var(--trans);
    border: 1px solid transparent;
}
.btn-contacto:active { transform: scale(.97); }
.btn-contacto svg { width: 16px; height: 16px; }

.btn-principal { background: var(--boton, var(--primario-negocio)); color: #fff; }
.btn-principal:hover { filter: brightness(1.08); }

.btn-secundario {
    border-color: color-mix(in srgb, var(--primario-negocio) 32%, var(--borde));
    background: #fff;
    color: var(--primario-negocio);
}
.btn-secundario:hover { background: color-mix(in srgb, var(--primario-negocio) 7%, #fff); }

.btn-compartir { border-color: var(--borde); background: #fff; color: var(--gris); cursor: pointer; font-family: inherit; }
.btn-compartir:hover { border-color: var(--tinta); color: var(--tinta); }

.btn-cotizacion {
    border-color: color-mix(in srgb, var(--primario-negocio) 35%, #fff);
    background: color-mix(in srgb, var(--primario-negocio) 8%, #fff);
    color: var(--primario-negocio);
}
.btn-cotizacion:hover { background: color-mix(in srgb, var(--primario-negocio) 14%, #fff); }


/*
|--------------------------------------------------------------------------
| AVISO CERRADO / SEGUROS / "¿YA RESERVASTE?"
|--------------------------------------------------------------------------
*/

.aviso-cerrado {
    margin: 18px 0 0; padding: 16px 18px;
    display: flex; align-items: flex-start; gap: 12px;
    border: 1px solid #E6B455; border-radius: var(--radio);
    background: #F4F4F9; color: #9A5B13;
}
.aviso-cerrado svg { width: 21px; height: 21px; flex: 0 0 auto; margin-top: 1px; }
.aviso-cerrado strong { display: block; margin-bottom: 3px; font-size: 13.5px; }
.aviso-cerrado span { display: block; font-size: 12.5px; line-height: 1.55; }

.seguros-caja h4 { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; font-size: 14.5px; color: var(--tinta); }
.seguros-caja h4 svg { width: 17px; height: 17px; color: var(--verde-texto); }
.seguros-caja p { margin: 0 0 12px; font-size: 13px; color: var(--gris); line-height: 1.55; }
.seguros-lista { display: flex; flex-wrap: wrap; gap: 8px; }
.seguro-chip {
    padding: 7px 13px; border-radius: 999px;
    background: var(--verde-fondo); color: var(--verde-texto);
    font-size: 12px; font-weight: 700;
}

.barra-mi-cita {
    margin-top: 16px;
    display: flex; align-items: center; gap: 13px;
    padding: 14px 16px;
    border: 1px solid var(--borde); border-radius: var(--radio);
    background: #fff;
    transition: border-color var(--trans), background var(--trans);
}
.barra-mi-cita:hover { border-color: var(--primario-negocio); background: color-mix(in srgb, var(--primario-negocio) 4%, #fff); }
.barra-mi-cita.sin-margen-arriba { margin-top: 0; }
.barra-mi-cita-ico {
    flex: 0 0 40px; width: 40px; height: 40px; border-radius: 11px;
    display: grid; place-items: center;
    background: color-mix(in srgb, var(--primario-negocio) 12%, #fff);
    color: var(--primario-negocio);
}
.barra-mi-cita-ico svg { width: 19px; height: 19px; }
.barra-mi-cita-txt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.barra-mi-cita-txt strong { font-size: 13.5px; color: var(--tinta); }
.barra-mi-cita-txt small { font-size: 12px; color: var(--gris); line-height: 1.4; }
.barra-mi-cita > svg:last-child { width: 18px; height: 18px; color: var(--gris-claro); flex: 0 0 auto; }


/*
|--------------------------------------------------------------------------
| TABS DEL PERFIL — barra de pestañas tipo editorial (subrayado)
|--------------------------------------------------------------------------
*/

.header-tabs {
    position: relative;
    border-top: 1px solid var(--borde);
    background: rgba(255,255,255,.92);
    backdrop-filter: saturate(160%) blur(14px);
}

.header-tabs-fila {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.header-tabs-fila::-webkit-scrollbar { display: none; }

.perfil-tab {
    position: relative;
    flex: 0 0 auto;
    display: inline-flex; align-items: center; gap: 7px;
    padding: 13px 14px;
    font-size: 13.5px; font-weight: 700;
    color: var(--gris);
    white-space: nowrap;
    transition: color var(--trans);
}
.perfil-tab svg { width: 16px; height: 16px; }
.perfil-tab:hover { color: var(--tinta); }
.perfil-tab::after {
    content: '';
    position: absolute; left: 14px; right: 14px; bottom: 0;
    height: 2.5px; border-radius: 2px 2px 0 0;
    background: var(--primario-negocio);
    transform: scaleX(0);
    transition: transform var(--trans);
}
.perfil-tab.activa { color: var(--tinta); }
.perfil-tab.activa::after { transform: scaleX(1); }

.header-tabs:not(.sin-desborde):not(.al-final)::after {
    content: '';
    position: absolute; top: 0; bottom: 0; right: 0; width: 36px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.95));
    pointer-events: none;
}

/* Celular (6"): las pestañas se reparten el ancho y caben todas a la vista,
   sin que "Información" quede cortada en el borde. Sin íconos para ganar espacio. */
@media (max-width: 480px) {
    .header-tabs-fila { gap: 0; }
    .perfil-tab {
        flex: 1 1 auto;
        justify-content: center;
        padding: 13px 6px;
        font-size: 13px;
    }
    .perfil-tab svg { display: none; }
    .perfil-tab::after { left: 6px; right: 6px; }
}


/*
|--------------------------------------------------------------------------
| CABECERA DE SECCIÓN
|--------------------------------------------------------------------------
*/

.seccion-cabecera {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 18px; flex-wrap: wrap;
    margin-bottom: 22px;
}

.seccion-cabecera h2 {
    margin: 0 0 6px;
    display: flex; align-items: center; gap: 10px;
    font-size: 20px; letter-spacing: -.01em;
}

.seccion-marca {
    display: inline-grid; place-items: center;
    width: 34px; height: 34px; border-radius: 10px;
    background: color-mix(in srgb, var(--deco, var(--primario-negocio)) 13%, #fff);
}
.seccion-marca i { font-size: 18px; color: var(--deco, var(--primario-negocio)); }

.seccion-cabecera p { margin: 0; color: var(--gris); font-size: 13.5px; max-width: 560px; }

.seccion-linea { flex: 1 1 auto; min-width: 20px; }


/*
|--------------------------------------------------------------------------
| CATEGORÍAS DEL MENÚ
|--------------------------------------------------------------------------
*/

.categoria-menu + .categoria-menu { margin-top: 30px; }

.categoria-menu-titulo { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.categoria-menu-icono {
    width: 36px; height: 36px; border-radius: 10px;
    display: grid; place-items: center;
    background: color-mix(in srgb, var(--deco, var(--primario-negocio)) 13%, #fff);
    color: var(--deco, var(--primario-negocio));
}
.categoria-menu-icono svg { width: 18px; height: 18px; }
.categoria-menu-titulo h3 { margin: 0; font-size: 15.5px; }
.categoria-menu-titulo span { font-size: 12px; color: var(--gris); }


/*
|--------------------------------------------------------------------------
| PRODUCTOS
|--------------------------------------------------------------------------
*/

.grid-productos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 14px;
    align-items: start;
}

.producto {
    position: relative;
    display: flex; flex-direction: column;
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    background: #fff;
    overflow: hidden;
    transition: box-shadow var(--trans), transform var(--trans), border-color var(--trans);
}
.producto:hover { box-shadow: var(--sombra-md); transform: translateY(-2px); border-color: var(--borde-fuerte); }

.producto-imagen {
    position: relative;
    aspect-ratio: 16 / 10;
    min-height: 0;
    overflow: hidden;
    background: var(--fondo-alt);
}
.producto-imagen img { display: block; width: 100%; height: 100%; object-fit: cover; }
.producto-sin-imagen { width: 100%; height: 100%; display: grid; place-items: center; color: var(--gris-claro); }
.producto-sin-imagen svg { width: 28px; height: 28px; }

.producto-destacado {
    position: absolute; top: 8px; left: 8px;
    padding: 3px 9px; border-radius: 999px;
    background: var(--tinta); color: #fff;
    font-size: 10px; font-weight: 800; letter-spacing: .04em;
}

.favorito-btn { position: absolute; top: 8px; right: 8px; }

.producto-info { padding: 12px; display: flex; flex-direction: column; gap: 4px; flex: 1 1 auto; }
.producto-info h3 { margin: 0; font-size: 14px; line-height: 1.25; }
.producto-info p { margin: 0; font-size: 12px; color: var(--gris); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }

.producto-precio { margin-top: 2px; font-family: var(--fuente-num); font-size: 15.5px; font-weight: 800; color: var(--tinta); }

.disponibilidad { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; }
.disponibilidad svg { width: 13px; height: 13px; }
.disponibilidad.disponible { color: var(--verde-texto); }
.disponibilidad.consultar { color: var(--amarillo-texto); }
.disponibilidad.agotado { color: var(--rojo-texto); }

.producto-form { margin-top: 8px; }
.producto-boton {
    width: 100%; min-height: 34px;
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    border-radius: 9px; border: none;
    background: var(--boton, var(--primario-negocio));
    color: #fff; font-size: 12.5px; font-weight: 800;
    cursor: pointer;
    transition: filter var(--trans);
}
.producto-boton:hover { filter: brightness(1.08); }
.producto-boton svg { width: 15px; height: 15px; }
.producto-boton.consultar { background: var(--tinta); }
.producto-boton.agotado { background: var(--fondo-alt); color: var(--gris-claro); cursor: not-allowed; }


/*
|--------------------------------------------------------------------------
| SERVICIOS
|--------------------------------------------------------------------------
*/

.grid-servicios {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 18px;
}

.servicio {
    position: relative;
    padding: 20px;
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    background: #fff;
    display: flex; flex-direction: column;
    transition: box-shadow var(--trans), transform var(--trans), border-color var(--trans);
}
.servicio:hover { box-shadow: var(--sombra-md); transform: translateY(-2px); border-color: var(--borde-fuerte); }

.servicio-icono {
    width: 46px; height: 46px; margin-bottom: 14px;
    border-radius: 12px;
    display: grid; place-items: center;
    background: color-mix(in srgb, var(--deco, var(--primario-negocio)) 13%, #fff);
    color: var(--deco, var(--primario-negocio));
}
.servicio-icono svg { width: 22px; height: 22px; }

.servicio h3 { margin: 0 0 6px; font-size: 15.5px; }
.servicio > p { margin: 0 0 12px; font-size: 13px; color: var(--gris); line-height: 1.55; }

.servicio-precio { font-family: var(--fuente-num); font-size: 16px; font-weight: 800; color: var(--tinta); margin-bottom: 4px; }
.precio-seguro { display: flex; flex-direction: column; gap: 1px; }
.precio-eti { font-size: 11px; font-weight: 600; color: var(--verde-texto); text-transform: uppercase; letter-spacing: .03em; }
.precio-fuerte { font-family: var(--fuente-num); font-size: 17px; color: var(--tinta); }
.precio-sin { font-size: 11.5px; color: var(--gris); font-weight: 500; }

.nota-seguro { display: flex; align-items: flex-start; gap: 6px; margin-bottom: 10px; font-size: 11.5px; color: var(--gris); line-height: 1.45; }
.nota-seguro svg { width: 13px; height: 13px; flex: 0 0 auto; margin-top: 1px; }

.servicio-tipo {
    display: inline-flex; align-items: center; gap: 6px;
    margin-bottom: 12px; font-size: 11.5px; font-weight: 700;
    color: var(--gris);
}
.servicio-tipo svg { width: 14px; height: 14px; }
.servicio-tipo.cita { color: var(--primario-negocio); }

.servicio-acciones { display: grid; gap: 8px; margin-top: auto; }

.servicio-reservar, .servicio-contactar {
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    min-height: 40px; border-radius: 10px;
    font-size: 12.5px; font-weight: 800;
    transition: filter var(--trans), background var(--trans), border-color var(--trans);
}
.servicio-reservar svg, .servicio-contactar svg { width: 15px; height: 15px; }
.servicio-reservar { background: var(--boton, var(--primario-negocio)); color: #fff; }
.servicio-reservar:hover { filter: brightness(1.08); }
.servicio-contactar { border: 1px solid var(--borde); color: var(--tinta); background: #fff; }
.servicio-contactar:hover { border-color: var(--tinta); }

.servicio .servicio-foto {
    position: relative; margin: 0 0 14px;
    aspect-ratio: 4 / 3; border-radius: 12px; overflow: hidden;
    background: var(--fondo-alt);
}
.servicio .servicio-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }


/*
|--------------------------------------------------------------------------
| PORTAFOLIO
|--------------------------------------------------------------------------
*/

.portfolio-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; flex-wrap: wrap; margin-bottom: 22px; }
.portfolio-eyebrow { display: inline-flex; align-items: center; gap: 7px; margin-bottom: 8px; font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--deco, var(--primario-negocio)); }
.portfolio-eyebrow i { font-size: 15px; }
.portfolio-heading-main h2 { margin: 0 0 6px; font-size: 20px; }
.portfolio-heading-main p { margin: 0; color: var(--gris); font-size: 13.5px; max-width: 560px; }
.portfolio-count { display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px; border-radius: 999px; background: var(--fondo-alt); color: var(--gris); font-size: 12px; font-weight: 700; white-space: nowrap; }
.portfolio-count svg { width: 14px; height: 14px; }

.portafolio-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 18px; }

.trabajo-publico {
    position: relative;
    aspect-ratio: 4 / 5;
    border-radius: var(--radio);
    overflow: hidden;
    cursor: pointer;
    background: var(--tinta);
    transition: transform var(--trans), box-shadow var(--trans);
}
.trabajo-publico:hover { transform: translateY(-3px); box-shadow: var(--sombra-lg); }
.trabajo-publico-media { position: absolute; inset: 0; }
.trabajo-publico-media img { width: 100%; height: 100%; object-fit: cover; }
.trabajo-publico-media iframe { width: 100%; height: 100%; border: 0; pointer-events: none; }
.trabajo-publico-media svg { width: 36px; height: 36px; margin: auto; display: block; color: rgba(255,255,255,.4); }
.trabajo-publico-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,.08) 0%, rgba(0,0,0,0) 32%, rgba(0,0,0,.72) 100%);
}
.trabajo-publico-top { position: absolute; top: 12px; left: 12px; right: 12px; display: flex; align-items: center; justify-content: space-between; z-index: 2; }
.portfolio-badge { display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; border-radius: 999px; background: rgba(23,26,43,.55); backdrop-filter: blur(6px); color: #fff; font-size: 10.5px; font-weight: 700; }
.portfolio-badge svg { width: 12px; height: 12px; }
.portfolio-open { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.18); backdrop-filter: blur(6px); color: #fff; }
.portfolio-open svg { width: 15px; height: 15px; }
.trabajo-publico-info { position: absolute; left: 16px; right: 16px; bottom: 14px; z-index: 2; color: #fff; }
.trabajo-meta { display: flex; align-items: center; gap: 7px; margin-bottom: 4px; font-size: 11px; color: rgba(255,255,255,.75); }
.trabajo-meta-sep { width: 3px; height: 3px; border-radius: 50%; background: currentColor; }
.trabajo-publico-info h3 { margin: 0; color: #fff; font-size: 15px; line-height: 1.3; }
.trabajo-publico-info p { margin: 4px 0 0; font-size: 12px; color: rgba(255,255,255,.75); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* Lightbox del portafolio */
.portfolio-modal {
    position: fixed; inset: 0; z-index: 1000;
    display: none;
    background: rgba(10, 11, 20, .88);
    backdrop-filter: blur(6px);
}
.portfolio-modal.activo { display: flex; align-items: center; justify-content: center; padding: 20px; }
.portfolio-modal-dialog {
    width: min(1040px, 100%); max-height: 92vh;
    display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(280px, 1fr);
    background: #fff; border-radius: var(--radio-lg); overflow: hidden;
    box-shadow: var(--sombra-lg);
}
.portfolio-modal-media { position: relative; background: #0A0B14; min-height: 320px; display: grid; }
.portfolio-modal-media img, .portfolio-modal-media video { width: 100%; height: 100%; max-height: 80vh; object-fit: contain; }
.portfolio-modal-close {
    position: absolute; top: 14px; right: 14px; z-index: 3;
    width: 36px; height: 36px; border-radius: 50%; border: none;
    background: rgba(255,255,255,.14); color: #fff; display: grid; place-items: center; cursor: pointer;
}
.portfolio-modal-close:hover { background: rgba(255,255,255,.26); }
.portfolio-nav {
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
    width: 38px; height: 38px; border-radius: 50%; border: none;
    background: rgba(255,255,255,.14); color: #fff; display: grid; place-items: center; cursor: pointer;
}
.portfolio-nav:hover { background: rgba(255,255,255,.26); }
.portfolio-nav.anterior { left: 14px; }
.portfolio-nav.siguiente { right: 14px; }
.portfolio-modal-side { padding: 28px; overflow-y: auto; display: flex; flex-direction: column; }
.portfolio-modal-side h3 { margin: 0 0 10px; font-size: 19px; }
.portfolio-modal-side p { margin: 0 0 12px; font-size: 13.5px; color: var(--gris); line-height: 1.6; }
.portfolio-modal-date { font-size: 12px; color: var(--gris-claro); margin-bottom: 18px; }
.portfolio-thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 20px; }
.portfolio-thumb { aspect-ratio: 1; border-radius: 8px; overflow: hidden; cursor: pointer; opacity: .55; border: 2px solid transparent; }
.portfolio-thumb img { width: 100%; height: 100%; object-fit: cover; }
.portfolio-thumb.activo { opacity: 1; border-color: var(--primario-negocio); }
.portfolio-modal-contacto { margin-top: auto; }
.portfolio-modal-contacto a {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    width: 100%; min-height: 44px; border-radius: 11px;
    background: var(--boton, var(--primario-negocio)); color: #fff; font-weight: 800; font-size: 13.5px;
}
.portfolio-modal-contacto svg { width: 16px; height: 16px; }

@media (max-width: 760px) {
    .portfolio-modal-dialog { grid-template-columns: 1fr; grid-template-rows: auto auto; max-height: none; }
    .portfolio-modal-media { aspect-ratio: 4/3; min-height: 0; }
}


/*
|--------------------------------------------------------------------------
| RESEÑAS
|--------------------------------------------------------------------------
*/

.resenas-resumen { display: flex; align-items: center; gap: 9px; margin: 0; font-size: 13px; color: var(--gris); }
.resenas-promedio { font-family: var(--fuente-num); font-size: 19px; font-weight: 800; color: var(--tinta); }
.resenas-estrellas { display: inline-flex; gap: 1px; }
.resenas-estrellas i, .resenas-estrellas svg { width: 15px; height: 15px; color: #DCDAD2; }
.resenas-estrellas span.llena i, .resenas-estrellas span.llena svg { color: #F2A93C; fill: #F2A93C; }

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

.resena-tarjeta { padding: 18px; border: 1px solid var(--borde); border-radius: var(--radio); background: #fff; }
.resena-cabecera { display: flex; align-items: center; gap: 11px; margin-bottom: 10px; }
.resena-avatar {
    width: 38px; height: 38px; border-radius: 50%; flex: 0 0 auto;
    display: grid; place-items: center;
    background: color-mix(in srgb, var(--primario-negocio) 16%, #fff);
    color: var(--primario-negocio);
    font-weight: 800; font-size: 14px;
}
.resena-cabecera strong { display: block; font-size: 13.5px; color: var(--tinta); }
.resena-estrellas { display: inline-flex; gap: 1px; margin-top: 2px; }
.resena-estrellas i, .resena-estrellas svg { width: 13px; height: 13px; color: #DCDAD2; }
.resena-estrellas span.llena i, .resena-estrellas span.llena svg { color: #F2A93C; fill: #F2A93C; }
.resena-comentario { margin: 0; font-size: 13.5px; color: var(--texto); line-height: 1.6; }
.resena-respuesta { margin-top: 12px; padding: 12px 14px; border-radius: 10px; background: var(--fondo-alt); }
.resena-respuesta strong { display: block; margin-bottom: 3px; font-size: 12px; color: var(--tinta); }
.resena-respuesta p { margin: 0; font-size: 12.5px; color: var(--gris); line-height: 1.55; }

.modal-resena { position: fixed; inset: 0; z-index: 1000; display: none; background: rgba(10,11,20,.6); backdrop-filter: blur(4px); }
.modal-resena.abierto { display: flex; align-items: center; justify-content: center; padding: 20px; }
.modal-resena-caja { width: min(440px, 100%); max-height: 90vh; overflow-y: auto; background: #fff; border-radius: var(--radio-lg); padding: 28px; position: relative; box-shadow: var(--sombra-lg); }
.modal-resena-caja h3 { margin: 0 0 6px; font-size: 19px; }
.modal-resena-caja > p { margin: 0 0 16px; font-size: 13.5px; color: var(--gris); }
.modal-resena-cerrar { position: absolute; top: 16px; right: 16px; width: 32px; height: 32px; border-radius: 50%; border: none; background: var(--fondo-alt); color: var(--gris); display: grid; place-items: center; cursor: pointer; }
.modal-resena-cerrar:hover { background: var(--borde); }
.estrellas-input { display: flex; gap: 4px; }
.estrellas-input label { cursor: pointer; }
.estrellas-input input { position: absolute; opacity: 0; pointer-events: none; }
.estrellas-input svg { width: 26px; height: 26px; color: #DCDAD2; transition: color var(--trans); }
.estrellas-input label:hover svg, .estrellas-input label:hover ~ label svg { color: #F2A93C; }
.resena-nota { margin: 10px 0 0; font-size: 11.5px; color: var(--gris-claro); text-align: center; }
.resena-exito { display: flex; gap: 10px; align-items: flex-start; padding: 14px 16px; border-radius: var(--radio); background: var(--verde-fondo); color: var(--verde-texto); }
.resena-exito svg { width: 20px; height: 20px; flex: 0 0 auto; }
.resena-exito p { margin: 0; font-size: 13.5px; line-height: 1.5; }


/*
|--------------------------------------------------------------------------
| INFORMACIÓN
|--------------------------------------------------------------------------
*/

.info-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.info-grid > .panel { min-width: 0; }

.panel h3 { display: flex; align-items: center; gap: 9px; margin: 0 0 14px; font-size: 14.5px; }
.panel h3 svg { width: 17px; height: 17px; color: var(--gris); }

.info-fila { display: flex; align-items: center; gap: 13px; padding: 12px 0; border-top: 1px solid var(--borde); }
.info-fila:first-of-type { border-top: 0; }
.info-fila-icono .info-icono { flex: 0 0 38px; width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; }
.info-icono svg { width: 17px; height: 17px; }
/* Un solo tono neutro (tinta sobre papel) para todos los íconos de
   "Información": una identidad, no una paleta de iconos genérica. */
.tono-azul, .tono-morado, .tono-naranja, .tono-rojo, .tono-verde {
    background: var(--fondo-alt);
    color: var(--tinta);
}

.info-fila-texto { min-width: 0; overflow-wrap: anywhere; display: flex; flex-direction: column; gap: 1px; }
.info-fila-texto small { font-size: 11.5px; color: var(--gris); }
.info-fila-texto strong { font-size: 13.5px; color: var(--tinta); font-weight: 700; }

.info-fila-clicable { transition: opacity var(--trans); }
.info-fila-clicable:hover { opacity: .72; }
.info-fila-flecha { width: 16px; height: 16px; margin-left: auto; color: var(--gris-claro); flex: 0 0 auto; }

.info-mapa { margin: 12px 0; border-radius: 12px; overflow: hidden; aspect-ratio: 16/9; border: 1px solid var(--borde); }
.info-mapa iframe { width: 100%; height: 100%; border: 0; }

.horario { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 0; border-top: 1px solid var(--borde); font-size: 13.5px; }
.horario:first-of-type { border-top: 0; }
.horario strong { color: var(--tinta); font-weight: 700; }
.horario span { color: var(--texto); font-family: var(--fuente-num); }
.horario span.cerrado { color: var(--gris-claro); font-family: var(--fuente-texto); }

@media (max-width: 760px) {
    .info-grid { grid-template-columns: minmax(0, 1fr); }
}


/*
|--------------------------------------------------------------------------
| AGENDA (profesionales con cita)
|--------------------------------------------------------------------------
*/

.agenda-grid { display: grid; gap: 2px; }
.agenda-linea { display: grid; grid-template-columns: 90px 1fr; gap: 14px; padding: 12px 0; border-top: 1px solid var(--borde); }
.agenda-linea:first-child { border-top: 0; }
.agenda-linea-hoy { background: color-mix(in srgb, var(--primario-negocio) 5%, transparent); margin: 0 -10px; padding-left: 10px; padding-right: 10px; border-radius: 10px; }
.agenda-dia { display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 700; color: var(--tinta); }
.agenda-hoy-etiqueta { padding: 2px 7px; border-radius: 999px; background: var(--primario-negocio); color: #fff; font-size: 9.5px; font-weight: 800; }
.agenda-detalle { display: flex; flex-direction: column; gap: 6px; }
.agenda-slot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 12.5px; }
.agenda-hora { font-family: var(--fuente-num); font-weight: 700; color: var(--tinta); }
.agenda-quien { color: var(--gris); }
.agenda-quien::before { content: '·'; margin-right: 8px; color: var(--gris-claro); }
.agenda-lugar { display: inline-flex; align-items: center; gap: 4px; color: var(--gris); }
.agenda-lugar svg { width: 12px; height: 12px; }
.agenda-modo { padding: 2px 8px; border-radius: 999px; background: var(--amarillo-fondo); color: var(--amarillo-texto); font-size: 10.5px; font-weight: 700; }


/*
|--------------------------------------------------------------------------
| VACÍO
|--------------------------------------------------------------------------
*/

.vacio {
    padding: 48px 20px;
    text-align: center;
    color: var(--gris);
    font-size: 13.5px;
    display: flex; flex-direction: column; align-items: center; gap: 2px;
}
.vacio strong { color: var(--tinta); font-size: 14.5px; }


/*
|--------------------------------------------------------------------------
| FOOTER
|--------------------------------------------------------------------------
*/

footer {
    padding: 26px 0 60px;
    text-align: center;
    font-size: 12.5px;
    color: var(--gris-claro);
}


/*
|--------------------------------------------------------------------------
| CARRITO MÓVIL (barra flotante)
|--------------------------------------------------------------------------
*/

.carrito-movil {
    position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 90;
    display: flex; align-items: center; justify-content: space-between;
    min-height: 52px; padding: 0 18px;
    border-radius: 14px;
    background: var(--tinta);
    color: #fff;
    box-shadow: var(--sombra-lg);
}
.carrito-movil > div { display: flex; align-items: center; gap: 9px; font-size: 14px; font-weight: 700; }
.carrito-movil svg { width: 19px; height: 19px; }
.carrito-movil span#carritoCantidadMovil {
    display: inline-grid; place-items: center;
    min-width: 24px; height: 24px; padding: 0 6px;
    border-radius: 999px;
    background: var(--primario-negocio);
    font-size: 12.5px; font-weight: 800;
}


/*
|--------------------------------------------------------------------------
| SIDEBAR DEL CARRITO
|--------------------------------------------------------------------------
*/

.carrito-overlay {
    position: fixed; inset: 0; z-index: 200;
    background: rgba(10,11,20,.5);
    backdrop-filter: blur(3px);
    opacity: 0; visibility: hidden;
    transition: opacity var(--trans);
}
.carrito-overlay.activo { opacity: 1; visibility: visible; }

.carrito-sidebar {
    position: fixed; top: 0; right: 0; bottom: 0; z-index: 201;
    width: min(420px, 100%);
    background: #fff;
    display: flex; flex-direction: column;
    transform: translateX(100%);
    transition: transform .28s cubic-bezier(.4,0,.2,1);
    box-shadow: var(--sombra-lg);
}
.carrito-sidebar.activo { transform: translateX(0); }

.carrito-sidebar-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 20px 22px; border-bottom: 1px solid var(--borde); }
.carrito-sidebar-head-info { display: flex; align-items: center; gap: 12px; min-width: 0; }
.carrito-sidebar-icono { flex: 0 0 40px; width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; background: var(--fondo-alt); color: var(--tinta); }
.carrito-sidebar-icono svg { width: 19px; height: 19px; }
.carrito-sidebar-head-info div { min-width: 0; }
.carrito-sidebar-head-info strong { display: block; font-size: 15px; color: var(--tinta); }
.carrito-sidebar-head-info span { display: block; font-size: 12px; color: var(--gris); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.carrito-cerrar { width: 34px; height: 34px; border-radius: 50%; border: none; background: var(--fondo-alt); color: var(--gris); display: grid; place-items: center; cursor: pointer; flex: 0 0 auto; }
.carrito-cerrar:hover { background: var(--borde); }

.carrito-sidebar-body { flex: 1 1 auto; overflow-y: auto; padding: 18px 22px; }
.carrito-cargando { padding: 40px 0; text-align: center; color: var(--gris); font-size: 13.5px; }

.carrito-side-item { display: flex; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--borde); }
.carrito-side-foto { flex: 0 0 56px; width: 56px; height: 56px; border-radius: 10px; overflow: hidden; background: var(--fondo-alt); }
.carrito-side-foto img { width: 100%; height: 100%; object-fit: cover; }
.carrito-side-info { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.carrito-side-precio { font-family: var(--fuente-num); font-weight: 800; color: var(--tinta); font-size: 13.5px; }
.carrito-side-controles { display: flex; align-items: center; gap: 10px; }
.carrito-side-controles button {
    width: 26px; height: 26px; border-radius: 7px; border: 1px solid var(--borde);
    background: #fff; display: grid; place-items: center; cursor: pointer; color: var(--tinta);
}
.carrito-side-controles button:hover { border-color: var(--tinta); }
.carrito-side-controles span { font-family: var(--fuente-num); font-weight: 700; min-width: 18px; text-align: center; }
.carrito-side-eliminar { margin-left: auto; color: var(--rojo-texto); cursor: pointer; background: none; border: none; }

.carrito-sidebar-foot { padding: 18px 22px; border-top: 1px solid var(--borde); }
.carrito-sidebar-total { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; font-size: 14px; }
.carrito-sidebar-total strong { font-family: var(--fuente-num); font-size: 18px; color: var(--tinta); }
.carrito-finalizar {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    width: 100%; min-height: 48px; border-radius: 12px;
    background: var(--boton, var(--primario-negocio)); color: #fff;
    font-weight: 800; font-size: 14px;
}
.carrito-finalizar:hover { filter: brightness(1.08); }
.carrito-finalizar.oculto { display: none; }
.carrito-sidebar-vacio { padding: 40px 0; text-align: center; color: var(--gris); font-size: 13.5px; }

.carrito-toast {
    position: fixed; left: 50%; bottom: 24px; z-index: 300;
    transform: translate(-50%, 16px);
    padding: 12px 20px; border-radius: 999px;
    background: var(--tinta); color: #fff; font-size: 13px; font-weight: 700;
    opacity: 0; visibility: hidden;
    transition: opacity var(--trans), transform var(--trans);
    box-shadow: var(--sombra-lg);
}
.carrito-toast.visible { opacity: 1; visibility: visible; transform: translate(-50%, 0); }


/*
|--------------------------------------------------------------------------
| FONDOS POR OFICIO (campo del perfil)
|--------------------------------------------------------------------------
*/

.perfil.perfil-tema {
    padding-bottom: 22px;
    --deco: hsl(var(--tono), 30%, 34%);
    --fondo-tema: hsl(var(--tono), 22%, 96%);
    background: var(--fondo-tema) !important;
}
.perfil.perfil-tema-salud       { --deco: #136E76; --fondo-tema: #F0F6F6; }
.perfil.perfil-tema-barberia    { --deco: #23283B; --fondo-tema: #EDEDF5; }
.perfil.perfil-tema-salon       { --deco: #9A4368; --fondo-tema: #F7F0F3; }
.perfil.perfil-tema-restaurante { --deco: #A6512A; --fondo-tema: #F4F4F9; }
.perfil.perfil-tema-colmado     { --deco: #47784E; --fondo-tema: #F1F5F1; }
.perfil.perfil-tema .perfil-bio { color: var(--texto); }


/*
|--------------------------------------------------------------------------
| TABLET
|--------------------------------------------------------------------------
*/

@media (max-width: 960px) {
    .tarjeta-seccion { padding: 24px 22px; }
    .grid-productos { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; }
    .grid-servicios { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
}


/*
|--------------------------------------------------------------------------
| MÓVIL
|--------------------------------------------------------------------------
*/

@media (max-width: 640px) {
    .ficha-negocio { margin-top: 0; border-left: 0; border-right: 0; border-radius: 0; }
    body.pagina-negocio .contenedor { width: 100%; padding: 0 16px; }
    .tarjeta-seccion { padding: 20px 16px; }
    .portada { aspect-ratio: 16/9; max-height: 220px; }
    .grid-productos { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .producto-info { padding: 12px; }
    .producto-info h3 { font-size: 13.5px; }
    .producto-precio { font-size: 15px; }
    .grid-servicios { grid-template-columns: 1fr; }
    .portafolio-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .resenas-lista { grid-template-columns: 1fr; }
    .seccion-cabecera { margin-bottom: 16px; }
    body.con-carrito .tarjeta-seccion:last-child,
    body.con-carrito footer { padding-bottom: 86px; }
}


/*
|--------------------------------------------------------------------------
| HORARIO INTERACTIVO (clases .hz-*, estilo embebido en negocio.php)
|--------------------------------------------------------------------------
| Las reglas de color/forma viven en un <style> dentro de negocio.php
| (ver includes/layout_head.php → negocio.php) porque dependen del
| color del negocio en tiempo real; aquí solo el reset de caja.
*/
.hz-lista { margin-top: 2px; }



/* =========================================================
   CAPA EDITORIAL (rediseño 2026)
   Misma letra que el resto del sitio y menos adornos: sin el
   ícono gigante de fondo, sin cajita de color en cada título.
   El color del negocio sigue siendo el protagonista.
   ========================================================= */

body { font-feature-settings: 'ss01' on; }
/* Precios con números proporcionales: con números tabulares
   esta letra separa demasiado la coma y el punto (RD$1 , 500 . 00) */
.producto-precio, .servicio-precio, .precio-fuerte, .resenas-promedio,
.perfil-rating-num, .carrito-side-precio, .carrito-sidebar-total strong { font-variant-numeric: normal; letter-spacing: -.01em; }

/* app.css pone una raya de tinta sobre .seccion-cabecera; aquí
   cada sección ya vive en su propia tarjeta, así que sobra. */
.seccion-cabecera { border-top: 0; padding-top: 0; align-items: flex-end; }
.seccion-cabecera h2 { font-size: 24px; font-weight: 800; letter-spacing: -.025em; }
.seccion-cabecera p { font-size: 14.5px; }
.seccion-marca { display: none; }
.seccion-cabecera .seccion-icono { display: none !important; }

.perfil-deco { display: none; }

.portada-marca-icono { display: none; }
.portada-marca-nombre {
    max-width: 22ch;
    font-family: var(--fuente-serif, Georgia, serif);
    font-style: italic; font-weight: 400;
    font-size: clamp(26px, 3.4vw, 40px);
    letter-spacing: -.01em; line-height: 1.1;
    text-shadow: none;
}

.avatar-negocio { border-radius: 16px; }

/* Enlace a la página de zona, junto a la ubicación del perfil */
.perfil-meta-zona {
    font-size: 13px; font-weight: 600; color: var(--tinta);
    border-bottom: 1.5px solid currentColor; padding-bottom: 1px;
}
.perfil-meta-zona:hover { color: var(--primario-negocio); }


/*
|--------------------------------------------------------------------------
| CELULAR DE 6" (360–430 px)
|--------------------------------------------------------------------------
| Menos "caja dentro de caja": en la pestaña Información las tarjetas
| (Contacto, Horarios) ya no van dentro de otra tarjeta blanca, así el
| contenido aprovecha casi todo el ancho de la pantalla.
*/
@media (max-width: 480px) {
    body.pagina-negocio .contenedor { padding: 0 12px; }
    .tarjeta-seccion { padding: 18px 14px; }
    .seccion .contenedor > .tarjeta-seccion:has(> .info-grid),
    .tarjeta-seccion:has(> .info-grid) {
        padding: 18px 0;
        background: transparent;
        border: 0;
        box-shadow: none;
    }
    .tarjeta-seccion:has(> .info-grid) > .seccion-cabecera { padding: 0 4px; }
    .info-grid { gap: 14px; }
    .panel { padding: 16px; }
    .panel .hz-dia { padding: 14px; }
}