/* =========================================================
   CONFIGURACIÓN GENERAL
========================================================= */

* {
    box-sizing: border-box;
}

:root {
    --turquesa: #12c7c7;
    --turquesa-oscuro: #08a8aa;
    --turquesa-claro: #dffafa;

    --negro: #090d0f;
    --negro-suave: #172126;

    --blanco: #ffffff;
    --fondo: #f5f8f9;
    --fondo-secundario: #edf3f4;

    --texto: #172126;
    --texto-suave: #69787e;

    --borde: #e1e9eb;

    --sombra-suave:
        0 10px 30px rgba(20, 40, 48, 0.08);

    --sombra-media:
        0 18px 45px rgba(20, 40, 48, 0.14);

    --radio-pequeno: 12px;
    --radio-medio: 18px;
    --radio-grande: 28px;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    min-height: 100vh;
    font-family:
        Arial,
        Helvetica,
        sans-serif;

    color: var(--texto);

    background:
        radial-gradient(
            circle at 0% 0%,
            rgba(18, 199, 199, 0.10),
            transparent 28%
        ),
        radial-gradient(
            circle at 100% 8%,
            rgba(18, 199, 199, 0.08),
            transparent 26%
        ),
        var(--fondo);

    overflow-x: hidden;
}

body,
button,
input,
select,
textarea {
    font-family:
        Arial,
        Helvetica,
        sans-serif;
}

a {
    color: inherit;
    text-decoration: none;
}

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

button,
input,
select,
textarea {
    font: inherit;
}

button,
a {
    -webkit-tap-highlight-color: transparent;
}

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


/* =========================================================
   ENCABEZADO
========================================================= */

.encabezado {
    position: sticky;
    top: 0;
    z-index: 1000;

    background: rgba(255, 255, 255, 0.92);

    border-bottom:
        1px solid rgba(225, 233, 235, 0.88);

    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.encabezado-contenido {
    min-height: 82px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 25px;
}

.logo-principal {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}

.logo-imagen {
    width: 185px;
    height: 64px;

    object-fit: contain;
    object-position: left center;
}

.menu-principal {
    display: flex;
    align-items: center;

    gap: 22px;
}

.menu-principal > a:not(.boton) {
    position: relative;

    padding: 10px 0;

    color: #39464b;

    font-size: 0.95rem;
    font-weight: 800;

    transition:
        color 0.2s ease;
}

.menu-principal > a:not(.boton)::after {
    content: "";

    width: 0;
    height: 3px;

    position: absolute;
    left: 0;
    bottom: 2px;

    border-radius: 999px;

    background: var(--turquesa);

    transition:
        width 0.22s ease;
}

.menu-principal > a:not(.boton):hover {
    color: var(--negro);
}

.menu-principal > a:not(.boton):hover::after {
    width: 100%;
}


/* =========================================================
   BOTÓN MENÚ MÓVIL
========================================================= */

.boton-menu-movil {
    width: 44px;
    height: 44px;

    display: none;
    align-items: center;
    justify-content: center;
    flex-direction: column;

    gap: 5px;

    border: 1px solid var(--borde);
    border-radius: 13px;

    background: var(--blanco);

    cursor: pointer;
}

.boton-menu-movil span {
    width: 21px;
    height: 2px;

    display: block;

    border-radius: 999px;

    background: var(--negro);

    transition:
        transform 0.2s ease,
        opacity 0.2s ease;
}

.boton-menu-movil.activo span:nth-child(1) {
    transform:
        translateY(7px)
        rotate(45deg);
}

.boton-menu-movil.activo span:nth-child(2) {
    opacity: 0;
}

.boton-menu-movil.activo span:nth-child(3) {
    transform:
        translateY(-7px)
        rotate(-45deg);
}


/* =========================================================
   BOTONES GENERALES
========================================================= */

.boton {
    min-height: 46px;

    padding: 13px 20px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 8px;

    border: none;
    border-radius: 14px;

    font-size: 0.94rem;
    font-weight: 900;

    cursor: pointer;

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        background 0.2s ease,
        color 0.2s ease;
}

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

.boton-turquesa {
    color: var(--negro);

    background:
        linear-gradient(
            145deg,
            #24d6d6,
            var(--turquesa)
        );

    box-shadow:
        0 12px 25px
        rgba(18, 199, 199, 0.28);
}

.boton-turquesa:hover {
    background:
        linear-gradient(
            145deg,
            var(--turquesa),
            var(--turquesa-oscuro)
        );
}

.boton-oscuro {
    color: var(--blanco);

    background: var(--negro);

    box-shadow:
        0 10px 22px
        rgba(9, 13, 15, 0.18);
}

.boton-oscuro:hover {
    background: #242d31;
}

.boton-claro {
    color: var(--texto);

    background: var(--blanco);

    border: 1px solid var(--borde);
}

.boton-claro:hover {
    border-color: var(--turquesa);
}

.boton-blanco {
    color: var(--negro);

    background: var(--blanco);

    box-shadow:
        0 12px 30px
        rgba(0, 0, 0, 0.12);
}


/* =========================================================
   PORTADA
========================================================= */

.portada {
    padding: 70px 0 54px;
}

.portada-grid {
    display: grid;

    grid-template-columns:
        minmax(0, 1.12fr)
        minmax(390px, 0.88fr);

    align-items: center;

    gap: 46px;
}

.portada-informacion {
    min-width: 0;
}

.etiqueta,
.subtitulo {
    width: max-content;
    max-width: 100%;

    display: inline-flex;
    align-items: center;

    padding: 8px 13px;

    color: var(--negro);

    border:
        1px solid rgba(18, 199, 199, 0.30);

    border-radius: 999px;

    background: var(--turquesa-claro);

    font-size: 0.82rem;
    font-weight: 900;
    letter-spacing: 0.02em;
}

.portada h1 {
    max-width: 760px;

    margin:
        20px 0
        20px;

    font-size:
        clamp(
            2.8rem,
            5.8vw,
            5.35rem
        );

    line-height: 0.98;
    letter-spacing: -0.06em;
}

.portada h1 span {
    display: block;

    color: var(--turquesa-oscuro);
}

.portada-informacion > p {
    max-width: 690px;

    margin: 0;

    color: var(--texto-suave);

    font-size: 1.12rem;
    line-height: 1.75;
}


/* =========================================================
   BUSCADOR
========================================================= */

.buscador {
    max-width: 720px;

    margin-top: 28px;

    display: flex;
    align-items: stretch;

    gap: 11px;
}

.buscador-campo {
    min-width: 0;
    flex: 1;

    position: relative;

    display: flex;
    align-items: center;
}

.buscador-icono {
    position: absolute;
    left: 17px;

    z-index: 2;

    font-size: 1rem;

    pointer-events: none;
}

.buscador input {
    width: 100%;
    min-height: 52px;

    padding:
        15px
        17px
        15px
        48px;

    color: var(--texto);

    border: 1px solid var(--borde);
    border-radius: 15px;

    outline: none;

    background: var(--blanco);

    box-shadow:
        0 8px 22px
        rgba(20, 40, 48, 0.05);

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.buscador input:focus {
    border-color: var(--turquesa);

    box-shadow:
        0 0 0 4px
        rgba(18, 199, 199, 0.12);
}

.buscador input::placeholder {
    color: #8d999e;
}

.portada-botones {
    margin-top: 17px;

    display: flex;
    flex-wrap: wrap;

    gap: 11px;
}


/* =========================================================
   RESUMEN PORTADA
========================================================= */

.resumen-portada {
    margin-top: 25px;

    display: flex;
    flex-wrap: wrap;

    gap: 12px;
}

.resumen-item {
    min-width: 130px;

    padding: 15px 18px;

    border: 1px solid var(--borde);
    border-radius: 16px;

    background: rgba(255, 255, 255, 0.76);

    box-shadow:
        0 8px 20px
        rgba(20, 40, 48, 0.05);
}

.resumen-item strong {
    display: block;

    color: var(--turquesa-oscuro);

    font-size: 1.55rem;
}

.resumen-item span {
    display: block;

    margin-top: 3px;

    color: var(--texto-suave);

    font-size: 0.88rem;
    font-weight: 700;
}


/* =========================================================
   PANEL PORTADA
========================================================= */

.portada-panel {
    min-height: 450px;

    position: relative;
    overflow: hidden;

    padding: 34px;

    display: flex;
    align-items: stretch;

    color: var(--blanco);

    border-radius: 34px;

    background:
        radial-gradient(
            circle at 85% 8%,
            rgba(255, 255, 255, 0.14),
            transparent 25%
        ),
        linear-gradient(
            145deg,
            #0d1113,
            #1a2529
        );

    box-shadow: var(--sombra-media);
}

.portada-panel::after {
    content: "";

    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            135deg,
            transparent,
            rgba(18, 199, 199, 0.10)
        );

    pointer-events: none;
}

.portada-circulo {
    position: absolute;

    border-radius: 50%;

    background:
        rgba(18, 199, 199, 0.17);

    filter: blur(1px);
}

.portada-circulo-uno {
    width: 230px;
    height: 230px;

    right: -75px;
    top: -72px;
}

.portada-circulo-dos {
    width: 175px;
    height: 175px;

    left: -75px;
    bottom: -65px;
}

.portada-panel-contenido {
    position: relative;
    z-index: 2;

    width: 100%;

    display: flex;
    flex-direction: column;
}

.panel-etiqueta {
    width: max-content;

    padding: 8px 13px;

    color: var(--negro);

    border-radius: 999px;

    background: var(--turquesa);

    font-size: 0.82rem;
    font-weight: 900;
}

.portada-panel h2 {
    max-width: 500px;

    margin:
        22px 0
        13px;

    font-size:
        clamp(
            2.2rem,
            4vw,
            3.55rem
        );

    line-height: 1.02;
    letter-spacing: -0.05em;
}

.portada-panel p {
    max-width: 490px;

    margin: 0;

    color: #c8d3d6;

    line-height: 1.65;
}

.panel-beneficios {
    margin-top: auto;
    padding-top: 30px;

    display: grid;

    gap: 12px;
}

.panel-beneficio {
    padding: 14px;

    display: flex;
    align-items: center;

    gap: 13px;

    border:
        1px solid rgba(255, 255, 255, 0.10);

    border-radius: 17px;

    background:
        rgba(255, 255, 255, 0.07);

    backdrop-filter: blur(10px);
}

.panel-beneficio-icono {
    width: 42px;
    height: 42px;

    flex-shrink: 0;

    display: grid;
    place-items: center;

    border-radius: 13px;

    background:
        rgba(18, 199, 199, 0.18);

    font-size: 1.2rem;
}

.panel-beneficio strong {
    display: block;

    color: var(--blanco);

    font-size: 0.93rem;
}

.panel-beneficio small {
    display: block;

    margin-top: 3px;

    color: #aebcc0;
}


/* =========================================================
   SECCIONES
========================================================= */

.seccion {
    padding: 46px 0 76px;
}

.seccion-gris {
    background:
        rgba(237, 243, 244, 0.82);

    border-top: 1px solid var(--borde);
    border-bottom: 1px solid var(--borde);
}

.titulo-seccion {
    margin-bottom: 28px;

    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 20px;
}

.titulo-seccion h2 {
    margin:
        12px 0
        7px;

    font-size:
        clamp(
            2rem,
            4vw,
            3.1rem
        );

    letter-spacing: -0.045em;
}

.titulo-seccion p {
    max-width: 680px;

    margin: 0;

    color: var(--texto-suave);

    line-height: 1.65;
}


/* =========================================================
   CATEGORÍAS
========================================================= */

.grid-categorias {
    display: grid;

    grid-template-columns:
        repeat(
            4,
            minmax(0, 1fr)
        );

    gap: 20px;
}

.tarjeta-categoria {
    min-width: 0;

    overflow: hidden;

    display: flex;
    flex-direction: column;

    border: 1px solid var(--borde);
    border-radius: 27px;

    background: var(--blanco);

    box-shadow: var(--sombra-suave);

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        border-color 0.25s ease;
}

.tarjeta-categoria:hover {
    transform: translateY(-7px);

    border-color:
        rgba(18, 199, 199, 0.55);

    box-shadow: var(--sombra-media);
}

.categoria-imagen {
    height: 175px;

    position: relative;
    overflow: hidden;

    background:
        linear-gradient(
            140deg,
            #e4faf9,
            #f3ffff
        );
}

.categoria-imagen img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform 0.4s ease;
}

.tarjeta-categoria:hover .categoria-imagen img {
    transform: scale(1.07);
}

.categoria-capa {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            180deg,
            transparent 40%,
            rgba(0, 0, 0, 0.30)
        );
}

.imagen-sin-foto {
    width: 100%;
    height: 100%;

    display: grid;
    place-items: center;

    background:
        radial-gradient(
            circle at 20% 15%,
            rgba(255, 255, 255, 0.26),
            transparent 28%
        ),
        linear-gradient(
            145deg,
            var(--turquesa),
            var(--turquesa-oscuro)
        );
}

.imagen-sin-foto span {
    color: var(--negro);

    font-size: 4.8rem;
    font-weight: 900;

    opacity: 0.84;
}

.categoria-cantidad {
    position: absolute;
    left: 14px;
    bottom: 14px;

    z-index: 2;

    padding: 7px 11px;

    color: var(--blanco);

    border-radius: 999px;

    background:
        rgba(9, 13, 15, 0.72);

    backdrop-filter: blur(10px);

    font-size: 0.78rem;
    font-weight: 900;
}

.categoria-contenido {
    padding: 20px;

    display: flex;
    flex-direction: column;
    flex: 1;
}

.categoria-contenido h3 {
    margin:
        0 0
        9px;

    color: var(--negro);

    font-size: 1.3rem;
}

.categoria-contenido p {
    margin:
        0 0
        18px;

    color: var(--texto-suave);

    font-size: 0.94rem;
    line-height: 1.56;
}

.categoria-pie {
    margin-top: auto;
    padding-top: 15px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 12px;

    color: var(--texto-suave);

    border-top: 1px solid var(--borde);

    font-size: 0.88rem;
    font-weight: 800;
}

.categoria-pie strong {
    width: 32px;
    height: 32px;

    display: grid;
    place-items: center;

    color: var(--negro);

    border-radius: 50%;

    background: var(--turquesa);

    font-size: 1.1rem;

    transition:
        transform 0.2s ease;
}

.tarjeta-categoria:hover .categoria-pie strong {
    transform: translateX(4px);
}


/* =========================================================
   NEGOCIOS
========================================================= */

.grid-negocios {
    display: grid;

    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        );

    gap: 22px;
}

.tarjeta-negocio {
    min-width: 0;

    overflow: hidden;

    display: flex;
    flex-direction: column;

    border: 1px solid var(--borde);
    border-radius: 28px;

    background: var(--blanco);

    box-shadow: var(--sombra-suave);

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        border-color 0.25s ease;
}

.tarjeta-negocio:hover {
    transform: translateY(-7px);

    border-color:
        rgba(18, 199, 199, 0.50);

    box-shadow: var(--sombra-media);
}

.negocio-portada {
    height: 185px;

    position: relative;

    background:
        linear-gradient(
            140deg,
            #e6f9f9,
            #f3ffff
        );
}

.negocio-portada > img {
    width: 100%;
    height: 100%;

    object-fit: cover;
}

.portada-sin-imagen {
    width: 100%;
    height: 100%;

    display: grid;
    place-items: center;

    background:
        radial-gradient(
            circle at 15% 10%,
            rgba(255, 255, 255, 0.25),
            transparent 30%
        ),
        linear-gradient(
            145deg,
            var(--turquesa),
            var(--turquesa-oscuro)
        );
}

.portada-sin-imagen span {
    color: rgba(9, 13, 15, 0.72);

    font-size: 2rem;
    font-weight: 900;
}

.insignia-destacado {
    position: absolute;
    top: 15px;
    right: 15px;

    padding: 8px 12px;

    color: var(--blanco);

    border-radius: 999px;

    background:
        rgba(9, 13, 15, 0.78);

    backdrop-filter: blur(10px);

    font-size: 0.78rem;
    font-weight: 900;
}

.negocio-logo {
    width: 86px;
    height: 86px;

    position: absolute;
    left: 19px;
    bottom: -41px;

    overflow: hidden;

    display: grid;
    place-items: center;

    color: var(--negro);

    border: 5px solid var(--blanco);
    border-radius: 24px;

    background: var(--turquesa);

    box-shadow:
        0 10px 22px
        rgba(0, 0, 0, 0.15);

    font-size: 1.7rem;
    font-weight: 900;
}

.negocio-logo img {
    width: 100%;
    height: 100%;

    padding: 5px;

    object-fit: contain;

    background: var(--blanco);
}

.negocio-contenido {
    padding:
        55px 20px
        20px;

    display: flex;
    flex-direction: column;
    flex: 1;
}

.negocio-categoria {
    width: max-content;
    max-width: 100%;

    padding: 7px 11px;

    overflow: hidden;

    color: #087f80;

    border-radius: 999px;

    background: var(--turquesa-claro);

    font-size: 0.78rem;
    font-weight: 900;

    text-overflow: ellipsis;
    white-space: nowrap;
}

.negocio-contenido h3 {
    margin:
        13px 0
        8px;

    color: var(--negro);

    font-size: 1.36rem;
    line-height: 1.25;
}

.negocio-descripcion {
    margin:
        0 0
        16px;

    color: var(--texto-suave);

    line-height: 1.58;
}

.negocio-ubicacion {
    margin-bottom: 18px;

    display: flex;
    align-items: flex-start;

    gap: 8px;

    color: #4d5b60;

    font-size: 0.91rem;
    line-height: 1.45;
}

.ubicacion-icono {
    flex-shrink: 0;
}

.negocio-acciones {
    margin-top: auto;

    display: grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    gap: 8px;
}

.boton-accion {
    min-height: 43px;

    padding: 10px 9px;

    display: flex;
    align-items: center;
    justify-content: center;

    text-align: center;

    border: 1px solid var(--borde);
    border-radius: 12px;

    background: var(--blanco);

    font-size: 0.82rem;
    font-weight: 900;

    transition:
        transform 0.2s ease,
        background 0.2s ease,
        border-color 0.2s ease;
}

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

.boton-llamar {
    color: var(--texto);

    background: #f6f9fa;
}

.boton-whatsapp {
    color: var(--blanco);

    border-color: #1ea95f;

    background: #1ea95f;
}

.boton-whatsapp:hover {
    background: #16864b;
}

.boton-ubicacion {
    color: var(--negro);

    border-color: var(--turquesa);

    background: var(--turquesa);
}

.boton-ubicacion:hover {
    background: var(--turquesa-oscuro);
}

.boton-ver-negocio {
    color: var(--blanco);

    border-color: var(--negro);

    background: var(--negro);
}

.boton-ver-negocio:hover {
    background: #263034;
}


/* =========================================================
   MENSAJES VACÍOS
========================================================= */

.mensaje-vacio {
    padding: 55px 24px;

    text-align: center;

    color: var(--texto-suave);

    border: 1px dashed #c4d1d5;
    border-radius: 25px;

    background:
        rgba(255, 255, 255, 0.76);
}

.mensaje-vacio-icono {
    width: 62px;
    height: 62px;

    margin:
        0 auto
        16px;

    display: grid;
    place-items: center;

    border-radius: 20px;

    background: var(--turquesa-claro);

    font-size: 1.7rem;
}

.mensaje-vacio h3 {
    margin:
        0 0
        8px;

    color: var(--negro);

    font-size: 1.35rem;
}

.mensaje-vacio p {
    margin: 0;
}


/* =========================================================
   LLAMADO FINAL
========================================================= */

.llamado-final {
    padding:
        70px 0;

    color: var(--blanco);

    background:
        radial-gradient(
            circle at 90% 20%,
            rgba(18, 199, 199, 0.22),
            transparent 28%
        ),
        linear-gradient(
            145deg,
            #0a0e10,
            #1a2529
        );
}

.llamado-final-contenido {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 35px;
}

.llamado-etiqueta {
    width: max-content;

    padding: 8px 13px;

    display: inline-flex;

    color: var(--negro);

    border-radius: 999px;

    background: var(--turquesa);

    font-size: 0.82rem;
    font-weight: 900;
}

.llamado-final h2 {
    margin:
        17px 0
        10px;

    font-size:
        clamp(
            2rem,
            4vw,
            3.15rem
        );

    letter-spacing: -0.045em;
}

.llamado-final p {
    max-width: 700px;

    margin: 0;

    color: #b7c4c8;

    line-height: 1.65;
}


/* =========================================================
   PIE DE PÁGINA
========================================================= */

.pie-pagina {
    padding:
        45px 0
        20px;

    color: var(--blanco);

    background: #050809;
}

.pie-contenido {
    display: grid;

    grid-template-columns:
        1.4fr
        0.8fr
        0.8fr;

    gap: 45px;
}

.logo-imagen-pie {
    width: 180px;

    padding: 7px;

    border-radius: 12px;

    background: var(--blanco);
}

.pie-marca p {
    max-width: 320px;

    margin:
        17px 0
        0;

    color: #96a5aa;

    line-height: 1.6;
}

.pie-enlaces {
    display: flex;
    flex-direction: column;

    gap: 11px;
}

.pie-enlaces strong {
    margin-bottom: 4px;

    color: var(--blanco);

    font-size: 0.96rem;
}

.pie-enlaces a,
.pie-enlaces span {
    color: #9eacb1;

    font-size: 0.91rem;
}

.pie-enlaces a:hover {
    color: var(--turquesa);
}

.pie-inferior {
    margin-top: 36px;
    padding-top: 20px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;

    color: #7f8d92;

    border-top:
        1px solid
        rgba(255, 255, 255, 0.09);

    font-size: 0.85rem;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1050px) {

    .portada-grid {
        grid-template-columns: 1fr;
    }

    .portada-panel {
        min-height: 390px;
    }

    .grid-categorias {
        grid-template-columns:
            repeat(
                3,
                minmax(0, 1fr)
            );
    }

    .grid-negocios {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }

}


/* =========================================================
   TABLET PEQUEÑA
========================================================= */

@media (max-width: 820px) {

    .encabezado-contenido {
        min-height: 74px;
    }

    .logo-imagen {
        width: 155px;
        height: 56px;
    }

    .boton-menu-movil {
        display: flex;
    }

    .menu-principal {
        width:
            calc(
                100% - 20px
            );

        position: absolute;
        top: calc(100% + 8px);
        left: 10px;

        padding: 14px;

        display: none;
        flex-direction: column;
        align-items: stretch;

        gap: 5px;

        border: 1px solid var(--borde);
        border-radius: 18px;

        background:
            rgba(255, 255, 255, 0.98);

        box-shadow: var(--sombra-media);
    }

    .menu-principal.menu-visible {
        display: flex;
    }

    .menu-principal > a:not(.boton) {
        padding: 13px 14px;

        border-radius: 11px;
    }

    .menu-principal > a:not(.boton):hover {
        background: var(--turquesa-claro);
    }

    .menu-principal > a:not(.boton)::after {
        display: none;
    }

    .menu-principal .boton {
        width: 100%;
    }

    .grid-categorias {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }

    .llamado-final-contenido {
        align-items: flex-start;
        flex-direction: column;
    }

    .pie-contenido {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }

    .pie-marca {
        grid-column: 1 / -1;
    }

}


/* =========================================================
   MÓVIL
========================================================= */

@media (max-width: 620px) {

    .contenedor {
        width:
            min(
                100% - 20px,
                1180px
            );
    }

    .encabezado-contenido {
        min-height: 68px;
    }

    .logo-imagen {
        width: 135px;
        height: 50px;
    }

    .portada {
        padding:
            39px 0
            34px;
    }

    .portada-grid {
        gap: 28px;
    }

    .portada h1 {
        font-size:
            clamp(
                2.45rem,
                12vw,
                4rem
            );
    }

    .portada-informacion > p {
        font-size: 1rem;
    }

    .buscador {
        flex-direction: column;
    }

    .buscador .boton {
        width: 100%;
    }

    .portada-botones {
        display: grid;

        grid-template-columns: 1fr;
    }

    .portada-botones .boton {
        width: 100%;
    }

    .resumen-portada {
        display: grid;

        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }

    .resumen-item {
        min-width: 0;
    }

    .portada-panel {
        min-height: 360px;

        padding: 24px;

        border-radius: 26px;
    }

    .portada-panel h2 {
        font-size: 2.35rem;
    }

    .panel-beneficio {
        padding: 12px;
    }

    .seccion {
        padding:
            37px 0
            60px;
    }

    .titulo-seccion {
        align-items: flex-start;
        flex-direction: column;
    }

    .grid-categorias,
    .grid-negocios {
        grid-template-columns: 1fr;
    }

    .categoria-imagen {
        height: 185px;
    }

    .negocio-portada {
        height: 190px;
    }

    .negocio-acciones {
        grid-template-columns: 1fr;
    }

    .llamado-final {
        padding: 55px 0;
    }

    .llamado-final .boton {
        width: 100%;
    }

    .pie-contenido {
        grid-template-columns: 1fr;
    }

    .pie-marca {
        grid-column: auto;
    }

    .pie-inferior {
        align-items: flex-start;
        flex-direction: column;
    }

}


/* =========================================================
   PANTALLAS MUY PEQUEÑAS
========================================================= */

@media (max-width: 390px) {

    .logo-imagen {
        width: 122px;
    }

    .portada h1 {
        font-size: 2.4rem;
    }

    .resumen-portada {
        grid-template-columns: 1fr;
    }

    .portada-panel {
        padding: 20px;
    }

    .portada-panel h2 {
        font-size: 2rem;
    }

}
/* =========================================================
   ANIMACIONES JAVASCRIPT
========================================================= */

.elemento-animado {
    opacity: 0;
    transform: translateY(24px);
    transition:
        opacity 0.6s ease,
        transform 0.6s ease;
}

.elemento-visible {
    opacity: 1;
    transform: translateY(0);
}

.campo-error {
    border-color: #dc3545 !important;
    box-shadow:
        0 0 0 4px
        rgba(220, 53, 69, 0.14) !important;
}

.mensaje-busqueda-vacia {
    margin-top: 25px;
    padding: 45px 22px;
    text-align: center;
    color: var(--texto-suave);
    border: 1px dashed #c4d1d5;
    border-radius: 25px;
    background: rgba(255, 255, 255, 0.84);
}

.mensaje-busqueda-vacia h3 {
    margin: 0 0 8px;
    color: var(--negro);
}

.mensaje-busqueda-vacia p {
    margin: 0;
}

/* =========================================================
   PÁGINA DE CATEGORÍA
========================================================= */

.categoria-portada {
    padding: 55px 0 38px;
}

.categoria-portada-contenido {
    min-height: 360px;

    display: grid;
    grid-template-columns:
        minmax(0, 1.15fr)
        minmax(320px, 0.85fr);

    overflow: hidden;

    border: 1px solid var(--borde);
    border-radius: 32px;

    background: var(--blanco);

    box-shadow: var(--sombra-media);
}

.categoria-portada-texto {
    padding: 42px;

    display: flex;
    flex-direction: column;
    justify-content: center;
}

.miga-pan {
    margin-bottom: 22px;

    display: flex;
    flex-wrap: wrap;
    align-items: center;

    gap: 8px;

    color: var(--texto-suave);

    font-size: 0.86rem;
}

.miga-pan a:hover {
    color: var(--turquesa-oscuro);
}

.miga-pan strong {
    color: var(--negro);
}

.categoria-portada h1 {
    margin: 18px 0 13px;

    color: var(--negro);

    font-size:
        clamp(
            2.5rem,
            5vw,
            4.8rem
        );

    line-height: 1;
    letter-spacing: -0.055em;
}

.categoria-portada-texto > p {
    max-width: 680px;

    margin: 0;

    color: var(--texto-suave);

    font-size: 1.05rem;
    line-height: 1.7;
}

.categoria-portada-resumen {
    width: max-content;

    margin-top: 25px;
    padding: 14px 18px;

    display: flex;
    align-items: center;

    gap: 9px;

    border: 1px solid rgba(18, 199, 199, 0.30);
    border-radius: 16px;

    background: var(--turquesa-claro);
}

.categoria-portada-resumen strong {
    color: var(--turquesa-oscuro);

    font-size: 1.5rem;
}

.categoria-portada-resumen span {
    color: var(--texto);

    font-size: 0.9rem;
    font-weight: 800;
}

.categoria-portada-imagen {
    min-height: 360px;

    overflow: hidden;

    background:
        linear-gradient(
            145deg,
            var(--turquesa),
            var(--turquesa-oscuro)
        );
}

.categoria-portada-imagen img {
    width: 100%;
    height: 100%;

    object-fit: cover;
}

.categoria-portada-sin-imagen {
    width: 100%;
    height: 100%;
    min-height: 360px;

    display: grid;
    place-items: center;

    background:
        radial-gradient(
            circle at 20% 15%,
            rgba(255, 255, 255, 0.28),
            transparent 28%
        ),
        linear-gradient(
            145deg,
            var(--turquesa),
            var(--turquesa-oscuro)
        );
}

.categoria-portada-sin-imagen span {
    color: rgba(9, 13, 15, 0.68);

    font-size: 9rem;
    font-weight: 900;
}

.categoria-negocios {
    padding-top: 30px;
}

.buscador-categoria {
    max-width: 660px;

    margin-bottom: 28px;
}

.buscador-categoria input {
    width: 100%;
    min-height: 52px;

    padding:
        15px
        17px
        15px
        48px;

    color: var(--texto);

    border: 1px solid var(--borde);
    border-radius: 15px;

    outline: none;

    background: var(--blanco);

    box-shadow:
        0 8px 22px
        rgba(20, 40, 48, 0.05);
}

.buscador-categoria input:focus {
    border-color: var(--turquesa);

    box-shadow:
        0 0 0 4px
        rgba(18, 199, 199, 0.12);
}

.negocio-horario {
    margin-bottom: 18px;

    display: flex;
    align-items: flex-start;

    gap: 8px;

    color: #4d5b60;

    font-size: 0.9rem;
    line-height: 1.45;
}


/* =========================================================
   RESPONSIVE CATEGORÍA
========================================================= */

@media (max-width: 900px) {

    .categoria-portada-contenido {
        grid-template-columns: 1fr;
    }

    .categoria-portada-imagen {
        min-height: 280px;
        order: -1;
    }

    .categoria-portada-sin-imagen {
        min-height: 280px;
    }

}


@media (max-width: 620px) {

    .categoria-portada {
        padding: 28px 0 24px;
    }

    .categoria-portada-contenido {
        border-radius: 25px;
    }

    .categoria-portada-texto {
        padding: 25px 20px;
    }

    .categoria-portada-imagen,
    .categoria-portada-sin-imagen {
        min-height: 220px;
    }

    .categoria-portada-sin-imagen span {
        font-size: 6rem;
    }

    .categoria-portada h1 {
        font-size: 2.65rem;
    }

    .categoria-portada-resumen {
        width: 100%;
    }

}

/* =========================================================
   PÁGINA DE NEGOCIO
========================================================= */

.negocio-detalle-portada {
    padding: 45px 0 30px;
}

.negocio-detalle-portada-box {
    overflow: hidden;

    border: 1px solid var(--borde);
    border-radius: 32px;

    background: var(--blanco);

    box-shadow: var(--sombra-media);
}

.negocio-detalle-portada-imagen {
    height: 360px;

    position: relative;
    overflow: hidden;

    background:
        linear-gradient(
            145deg,
            var(--turquesa),
            var(--turquesa-oscuro)
        );
}

.negocio-detalle-portada-imagen > img {
    width: 100%;
    height: 100%;

    object-fit: cover;
}

.negocio-detalle-sin-portada {
    width: 100%;
    height: 100%;

    display: grid;
    place-items: center;

    background:
        radial-gradient(
            circle at 15% 10%,
            rgba(255, 255, 255, 0.22),
            transparent 28%
        ),
        linear-gradient(
            145deg,
            var(--turquesa),
            var(--turquesa-oscuro)
        );
}

.negocio-detalle-sin-portada span {
    color: rgba(9, 13, 15, 0.68);

    font-size: 4rem;
    font-weight: 900;
}

.negocio-detalle-capa {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            180deg,
            transparent 45%,
            rgba(0, 0, 0, 0.42)
        );
}

.negocio-detalle-destacado {
    position: absolute;
    top: 20px;
    right: 20px;

    z-index: 2;

    padding: 9px 13px;

    color: var(--blanco);

    border-radius: 999px;

    background:
        rgba(9, 13, 15, 0.78);

    backdrop-filter: blur(10px);

    font-size: 0.82rem;
    font-weight: 900;
}

.negocio-detalle-informacion {
    padding: 34px;
}

.negocio-detalle-identidad {
    display: flex;
    align-items: center;

    gap: 20px;
}

.negocio-detalle-logo {
    width: 110px;
    height: 110px;

    flex-shrink: 0;

    overflow: hidden;

    display: grid;
    place-items: center;

    color: var(--negro);

    border: 5px solid var(--blanco);
    border-radius: 28px;

    background: var(--turquesa);

    box-shadow:
        0 10px 25px
        rgba(0, 0, 0, 0.14);

    font-size: 2.2rem;
    font-weight: 900;
}

.negocio-detalle-logo img {
    width: 100%;
    height: 100%;

    padding: 6px;

    object-fit: contain;

    background: var(--blanco);
}

.negocio-detalle-identidad h1 {
    margin: 12px 0 0;

    color: var(--negro);

    font-size:
        clamp(
            2.3rem,
            5vw,
            4.4rem
        );

    line-height: 1;
    letter-spacing: -0.055em;
}

.negocio-detalle-descripcion {
    max-width: 850px;

    margin: 25px 0 0;

    color: var(--texto-suave);

    font-size: 1.02rem;
    line-height: 1.7;
}

.negocio-detalle-acciones-principales {
    margin-top: 25px;

    display: flex;
    flex-wrap: wrap;

    gap: 11px;
}

.boton-whatsapp-detalle {
    color: var(--blanco);

    background: #1ea95f;

    box-shadow:
        0 10px 22px
        rgba(30, 169, 95, 0.22);
}

.boton-whatsapp-detalle:hover {
    background: #16864b;
}


/* =========================================================
   GRID DE DETALLE
========================================================= */

.negocio-detalle-seccion {
    padding-top: 25px;
}

.negocio-detalle-grid {
    display: grid;

    grid-template-columns:
        minmax(0, 1.3fr)
        minmax(300px, 0.7fr);

    gap: 24px;
}

.negocio-detalle-columna-principal,
.negocio-detalle-columna-lateral {
    display: grid;

    align-content: start;

    gap: 22px;
}

.negocio-info-card {
    padding: 25px;

    border: 1px solid var(--borde);
    border-radius: 24px;

    background: var(--blanco);

    box-shadow: var(--sombra-suave);
}

.negocio-info-card h2 {
    margin: 0;

    color: var(--negro);

    font-size: 1.35rem;
}

.negocio-info-card > p {
    margin: 8px 0 0;

    color: var(--texto-suave);

    line-height: 1.55;
}

.negocio-info-titulo {
    margin-bottom: 22px;

    display: flex;
    align-items: center;

    gap: 14px;
}

.negocio-info-titulo p {
    margin: 4px 0 0;

    color: var(--texto-suave);

    font-size: 0.9rem;
}

.negocio-info-icono {
    width: 48px;
    height: 48px;

    flex-shrink: 0;

    display: grid;
    place-items: center;

    border-radius: 15px;

    background: var(--turquesa-claro);

    font-size: 1.25rem;
}

.negocio-info-lista {
    display: grid;

    gap: 12px;
}

.negocio-info-item {
    padding: 15px;

    display: flex;
    align-items: flex-start;

    gap: 13px;

    border: 1px solid var(--borde);
    border-radius: 16px;

    background: #fafcfc;
}

.negocio-info-item-icono {
    width: 39px;
    height: 39px;

    flex-shrink: 0;

    display: grid;
    place-items: center;

    border-radius: 12px;

    background: var(--turquesa-claro);
}

.negocio-info-item small {
    display: block;

    margin-bottom: 4px;

    color: var(--texto-suave);

    font-size: 0.8rem;
    font-weight: 700;
}

.negocio-info-item strong {
    color: var(--negro);

    font-size: 0.94rem;
    line-height: 1.45;
}

.negocio-horario-completo {
    padding: 18px;

    color: var(--texto);

    border: 1px solid var(--borde);
    border-radius: 16px;

    background: #fafcfc;

    line-height: 1.7;
}

.negocio-mapa {
    overflow: hidden;

    border-radius: 18px;
}

.negocio-mapa iframe {
    width: 100%;
    min-height: 390px;

    display: block;

    border: 0;
}


/* =========================================================
   CONTACTO Y REDES
========================================================= */

.negocio-contacto-botones {
    margin-top: 20px;

    display: grid;

    gap: 10px;
}

.negocio-contacto-botones .boton {
    width: 100%;
}

.negocio-redes {
    margin-top: 18px;

    display: grid;

    gap: 10px;
}

.negocio-redes a {
    padding: 13px 15px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    color: var(--negro);

    border: 1px solid var(--borde);
    border-radius: 13px;

    background: #fafcfc;

    font-weight: 800;

    transition:
        border-color 0.2s ease,
        transform 0.2s ease;
}

.negocio-redes a:hover {
    transform: translateY(-2px);

    border-color: var(--turquesa);
}

.negocio-categoria-link {
    margin-top: 18px;
    padding: 15px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    color: var(--negro);

    border: 1px solid rgba(18, 199, 199, 0.28);
    border-radius: 15px;

    background: var(--turquesa-claro);

    font-weight: 900;
}

.negocio-categoria-link span {
    width: 32px;
    height: 32px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    background: var(--turquesa);
}


/* =========================================================
   RESPONSIVE NEGOCIO
========================================================= */

@media (max-width: 900px) {

    .negocio-detalle-grid {
        grid-template-columns: 1fr;
    }

}


@media (max-width: 620px) {

    .negocio-detalle-portada {
        padding: 25px 0 20px;
    }

    .negocio-detalle-portada-box {
        border-radius: 25px;
    }

    .negocio-detalle-portada-imagen {
        height: 230px;
    }

    .negocio-detalle-informacion {
        padding: 23px 19px;
    }

    .negocio-detalle-identidad {
        align-items: flex-start;
        flex-direction: column;
    }

    .negocio-detalle-logo {
        width: 92px;
        height: 92px;

        border-radius: 23px;
    }

    .negocio-detalle-identidad h1 {
        font-size: 2.5rem;
    }

    .negocio-detalle-acciones-principales {
        display: grid;

        grid-template-columns: 1fr;
    }

    .negocio-detalle-acciones-principales .boton {
        width: 100%;
    }

    .negocio-info-card {
        padding: 20px;

        border-radius: 21px;
    }

    .negocio-mapa iframe {
        min-height: 300px;
    }

}