/* ============================================
   WANKU — STYLE.CSS
   Restobar · Urbano · Nocturno · Premium
   ============================================ */

/* ---------- VARIABLES ---------- */
:root {
    /* Brand */
    --color-primary: #E63027;
    --color-primary-dark: #C41E16;
    --color-primary-light: #FF4438;
    --color-secondary: #F5C842;
    --color-secondary-dark: #E0B438;

    /* Neutrals */
    --color-black: #0A0A0A;
    --color-carbon: #141414;
    --color-charcoal: #1C1C1C;
    --color-smoke: #242424;
    --color-cream: #F5F0E8;
    --color-paper: #FAF6F0;
    --color-white: #FFFFFF;
    --color-gray-100: #E8E5E0;
    --color-gray-300: #C4C0B8;
    --color-gray-500: #8A8680;
    --color-gray-700: #4A4844;
    --color-text: #1A1A18;
    --color-text-soft: #555550;
    --color-text-light: #888884;
    --color-border: #E0DDD8;
    --color-border-dark: rgba(255,255,255,0.08);
    --color-whatsapp: #25D366;

    /* Typography */
    --font-display: 'Bebas Neue', sans-serif;
    --font: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

    /* Spacing */
    --sp-xs: 0.5rem;
    --sp-sm: 1rem;
    --sp-md: 1.5rem;
    --sp-lg: 2rem;
    --sp-xl: 3rem;
    --sp-2xl: 4rem;
    --sp-3xl: 6rem;
    --sp-4xl: 8rem;

    /* Radius */
    --r-sm: 8px;
    --r-md: 12px;
    --r-lg: 16px;
    --r-xl: 24px;
    --r-full: 999px;

    /* Shadows */
    --sh-sm: 0 1px 3px rgba(0,0,0,0.1);
    --sh-md: 0 4px 24px rgba(0,0,0,0.15);
    --sh-lg: 0 16px 48px rgba(0,0,0,0.25);
    --sh-xl: 0 28px 70px rgba(0,0,0,0.35);
    --sh-glow: 0 0 30px rgba(230,48,39,0.3);

    /* Transitions */
    --t: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --t-slow: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    --t-bounce: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);

    /* Container */
    --cw: 1320px;
    --cp: 1.5rem;
}

/* ---------- RESET ---------- */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

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

body {
    font-family: var(--font);
    font-size: 16px;
    line-height: 1.6;
    color: var(--color-text);
    background: var(--color-paper);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

img { max-width: 100%; height: auto; display: block; }
a { text-decoration: none; color: inherit; }
ul { list-style: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
select, input { font-family: inherit; font-size: inherit; }

/* ---------- CONTAINER ---------- */
.container {
    max-width: var(--cw);
    margin: 0 auto;
    padding: 0 var(--cp);
}

/* ---------- TYPOGRAPHY HELPERS ---------- */
.text-accent { color: var(--color-primary); }
.text-white { color: var(--color-white); }

.section__tag {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-primary);
    margin-bottom: 1rem;
}

.section__tag--light {
    color: var(--color-secondary);
}

.section__title {
    font-size: clamp(1.8rem, 4vw, 3rem);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.02em;
}

.section__title--display {
    font-family: var(--font-display);
    font-size: clamp(2.5rem, 6vw, 5rem);
    font-weight: 400;
    line-height: 0.95;
    letter-spacing: 0.01em;
}

/* ---------- BUTTONS ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 46px;
    padding: 0.75rem 1.75rem;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border-radius: var(--r-sm);
    transition: var(--t);
    white-space: nowrap;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.btn::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.2) 50%, transparent 70%);
    transform: translateX(-100%);
    transition: transform 0.6s ease;
}

.btn:hover::after { transform: translateX(100%); }

.btn--large { min-height: 54px; padding: 0.9rem 2.2rem; font-size: 0.9rem; }
.btn--full { width: 100%; }

.btn--accent {
    background: var(--color-primary);
    color: var(--color-white);
    box-shadow: 0 4px 16px rgba(230,48,39,0.3);
}

.btn--accent:hover {
    background: var(--color-primary-dark);
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(230,48,39,0.4);
}

.btn--dark {
    background: var(--color-black);
    color: var(--color-white);
}

.btn--dark:hover {
    background: var(--color-charcoal);
    transform: translateY(-2px);
    box-shadow: var(--sh-md);
}

.btn--outline-light {
    background: transparent;
    color: var(--color-white);
    border: 1.5px solid rgba(255,255,255,0.4);
}

.btn--outline-light:hover {
    background: rgba(255,255,255,0.1);
    border-color: var(--color-white);
}

.btn--outline-dark {
    background: transparent;
    color: var(--color-text);
    border: 1.5px solid var(--color-border);
}

.btn--outline-dark:hover {
    border-color: var(--color-text);
    background: var(--color-gray-100);
}

.btn--whatsapp {
    background: var(--color-whatsapp);
    color: var(--color-white);
    box-shadow: 0 4px 16px rgba(37,211,102,0.3);
}

.btn--whatsapp:hover {
    background: #1FB855;
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(37,211,102,0.4);
}

/* ---------- SCROLL PROGRESS ---------- */
.scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    width: 0%;
    background: var(--color-primary);
    z-index: 1100;
    transition: width 0.1s linear;
}

/* ============================================
   HEADER
   ============================================ */
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: transparent;
    transition: var(--t);
}

.site-header.scrolled {
    background: rgba(10,10,10,0.95);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    box-shadow: 0 2px 20px rgba(0,0,0,0.3);
}

.header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 76px;
    transition: var(--t);
}

.site-header.scrolled .header__inner { height: 64px; }

.header__logo { display: flex; align-items: center; flex-shrink: 0; }

.logo__text {
    font-family: var(--font-display);
    font-size: 1.8rem;
    letter-spacing: 0.04em;
    color: var(--color-white);
}

.logo__accent { color: var(--color-primary); }

.header__nav { display: flex; margin: 0 auto; }

.nav__menu { display: flex; gap: 0.25rem; }

.nav__link {
    display: block;
    padding: 0.5rem 0.9rem;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.75);
    border-radius: var(--r-sm);
    transition: var(--t);
    position: relative;
}

.nav__link::after {
    content: '';
    position: absolute;
    bottom: 2px;
    left: 50%;
    width: 0;
    height: 2px;
    background: var(--color-primary);
    border-radius: 2px;
    transition: var(--t);
    transform: translateX(-50%);
}

.nav__link:hover, .nav__link.active {
    color: var(--color-white);
    background: transparent;
}

.nav__link:hover::after, .nav__link.active::after { width: 60%; }

.header__actions { display: flex; align-items: center; gap: 0.6rem; flex-shrink: 0; }

.header__toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    padding: 8px;
    width: 40px;
    height: 40px;
    align-items: center;
    justify-content: center;
}

.header__toggle span {
    width: 22px;
    height: 2px;
    background: var(--color-white);
    border-radius: 2px;
    transition: var(--t);
}

.header__toggle.active span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.header__toggle.active span:nth-child(2) { opacity: 0; }
.header__toggle.active span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }

/* Mobile Menu */
.mobile-menu {
    position: fixed;
    top: 76px;
    left: 0;
    right: 0;
    background: var(--color-black);
    border-bottom: 1px solid var(--color-border-dark);
    box-shadow: var(--sh-lg);
    transform: translateY(-100%);
    opacity: 0;
    visibility: hidden;
    transition: var(--t);
    z-index: 999;
    max-height: calc(100vh - 76px);
    overflow-y: auto;
}

.mobile-menu.active { transform: translateY(0); opacity: 1; visibility: visible; }

.mobile-nav { padding: 1.5rem; }

.mobile-nav__list { display: flex; flex-direction: column; gap: 0.25rem; margin-bottom: 1.5rem; }

.mobile-nav__link {
    display: block;
    padding: 0.9rem 0;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-white);
    border-bottom: 1px solid var(--color-border-dark);
    transition: var(--t);
}

.mobile-nav__link:hover { color: var(--color-primary); padding-left: 0.5rem; }

.mobile-nav__actions { display: flex; flex-direction: column; gap: 0.75rem; }

/* ============================================
   HERO
   ============================================ */
.hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    overflow: hidden;
    background: var(--color-black);
}

.hero__bg { position: absolute; inset: 0; z-index: 0; }

.hero__bg img { width: 100%; height: 100%; object-fit: cover; }

.hero__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(10,10,10,0.92) 0%, rgba(10,10,10,0.7) 50%, rgba(10,10,10,0.4) 100%);
}

.hero__grid {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: var(--sp-2xl);
    align-items: center;
    width: 100%;
    position: relative;
    z-index: 2;
    padding: 5rem 0 3rem;
}

.hero__tag {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--color-secondary);
    margin-bottom: 1.5rem;
    padding: 0.4rem 1rem;
    background: rgba(245,200,66,0.1);
    border: 1px solid rgba(245,200,66,0.25);
    border-radius: var(--r-full);
}

.hero__title {
    font-family: var(--font-display);
    font-size: clamp(3rem, 7vw, 6rem);
    font-weight: 400;
    line-height: 0.9;
    letter-spacing: 0.01em;
    color: var(--color-white);
    margin-bottom: 1.5rem;
}

.hero__subtitle {
    font-size: clamp(1rem, 1.5vw, 1.2rem);
    line-height: 1.5;
    color: rgba(255,255,255,0.7);
    max-width: 420px;
    margin-bottom: 2rem;
}

.hero__actions { display: flex; gap: 0.75rem; flex-wrap: wrap; }

/* Hero Visual */
.hero__visual { position: relative; }

.hero__image-main {
    border-radius: var(--r-lg);
    overflow: hidden;
    aspect-ratio: 4 / 5;
    box-shadow: var(--sh-xl);
}

.hero__image-main img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero__badge {
    position: absolute;
    bottom: -1.5rem;
    left: -1.5rem;
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 1rem 1.25rem;
    background: var(--color-white);
    border-radius: var(--r-md);
    box-shadow: var(--sh-lg);
}

.hero__badge-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-primary);
    border-radius: var(--r-sm);
    font-size: 1.1rem;
    color: var(--color-white);
}

.hero__badge-text {
    font-size: 0.82rem;
    color: var(--color-text-soft);
    line-height: 1.3;
}

.hero__badge-text strong { color: var(--color-text); font-weight: 700; }

.hero__scroll {
    position: absolute;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    z-index: 3;
}

.hero__scroll span {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.5);
}

.hero__scroll-line {
    width: 1px;
    height: 40px;
    background: linear-gradient(to bottom, rgba(255,255,255,0.5), transparent);
    animation: scrollLine 2s ease-in-out infinite;
}

@keyframes scrollLine {
    0%, 100% { transform: scaleY(1); opacity: 0.5; }
    50% { transform: scaleY(1.5); opacity: 1; }
}

/* ============================================
   PROMOCIONES
   ============================================ */
.promos {
    padding: var(--sp-2xl) 0;
    background: var(--color-paper);
}

.promos__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-lg);
}

.promo-card {
    background: var(--color-white);
    border-radius: var(--r-md);
    overflow: hidden;
    box-shadow: var(--sh-sm);
    transition: var(--t);
}

.promo-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--sh-lg);
}

.promo-card__image {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
}

.promo-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.promo-card:hover .promo-card__image img { transform: scale(1.06); }

.promo-card__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.5) 0%, transparent 50%);
}

.promo-card__tag {
    position: absolute;
    top: 1rem;
    left: 1rem;
    padding: 0.35rem 0.85rem;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    background: rgba(10,10,10,0.85);
    color: var(--color-white);
    border-radius: var(--r-full);
    backdrop-filter: blur(8px);
}

.promo-card__tag--accent { background: var(--color-primary); }

.promo-card__body { padding: 1.5rem; }

.promo-card__body h3 {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--color-text);
    margin-bottom: 0.5rem;
}

.promo-card__body p {
    font-size: 0.9rem;
    color: var(--color-text-soft);
    line-height: 1.5;
    margin-bottom: 1rem;
}

.promo-card__cta {
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-primary);
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    transition: var(--t);
}

.promo-card:hover .promo-card__cta { gap: 0.7rem; }

/* ============================================
   CONCEPTO
   ============================================ */
.concept {
    padding: var(--sp-3xl) 0;
    background: var(--color-cream);
    text-align: center;
}

.concept__header { margin-bottom: var(--sp-2xl); }

.concept__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--sp-lg);
    margin-bottom: var(--sp-2xl);
}

.concept__item { text-align: center; }

.concept__icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-white);
    border-radius: 50%;
    font-size: 1.5rem;
    color: var(--color-primary);
    box-shadow: var(--sh-sm);
    transition: var(--t-bounce);
}

.concept__item:hover .concept__icon {
    background: var(--color-primary);
    color: var(--color-white);
    transform: scale(1.1);
    box-shadow: 0 8px 24px rgba(230,48,39,0.3);
}

.concept__item h3 {
    font-family: var(--font-display);
    font-size: 1.8rem;
    font-weight: 400;
    letter-spacing: 0.04em;
    color: var(--color-text);
    margin-bottom: 0.4rem;
}

.concept__item p {
    font-size: 0.88rem;
    color: var(--color-text-soft);
    line-height: 1.5;
}

.concept__quote {
    max-width: 640px;
    margin: 0 auto;
    padding: 2rem 2rem;
    position: relative;
}

.concept__quote::before {
    content: '"';
    position: absolute;
    top: -0.5rem;
    left: 0;
    font-family: var(--font-display);
    font-size: 5rem;
    color: var(--color-primary);
    opacity: 0.15;
    line-height: 1;
}

.concept__quote p {
    font-size: clamp(1.1rem, 2vw, 1.4rem);
    font-weight: 500;
    line-height: 1.5;
    color: var(--color-text);
    font-style: italic;
}

/* ============================================
   BENEFICIOS
   ============================================ */
.benefits {
    padding: var(--sp-3xl) 0;
    background: var(--color-black);
    position: relative;
    overflow: hidden;
}

.benefits::before {
    content: '';
    position: absolute;
    top: -20%;
    right: -10%;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(230,48,39,0.08) 0%, transparent 65%);
    pointer-events: none;
}

.benefits__grid {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: var(--sp-2xl);
    align-items: center;
    position: relative;
    z-index: 2;
}

/* Membership Card Visual */
.benefits__card-visual {
    perspective: 1000px;
}

.benefits__card-inner {
    background: linear-gradient(135deg, var(--color-charcoal) 0%, var(--color-smoke) 100%);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: var(--r-lg);
    padding: 2.5rem 2rem;
    aspect-ratio: 1.6 / 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    overflow: hidden;
    box-shadow: var(--sh-xl);
    transition: var(--t-slow);
}

.benefits__card-inner::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(230,48,39,0.12) 0%, transparent 60%);
}

.benefits__card-inner:hover { transform: rotateY(-5deg) rotateX(2deg); }

.benefits__card-label {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.4);
}

.benefits__card-brand {
    font-family: var(--font-display);
    font-size: 3rem;
    letter-spacing: 0.04em;
    color: var(--color-white);
}

.benefits__card-type {
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--color-secondary);
}

.benefits__card-chip {
    position: absolute;
    top: 50%;
    right: 2rem;
    width: 40px;
    height: 30px;
    background: linear-gradient(135deg, #D4AF37 0%, #B8941F 100%);
    border-radius: 6px;
    transform: translateY(-50%);
}

/* Benefits Content */
.benefits__list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem 1.5rem;
    margin: 1.5rem 0 2rem;
}

.benefits__list li {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.92rem;
    font-weight: 500;
    color: rgba(255,255,255,0.85);
}

.benefits__list i {
    color: var(--color-primary);
    font-size: 0.8rem;
}

/* ============================================
   HISTORIA
   ============================================ */
.history {
    padding: var(--sp-3xl) 0;
    background: var(--color-cream);
}

.history__header { text-align: center; margin-bottom: var(--sp-2xl); }

.history__timeline {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    position: relative;
    margin-bottom: var(--sp-xl);
    padding: 0 1rem;
}

.history__timeline::before {
    content: '';
    position: absolute;
    top: 12px;
    left: 5%;
    right: 5%;
    height: 2px;
    background: var(--color-gray-300);
}

.history__step {
    flex: 1;
    text-align: center;
    position: relative;
}

.history__dot {
    width: 26px;
    height: 26px;
    margin: 0 auto 1.25rem;
    border-radius: 50%;
    background: var(--color-white);
    border: 3px solid var(--color-gray-300);
    position: relative;
    z-index: 2;
    transition: var(--t-bounce);
}

.history__dot--active {
    border-color: var(--color-primary);
    background: var(--color-primary);
    box-shadow: 0 0 0 6px rgba(230,48,39,0.15);
}

.history__step:hover .history__dot {
    border-color: var(--color-primary);
    transform: scale(1.15);
}

.history__label {
    font-family: var(--font-display);
    font-size: 1.2rem;
    letter-spacing: 0.04em;
    color: var(--color-text);
    display: block;
    margin-bottom: 0.4rem;
}

.history__step p {
    font-size: 0.82rem;
    color: var(--color-text-soft);
    line-height: 1.4;
    padding: 0 0.5rem;
}

.history__cta { text-align: center; }

/* ============================================
   PRODUCTO DESTACADO
   ============================================ */
.signature {
    padding: var(--sp-3xl) 0;
    background: var(--color-black);
    position: relative;
    overflow: hidden;
}

.signature::before {
    content: '';
    position: absolute;
    bottom: -20%;
    left: -10%;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(245,200,66,0.06) 0%, transparent 65%);
    pointer-events: none;
}

.signature__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-2xl);
    align-items: center;
    position: relative;
    z-index: 2;
}

.signature__visual {
    position: relative;
    border-radius: var(--r-lg);
    overflow: hidden;
    aspect-ratio: 1 / 1;
    box-shadow: var(--sh-xl);
}

.signature__visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.signature__deco {
    position: absolute;
    inset: 0;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: var(--r-lg);
    pointer-events: none;
}

.signature__text {
    font-size: 1.05rem;
    line-height: 1.7;
    color: rgba(255,255,255,0.7);
    margin-bottom: 1.5rem;
    max-width: 460px;
}

.signature__features {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    margin-bottom: 2rem;
}

.signature__feature {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.92rem;
    font-weight: 500;
    color: rgba(255,255,255,0.85);
}

.signature__feature-icon {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.06);
    border-radius: var(--r-sm);
    font-size: 0.9rem;
    color: var(--color-secondary);
}

/* ============================================
   GASTRONOMÍA
   ============================================ */
.gastronomy {
    padding: var(--sp-3xl) 0;
    background: var(--color-paper);
}

.gastronomy__header { text-align: center; margin-bottom: var(--sp-2xl); }

.gastronomy__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--sp-md);
    margin-bottom: var(--sp-xl);
}

.gastro-card {
    border-radius: var(--r-md);
    overflow: hidden;
    box-shadow: var(--sh-sm);
    transition: var(--t);
    background: var(--color-white);
}

.gastro-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--sh-lg);
}

.gastro-card__image {
    aspect-ratio: 3 / 4;
    overflow: hidden;
}

.gastro-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.gastro-card:hover .gastro-card__image img { transform: scale(1.06); }

.gastro-card__body { padding: 1.25rem; }

.gastro-card__body h3 {
    font-family: var(--font-display);
    font-size: 1.6rem;
    letter-spacing: 0.04em;
    color: var(--color-text);
    margin-bottom: 0.35rem;
}

.gastro-card__body p {
    font-size: 0.85rem;
    color: var(--color-text-soft);
    line-height: 1.5;
}

.gastronomy__cta { text-align: center; }

/* ============================================
   EVENTOS
   ============================================ */
.events {
    padding: var(--sp-3xl) 0;
    background: var(--color-black);
    position: relative;
    overflow: hidden;
}

.events__header { text-align: center; margin-bottom: var(--sp-2xl); }

.events__mosaic {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    grid-template-rows: 200px 200px;
    gap: 0.75rem;
    margin-bottom: var(--sp-2xl);
}

.events__mosaic-item {
    border-radius: var(--r-md);
    overflow: hidden;
    position: relative;
}

.events__mosaic-item--lg {
    grid-row: span 2;
}

.events__mosaic-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.events__mosaic-item:hover img { transform: scale(1.05); }

.events__mosaic-item::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.3) 0%, transparent 60%);
    opacity: 0;
    transition: var(--t);
}

.events__mosaic-item:hover::after { opacity: 1; }

.events__subtitle {
    font-family: var(--font-display);
    font-size: 1.8rem;
    letter-spacing: 0.04em;
    color: var(--color-white);
    margin-bottom: var(--sp-lg);
    text-align: center;
}

.events__list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-md);
    margin-bottom: var(--sp-xl);
}

.event-card {
    background: var(--color-charcoal);
    border: 1px solid var(--color-border-dark);
    border-radius: var(--r-md);
    padding: 1.5rem;
    display: flex;
    gap: 1.25rem;
    transition: var(--t);
}

.event-card:hover {
    border-color: rgba(230,48,39,0.3);
    background: var(--color-smoke);
    transform: translateY(-4px);
}

.event-card__date {
    flex-shrink: 0;
    width: 56px;
    text-align: center;
    padding: 0.5rem 0;
    background: var(--color-primary);
    border-radius: var(--r-sm);
}

.event-card__day {
    display: block;
    font-family: var(--font-display);
    font-size: 1.8rem;
    line-height: 1;
    color: var(--color-white);
}

.event-card__month {
    display: block;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.8);
}

.event-card__body { flex: 1; }

.event-card__body h4 {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--color-white);
    margin-bottom: 0.35rem;
}

.event-card__body p {
    font-size: 0.85rem;
    color: rgba(255,255,255,0.6);
    line-height: 1.5;
    margin-bottom: 0.5rem;
}

.event-card__time {
    font-size: 0.8rem;
    color: var(--color-secondary);
    font-weight: 600;
}

.events__cta { text-align: center; }

/* ============================================
   GALERÍA
   ============================================ */
.gallery {
    padding: var(--sp-3xl) 0;
    background: var(--color-cream);
}

.gallery__header {
    text-align: center;
    margin-bottom: var(--sp-2xl);
}

.gallery__insta {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-primary);
    transition: var(--t);
}

.gallery__insta:hover { gap: 0.8rem; }

.gallery__mosaic {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.5rem;
    max-width: var(--cw);
    margin: 0 auto;
    padding: 0 var(--cp);
}

.gallery__item {
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: var(--r-sm);
}

.gallery__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease, filter 0.3s ease;
    filter: saturate(0.9);
}

.gallery__item:hover img {
    transform: scale(1.08);
    filter: saturate(1.1);
}

/* ============================================
   UBICACIÓN
   ============================================ */
.location {
    padding: var(--sp-3xl) 0;
    background: var(--color-paper);
}

.location__header { text-align: center; margin-bottom: var(--sp-2xl); }

.location__grid {
    display: grid;
    grid-template-columns: 40fr 60fr;
    gap: var(--sp-lg);
    align-items: stretch;
}

.location__info {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    justify-content: center;
}

.location__item {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

.location__item i {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-white);
    border-radius: var(--r-sm);
    font-size: 1.1rem;
    color: var(--color-primary);
    box-shadow: var(--sh-sm);
}

.location__label {
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-light);
    margin-bottom: 0.2rem;
}

.location__value {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--color-text);
    line-height: 1.5;
}

a.location__value { transition: var(--t); }
a.location__value:hover { color: var(--color-primary); }

.location__actions {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-top: 0.5rem;
}

.location__map {
    border-radius: var(--r-md);
    overflow: hidden;
    min-height: 400px;
    box-shadow: var(--sh-md);
}

.location__map iframe {
    width: 100%;
    height: 100%;
    min-height: 400px;
    border: 0;
}

/* ============================================
   CTA FINAL
   ============================================ */
.final-cta {
    position: relative;
    padding: var(--sp-3xl) 0;
    overflow: hidden;
}

.final-cta__bg { position: absolute; inset: 0; z-index: 0; }

.final-cta__bg img { width: 100%; height: 100%; object-fit: cover; }

.final-cta__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(10,10,10,0.9) 0%, rgba(10,10,10,0.75) 100%);
}

.final-cta__content {
    position: relative;
    z-index: 2;
    text-align: center;
    max-width: 640px;
    margin: 0 auto;
}

.final-cta__content h2 {
    font-family: var(--font-display);
    font-size: clamp(2.5rem, 5vw, 4.5rem);
    font-weight: 400;
    line-height: 0.95;
    letter-spacing: 0.01em;
    color: var(--color-white);
    margin-bottom: 2rem;
}

.final-cta__actions {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
    flex-wrap: wrap;
}

/* ============================================
   FOOTER
   ============================================ */
.site-footer {
    background: var(--color-black);
    padding: var(--sp-2xl) 0 var(--sp-lg);
}

.footer__grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
    gap: var(--sp-lg);
    margin-bottom: var(--sp-xl);
}

.footer__brand { padding-right: 1rem; }

.footer__logo {
    font-family: var(--font-display);
    font-size: 2rem;
    letter-spacing: 0.04em;
    color: var(--color-white);
    display: block;
    margin-bottom: 1rem;
}

.footer__brand p {
    font-size: 0.88rem;
    line-height: 1.6;
    color: rgba(255,255,255,0.5);
    margin-bottom: 1.25rem;
}

.footer__social { display: flex; gap: 0.6rem; }

.footer__social a {
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.06);
    border-radius: var(--r-sm);
    font-size: 0.9rem;
    color: rgba(255,255,255,0.6);
    transition: var(--t);
}

.footer__social a:hover {
    background: var(--color-primary);
    color: var(--color-white);
}

.footer__col .footer__title {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-white);
    margin-bottom: 1rem;
}

.footer__col ul { display: flex; flex-direction: column; gap: 0.6rem; }

.footer__col ul li a {
    font-size: 0.88rem;
    color: rgba(255,255,255,0.5);
    transition: var(--t);
}

.footer__col ul li a:hover { color: var(--color-primary); }

.footer__contact li {
    font-size: 0.88rem;
    color: rgba(255,255,255,0.5);
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    line-height: 1.5;
}

.footer__contact i { color: var(--color-primary); margin-top: 3px; flex-shrink: 0; }
.footer__contact a { color: rgba(255,255,255,0.5); transition: var(--t); }
.footer__contact a:hover { color: var(--color-primary); }

.footer__bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: var(--sp-lg);
    border-top: 1px solid var(--color-border-dark);
    gap: 1rem;
    flex-wrap: wrap;
}

.footer__legal { display: flex; gap: 1.5rem; }

.footer__legal a {
    font-size: 0.82rem;
    color: rgba(255,255,255,0.4);
    transition: var(--t);
}

.footer__legal a:hover { color: var(--color-primary); }

.footer__bottom p {
    font-size: 0.82rem;
    color: rgba(255,255,255,0.4);
}

/* ============================================
   FLOATING WHATSAPP
   ============================================ */
.float-whatsapp {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    width: 54px;
    height: 54px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-whatsapp);
    color: var(--color-white);
    border-radius: 50%;
    font-size: 1.5rem;
    box-shadow: 0 4px 20px rgba(37,211,102,0.4);
    z-index: 900;
    transition: var(--t);
    animation: pulseWA 2.5s ease-in-out infinite;
}

.float-whatsapp:hover {
    transform: scale(1.12);
    box-shadow: 0 8px 30px rgba(37,211,102,0.5);
}

@keyframes pulseWA {
    0%, 100% { box-shadow: 0 4px 20px rgba(37,211,102,0.4); }
    50% { box-shadow: 0 4px 20px rgba(37,211,102,0.4), 0 0 0 8px rgba(37,211,102,0.1); }
}

/* ============================================
   SCROLL REVEAL
   ============================================ */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1), transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}

.reveal.active { opacity: 1; transform: translateY(0); }

/* ============================================
   FOCUS VISIBLE
   ============================================ */
*:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* ============================================
   TABLET — 1024px
   ============================================ */
@media (max-width: 1024px) {
    .header__nav { display: none; }
    .header__toggle { display: flex; }
    .header__actions .btn { display: none; }

    .hero { min-height: 90vh; }
    .hero__grid { grid-template-columns: 1fr; gap: var(--sp-xl); padding-top: 6rem; }
    .hero__visual { max-width: 400px; }
    .hero__scroll { display: none; }

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

    .concept__grid { grid-template-columns: repeat(2, 1fr); gap: var(--sp-md); }

    .benefits__grid { grid-template-columns: 1fr; gap: var(--sp-xl); }
    .benefits__card-visual { max-width: 400px; margin: 0 auto; }

    .history__timeline { flex-wrap: wrap; gap: 1.5rem; }
    .history__timeline::before { display: none; }
    .history__step { flex: 0 0 calc(33.33% - 1rem); }

    .signature__grid { grid-template-columns: 1fr; gap: var(--sp-lg); }
    .signature__visual { max-width: 500px; margin: 0 auto; }

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

    .events__mosaic { grid-template-columns: 1fr 1fr; grid-template-rows: 180px 180px 180px; }
    .events__mosaic-item--lg { grid-row: span 1; grid-column: span 2; }
    .events__list { grid-template-columns: 1fr; }

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

    .location__grid { grid-template-columns: 1fr; }
    .location__map { min-height: 350px; }

    .footer__grid { grid-template-columns: 1fr 1fr; gap: var(--sp-md) var(--sp-lg); }
    .footer__brand { grid-column: span 2; }
}

/* ============================================
   MOBILE — 640px
   ============================================ */
@media (max-width: 640px) {
    :root { --cp: 1rem; --sp-3xl: 4rem; --sp-2xl: 3rem; }

    .hero { min-height: 85vh; }
    .hero__title { font-size: 2.8rem; }
    .hero__visual { display: none; }
    .hero__badge { display: none; }

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

    .concept__grid { grid-template-columns: 1fr 1fr; gap: var(--sp-md); }
    .concept__item h3 { font-size: 1.4rem; }

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

    .history__step { flex: 0 0 calc(50% - 0.75rem); }

    .gastronomy__grid { grid-template-columns: 1fr 1fr; gap: 0.75rem; }
    .gastro-card__image { aspect-ratio: 1 / 1; }

    .events__mosaic { grid-template-columns: 1fr 1fr; grid-template-rows: 140px 140px 140px; gap: 0.5rem; }
    .events__mosaic-item--lg { grid-column: span 2; }

    .gallery__mosaic { grid-template-columns: 1fr 1fr; gap: 0.5rem; }

    .final-cta__actions .btn { flex: 1; min-width: 0; }

    .footer__grid { grid-template-columns: 1fr; }
    .footer__brand { grid-column: span 1; }
    .footer__bottom { flex-direction: column; text-align: center; }
    .footer__legal { justify-content: center; }

    .float-whatsapp { bottom: 1rem; right: 1rem; width: 48px; height: 48px; font-size: 1.25rem; }

    body { padding-bottom: 0; }
}

/* ============================================
   SMALL MOBILE — 390px
   ============================================ */
@media (max-width: 420px) {
    .hero__title { font-size: 2.2rem; }
    .section__title--display { font-size: 2rem; }

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

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

    .events__mosaic { grid-template-columns: 1fr; grid-template-rows: 140px 140px 140px 140px 140px; }
    .events__mosaic-item--lg { grid-column: span 1; }

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

    .event-card { flex-direction: column; gap: 0.75rem; }
}

/* ============================================
   PÁGINA CARTA
   ============================================ */
.page-hero--carta {
    background: var(--color-black);
}

.carta-page {
    padding: var(--sp-3xl) 0;
    background: var(--color-paper);
}

.carta-page__container {
    max-width: 1100px;
}

.carta-page__header {
    max-width: 900px;
    margin: 0 auto var(--sp-xl);
    text-align: center;
}

.carta-page__header .section__title {
    font-size: clamp(1.5rem, 2.6vw, 2.25rem);
    line-height: 1.2;
}

.carta-page__description {
    margin-top: 0.75rem;
    color: var(--color-text-soft);
    font-size: 1rem;
    line-height: 1.7;
}

.carta-page__image {
    margin: 0;
    overflow: hidden;
    border-radius: var(--r-md);
    background: var(--color-white);
    box-shadow: var(--sh-lg);
}

.carta-page__image img {
    display: block;
    width: 100%;
    height: auto;
}

.carta-page__empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    min-height: 320px;
    padding: var(--sp-xl);
    border: 1px solid var(--color-border);
    border-radius: var(--r-md);
    color: var(--color-text-soft);
    text-align: center;
    background: var(--color-white);
}

.carta-page__empty i {
    font-size: 2rem;
    color: var(--color-primary);
}

@media (max-width: 640px) {
    .carta-page { padding: var(--sp-xl) 0; }
    .carta-page__image { border-radius: var(--r-sm); }
}

/* ============================================
   PÁGINA EMPRESA
   ============================================ */
.page-hero--empresa {
    background: var(--color-black);
}

.empresa-page {
    padding: var(--sp-3xl) 0;
    background: var(--color-paper);
}

.empresa-page__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(360px, 0.85fr);
    align-items: center;
    gap: var(--sp-2xl);
}

.empresa-page__grid--sin-imagen {
    grid-template-columns: minmax(0, 820px);
    justify-content: center;
}

.empresa-page__content .section__title--display {
    font-size: clamp(2.25rem, 5vw, 4rem);
    margin-bottom: var(--sp-md);
}

.empresa-page__description {
    color: var(--color-text-soft);
    font-size: 1rem;
    line-height: 1.75;
}

.empresa-page__description > * + * {
    margin-top: 1rem;
}

.empresa-page__image {
    margin: 0;
    overflow: hidden;
    border-radius: var(--r-md);
    box-shadow: var(--sh-lg);
}

.empresa-page__image img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 5;
    object-fit: cover;
}

@media (max-width: 900px) {
    .empresa-page__grid {
        grid-template-columns: 1fr;
        gap: var(--sp-xl);
    }

    .empresa-page__image {
        max-width: 680px;
    }

    .empresa-page__image img {
        aspect-ratio: 16 / 10;
    }
}

@media (max-width: 640px) {
    .empresa-page { padding: var(--sp-xl) 0; }
    .empresa-page__content .section__title--display { font-size: 2.25rem; }
}

/* ============================================
   PÁGINA CONTACTO
   ============================================ */

/* ---------- PAGE HERO ---------- */
.page-hero {
    position: relative;
    min-height: 420px;
    display: flex;
    align-items: center;
    padding-top: 76px;
    overflow: hidden;
    background: var(--color-black);
}

.page-hero__bg { position: absolute; inset: 0; z-index: 0; }
.page-hero__bg img { width: 100%; height: 100%; object-fit: cover; }

.page-hero__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(10,10,10,0.9) 0%, rgba(10,10,10,0.65) 60%, rgba(10,10,10,0.4) 100%);
}

.page-hero__content {
    position: relative;
    z-index: 2;
    max-width: 640px;
    padding: 2rem 0;
    text-align: center;
    margin: 0 auto;
}

.breadcrumb {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 1.25rem;
    font-size: 0.82rem;
}

.breadcrumb a { color: rgba(255,255,255,0.6); transition: var(--t); }
.breadcrumb a:hover { color: var(--color-white); }

.breadcrumb__sep { color: rgba(255,255,255,0.3); }
.breadcrumb__current { color: var(--color-white); font-weight: 600; }

.page-hero__title {
    font-family: var(--font-display);
    font-size: clamp(2.5rem, 5vw, 4.5rem);
    font-weight: 400;
    line-height: 0.95;
    letter-spacing: 0.01em;
    color: var(--color-white);
    margin-bottom: 1rem;
}

.page-hero__subtitle {
    font-size: 1.05rem;
    line-height: 1.6;
    color: rgba(255,255,255,0.7);
    max-width: 480px;
    margin: 0 auto;
}

/* ---------- CONTACT MAIN ---------- */
.contact-main {
    padding: var(--sp-3xl) 0;
    background: var(--color-paper);
}

.contact-grid {
    display: grid;
    grid-template-columns: 42fr 58fr;
    gap: var(--sp-2xl);
    align-items: start;
}

/* Contact Info */
/* Este titulo sale del subtitulo de la pagina en el panel, asi que puede ser
   una frase larga y no dos palabras como en la maqueta. Con el tamano original
   ocupaba media pantalla en contacto y en cotizar evento. */
.contact-info > .section__title--display {
    font-size: clamp(1.6rem, 2.4vw, 2.25rem);
    line-height: 1.1;
}

.contact-info__lead {
    font-size: 1rem;
    line-height: 1.6;
    color: var(--color-text-soft);
    margin-bottom: var(--sp-lg);
    max-width: 380px;
}

.contact-info__blocks {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    margin-bottom: var(--sp-lg);
}

.contact-info__block {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

.contact-info__icon {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-white);
    border-radius: var(--r-sm);
    font-size: 1.1rem;
    color: var(--color-primary);
    box-shadow: var(--sh-sm);
    transition: var(--t);
}

.contact-info__block:hover .contact-info__icon {
    background: var(--color-primary);
    color: var(--color-white);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(230,48,39,0.25);
}

.contact-info__label {
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-light);
    margin-bottom: 0.2rem;
}

.contact-info__value {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--color-text);
    line-height: 1.5;
}

a.contact-info__value { transition: var(--t); }
a.contact-info__value:hover { color: var(--color-primary); }

/* WhatsApp CTA Block */
.contact-wa {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    background: var(--color-white);
    border-radius: var(--r-md);
    box-shadow: var(--sh-sm);
    margin-bottom: var(--sp-lg);
    transition: var(--t);
}

.contact-wa:hover { box-shadow: var(--sh-md); }

.contact-wa__title {
    display: block;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--color-text);
    margin-bottom: 0.15rem;
}

.contact-wa__text {
    font-size: 0.85rem;
    color: var(--color-text-soft);
}

/* Social */
.contact-social { display: flex; align-items: center; gap: 1rem; }

.contact-social__label {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-light);
}

.contact-social__links { display: flex; gap: 0.5rem; }

.contact-social__links a {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-white);
    border-radius: var(--r-sm);
    font-size: 0.95rem;
    color: var(--color-text-soft);
    box-shadow: var(--sh-sm);
    transition: var(--t);
}

.contact-social__links a:hover {
    background: var(--color-primary);
    color: var(--color-white);
    transform: translateY(-2px);
}

/* ---------- FORM ---------- */
.contact-form-wrap {
    position: sticky;
    top: 90px;
}

.contact-form-card {
    background: var(--color-white);
    border-radius: var(--r-lg);
    padding: 2.5rem;
    box-shadow: var(--sh-md);
}

.contact-form__title {
    font-family: var(--font-display);
    font-size: 2rem;
    letter-spacing: 0.02em;
    color: var(--color-text);
    margin-bottom: 0.35rem;
}

.contact-form__subtitle {
    font-size: 0.9rem;
    color: var(--color-text-soft);
    margin-bottom: var(--sp-lg);
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.form-field {
    display: flex;
    flex-direction: column;
    margin-bottom: 1rem;
}

.form-field label {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: 0.4rem;
}

.req { color: var(--color-primary); }

.form-field input,
.form-field select,
.form-field textarea {
    width: 100%;
    padding: 0.75rem 1rem;
    font-size: 0.92rem;
    font-family: var(--font);
    color: var(--color-text);
    background: var(--color-paper);
    border: 1.5px solid var(--color-border);
    border-radius: var(--r-sm);
    transition: var(--t);
    outline: none;
    -webkit-appearance: none;
    appearance: none;
}

.form-field select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%238A8680' d='M6 8L0 0h12z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    padding-right: 2.5rem;
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
    border-color: var(--color-primary);
    background: var(--color-white);
    box-shadow: 0 0 0 3px rgba(230,48,39,0.1);
}

.form-field input::placeholder,
.form-field textarea::placeholder {
    color: var(--color-text-light);
}

.form-field textarea {
    resize: vertical;
    min-height: 100px;
}

.form-field input.error,
.form-field select.error,
.form-field textarea.error {
    border-color: var(--color-primary);
    background: rgba(230,48,39,0.03);
}

.form-error {
    display: none;
    font-size: 0.78rem;
    color: var(--color-primary);
    font-weight: 600;
    margin-top: 0.3rem;
}

.form-error.active { display: block; }

/* Conditional fields */
.form-conditional {
    margin-top: -0.5rem;
}

/* Consent */
.form-consent { margin-bottom: 1.25rem; }

.checkbox-label {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    cursor: pointer;
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--color-text-soft);
}

.checkbox-label input { display: none; }

.checkbox-custom {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    border: 2px solid var(--color-border);
    border-radius: 4px;
    transition: var(--t);
    margin-top: 1px;
    position: relative;
}

.checkbox-label input:checked + .checkbox-custom {
    background: var(--color-primary);
    border-color: var(--color-primary);
}

.checkbox-label input:checked + .checkbox-custom::after {
    content: '\2713';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: var(--color-white);
    font-size: 12px;
    font-weight: 700;
}

.checkbox-text a {
    color: var(--color-primary);
    font-weight: 600;
    text-decoration: underline;
}

/* Form messages */
.form-message {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.85rem 1rem;
    border-radius: var(--r-sm);
    margin-bottom: 1rem;
    font-size: 0.88rem;
    font-weight: 500;
}

.form-message--error {
    background: rgba(230,48,39,0.08);
    color: var(--color-primary-dark);
    border: 1px solid rgba(230,48,39,0.2);
}

.form-message--error i { font-size: 1.1rem; }

/* Success */
.form-success {
    text-align: center;
    padding: 2rem 1rem;
}

.form-success__icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-whatsapp);
    color: var(--color-white);
    border-radius: 50%;
    font-size: 1.5rem;
    animation: popIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes popIn {
    0% { transform: scale(0); }
    100% { transform: scale(1); }
}

.form-success h4 {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--color-text);
    margin-bottom: 0.5rem;
}

.form-success p {
    font-size: 0.92rem;
    color: var(--color-text-soft);
    margin-bottom: 1.5rem;
}

/* ---------- QUICK ACCESS ---------- */
.quick-access {
    padding: var(--sp-2xl) 0;
    background: var(--color-cream);
}

.quick-access__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-md);
}

.quick-card {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    padding: 1.5rem;
    background: var(--color-white);
    border-radius: var(--r-md);
    box-shadow: var(--sh-sm);
    transition: var(--t);
}

.quick-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--sh-lg);
}

.quick-card__icon {
    width: 52px;
    height: 52px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-paper);
    border-radius: var(--r-sm);
    font-size: 1.2rem;
    color: var(--color-primary);
    transition: var(--t);
}

.quick-card:hover .quick-card__icon {
    background: var(--color-primary);
    color: var(--color-white);
}

.quick-card__body { flex: 1; }

.quick-card__body h3 {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--color-text);
    margin-bottom: 0.2rem;
}

.quick-card__body p {
    font-size: 0.85rem;
    color: var(--color-text-soft);
    line-height: 1.4;
}

.quick-card__arrow {
    color: var(--color-text-light);
    font-size: 0.85rem;
    transition: var(--t);
}

.quick-card:hover .quick-card__arrow {
    color: var(--color-primary);
    transform: translateX(4px);
}

/* ---------- MAP ---------- */
.contact-map {
    padding: var(--sp-3xl) 0;
    background: var(--color-paper);
}

.contact-map__header { text-align: center; margin-bottom: var(--sp-2xl); }

.contact-map__grid {
    display: grid;
    grid-template-columns: 60fr 40fr;
    column-gap: var(--sp-lg);
    row-gap: var(--sp-xl);
    align-items: stretch;
}

.contact-map__visual {
    border-radius: var(--r-md);
    overflow: hidden;
    min-height: 420px;
    box-shadow: var(--sh-md);
}

.contact-map__visual iframe {
    width: 100%;
    height: 100%;
    min-height: 420px;
    border: 0;
}

.contact-map__card {
    display: flex;
    align-items: stretch;
}

.contact-map__card-inner {
    display: flex;
    align-items: center;
    background: var(--color-black);
    border-radius: var(--r-md);
    padding: 2rem;
    width: 100%;
    min-height: 420px;
    box-shadow: var(--sh-md);
}

.contact-map__card-inner .sede {
    width: 100%;
}

.contact-map__label {
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-secondary);
    margin-bottom: 0.3rem;
}

.contact-map__value {
    display: block;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--color-white);
    line-height: 1.5;
    margin-bottom: 1rem;
}

a.contact-map__value { transition: var(--t); }
a.contact-map__value:hover { color: var(--color-secondary); }

.contact-map__divider {
    height: 1px;
    background: rgba(255,255,255,0.1);
    margin: 1rem 0;
}

.contact-map__card-inner .btn { margin-top: 0.5rem; }

/* ---------- FAQ ---------- */
.faq-section {
    padding: var(--sp-3xl) 0;
    background: var(--color-cream);
}

.faq__header { text-align: center; margin-bottom: var(--sp-2xl); }

.faq__list {
    max-width: 760px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.faq-item {
    background: var(--color-white);
    border-radius: var(--r-md);
    box-shadow: var(--sh-sm);
    overflow: hidden;
    transition: var(--t);
}

.faq-item[open] { box-shadow: var(--sh-md); }

.faq-item__q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 1.5rem;
    cursor: pointer;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--color-text);
    list-style: none;
    transition: var(--t);
}

.faq-item__q::-webkit-details-marker { display: none; }

.faq-item__q:hover { color: var(--color-primary); }

.faq-item[open] .faq-item__q { color: var(--color-primary); }

.faq-item__icon {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-paper);
    border-radius: 50%;
    font-size: 0.75rem;
    color: var(--color-text-soft);
    transition: var(--t);
}

.faq-item[open] .faq-item__icon {
    background: var(--color-primary);
    color: var(--color-white);
    transform: rotate(45deg);
}

.faq-item__a {
    padding: 0 1.5rem 1.25rem;
}

.faq-item__a p {
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--color-text-soft);
}

/* ---------- RESPONSIVE CONTACTO ---------- */
@media (max-width: 1024px) {
    .contact-grid { grid-template-columns: 1fr; gap: var(--sp-xl); }
    .contact-form-wrap { position: static; }
    .contact-map__grid { grid-template-columns: 1fr; }
    .contact-map__visual { min-height: 350px; }
    .contact-map__card-inner { min-height: auto; }
    .quick-access__grid { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
    .page-hero { min-height: 360px; }
    .contact-form-card { padding: 1.5rem; }
    .form-row { grid-template-columns: 1fr; }
    .contact-wa { flex-direction: column; text-align: center; gap: 0.75rem; }
    .contact-social { flex-direction: column; align-items: flex-start; gap: 0.75rem; }
}

@media (max-width: 420px) {
    .page-hero__title { font-size: 2rem; }
    .contact-form__title { font-size: 1.5rem; }
    .contact-map__card-inner { padding: 1.5rem; }
}

/* ============================================
   PÁGINA GALERÍA
   ============================================ */
.gallery-page {
    padding: var(--sp-3xl) 0;
    background: var(--color-paper);
}

/* Filters */
.gallery-filters {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: var(--sp-2xl);
}

.gallery-filter {
    padding: 0.55rem 1.25rem;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-text-soft);
    background: var(--color-white);
    border: 1.5px solid var(--color-border);
    border-radius: var(--r-full);
    transition: var(--t);
}

.gallery-filter:hover {
    border-color: var(--color-text);
    color: var(--color-text);
}

.gallery-filter.active {
    background: var(--color-primary);
    color: var(--color-white);
    border-color: var(--color-primary);
    box-shadow: 0 4px 16px rgba(230,48,39,0.25);
}

/* Masonry Grid */
.gallery-page__grid {
    column-count: 4;
    column-gap: 0.75rem;
}

.gallery-page__item {
    break-inside: avoid;
    margin-bottom: 0.75rem;
    border-radius: var(--r-sm);
    overflow: hidden;
    position: relative;
    cursor: pointer;
    display: block;
}

.gallery-page__item img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.5s ease, filter 0.3s ease;
    filter: saturate(0.9);
}

.gallery-page__item:hover img {
    transform: scale(1.05);
    filter: saturate(1.15);
}

.gallery-page__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(10,10,10,0.75) 0%, rgba(10,10,10,0.2) 50%, transparent 100%);
    opacity: 0;
    transition: var(--t);
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    padding: 1rem;
}

.gallery-page__item:hover .gallery-page__overlay { opacity: 1; }

.gallery-page__tag {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-white);
    padding: 0.3rem 0.7rem;
    background: rgba(230,48,39,0.9);
    border-radius: var(--r-full);
    backdrop-filter: blur(8px);
}

.gallery-page__icon {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.15);
    border-radius: 50%;
    color: var(--color-white);
    font-size: 0.85rem;
    backdrop-filter: blur(8px);
}

/* Hidden items (filter) */
.gallery-page__item.hidden {
    display: none;
}

/* Instagram CTA */
.gallery-cta {
    margin-top: var(--sp-2xl);
}

.gallery-cta__inner {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: 2rem 2.5rem;
    background: var(--color-white);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-md);
    transition: var(--t);
}

.gallery-cta__inner:hover { box-shadow: var(--sh-lg); }

.gallery-cta__icon {
    width: 64px;
    height: 64px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
    border-radius: var(--r-md);
    font-size: 1.8rem;
    color: var(--color-white);
}

.gallery-cta__text { flex: 1; }

.gallery-cta__text h3 {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--color-text);
    margin-bottom: 0.2rem;
}

.gallery-cta__text p {
    font-size: 0.9rem;
    color: var(--color-text-soft);
}

/* ============================================
   LIGHTBOX
   ============================================ */
.lightbox {
    position: fixed;
    inset: 0;
    background: rgba(10,10,10,0.95);
    z-index: 2000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    backdrop-filter: blur(10px);
}

.lightbox.active { display: flex; }

.lightbox__img {
    max-width: 90vw;
    max-height: 85vh;
    border-radius: var(--r-md);
    box-shadow: var(--sh-xl);
    object-fit: contain;
}

.lightbox__close,
.lightbox__prev,
.lightbox__next {
    position: absolute;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.1);
    border-radius: 50%;
    color: var(--color-white);
    font-size: 1.2rem;
    cursor: pointer;
    transition: var(--t);
    border: none;
}

.lightbox__close:hover,
.lightbox__prev:hover,
.lightbox__next:hover {
    background: var(--color-primary);
}

.lightbox__close { top: 1.5rem; right: 1.5rem; }
.lightbox__prev { left: 1.5rem; top: 50%; transform: translateY(-50%); }
.lightbox__next { right: 1.5rem; top: 50%; transform: translateY(-50%); }

.lightbox__counter {
    position: absolute;
    bottom: 1.5rem;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.85rem;
    font-weight: 600;
    color: rgba(255,255,255,0.6);
    letter-spacing: 0.05em;
}

/* ============================================
   RESPONSIVE GALERÍA
   ============================================ */
@media (max-width: 1024px) {
    .gallery-page__grid { column-count: 3; }
    .gallery-cta__inner { flex-direction: column; text-align: center; gap: 1rem; }
}

@media (max-width: 640px) {
    .gallery-page__grid { column-count: 2; column-gap: 0.5rem; }
    .gallery-page__item { margin-bottom: 0.5rem; }
    .gallery-filters { gap: 0.35rem; }
    .gallery-filter { padding: 0.45rem 0.9rem; font-size: 0.72rem; }
    .gallery-cta__inner { padding: 1.5rem; }
    .lightbox { padding: 1rem; }
    .lightbox__close { top: 1rem; right: 1rem; width: 40px; height: 40px; }
    .lightbox__prev { left: 0.5rem; width: 40px; height: 40px; }
    .lightbox__next { right: 0.5rem; width: 40px; height: 40px; }
}

@media (max-width: 420px) {
    .gallery-page__grid { column-count: 1; }
    .gallery-page__item img { width: 100%; }
}

/* ============================================
   PÁGINA EVENTOS
   ============================================ */

/* ---------- HIGHLIGHT MOSAIC ---------- */
.events-highlight {
    padding: var(--sp-3xl) 0;
    background: var(--color-paper);
}

.events-highlight__header { text-align: center; margin-bottom: var(--sp-2xl); }

.events-highlight__mosaic {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    grid-template-rows: 220px 220px;
    gap: 0.75rem;
}

.events-highlight__item {
    border-radius: var(--r-md);
    overflow: hidden;
    position: relative;
}

.events-highlight__item--lg { grid-row: span 2; }

.events-highlight__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.events-highlight__item:hover img { transform: scale(1.05); }

.events-highlight__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(10,10,10,0.7) 0%, transparent 50%);
    display: flex;
    align-items: flex-end;
    padding: 1.25rem;
}

.events-highlight__label {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-white);
    padding: 0.35rem 0.85rem;
    background: rgba(230,48,39,0.85);
    border-radius: var(--r-full);
    backdrop-filter: blur(8px);
}

/* ---------- EVENTS LIST ---------- */
.events-list-page {
    padding: var(--sp-3xl) 0;
    background: var(--color-cream);
}

.events-list-page__header { text-align: center; margin-bottom: var(--sp-2xl); }

.events-list-filters {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1.5rem;
}

.events-list-filter {
    padding: 0.55rem 1.25rem;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-text-soft);
    background: var(--color-white);
    border: 1.5px solid var(--color-border);
    border-radius: var(--r-full);
    transition: var(--t);
}

.events-list-filter:hover {
    border-color: var(--color-text);
    color: var(--color-text);
}

.events-list-filter.active {
    background: var(--color-primary);
    color: var(--color-white);
    border-color: var(--color-primary);
    box-shadow: 0 4px 16px rgba(230,48,39,0.25);
}

/* Event List Grid */
.events-list-page__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-lg);
}

/* Event List Card */
.event-list-card {
    background: var(--color-white);
    border-radius: var(--r-md);
    overflow: hidden;
    box-shadow: var(--sh-sm);
    transition: var(--t);
    display: flex;
    flex-direction: column;
}

.event-list-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--sh-lg);
}

.event-list-card.hidden { display: none; }

.event-list-card__date {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0.85rem 0.5rem;
    background: var(--color-black);
    color: var(--color-white);
    text-align: center;
    flex-shrink: 0;
}

.event-list-card__day {
    font-family: var(--font-display);
    font-size: 2.2rem;
    line-height: 1;
    color: var(--color-white);
}

.event-list-card__month {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-primary);
    margin-top: 0.15rem;
}

.event-list-card__weekday {
    font-size: 0.72rem;
    color: rgba(255,255,255,0.5);
    margin-top: 0.2rem;
}

.event-list-card__image {
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
}

.event-list-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.event-list-card:hover .event-list-card__image img { transform: scale(1.06); }

.event-list-card__badge {
    position: absolute;
    top: 0.75rem;
    left: 0.75rem;
    padding: 0.3rem 0.75rem;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    background: rgba(10,10,10,0.85);
    color: var(--color-white);
    border-radius: var(--r-full);
    backdrop-filter: blur(8px);
}

.event-list-card__body {
    padding: 1.5rem;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.event-list-card__body h3 {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-text);
    margin-bottom: 0.5rem;
}

.event-list-card__body p {
    font-size: 0.88rem;
    line-height: 1.5;
    color: var(--color-text-soft);
    margin-bottom: 1rem;
    flex: 1;
}

.event-list-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    margin-bottom: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid var(--color-border);
}

.event-list-card__meta span {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--color-text-light);
}

.event-list-card__meta i { color: var(--color-primary); font-size: 0.85rem; }

.event-list-card__actions {
    display: flex;
    gap: 0.6rem;
}

.event-list-card__actions .btn { flex: 1; }

/* Empty state */
.events-list-empty {
    text-align: center;
    padding: var(--sp-2xl) 1rem;
    color: var(--color-text-light);
}

.events-list-empty i {
    font-size: 2.5rem;
    margin-bottom: 1rem;
    color: var(--color-gray-300);
}

.events-list-empty p {
    font-size: 0.95rem;
}

/* ---------- EVENTOS PRIVADOS ---------- */
.events-private {
    padding: var(--sp-3xl) 0;
    background: var(--color-black);
    position: relative;
    overflow: hidden;
}

.events-private::before {
    content: '';
    position: absolute;
    top: -20%;
    left: -10%;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(230,48,39,0.08) 0%, transparent 65%);
    pointer-events: none;
}

.events-private__grid {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: var(--sp-2xl);
    align-items: center;
    position: relative;
    z-index: 2;
}

.events-private__lead {
    font-size: 1.05rem;
    line-height: 1.6;
    color: rgba(255,255,255,0.7);
    margin-bottom: var(--sp-lg);
    max-width: 460px;
}

.events-private__list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: var(--sp-lg);
}

.events-private__list li {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.92rem;
    font-weight: 500;
    color: rgba(255,255,255,0.85);
}

.events-private__list i { color: var(--color-primary); font-size: 0.8rem; }

.events-private__actions {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.events-private__visual {
    border-radius: var(--r-lg);
    overflow: hidden;
    aspect-ratio: 4 / 3;
    box-shadow: var(--sh-xl);
}

.events-private__visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ---------- RESPONSIVE EVENTOS ---------- */
@media (max-width: 1024px) {
    .events-highlight__mosaic { grid-template-columns: 1fr 1fr; grid-template-rows: 200px 200px 200px; }
    .events-highlight__item--lg { grid-row: span 1; grid-column: span 2; }
    .events-list-page__grid { grid-template-columns: repeat(2, 1fr); }
    .events-private__grid { grid-template-columns: 1fr; gap: var(--sp-xl); }
    .events-private__visual { max-width: 500px; margin: 0 auto; }
}

@media (max-width: 640px) {
    .events-highlight__mosaic { grid-template-columns: 1fr 1fr; grid-template-rows: 160px 160px 160px; gap: 0.5rem; }
    .events-list-page__grid { grid-template-columns: 1fr; }
    .events-list-filters { gap: 0.35rem; }
    .events-list-filter { padding: 0.45rem 0.9rem; font-size: 0.72rem; }
    .events-private__actions { flex-direction: column; }
    .events-private__actions .btn { width: 100%; }
}

@media (max-width: 420px) {
    .events-highlight__mosaic { grid-template-columns: 1fr; grid-template-rows: 160px 160px 160px 160px 160px; }
    .events-highlight__item--lg { grid-column: span 1; }
    .event-list-card__actions { flex-direction: column; }
}

/* ============================================
   PÁGINA EVENTO DETALLE
   ============================================ */

/* ---------- EVENT HERO ---------- */
.event-hero {
    position: relative;
    min-height: 520px;
    display: flex;
    align-items: center;
    padding-top: 76px;
    overflow: hidden;
    background: var(--color-black);
}

.event-hero__bg { position: absolute; inset: 0; z-index: 0; }
.event-hero__bg img { width: 100%; height: 100%; object-fit: cover; }

.event-hero__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(10,10,10,0.92) 0%, rgba(10,10,10,0.7) 50%, rgba(10,10,10,0.45) 100%);
}

.event-hero__content {
    position: relative;
    z-index: 2;
    max-width: 640px;
    padding: 2rem 0;
}

.event-hero__date-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1.25rem;
    background: var(--color-primary);
    border-radius: var(--r-md);
    margin-bottom: 1.25rem;
    box-shadow: 0 4px 20px rgba(230,48,39,0.35);
}

.event-hero__date-day {
    font-family: var(--font-display);
    font-size: 2.5rem;
    line-height: 1;
    color: var(--color-white);
}

.event-hero__date-info { display: flex; flex-direction: column; }

.event-hero__date-month {
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-white);
}

.event-hero__date-weekday {
    font-size: 0.75rem;
    color: rgba(255,255,255,0.8);
}

.event-hero__title {
    font-family: var(--font-display);
    font-size: clamp(3rem, 6vw, 5.5rem);
    font-weight: 400;
    line-height: 0.9;
    letter-spacing: 0.01em;
    color: var(--color-white);
    margin-bottom: 1rem;
}

.event-hero__subtitle {
    font-size: 1.05rem;
    line-height: 1.6;
    color: rgba(255,255,255,0.7);
    max-width: 480px;
    margin-bottom: 2rem;
}

.event-hero__actions {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

/* ---------- INFO BAR ---------- */
.event-info-bar {
    padding: var(--sp-lg) 0;
    background: var(--color-white);
    box-shadow: var(--sh-sm);
}

.event-info-bar__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--sp-md);
}

.event-info-bar__item {
    display: flex;
    align-items: center;
    gap: 0.85rem;
}

.event-info-bar__icon {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-paper);
    border-radius: var(--r-sm);
    font-size: 1.1rem;
    color: var(--color-primary);
}

.event-info-bar__label {
    display: block;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-light);
    margin-bottom: 0.15rem;
}

.event-info-bar__value {
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--color-text);
}

/* ---------- EVENT DETAIL ---------- */
.event-detail {
    padding: var(--sp-3xl) 0;
    background: var(--color-paper);
}

.event-detail__grid {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: var(--sp-2xl);
    align-items: start;
}

.event-detail__content { padding-right: 1rem; }

.event-detail__lead {
    font-size: 1.1rem;
    line-height: 1.7;
    color: var(--color-text);
    font-weight: 500;
    margin-bottom: 1.25rem;
}

.event-detail__content p {
    font-size: 0.95rem;
    line-height: 1.7;
    color: var(--color-text-soft);
    margin-bottom: 1.25rem;
}

/* What to expect */
.event-detail__expect { margin: var(--sp-xl) 0; }

.event-detail__expect h3,
.event-detail__schedule h3 {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--color-text);
    margin-bottom: var(--sp-md);
}

.event-detail__expect-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-md);
}

.event-detail__expect-item {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    padding: 1.25rem;
    background: var(--color-white);
    border-radius: var(--r-md);
    box-shadow: var(--sh-sm);
    transition: var(--t);
}

.event-detail__expect-item:hover {
    transform: translateY(-3px);
    box-shadow: var(--sh-md);
}

.event-detail__expect-icon {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-paper);
    border-radius: var(--r-sm);
    font-size: 1rem;
    color: var(--color-primary);
    transition: var(--t);
}

.event-detail__expect-item:hover .event-detail__expect-icon {
    background: var(--color-primary);
    color: var(--color-white);
}

.event-detail__expect-item h4 {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--color-text);
    margin-bottom: 0.25rem;
}

.event-detail__expect-item p {
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--color-text-soft);
    margin: 0;
}

/* Schedule timeline */
.event-detail__schedule { margin: var(--sp-xl) 0 0; }

.event-schedule {
    position: relative;
    padding-left: 0;
}

.event-schedule__item {
    display: grid;
    grid-template-columns: 70px 24px 1fr;
    gap: 1rem;
    align-items: flex-start;
    padding-bottom: 1.5rem;
    position: relative;
}

.event-schedule__item::before {
    content: '';
    position: absolute;
    left: 81px;
    top: 24px;
    bottom: 0;
    width: 2px;
    background: var(--color-border);
}

.event-schedule__item:last-child::before { display: none; }

.event-schedule__time {
    font-family: var(--font-display);
    font-size: 1.3rem;
    color: var(--color-text);
    letter-spacing: 0.02em;
    padding-top: 2px;
}

.event-schedule__dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--color-white);
    border: 3px solid var(--color-gray-300);
    margin-top: 6px;
    margin-left: 5px;
    position: relative;
    z-index: 2;
    transition: var(--t);
}

.event-schedule__dot--active {
    border-color: var(--color-primary);
    background: var(--color-primary);
    box-shadow: 0 0 0 5px rgba(230,48,39,0.15);
}

.event-schedule__text h4 {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--color-text);
    margin-bottom: 0.2rem;
}

.event-schedule__text p {
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--color-text-soft);
    margin: 0;
}

/* ---------- SIDEBAR ---------- */
.event-detail__sidebar {
    position: sticky;
    top: 90px;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.event-sidebar-card {
    background: var(--color-white);
    border-radius: var(--r-lg);
    padding: 1.75rem;
    box-shadow: var(--sh-md);
}

.event-sidebar-card__header { margin-bottom: 1.25rem; }

.event-sidebar-card__tag {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-whatsapp);
    background: rgba(37,211,102,0.1);
    padding: 0.3rem 0.7rem;
    border-radius: var(--r-full);
    margin-bottom: 0.75rem;
}

.event-sidebar-card__header h3 {
    font-family: var(--font-display);
    font-size: 1.8rem;
    letter-spacing: 0.02em;
    color: var(--color-text);
    margin-bottom: 0.35rem;
}

.event-sidebar-card__header p {
    font-size: 0.88rem;
    color: var(--color-text-soft);
    line-height: 1.5;
}

.event-sidebar-card__info {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1.25rem 0;
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
    margin-bottom: 1.25rem;
}

.event-sidebar-card__row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--color-text);
}

.event-sidebar-card__row i {
    color: var(--color-primary);
    width: 18px;
    text-align: center;
}

.event-sidebar-card .btn { margin-bottom: 0.6rem; }
.event-sidebar-card .btn:last-of-type { margin-bottom: 0; }

.event-sidebar-card__share {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--color-border);
}

.event-sidebar-card__share span {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--color-text-light);
}

.event-sidebar-card__share-links { display: flex; gap: 0.4rem; }

.event-sidebar-card__share-links a {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-paper);
    border-radius: var(--r-sm);
    font-size: 0.85rem;
    color: var(--color-text-soft);
    transition: var(--t);
}

.event-sidebar-card__share-links a:hover {
    background: var(--color-primary);
    color: var(--color-white);
}

/* Mini map */
.event-sidebar-map {
    border-radius: var(--r-md);
    overflow: hidden;
    box-shadow: var(--sh-sm);
}

/* ---------- EVENT GALLERY ---------- */
.event-gallery {
    padding: var(--sp-3xl) 0;
    background: var(--color-cream);
}

.event-gallery__header { text-align: center; margin-bottom: var(--sp-2xl); }

.event-gallery__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
}

.event-gallery__item {
    aspect-ratio: 4 / 3;
    border-radius: var(--r-sm);
    overflow: hidden;
}

.event-gallery__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease, filter 0.3s ease;
    filter: saturate(0.9);
}

.event-gallery__item:hover img {
    transform: scale(1.06);
    filter: saturate(1.15);
}

/* ---------- RELATED EVENTS ---------- */
.related-events {
    padding: var(--sp-3xl) 0;
    background: var(--color-paper);
}

.related-events__header { text-align: center; margin-bottom: var(--sp-2xl); }

.related-events__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-lg);
    margin-bottom: var(--sp-xl);
}

.related-events__cta { text-align: center; }

/* ---------- RESPONSIVE EVENTO DETALLE ---------- */
@media (max-width: 1024px) {
    .event-detail__grid { grid-template-columns: 1fr; gap: var(--sp-xl); }
    .event-detail__sidebar { position: static; max-width: 480px; }
    .event-info-bar__grid { grid-template-columns: repeat(2, 1fr); gap: var(--sp-md); }
    .event-gallery__grid { grid-template-columns: repeat(2, 1fr); }
    .related-events__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
    .event-hero { min-height: 420px; }
    .event-hero__title { font-size: 2.5rem; }
    .event-info-bar__grid { grid-template-columns: 1fr; gap: 0.75rem; }
    .event-detail__expect-grid { grid-template-columns: 1fr; }
    .event-gallery__grid { grid-template-columns: 1fr 1fr; gap: 0.5rem; }
    .related-events__grid { grid-template-columns: 1fr; }
    .event-schedule__item { grid-template-columns: 60px 20px 1fr; gap: 0.75rem; }
    .event-schedule__time { font-size: 1.1rem; }
    .event-hero__actions .btn { flex: 1; min-width: 0; }
}

@media (max-width: 420px) {
    .event-hero__title { font-size: 2rem; }
    .event-gallery__grid { grid-template-columns: 1fr; }
    .event-sidebar-card { padding: 1.25rem; }
}

/* ============================================
   PÁGINA CARTA / MENÚ
   ============================================ */

/* ---------- MENU NAV TABS ---------- */
.menu-nav {
    position: sticky;
    top: 0;
    z-index: 90;
    background: var(--color-white);
    box-shadow: var(--sh-sm);
    padding: 0.75rem 0;
    transition: var(--t);
}

.menu-nav.scrolled {
    top: 64px;
    box-shadow: var(--sh-md);
}

.menu-nav__inner {
    display: flex;
    gap: 0.4rem;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 0.25rem;
}

.menu-nav__inner::-webkit-scrollbar { display: none; }

.menu-nav__link {
    flex-shrink: 0;
    padding: 0.5rem 1.1rem;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-text-soft);
    background: var(--color-paper);
    border: 1.5px solid var(--color-border);
    border-radius: var(--r-full);
    transition: var(--t);
    white-space: nowrap;
}

.menu-nav__link:hover {
    border-color: var(--color-text);
    color: var(--color-text);
}

.menu-nav__link.active {
    background: var(--color-primary);
    color: var(--color-white);
    border-color: var(--color-primary);
    box-shadow: 0 4px 14px rgba(230,48,39,0.25);
}

/* ---------- MENU PAGE ---------- */
.menu-page {
    padding: var(--sp-2xl) 0 var(--sp-3xl);
    background: var(--color-paper);
}

.menu-section { display: none; }
.menu-section.active { display: block; }

.menu-section__header {
    text-align: center;
    margin-bottom: var(--sp-2xl);
}

.menu-section__header p {
    font-size: 0.95rem;
    color: var(--color-text-soft);
    margin-top: 0.5rem;
}

/* ---------- MENU GRID ---------- */
.menu-section__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

/* ---------- MENU ITEM ---------- */
.menu-item {
    background: var(--color-white);
    border-radius: var(--r-md);
    padding: 1.5rem;
    box-shadow: var(--sh-sm);
    transition: var(--t);
    display: flex;
    flex-direction: column;
}

.menu-item:hover {
    transform: translateY(-3px);
    box-shadow: var(--sh-md);
}

.menu-item__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.5rem;
}

.menu-item__head h3 {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--color-text);
    line-height: 1.3;
}

.menu-item__price {
    font-family: var(--font-display);
    font-size: 1.4rem;
    letter-spacing: 0.02em;
    color: var(--color-primary);
    flex-shrink: 0;
    white-space: nowrap;
}

.menu-item p {
    font-size: 0.88rem;
    line-height: 1.5;
    color: var(--color-text-soft);
    flex: 1;
}

.menu-item__tag {
    display: inline-block;
    margin-top: 0.75rem;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-text-light);
    background: var(--color-paper);
    padding: 0.25rem 0.65rem;
    border-radius: var(--r-full);
    align-self: flex-start;
}

.menu-item__tag--accent {
    color: var(--color-white);
    background: var(--color-primary);
}

/* ---------- MENU INFO ---------- */
.menu-info {
    padding: var(--sp-2xl) 0;
    background: var(--color-black);
}

.menu-info__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-lg);
}

.menu-info__item {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

.menu-info__icon {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.06);
    border-radius: var(--r-sm);
    font-size: 1.1rem;
    color: var(--color-primary);
}

.menu-info__item h4 {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--color-white);
    margin-bottom: 0.2rem;
}

.menu-info__item p {
    font-size: 0.85rem;
    color: rgba(255,255,255,0.6);
    line-height: 1.5;
}

/* ---------- RESPONSIVE CARTA ---------- */
@media (max-width: 1024px) {
    .menu-section__grid { grid-template-columns: 1fr; }
    .menu-info__grid { grid-template-columns: 1fr; gap: var(--sp-md); }
}

@media (max-width: 640px) {
    .menu-item { padding: 1.25rem; }
    .menu-item__head h3 { font-size: 1rem; }
    .menu-item__price { font-size: 1.2rem; }
    .menu-nav__link { padding: 0.45rem 0.85rem; font-size: 0.72rem; }
}

@media (max-width: 420px) {
    .menu-item__head { flex-direction: column; gap: 0.25rem; }
    .menu-item__price { font-size: 1.3rem; }
}

/* ============================================
   DIFUNDIR — AJUSTES DEL CONTENIDO DINAMICO
   Lo que el diseno estatico no contemplaba y el
   panel si necesita: menu de varios niveles,
   logo de la tienda y paginas sin hero.
   ============================================ */

/* ---------- PAGINAS SIN HERO ---------- */
/* El header es fijo y transparente porque siempre tiene el hero oscuro
   debajo. Una pagina sin hero necesita darle fondo propio y reservarle
   el alto, o el contenido le queda por debajo. */
.page--sin-hero .site-header {
    background: rgba(10, 10, 10, 0.95);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.3);
}

.page--sin-hero main {
    padding-top: 76px;
    min-height: 45vh;
}

/* ---------- LOGO DE LA TIENDA ---------- */
/* El logo es casi cuadrado y va en blanco sobre transparente: funciona sobre
   el header oscuro y sobre el hero, sin recuadro. Al hacer scroll el header
   baja de 76 a 64 px, asi que el logo baja con el. */
.header__logo .logo__img {
    display: block;
    height: 56px;
    width: auto;
    transition: var(--t);
}

.site-header.scrolled .header__logo .logo__img {
    height: 46px;
}

@media (max-width: 640px) {
    .header__logo .logo__img { height: 46px; }
    .site-header.scrolled .header__logo .logo__img { height: 40px; }
}

.footer__logo-img {
    display: block;
    height: 72px;
    width: auto;
    margin-bottom: 1rem;
}

/* ---------- MENU ESCRITORIO: DESPLEGABLES ---------- */
.nav__menu {
    align-items: center;
    flex-wrap: nowrap;
}

.nav__item--has-submenu {
    position: relative;
}

.nav__item--has-submenu > .nav__link {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.nav__caret {
    font-size: 0.62rem;
    opacity: 0.6;
    transition: var(--t);
}

.nav__item--has-submenu:hover > .nav__link .nav__caret,
.nav__item--has-submenu.open > .nav__link .nav__caret {
    transform: rotate(180deg);
    opacity: 1;
}

.nav__submenu {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 240px;
    background: var(--color-carbon);
    border: 1px solid var(--color-border-dark);
    border-radius: var(--r-sm);
    box-shadow: var(--sh-lg);
    padding: 0.5rem 0;
    list-style: none;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: var(--t);
    z-index: 60;
}

.nav__item--has-submenu:hover > .nav__submenu,
.nav__item--has-submenu.open > .nav__submenu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.nav__submenu a {
    display: block;
    padding: 0.6rem 1.1rem;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--color-gray-300);
    transition: var(--t);
}

.nav__submenu a:hover {
    background: rgba(255, 255, 255, 0.05);
    color: var(--color-white);
}

/* ---------- MENU MOVIL: ACORDEON ---------- */
.mobile-nav__link--toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.mobile-nav__caret {
    font-size: 0.7rem;
    opacity: 0.6;
    transition: var(--t);
}

.mobile-nav__item--has-sub--open > .mobile-nav__link--toggle .mobile-nav__caret {
    transform: rotate(180deg);
    opacity: 1;
}

.mobile-nav__sub {
    list-style: none;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease;
}

.mobile-nav__item--has-sub--open > .mobile-nav__sub {
    max-height: 1200px;
}

.mobile-nav__sub a {
    display: block;
    padding: 0.6rem 0 0.6rem 1rem;
    font-size: 0.95rem;
    color: inherit;
    opacity: 0.75;
}

.mobile-nav__sub a:hover {
    opacity: 1;
}

/* ---------- SEDES EN LA TARJETA DEL MAPA ---------- */
.sede {
    transition: var(--t);
}

.sede__referencia {
    display: flex;
    align-items: flex-start;
    gap: 0.45rem;
    margin: -0.5rem 0 1rem;
    font-size: 0.85rem;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.6);
}

.sede__referencia i {
    margin-top: 0.2rem;
    color: var(--color-secondary);
}

.sede__links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1.25rem;
    margin-top: 0.85rem;
}

.sede__links a {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0;
    background: none;
    border: none;
    font: inherit;
    font-size: 0.82rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    transition: var(--t);
}

.sede__links a:hover {
    color: var(--color-secondary);
}

/* ---------- ACCION Y NOTA EN LOS BLOQUES DE INFO ---------- */
.contact-info__nota {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.85rem;
    color: var(--color-text-light);
}

.contact-info__accion {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.5rem;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--color-primary);
    transition: var(--t);
}

.contact-info__accion:hover {
    gap: 0.7rem;
}

/* ============================================
   NOSOTROS
   Pagina de una categoria de contenidos: pilares
   (especificaciones), historia (descripcion
   adicional), articulos y testimonios. "Quienes
   somos" reutiliza .empresa-page y la FAQ usa la
   misma de contacto.
   ============================================ */

/* ---------- ENCABEZADO DE SECCION ---------- */
.nos-head {
    text-align: center;
    max-width: 760px;
    margin: 0 auto var(--sp-2xl);
}

.nos-head__lead {
    margin-top: 0.9rem;
    font-size: 1rem;
    line-height: 1.65;
    color: var(--color-text-soft);
}

.nos-head--light .nos-head__lead {
    color: rgba(255, 255, 255, 0.65);
}

.faq__header .nos-head__lead {
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
}

/* ---------- QUIENES SOMOS: extras sobre .empresa-page ---------- */
/* El subtitulo de la categoria lo escribe el cliente y puede ser una frase
   larga: al tamano de .empresa-page ocupaba media pantalla. */
#quienes-somos .section__title--display {
    font-size: clamp(1.8rem, 3vw, 2.75rem);
    line-height: 1.05;
}

.nos-caracteristicas {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 0.6rem 1.25rem;
    margin: 1.5rem 0 0;
    padding: 0;
}

.nos-caracteristicas li {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    font-size: 0.92rem;
    font-weight: 600;
    line-height: 1.45;
    color: var(--color-text);
}

.nos-caracteristicas i {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    margin-top: 0.05rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--r-full);
    background: var(--color-primary);
    color: var(--color-white);
    font-size: 0.62rem;
}

.empresa-page__acciones {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 2rem;
}

.empresa-page__image video {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    background: var(--color-black);
}

@media (max-width: 900px) {
    .empresa-page__image video { aspect-ratio: 16 / 10; }
}

/* ---------- PILARES ---------- */
.nos-pilares {
    padding: var(--sp-3xl) 0;
    background: var(--color-black);
}

/* Encabezado partido: titulo a la izquierda, bajada y descripcion a la
   derecha, con una linea que lo separa de las tarjetas. */
.nos-head--split {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    align-items: end;
    gap: var(--sp-2xl);
    max-width: none;
    margin: 0 0 var(--sp-2xl);
    padding-bottom: var(--sp-lg);
    text-align: left;
    border-bottom: 1px solid var(--color-border-dark);
}

.nos-head--split .section__title--display {
    font-size: clamp(2rem, 3.4vw, 3rem);
    line-height: 1;
}

/* Tope al titulo: uno largo del panel no se estira hasta el borde. */
.nos-head__main { max-width: 36rem; }

.nos-head__aside .nos-head__lead { margin-top: 0; }

.nos-head__desc {
    margin-top: 0.75rem;
    font-size: 0.92rem;
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.55);
}

.nos-head__desc > * + * { margin-top: 0.6rem; }

/* Primera fila de a dos, las siguientes de a tres: grilla de 6 columnas.
   Las dos primeras tarjetas ocupan 3 columnas y el resto 2. */
.nos-pilares__grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: var(--sp-md);
}

.nos-pilar {
    grid-column: span 2;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
    padding: 1.75rem 1.75rem 2rem;
    background: var(--color-carbon);
    border: 1px solid var(--color-border-dark);
    border-radius: var(--r-md);
    transition: var(--t);
}

/* Las dos destacadas: numero a la izquierda y texto a la derecha. */
.nos-pilar:nth-child(-n+2) {
    grid-column: span 3;
    flex-direction: row;
    gap: 1.5rem;
    padding: 2.25rem 2.25rem 2.5rem;
}

/* Ultima fila incompleta: una tarjeta suelta va centrada; dos se reparten
   el ancho igual que la primera fila. Una sola en total, ancha y centrada. */
.nos-pilar:nth-child(3n):last-child { grid-column: 3 / span 2; }

.nos-pilar:nth-child(3n):nth-last-child(2),
.nos-pilar:nth-child(3n+4):last-child { grid-column: span 3; }

.nos-pilar:only-child { grid-column: 2 / span 4; }

/* Linea de acento que se dibuja al pasar el mouse. */
.nos-pilar::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 1.75rem;
    right: 1.75rem;
    height: 2px;
    background: linear-gradient(90deg, var(--color-primary), var(--color-secondary));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.45s ease;
}

.nos-pilar:hover {
    background: var(--color-charcoal);
    border-color: rgba(255, 255, 255, 0.16);
    transform: translateY(-3px);
}

.nos-pilar:hover::before { transform: scaleX(1); }

.nos-pilar__indice {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: 0.75rem;
    flex-shrink: 0;
    font-family: var(--font-display);
    font-size: 1.1rem;
    line-height: 1;
    letter-spacing: 0.12em;
    color: var(--color-secondary);
}

.nos-pilar__indice::after {
    content: "";
    width: 2.5rem;
    height: 1px;
    background: rgba(255, 255, 255, 0.2);
}

.nos-pilar:nth-child(-n+2) .nos-pilar__indice {
    font-size: 2.6rem;
    letter-spacing: 0.02em;
    color: var(--color-primary);
}

.nos-pilar:nth-child(-n+2) .nos-pilar__indice::after { display: none; }

.nos-pilar__cuerpo {
    flex: 1;
    min-width: 0;
}

.nos-pilar__etiqueta {
    display: block;
    margin-bottom: 0.5rem;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-primary);
}

.nos-pilar__titulo {
    margin-bottom: 0.6rem;
    font-family: var(--font);
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.01em;
    color: var(--color-white);
}

.nos-pilar:nth-child(-n+2) .nos-pilar__titulo { font-size: 1.35rem; }

.nos-pilar__bajada {
    margin-bottom: 0.6rem;
    font-size: 0.95rem;
    font-weight: 500;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.82);
}

.nos-pilar__texto {
    font-size: 0.9rem;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.55);
}

.nos-pilar__texto > * + * { margin-top: 0.6rem; }

@media (max-width: 1024px) {
    .nos-head--split {
        grid-template-columns: 1fr;
        align-items: start;
        gap: var(--sp-md);
    }

    /* En tablet de a dos; si queda una sola al final, toma todo el ancho. */
    .nos-pilares__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .nos-pilares .nos-pilares__grid > .nos-pilar:nth-child(n) { grid-column: auto; }
    .nos-pilares .nos-pilares__grid > .nos-pilar:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

@media (max-width: 640px) {
    .nos-pilares__grid { grid-template-columns: 1fr; }

    .nos-pilares .nos-pilares__grid > .nos-pilar:nth-child(n) {
        flex-direction: column;
        gap: 1rem;
        padding: 1.5rem 1.5rem 1.75rem;
    }

    .nos-pilar:nth-child(-n+2) .nos-pilar__indice { font-size: 2rem; }
}

/* ---------- HISTORIA ---------- */
.nos-historia {
    padding: var(--sp-3xl) 0;
    background: var(--color-paper);
}

/* Descripcion adicional en tarjetas de a tres por fila: media arriba,
   texto abajo. Con mas de tres, bajan a la fila siguiente. */
.nos-historia__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--sp-lg);
    align-items: stretch;
}

.nos-historia__tarjeta {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--color-white);
    border-radius: var(--r-md);
    box-shadow: var(--sh-sm);
    transition: var(--t);
}

.nos-historia__tarjeta:hover {
    transform: translateY(-4px);
    box-shadow: var(--sh-md);
}

.nos-historia__media {
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--color-black);
}

.nos-historia__media img,
.nos-historia__media video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.nos-historia__tarjeta:hover .nos-historia__media img { transform: scale(1.04); }

/* La franja roja marca el inicio del texto con o sin imagen arriba. */
.nos-historia__cuerpo {
    flex: 1;
    padding: 1.5rem 1.5rem 1.75rem;
    border-top: 3px solid var(--color-primary);
}

.nos-historia__titulo {
    margin-bottom: 0.5rem;
    font-family: var(--font-display);
    font-size: clamp(1.4rem, 2vw, 1.8rem);
    line-height: 1.05;
    letter-spacing: 0.03em;
    color: var(--color-text);
}

.nos-historia__bajada {
    margin-bottom: 0.65rem;
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.45;
    color: var(--color-primary);
}

.nos-historia__texto {
    font-size: 0.9rem;
    line-height: 1.65;
    color: var(--color-text-soft);
}

.nos-historia__texto > * + * { margin-top: 0.6rem; }

@media (max-width: 900px) {
    .nos-historia__grid {
        grid-template-columns: 1fr;
        max-width: 560px;
        margin: 0 auto;
    }
}

/* ---------- ARTICULOS ---------- */
.nos-articulos {
    padding: var(--sp-3xl) 0;
    background: var(--color-cream);
}

.nos-articulos__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--sp-lg);
}

.nos-articulos__grid > *:only-child {
    max-width: 420px;
    margin: 0 auto;
}

.nos-articulo {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--color-white);
    border-radius: var(--r-md);
    box-shadow: var(--sh-sm);
    color: inherit;
    transition: var(--t);
}

.nos-articulo:hover {
    transform: translateY(-4px);
    box-shadow: var(--sh-md);
}

.nos-articulo__imagen {
    aspect-ratio: 16 / 10;
    overflow: hidden;
}

.nos-articulo__imagen img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.nos-articulo:hover .nos-articulo__imagen img { transform: scale(1.04); }

.nos-articulo__cuerpo {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 1.25rem 1.4rem 1.4rem;
}

.nos-articulo__fecha {
    margin-bottom: 0.5rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-text-light);
}

.nos-articulo__titulo {
    margin-bottom: 0.5rem;
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.35;
    color: var(--color-text);
}

.nos-articulo__texto {
    margin-bottom: 1rem;
    font-size: 0.88rem;
    line-height: 1.55;
    color: var(--color-text-soft);
}

.nos-articulo__mas {
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--color-primary);
    transition: var(--t);
}

.nos-articulo:hover .nos-articulo__mas { gap: 0.7rem; }

@media (max-width: 640px) {
    .nos-pilares,
    .nos-historia,
    .nos-articulos { padding: var(--sp-xl) 0; }
}

/* ---------- TESTIMONIOS ---------- */
.testimonios {
    padding: var(--sp-3xl) 0;
    background: var(--color-carbon);
}

.testimonios__header {
    text-align: center;
    margin-bottom: var(--sp-2xl);
}

.testimonios__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--sp-lg);
}

.testimonios__grid > *:only-child {
    max-width: 560px;
    margin: 0 auto;
}

.testimonio-card {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.75rem;
    background: var(--color-charcoal);
    border: 1px solid var(--color-border-dark);
    border-radius: var(--r-md);
}

.testimonio-card__estrellas {
    display: flex;
    gap: 0.2rem;
    font-size: 0.8rem;
    color: var(--color-secondary);
}

.testimonio-card blockquote {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.8);
}

.testimonio-card blockquote::before {
    content: '"';
}

.testimonio-card blockquote::after {
    content: '"';
}

.testimonio-card__autor {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: auto;
    padding-top: 0.5rem;
}

.testimonio-card__autor img {
    width: 44px;
    height: 44px;
    border-radius: var(--r-full);
    object-fit: cover;
    flex-shrink: 0;
}

.testimonio-card__autor strong {
    display: block;
    font-size: 0.9rem;
    color: var(--color-white);
}

.testimonio-card__autor small {
    display: block;
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.5);
}

/* ---------- NOSOTROS EN EL INICIO (resumen) ---------- */
/* Resumen de la categoria "nosotros" (contenidoCategoria objeto1) sobre la
   grilla de .empresa-page. El subtitulo lo escribe el cliente: tope al
   tamano para que una frase larga no ocupe media pantalla. */
.empresa-page--resumen {
    background: var(--color-cream);
}

.empresa-page--resumen .section__title--display {
    font-size: clamp(1.8rem, 3vw, 2.75rem);
    line-height: 1.05;
}

.empresa-page--resumen .empresa-page__description {
    font-size: 0.98rem;
}

/* ---------- UTILIDAD: TITULO SOLO PARA LECTORES Y BUSCADORES ---------- */
/* Mantiene la jerarquia h1 > h2 > h3 en secciones de tarjetas que en el
   diseno no llevan titulo visible: no se ve, pero se lee y se indexa. */
.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* ---------- FOOTER PROFESIONAL (pie) ---------- */
/* Rediseno del footer con clases propias (.pie*): asi no choca con las reglas
   .footer__* del diseno original ni con sus @media repartidos. La columna de la
   marca lleva logo, descripcion, redes y el QR de la bio. qrcodejs pinta canvas
   + img y esconde uno con estilo inline: al QR solo se le fija el tamano. */
.pie {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(900px 380px at 0% 0%, rgba(230, 48, 39, 0.09), transparent 60%),
        radial-gradient(700px 320px at 100% 100%, rgba(245, 200, 66, 0.05), transparent 60%),
        var(--color-black);
    color: rgba(255, 255, 255, 0.6);
}

/* Linea de acento arriba, de rojo a dorado, desvanecida en los extremos. */
.pie::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--color-primary) 25%, var(--color-secondary) 60%, transparent);
    opacity: 0.7;
}

.pie__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
    gap: var(--sp-2xl);
    padding: 4.5rem 0 3.5rem;
}

/* Los items de la grilla no se ensanchan con textos largos (un email sin
   espacios): sin min-width 0 una columna podia desbordar su carril. */
.pie__marca,
.pie__col { min-width: 0; }

/* ---------- Marca ---------- */
.pie__logo {
    display: inline-block;
    margin-bottom: 1.25rem;
}

.pie__logo img {
    display: block;
    width: auto;
    height: 64px;
}

.pie__descripcion {
    max-width: 330px;
    margin-bottom: 1.5rem;
    font-size: 0.9rem;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.55);
}

.pie__redes {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.pie__redes a {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: var(--r-full);
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.75);
    transition: var(--t);
}

.pie__redes a:hover {
    color: var(--color-white);
    background: var(--color-primary);
    border-color: var(--color-primary);
    transform: translateY(-2px);
}

/* ---------- QR de la bio (compacto) ---------- */
.pie__qr {
    margin-top: 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.85rem;
}

.pie__qr-card {
    flex-shrink: 0;
    display: inline-block;
    padding: 0.3rem;
    background: var(--color-white);
    border-radius: var(--r-sm);
    line-height: 0;
    opacity: 0.92;
    transition: var(--t);
}

.pie__qr-card:hover {
    opacity: 1;
    transform: scale(1.05);
}

.pie__qr-card img,
.pie__qr-card canvas {
    width: 64px;
    height: 64px;
    vertical-align: top;
}

.pie__qr-texto {
    margin: 0;
    font-size: 0.75rem;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.45);
}

.pie__qr-titulo {
    display: block;
    font-size: 0.82rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.85);
}

.pie__qr-link { display: none; }

/* ---------- Columnas ---------- */
.pie__titulo {
    position: relative;
    margin-bottom: 1.4rem;
    padding-bottom: 0.75rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--color-white);
}

.pie__titulo::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 24px;
    height: 2px;
    background: var(--color-primary);
}

.pie__lista {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.pie__lista a {
    position: relative;
    display: inline-block;
    font-size: 0.92rem;
    color: rgba(255, 255, 255, 0.6);
    transition: var(--t);
}

/* Subrayado dorado que crece desde la izquierda al pasar el mouse. */
.pie__lista a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -3px;
    width: 100%;
    height: 1px;
    background: var(--color-secondary);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s ease;
}

.pie__lista a:hover { color: var(--color-white); }

.pie__lista a:hover::after { transform: scaleX(1); }

/* ---------- Contacto ---------- */
.pie__contacto {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}

.pie__contacto li {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    font-size: 0.9rem;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.6);
}

.pie__icono {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--r-sm);
    font-size: 0.8rem;
    color: var(--color-secondary);
}

/* El texto baja un poco para quedar alineado con el centro del icono. */
.pie__dato {
    min-width: 0;
    padding-top: 0.3rem;
    overflow-wrap: anywhere;
}

.pie__contacto a {
    color: rgba(255, 255, 255, 0.75);
    transition: var(--t);
}

.pie__contacto a:hover { color: var(--color-white); }

/* ---------- Franja inferior ---------- */
.pie__base {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 1rem;
    padding: 1.5rem 0 1.75rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.45);
}

.pie__copy { margin: 0; }

.pie__legal {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.4rem 1.25rem;
}

.pie__legal a {
    color: rgba(255, 255, 255, 0.55);
    transition: var(--t);
}

.pie__legal a:hover { color: var(--color-white); }

.pie__extra {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 1.25rem;
}

.pie__credito a {
    color: rgba(255, 255, 255, 0.7);
    text-decoration: underline;
    text-decoration-color: rgba(255, 255, 255, 0.25);
    text-underline-offset: 3px;
    transition: var(--t);
}

.pie__credito a:hover {
    color: var(--color-white);
    text-decoration-color: var(--color-secondary);
}

.pie__arriba {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: var(--r-full);
    color: rgba(255, 255, 255, 0.75);
    transition: var(--t);
}

.pie__arriba:hover {
    color: var(--color-black);
    background: var(--color-secondary);
    border-color: var(--color-secondary);
    transform: translateY(-2px);
}

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
    .pie__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--sp-xl) var(--sp-lg);
        padding: 3.5rem 0 2.5rem;
    }

    .pie__marca { grid-column: 1 / -1; }

    /* En celular y tablet no tiene sentido escanear la propia pantalla. */
    .pie__qr-card,
    .pie__qr-texto { display: none; }

    .pie__qr-link {
        display: inline-flex;
        align-items: center;
        gap: 0.45rem;
        font-size: 0.85rem;
        color: rgba(255, 255, 255, 0.6);
        transition: var(--t);
    }

    .pie__qr-link:hover { color: var(--color-secondary); }

    .pie__base {
        grid-template-columns: 1fr;
        justify-items: center;
        text-align: center;
    }

    .pie__extra { justify-content: center; }
}

@media (max-width: 640px) {
    .pie__grid { grid-template-columns: 1fr; }

    .pie__logo img { height: 54px; }
}

/* ---------- HERO DE PAGINA CON FOTO ---------- */
/* El velo del diseno (90% negro a la izquierda) esta pensado para un hero sin
   foto y la tapa casi entera. Con foto, degradado vertical mas suave: se ve la
   imagen y el titulo centrado sigue leyendose. */
.page-hero--foto {
    min-height: 480px;
}

.page-hero--foto .page-hero__overlay {
    background: linear-gradient(180deg, rgba(10, 10, 10, 0.45) 0%, rgba(10, 10, 10, 0.55) 55%, rgba(10, 10, 10, 0.8) 100%);
}

.page-hero--foto .page-hero__title,
.page-hero--foto .page-hero__subtitle {
    text-shadow: 0 2px 18px rgba(0, 0, 0, 0.55);
}

@media (max-width: 640px) {
    .page-hero--foto { min-height: 380px; }
}

/* ---------- LISTA DE ACTIVIDADES ---------- */
/* Usa las tarjetas .event-list-card del diseno; aca va solo lo que la lista
   del panel necesita: descripcion de la categoria, tarjeta sin imagen y el
   titulo como enlace. */
.events-list-page__desc {
    max-width: 680px;
    margin: 1rem auto 0;
    font-size: 1rem;
    line-height: 1.7;
    color: var(--color-text-soft);
}

.events-list-page__desc p + p { margin-top: 0.75rem; }

.events-list-page__destacados {
    max-width: 680px;
    margin: 1.5rem auto 0;
}

.event-list-card__image { display: block; }

.event-list-card__image--vacia {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--color-black), #2a2a2a);
    color: var(--color-primary);
    font-size: 2.5rem;
}

.event-list-card__body h3 a {
    color: inherit;
    transition: var(--t);
}

.event-list-card__body h3 a:hover { color: var(--color-primary); }

.event-list-card__meta span { min-width: 0; }

.events-list-empty .btn { margin-top: 1.25rem; }

/* ---------- DETALLE DE ACTIVIDAD ---------- */
/* El hero es el mismo page-hero centrado de la lista. Del detalle de evento del
   diseno usa event-info-bar, event-detail y event-gallery; aca va lo que agrega
   la plantilla: texto del editor, video, lo que incluye y el formulario. */
.event-info-bar__item > div { min-width: 0; }

a.event-info-bar__value {
    display: block;
    transition: var(--t);
}

a.event-info-bar__value:hover { color: var(--color-primary); }

.event-detail__content,
.event-detail__sidebar { min-width: 0; }

.event-detail__titulo,
.event-sidebar-card__form .section__title--display {
    font-size: clamp(1.8rem, 3.2vw, 2.75rem);
    margin-bottom: 1.25rem;
}

.event-detail__texto {
    font-size: 0.95rem;
    line-height: 1.75;
    color: var(--color-text-soft);
}

.event-detail__texto p,
.event-detail__texto ul,
.event-detail__texto ol { margin-bottom: 1.1rem; }

.event-detail__texto ul,
.event-detail__texto ol { padding-left: 1.25rem; }

.event-detail__texto h2,
.event-detail__texto h3,
.event-detail__texto h4 {
    margin: 1.5rem 0 0.6rem;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--color-text);
}

.event-detail__texto img {
    height: auto;
    border-radius: var(--r-md);
}

.event-detail__video {
    margin-top: var(--sp-lg);
    overflow: hidden;
    background: var(--color-black);
    border-radius: var(--r-md);
}

.event-detail__video video {
    display: block;
    width: 100%;
}

.event-detail__incluye {
    list-style: none;
    margin: 0;
    padding: 0;
}

.event-detail__incluye .event-detail__expect-item { align-items: center; }

.event-detail__incluye .event-detail__expect-item p {
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--color-text);
}

.event-schedule__item { cursor: pointer; }

.event-sidebar-card__row { align-items: flex-start; }

.event-sidebar-card__row i { margin-top: 0.2rem; }

#detalle,
#solicitar-info { scroll-margin-top: 80px; }










.event-sidebar-card__form #consulta-error {
    margin-top: 0.75rem;
    font-size: 0.85rem;
    color: var(--color-primary);
}


@media (max-width: 1024px) {
    .event-detail__sidebar--form { position: static; }
}

@media (max-width: 640px) {
}

/* De que se trata: bloque texto + imagen principal (reutiliza empresa-page). */
.actividad-intro .event-detail__lead { margin-top: 1rem; }

.actividad-intro + .event-detail { padding-top: var(--sp-xl); }

.event-detail__content > .event-detail__video:first-child { margin-top: 0; }

/* Sin contenido en la columna izquierda: la tarjeta lateral sola, centrada. */
.event-detail__grid--solo {
    grid-template-columns: minmax(0, 440px);
    justify-content: center;
}

.event-detail__grid--solo .event-detail__sidebar { position: static; }

@media (max-width: 1024px) {
    .event-detail__grid--solo .event-detail__sidebar { max-width: none; }
}

/* ---------- IMAGENES COMPLETAS EN ACTIVIDADES ---------- */
/* Las fotos de las actividades no se recortan. En el detalle la imagen toma su
   proporcion natural; en las tarjetas de la lista el recuadro mantiene 16/10
   para que las tarjetas queden parejas, y la foto entra entera sobre fondo
   oscuro. Con clases de actividades delante: nosotros no cambia. */
.actividad-intro .empresa-page__image {
    align-self: start;
    background: var(--color-black);
}

.actividad-intro .empresa-page__image img {
    width: 100%;
    height: auto;
    aspect-ratio: auto;
    object-fit: contain;
}

.events-list-page .event-list-card__image {
    background: var(--color-black);
}

.events-list-page .event-list-card__image img {
    object-fit: contain;
}

.events-list-page .event-list-card:hover .event-list-card__image img { transform: scale(1.03); }

/* ---------- INICIO: ACTIVIDAD MAS RECIENTE ---------- */
/* Reusa el bloque de beneficios (fondo negro, grilla, lista con checks); la
   tarjeta de membresia se cambia por la foto de la actividad, entera. */
.actividad-reciente__media {
    position: relative;
    display: block;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--color-charcoal);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-xl);
}

.actividad-reciente__media img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform 0.5s ease;
}

.actividad-reciente__media:hover img { transform: scale(1.03); }

.actividad-reciente__vacia {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    color: var(--color-primary);
}

.actividad-reciente__badge {
    position: absolute;
    top: 1rem;
    left: 1rem;
    padding: 0.35rem 0.85rem;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-white);
    background: var(--color-primary);
    border-radius: var(--r-full);
}

.actividad-reciente .section__title--display {
    font-size: clamp(2.2rem, 4.5vw, 3.75rem);
}

.actividad-reciente__bajada {
    max-width: 520px;
    margin-top: 1rem;
    font-size: 1rem;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.7);
}

.actividad-reciente__acciones {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 2rem;
}

.actividad-reciente .benefits__list { margin-bottom: 0; }

@media (max-width: 1024px) {
    .actividad-reciente .benefits__visual {
        width: 100%;
        max-width: 560px;
        margin: 0 auto;
    }
}

@media (max-width: 640px) {
    .actividad-reciente__acciones .btn { flex: 1 1 auto; }
}

/* ---------- MIGA DE PAN EN CELULAR ---------- */
/* Con tres niveles (Inicio / categoria / actividad) el ultimo tramo repite el
   titulo que ya va en el h1 y partia la miga en varias lineas. En celular se
   oculta ese tramo y la miga queda en una sola linea; si aun no cabe, corta
   con puntos suspensivos. Las de dos niveles no pierden nada. */
@media (max-width: 640px) {
    .breadcrumb {
        flex-wrap: nowrap;
        max-width: 100%;
        overflow: hidden;
        white-space: nowrap;
    }

    .breadcrumb > * { flex-shrink: 0; }

    .breadcrumb > a:last-of-type,
    .breadcrumb__current {
        flex-shrink: 1;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .breadcrumb > .breadcrumb__sep:nth-child(4),
    .breadcrumb > .breadcrumb__current:nth-child(5) { display: none; }
}

/* ---------- LISTA DE ACTIVIDADES CENTRADA ---------- */
/* Hasta tres tarjetas por fila y siempre centradas: con una o dos actividades
   no quedan pegadas a la izquierda como en la grilla de tres columnas fijas.
   Las tarjetas mantienen el ancho de una columna aunque la fila no se llene. */
.events-list-page__grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--sp-lg);
}

.events-list-page__grid > .event-list-card {
    flex: 0 1 calc((100% - 2 * var(--sp-lg)) / 3);
    min-width: 0;
}

@media (max-width: 1024px) {
    .events-list-page__grid > .event-list-card { flex-basis: calc((100% - var(--sp-lg)) / 2); }
}

@media (max-width: 640px) {
    .events-list-page__grid > .event-list-card { flex-basis: 100%; }
}

/* ---------- DESTACADOS Y FECHA EN ACTIVIDADES ---------- */
/* Tarjetas: las caracteristicas pasan de texto con check a etiquetas; la fecha
   de termino queda al pie, sobre los botones. */
.act-destacados {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 0 0 1rem;
    padding: 0;
}

.act-destacados li {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    max-width: 100%;
    padding: 0.32rem 0.7rem;
    font-size: 0.74rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--color-text);
    background: rgba(230, 48, 39, 0.07);
    border: 1px solid rgba(230, 48, 39, 0.18);
    border-radius: var(--r-full);
}

.act-destacados i {
    flex-shrink: 0;
    font-size: 0.62rem;
    color: var(--color-primary);
}

.act-termino {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 1.1rem;
    padding: 0.6rem 0.8rem;
    font-size: 0.82rem;
    color: var(--color-text-soft);
    background: var(--color-paper);
    border-left: 3px solid var(--color-secondary);
    border-radius: var(--r-sm);
}

.event-list-card__body .act-termino {
    flex: 0 0 auto;
    margin-bottom: 1.1rem;
    font-size: 0.82rem;
    line-height: 1.4;
}

.act-termino i { color: var(--color-primary); }

.act-termino strong { color: var(--color-text); }

/* Encabezado de la lista: destacados de la categoria como etiquetas centradas,
   en lugar de la grilla con checks de nosotros. */
.events-list-page .events-list-page__destacados {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.6rem;
    max-width: 900px;
    margin: 1.75rem auto 0;
}

.events-list-page .events-list-page__destacados li {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1.1rem;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--color-text);
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--r-full);
    box-shadow: var(--sh-sm);
    transition: var(--t);
}

.events-list-page .events-list-page__destacados li:hover {
    border-color: rgba(230, 48, 39, 0.35);
    transform: translateY(-2px);
}

.events-list-page .events-list-page__destacados li i {
    width: auto;
    height: auto;
    margin: 0;
    font-size: 0.8rem;
    color: var(--color-primary);
    background: none;
    box-shadow: none;
}

@media (max-width: 640px) {
    .events-list-page .events-list-page__destacados li { font-size: 0.8rem; padding: 0.5rem 0.9rem; }
}

/* ---------- EVENTOS: LISTA Y FICHA ---------- */
/* El diseno ya trae event-list-card, event-hero, event-info-bar, event-detail y
   event-gallery. Aca va lo que agregan las plantillas: el bloque de fecha sobre
   la foto, la tarjeta sin imagen y los estados de la venta de entradas. */
.events-list-page .event-list-card__image {
    position: relative;
    display: block;
}

.event-list-card__image--vacia {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 16 / 10;
    background: linear-gradient(135deg, var(--color-black), #2a2a2a);
    color: var(--color-primary);
    font-size: 2.5rem;
}

/* La fecha va sobre la foto, arriba a la izquierda. */
.event-list-card__image .event-list-card__date {
    position: absolute;
    top: 0.75rem;
    left: 0.75rem;
    z-index: 1;
    min-width: 62px;
    padding: 0.5rem 0.6rem;
    border-radius: var(--r-sm);
    background: rgba(10, 10, 10, 0.88);
    backdrop-filter: blur(8px);
}

.event-list-card__image .event-list-card__day { font-size: 1.8rem; }

.event-list-card__badge { right: auto; }

.event-list-card__body h3 a {
    color: inherit;
    transition: var(--t);
}

.event-list-card__body h3 a:hover { color: var(--color-primary); }

/* La badge de la fecha en el hero de la ficha */
.event-hero__date-badge .event-hero__date-month {
    display: block;
    margin-top: 0;
}

/* Tarjeta de compra */
.event-sidebar-card__tag--agotado {
    color: var(--color-primary);
    background: rgba(230, 48, 39, 0.1);
}

.event-sidebar-card__preventa {
    margin-top: 0.35rem;
    font-size: 0.9rem;
    color: var(--color-text-soft);
}

.event-sidebar-card__preventa strong { color: var(--color-text); }

.event-sidebar-card__cerrado {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.6rem;
    padding: 0.85rem 1rem;
    font-size: 0.88rem;
    line-height: 1.5;
    color: var(--color-text-soft);
    background: var(--color-paper);
    border-left: 3px solid var(--color-primary);
    border-radius: var(--r-sm);
}

.event-sidebar-card__cerrado i { color: var(--color-primary); }

/* ---------- DESCRIPCION DEL ENCABEZADO DE FAQ ---------- */
/* Texto largo del editor bajo el titulo de preguntas frecuentes: se lee mejor
   alineado a la izquierda dentro de una caja, no centrado como el titulo. */
.faq__descripcion {
    max-width: 680px;
    margin: 1.25rem auto 0;
    padding: 1rem 1.25rem;
    border-left: 3px solid var(--color-primary);
    border-radius: var(--r-sm);
    background: var(--color-white);
    font-size: 0.92rem;
    line-height: 1.7;
    color: var(--color-text-soft);
    text-align: left;
}

.faq__descripcion > *:last-child { margin-bottom: 0; }

.faq__descripcion p { margin-bottom: 0.75rem; }

.faq__descripcion ul,
.faq__descripcion ol { margin: 0 0 0.75rem; padding-left: 1.25rem; }

.faq__descripcion strong { color: var(--color-text); }

.faq__descripcion a { color: var(--color-primary); text-decoration: underline; }

/* Formulario de actividad dentro de la tarjeta "Te interesa", bajo el
   WhatsApp. Con el formulario la columna es alta: deja de ser sticky
   para que el final del formulario no quede fuera de la pantalla. */
.event-detail__sidebar--form { position: static; }

.event-sidebar-card__form .form-field { margin-bottom: 0.85rem; }

.event-sidebar-card__form #consulta-error:empty { display: none; }

.event-sidebar-card__form .req { color: var(--color-primary); }

/* ---------- ETIQUETAS DE LA ACTIVIDAD ---------- */
/* Franja final con los tags del articulo, antes del CTA. Sin enlace: el
   buscador del sitio es solo de productos. */
.act-tags {
    padding: var(--sp-xl) 0;
    background: var(--color-paper);
    border-top: 1px solid var(--color-border);
}

.act-tags__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.75rem 1rem;
}

.act-tags__label {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-text-light);
}

.act-tags__label i { color: var(--color-primary); }

.act-tags__lista {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
}

.act-tags__lista li {
    padding: 0.4rem 0.9rem;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--color-text);
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--r-full);
}

.act-tags__lista li::before {
    content: "#";
    margin-right: 0.15rem;
    color: var(--color-primary);
}

.event-sidebar-card__form {
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--color-border);
}

/* Separador "o dejanos tus datos": texto entre dos lineas finas. */
.event-sidebar-card__form-titulo {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 0 0 1rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-text-light);
}

.event-sidebar-card__form-titulo::before,
.event-sidebar-card__form-titulo::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--color-border);
}

.event-sidebar-card__form .form-field input,
.event-sidebar-card__form .form-field textarea { width: 100%; }

.event-sidebar-card__form #consulta-mensaje .btn { margin-bottom: 0; }

/* ---------- AVISO DE PROXIMOS EVENTOS ---------- */
/* Lista de eventos: texto a la izquierda y suscripcion al newsletter a la
   derecha. El formulario reusa contact-form-card y form-field de contacto. */
.ev-aviso {
    padding: var(--sp-3xl) 0;
    background: var(--color-white);
}

.ev-aviso__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--sp-2xl);
    align-items: center;
}

.ev-aviso__texto .section__title--display {
    font-size: clamp(2.2rem, 4vw, 3.4rem);
    margin-bottom: 1rem;
}

.ev-aviso__lead {
    max-width: 460px;
    font-size: 1.05rem;
    line-height: 1.7;
    color: var(--color-text-soft);
}

.ev-aviso__card {
    background: var(--color-cream);
    box-shadow: none;
    border: 1px solid var(--color-border);
}

.ev-aviso__card .form-field { margin-bottom: 0.9rem; }

.ev-aviso__card .req { color: var(--color-primary); }

.ev-aviso__nota {
    margin: 0.75rem 0 0;
    font-size: 0.78rem;
    text-align: center;
    color: var(--color-text-light);
}

@media (max-width: 900px) {
    .ev-aviso__grid { grid-template-columns: 1fr; gap: var(--sp-xl); }
    .ev-aviso__texto { text-align: center; }
    .ev-aviso__lead { margin: 0 auto; }
}

@media (max-width: 640px) {
    .ev-aviso__card { padding: 1.5rem; }
}

/* ---------- LISTA DE SERVICIOS ---------- */
/* La lista de servicios ya tiene diseño propio (bloque SERVICIOS). Aca queda
   solo el ajuste de la tarjeta vacia que tambien usa la lista de eventos. */

.event-list-card__image--vacia { position: relative; }


/* =====================================================================
   SERVICIOS — DISEÑO PROPIO (clases sv-*)
   =====================================================================
   Lista y ficha de servicios con una composicion distinta a actividades y
   eventos: hero partido (texto + foto enmarcada), filas alternadas, planes en
   grilla, pasos en fila, contacto a todo el ancho y cierre en franja roja. */

/* --- Piezas comunes --- */
.sv-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.9rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--color-secondary);
}

.sv-eyebrow::before {
    content: "";
    width: 28px;
    height: 2px;
    background: var(--color-primary);
}

.sv-eyebrow--oscuro { color: var(--color-primary); }

.sv-titulo {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(2.2rem, 4.2vw, 3.4rem);
    font-weight: 400;
    line-height: 0.98;
    letter-spacing: 0.01em;
    color: var(--color-text);
}

.sv-titulo--claro { color: var(--color-white); }

.sv-sec-head {
    max-width: 640px;
    margin-bottom: var(--sp-2xl);
}

.sv-precio-pill {
    display: inline-flex;
    align-items: baseline;
    gap: 0.35rem;
    padding: 0.45rem 0.95rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-white);
    background: var(--color-primary);
    border-radius: var(--r-full);
    box-shadow: 0 8px 20px rgba(230, 48, 39, 0.3);
}

.sv-precio-pill strong {
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 400;
    letter-spacing: 0.02em;
}

.sv-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding-bottom: 2px;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--color-text);
    border-bottom: 2px solid var(--color-primary);
    transition: var(--t);
}

.sv-link:hover { color: var(--color-primary); }

.sv-video {
    max-width: 900px;
    margin: 0 auto var(--sp-2xl);
    overflow: hidden;
    background: var(--color-black);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-lg);
}

.sv-video video {
    display: block;
    width: 100%;
}

/* --- Lista en filas alternadas --- */
.sv-lista {
    padding: var(--sp-3xl) 0;
    background: var(--color-white);
}

.sv-lista__head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--sp-xl);
    align-items: end;
    margin-bottom: var(--sp-2xl);
    padding-bottom: var(--sp-xl);
    border-bottom: 1px solid var(--color-border);
}

.sv-lista__desc {
    font-size: 1rem;
    line-height: 1.75;
    color: var(--color-text-soft);
}

.sv-lista__desc > *:last-child { margin-bottom: 0; }

.sv-filas {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2xl);
}

.sv-fila {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--sp-2xl);
    align-items: center;
}

.sv-fila:nth-child(even) .sv-fila__media { order: 2; }

.sv-fila__media {
    position: relative;
    display: block;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: var(--r-lg);
    background: var(--color-black);
    box-shadow: var(--sh-md);
}

.sv-fila__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.sv-fila__media:hover img { transform: scale(1.04); }

.sv-fila__media--vacia {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    color: var(--color-primary);
}

.sv-fila__media .sv-precio-pill {
    position: absolute;
    left: 1rem;
    bottom: 1rem;
}

.sv-fila__cuerpo { min-width: 0; }

.sv-fila__num {
    display: block;
    margin-bottom: 0.25rem;
    font-family: var(--font-display);
    font-size: 3.4rem;
    line-height: 1;
    color: transparent;
    -webkit-text-stroke: 1.5px var(--color-primary);
}

.sv-fila__titulo {
    margin: 0 0 0.85rem;
    font-family: var(--font-display);
    font-size: clamp(2rem, 3.4vw, 2.8rem);
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0.01em;
}

.sv-fila__titulo a {
    color: var(--color-text);
    transition: var(--t);
}

.sv-fila__titulo a:hover { color: var(--color-primary); }

.sv-fila__texto {
    margin: 0 0 1.1rem;
    font-size: 1rem;
    line-height: 1.7;
    color: var(--color-text-soft);
}

.sv-chips {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin: 0 0 1.5rem;
    padding: 0;
}

.sv-chips li {
    padding: 0.35rem 0.85rem;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--color-text);
    background: var(--color-paper);
    border: 1px solid var(--color-border);
    border-radius: var(--r-full);
}

.sv-fila__acciones {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.25rem;
}

/* --- Ficha: el servicio --- */
.sv-sobre {
    padding: var(--sp-3xl) 0;
    background: var(--color-white);
}

.sv-sobre__grid {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: var(--sp-2xl);
    align-items: start;
    margin-bottom: var(--sp-2xl);
}

.sv-sobre__lead {
    margin: 1.25rem 0 0;
    font-size: 1.2rem;
    line-height: 1.6;
    font-weight: 500;
    color: var(--color-text);
}

.sv-sobre__texto {
    font-size: 1rem;
    line-height: 1.8;
    color: var(--color-text-soft);
}

.sv-sobre__texto > *:last-child { margin-bottom: 0; }

.sv-sobre__texto p,
.sv-sobre__texto ul,
.sv-sobre__texto ol { margin-bottom: 1rem; }

.sv-sobre__texto ul,
.sv-sobre__texto ol { padding-left: 1.25rem; }








/* --- Ficha: planes --- */
.sv-planes-sec {
    padding: var(--sp-3xl) 0;
    background: var(--color-cream);
}

.sv-planes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--sp-lg);
    align-items: stretch;
}

.sv-plan {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 2rem 1.75rem 1.75rem;
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-sm);
    transition: var(--t);
}

.sv-plan:hover {
    transform: translateY(-4px);
    box-shadow: var(--sh-lg);
}

.sv-plan--destacado {
    color: var(--color-white);
    background: var(--color-black);
    border-color: var(--color-black);
    box-shadow: var(--sh-xl);
}

.sv-plan__sello {
    position: absolute;
    top: -12px;
    left: 1.75rem;
    padding: 0.3rem 0.8rem;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-white);
    background: var(--color-primary);
    border-radius: var(--r-full);
}

.sv-plan__titulo {
    margin: 0 0 1rem;
    font-size: 1.15rem;
    font-weight: 700;
    color: inherit;
}

.sv-plan__precio {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.25rem 0.6rem;
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--color-border);
}

.sv-plan--destacado .sv-plan__precio { border-bottom-color: rgba(255, 255, 255, 0.14); }

.sv-plan__monto {
    font-family: var(--font-display);
    font-size: 2.8rem;
    line-height: 1;
    color: var(--color-primary);
}

.sv-plan__monto--texto { font-size: 2rem; }

.sv-plan__antes {
    font-size: 0.9rem;
    color: var(--color-text-light);
    text-decoration: line-through;
}

.sv-plan__nota {
    flex-basis: 100%;
    font-size: 0.78rem;
    color: var(--color-text-light);
}

.sv-plan--destacado .sv-plan__antes,
.sv-plan--destacado .sv-plan__nota { color: rgba(255, 255, 255, 0.55); }

.sv-plan__bajada {
    margin: 0 0 0.6rem;
    font-size: 0.95rem;
    font-weight: 600;
    color: inherit;
}

.sv-plan__texto {
    flex: 1;
    margin-bottom: 1.5rem;
    font-size: 0.9rem;
    line-height: 1.65;
    color: var(--color-text-soft);
}

.sv-plan--destacado .sv-plan__texto { color: rgba(255, 255, 255, 0.72); }

.sv-plan__texto > *:last-child { margin-bottom: 0; }

.sv-plan__texto ul,
.sv-plan__texto ol { padding-left: 1.15rem; }

.sv-plan__boton { margin-top: auto; }

/* --- Ficha: pasos en fila --- */
.sv-pasos-sec {
    padding: var(--sp-3xl) 0;
    background: var(--color-black);
}

.sv-pasos {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: var(--sp-lg);
    margin: 0;
    padding: 0;
    counter-reset: none;
}

.sv-paso {
    position: relative;
    padding: 1.75rem 1.5rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-top: 3px solid var(--color-primary);
    border-radius: var(--r-md);
}

.sv-paso__num {
    display: block;
    margin-bottom: 0.75rem;
    font-family: var(--font-display);
    font-size: 3rem;
    line-height: 1;
    color: var(--color-secondary);
}

.sv-paso__titulo {
    margin: 0 0 0.45rem;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--color-white);
}

.sv-paso__texto {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.65);
}

/* --- Ficha: contacto a todo el ancho --- */
.sv-contacto {
    padding: var(--sp-3xl) 0;
    background: var(--color-paper);
    scroll-margin-top: 80px;
}

.sv-contacto__grid {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    overflow: hidden;
    border-radius: var(--r-lg);
    box-shadow: var(--sh-lg);
}

.sv-contacto__grid--solo {
    grid-template-columns: minmax(0, 1fr);
    max-width: 720px;
    margin: 0 auto;
    text-align: center;
}

.sv-contacto__panel {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: var(--sp-2xl);
    color: var(--color-white);
    background:
        radial-gradient(420px 300px at 100% 0%, rgba(230, 48, 39, 0.3), transparent 65%),
        var(--color-black);
}

.sv-contacto__grid--solo .sv-contacto__panel { align-items: center; }

.sv-contacto__precio {
    margin: 1rem 0 0;
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.7);
}

.sv-contacto__precio strong {
    font-family: var(--font-display);
    font-size: 2.4rem;
    font-weight: 400;
    color: var(--color-secondary);
}

.sv-contacto__texto {
    margin: 1rem 0 1.75rem;
    font-size: 1rem;
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.72);
}

.sv-contacto__share {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: auto;
    padding-top: 1.75rem;
    font-size: 0.78rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.55);
}

.sv-contacto__share span { margin-right: 0.35rem; }

.sv-contacto__share a {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--color-white);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: var(--r-full);
    transition: var(--t);
}

.sv-contacto__share a:hover {
    background: var(--color-primary);
    border-color: var(--color-primary);
}

.sv-contacto__form {
    padding: var(--sp-2xl);
    background: var(--color-white);
    scroll-margin-top: 80px;
}

.sv-contacto__form-titulo {
    margin: 0 0 0.25rem;
    font-family: var(--font-display);
    font-size: 2rem;
    font-weight: 400;
    letter-spacing: 0.02em;
    color: var(--color-text);
}

.sv-contacto__form-nota {
    margin: 0 0 1.25rem;
    font-size: 0.82rem;
    color: var(--color-text-light);
}

.sv-contacto__form .form-field { margin-bottom: 0.9rem; }

.sv-contacto__form .req { color: var(--color-primary); }

.sv-contacto__form #consulta-error {
    margin-top: 0.75rem;
    font-size: 0.85rem;
    color: var(--color-primary);
}

.sv-contacto__form #consulta-error:empty { display: none; }

/* --- Ficha: galeria en mosaico --- */
.sv-galeria-sec {
    padding: var(--sp-3xl) 0;
    background: var(--color-white);
}

.sv-galeria {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-rows: 190px;
    gap: 0.75rem;
}

.sv-galeria__item {
    margin: 0;
    overflow: hidden;
    border-radius: var(--r-md);
    background: var(--color-black);
}

.sv-galeria__item:nth-child(5n+1) {
    grid-column: span 2;
    grid-row: span 2;
}

.sv-galeria__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.sv-galeria__item:hover img { transform: scale(1.05); }

/* --- Cierre: franja roja --- */
.sv-cta {
    position: relative;
    overflow: hidden;
    padding: var(--sp-2xl) 0;
    background: var(--color-primary);
}

.sv-cta__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.18;
    mix-blend-mode: multiply;
}

.sv-cta__inner {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-lg);
}

.sv-cta__titulo {
    margin: 0 0 0.35rem;
    font-family: var(--font-display);
    font-size: clamp(2rem, 3.8vw, 3rem);
    font-weight: 400;
    line-height: 1;
    color: var(--color-white);
}

.sv-cta__texto {
    margin: 0;
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.85);
}

.sv-cta__acciones {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

/* --- Responsive --- */
@media (max-width: 1024px) {
    .sv-sobre__grid,
    .sv-contacto__grid { grid-template-columns: minmax(0, 1fr); }



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

@media (max-width: 768px) {
    .sv-lista__head,
    .sv-fila { grid-template-columns: minmax(0, 1fr); }

    .sv-fila { gap: var(--sp-lg); }

    .sv-fila:nth-child(even) .sv-fila__media { order: 0; }

    .sv-fila__num { font-size: 2.6rem; }

    .sv-contacto__panel,
    .sv-contacto__form { padding: var(--sp-xl) 1.5rem; }

    .sv-cta__inner { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 640px) {



    .sv-galeria {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-auto-rows: 140px;
    }

    .sv-galeria__item:nth-child(5n+1) {
        grid-column: span 2;
        grid-row: span 1;
    }

    .sv-cta__acciones,
    .sv-cta__acciones .btn { width: 100%; }
}

/* ---------- FILAS DE SERVICIOS CON FONDO ---------- */
/* Cada servicio es un bloque con fondo propio para separar las ideas:
   crema en las filas impares y negro en las pares. En las negras se aclaran
   textos, etiquetas y botones para que se sigan leyendo. */
.sv-filas { gap: var(--sp-lg); }

.sv-fila {
    padding: var(--sp-xl);
    background: var(--color-cream);
    border-radius: var(--r-lg);
}

.sv-fila .sv-chips li { background: var(--color-white); }

.sv-fila:nth-child(even) { background: var(--color-black); }

.sv-fila:nth-child(even) .sv-fila__num { -webkit-text-stroke-color: var(--color-secondary); }

.sv-fila:nth-child(even) .sv-fila__titulo a { color: var(--color-white); }

.sv-fila:nth-child(even) .sv-fila__titulo a:hover { color: var(--color-primary); }

.sv-fila:nth-child(even) .sv-fila__texto { color: rgba(255, 255, 255, 0.72); }

.sv-fila:nth-child(even) .sv-chips li {
    color: var(--color-white);
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.16);
}

.sv-fila:nth-child(even) .sv-link { color: var(--color-white); }

.sv-fila:nth-child(even) .sv-link:hover { color: var(--color-secondary); }

.sv-fila:nth-child(even) .btn--dark {
    background: var(--color-white);
    color: var(--color-black);
}

.sv-fila:nth-child(even) .btn--dark:hover {
    background: var(--color-primary);
    color: var(--color-white);
}

.sv-fila:nth-child(even) .sv-fila__media { box-shadow: none; }

@media (max-width: 768px) {
    .sv-fila { padding: var(--sp-lg) 1.25rem; }
}

/* ---------- SERVICIO: DATOS COMPLETOS ---------- */
/* Bajada y descripcion de los encabezados, etiqueta y texto de cada
   especificacion, e imagen o video de cada paso. */


.sv-sec-head__bajada {
    margin: 0.5rem 0 0;
    font-size: 1.02rem;
    font-weight: 500;
    line-height: 1.6;
    color: var(--color-text);
}

.sv-sec-head__desc {
    margin-top: 0.75rem;
    font-size: 0.95rem;
    line-height: 1.7;
    color: var(--color-text-soft);
}

.sv-sec-head__desc > *:last-child,
.sv-paso__texto > *:last-child { margin-bottom: 0; }

.sv-sec-head__desc ul,
.sv-paso__texto ul { padding-left: 1.15rem; }





/* Encabezado de los pasos, sobre fondo negro */
.sv-pasos-sec .sv-sec-head__bajada { color: rgba(255, 255, 255, 0.85); }

.sv-pasos-sec .sv-sec-head__desc { color: rgba(255, 255, 255, 0.65); }

.sv-pasos-sec .sv-sec-head__desc a { color: var(--color-secondary); }

/* Imagen o video de cada paso, arriba de la tarjeta */
.sv-paso { overflow: hidden; }

.sv-paso__media {
    margin: -1.75rem -1.5rem 1.25rem;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: #111;
}

.sv-paso__media img,
.sv-paso__media video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sv-paso__media video { object-fit: contain; }

.sv-paso__bajada {
    margin: 0 0 0.45rem;
    font-size: 0.92rem;
    font-weight: 600;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.85);
}

.sv-paso__texto a { color: var(--color-secondary); }

/* ---------- ICONOS DESDE LA ETIQUETA ---------- */
/* La etiqueta de especificaciones trae clases de Font Awesome 6
   (fa-solid fa-...): se pintan como icono en el circulo o junto al titulo. */



.nos-pilar__indice--icono {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    color: var(--color-secondary);
}

/* ---------- SERVICIO: LO QUE INCLUYE ---------- */
/* Especificaciones en seccion propia: encabezado a dos columnas y tarjetas con
   icono (el de la etiqueta del panel o un check), numero de fondo, titulo,
   bajada y descripcion. */
.sv-incluye {
    padding: var(--sp-3xl) 0;
    background: var(--color-paper);
}

.sv-incluye__head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--sp-xl);
    align-items: end;
    margin-bottom: var(--sp-2xl);
    padding-bottom: var(--sp-xl);
    border-bottom: 1px solid var(--color-border);
}

.sv-incluye__head-main {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    min-width: 0;
}

.sv-incluye__head-aside {
    min-width: 0;
    max-width: 560px;
}

.sv-incluye__head-icono {
    flex-shrink: 0;
    width: 72px;
    height: 72px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    color: var(--color-secondary);
    background: var(--color-black);
    border-radius: 22px;
    box-shadow: var(--sh-md);
}

.sv-incluye__lead {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 600;
    line-height: 1.6;
    color: var(--color-text);
}

.sv-incluye__desc {
    margin-top: 0.6rem;
    font-size: 0.95rem;
    line-height: 1.7;
    color: var(--color-text-soft);
}

.sv-incluye__desc > *:last-child,
.sv-incluye__texto > *:last-child { margin-bottom: 0; }

.sv-incluye__desc ul,
.sv-incluye__texto ul { padding-left: 1.15rem; }

.sv-incluye__grid {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--sp-lg);
    margin: 0;
    padding: 0;
}

.sv-incluye__item {
    position: relative;
    overflow: hidden;
    padding: 2rem 1.75rem 1.75rem;
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-sm);
    transition: var(--t);
}

/* Linea roja que crece arriba al pasar el mouse */
.sv-incluye__item::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--color-primary), var(--color-secondary));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.35s ease;
}

.sv-incluye__item:hover {
    transform: translateY(-4px);
    box-shadow: var(--sh-lg);
    border-color: transparent;
}

.sv-incluye__item:hover::before { transform: scaleX(1); }

.sv-incluye__num {
    position: absolute;
    top: 1rem;
    right: 1.25rem;
    font-family: var(--font-display);
    font-size: 2.6rem;
    line-height: 1;
    color: transparent;
    -webkit-text-stroke: 1px var(--color-border);
    pointer-events: none;
}

.sv-incluye__icono {
    width: 56px;
    height: 56px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.25rem;
    font-size: 1.35rem;
    color: var(--color-primary);
    background: rgba(230, 48, 39, 0.09);
    border-radius: 16px;
    transition: var(--t);
}

.sv-incluye__item:hover .sv-incluye__icono {
    color: var(--color-white);
    background: var(--color-primary);
}

.sv-incluye__etiqueta {
    display: block;
    margin-bottom: 0.35rem;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-primary);
}

.sv-incluye__titulo {
    margin: 0 0 0.5rem;
    font-size: 1.12rem;
    font-weight: 700;
    line-height: 1.35;
    color: var(--color-text);
}

.sv-incluye__bajada {
    margin: 0 0 0.5rem;
    font-size: 0.93rem;
    font-weight: 600;
    line-height: 1.55;
    color: var(--color-text);
}

.sv-incluye__texto {
    font-size: 0.9rem;
    line-height: 1.65;
    color: var(--color-text-soft);
}

@media (max-width: 900px) {
    .sv-incluye__head { grid-template-columns: minmax(0, 1fr); align-items: start; }
}

@media (max-width: 640px) {
    .sv-incluye__head-icono { width: 58px; height: 58px; font-size: 1.4rem; border-radius: 18px; }
    .sv-incluye__item { padding: 1.75rem 1.4rem 1.5rem; }
}

/* ---------- INICIO: SERVICIOS ---------- */
/* Resumen de la categoria de servicios (elemento servicioCategoria objeto1):
   encabezado a dos columnas y tarjetas con foto, precio "desde", numero,
   titulo y enlace. Usa las piezas sv-* de las paginas de servicios. */
.sv-home {
    padding: var(--sp-3xl) 0;
    background: var(--color-white);
}

.sv-home__head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--sp-xl);
    align-items: end;
    margin-bottom: var(--sp-2xl);
}

.sv-home__intro { min-width: 0; }

.sv-home__bajada {
    margin: 0 0 1rem;
    font-size: 1rem;
    line-height: 1.7;
    color: var(--color-text-soft);
}

.sv-home__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--sp-lg);
}

.sv-home__card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--color-white);
    border-radius: var(--r-lg);
    border: 1px solid var(--color-border);
    box-shadow: var(--sh-sm);
    transition: var(--t);
}

.sv-home__card:hover {
    transform: translateY(-5px);
    box-shadow: var(--sh-lg);
}

.sv-home__media {
    position: relative;
    display: block;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--color-black);
}

.sv-home__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.sv-home__card:hover .sv-home__media img { transform: scale(1.05); }

.sv-home__media--vacia {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.6rem;
    color: var(--color-primary);
}

.sv-home__media .sv-precio-pill {
    position: absolute;
    left: 1rem;
    bottom: 1rem;
}

.sv-home__cuerpo {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 1.5rem 1.5rem 1.6rem;
}

.sv-home__num {
    position: absolute;
    top: 1.1rem;
    right: 1.25rem;
    font-family: var(--font-display);
    font-size: 2.2rem;
    line-height: 1;
    color: transparent;
    -webkit-text-stroke: 1px var(--color-primary);
    opacity: 0.6;
}

.sv-home__titulo {
    margin: 0 2.5rem 0.6rem 0;
    font-family: var(--font-display);
    font-size: 1.9rem;
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0.01em;
}

.sv-home__titulo a {
    color: var(--color-text);
    transition: var(--t);
}

.sv-home__titulo a:hover { color: var(--color-primary); }

.sv-home__texto {
    flex: 1;
    margin: 0 0 1.1rem;
    font-size: 0.92rem;
    line-height: 1.6;
    color: var(--color-text-soft);
}

@media (max-width: 1024px) {
    .sv-home__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 768px) {
    .sv-home__head { grid-template-columns: minmax(0, 1fr); align-items: start; }
}

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

.sv-home__mas {
    margin-top: var(--sp-xl);
    text-align: center;
}

/* ---------- HERO EN CARRUSEL (banner del panel) ---------- */
/* Mismo diseño del hero: las diapositivas se apilan en la misma celda de una
   grilla y se cambian con un fundido. Cada una lleva su propio fondo. */
.hero--carrusel { align-items: stretch; }

.hero__slides {
    position: relative;
    display: grid;
    width: 100%;
    min-height: 100vh;
}

.hero__slide {
    position: relative;
    grid-area: 1 / 1;
    display: flex;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.9s ease, visibility 0.9s ease;
}

.hero__slide.is-active {
    opacity: 1;
    visibility: visible;
    z-index: 1;
}

.hero__slide .container { width: 100%; }

/* Acercamiento lento del fondo mientras la diapositiva esta activa */
.hero__slide .hero__bg img {
    transform: scale(1.08);
    transition: transform 7s ease-out;
}

.hero__slide.is-active .hero__bg img { transform: scale(1); }

/* El contenido entra un poco despues del fondo */
.hero__slide .hero__content {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.7s ease 0.25s, transform 0.7s ease 0.25s;
}

.hero__slide.is-active .hero__content {
    opacity: 1;
    transform: none;
}

.hero__grid--solo { grid-template-columns: minmax(0, 760px); }

.hero__content { min-width: 0; }


/* Controles: flechas y puntos abajo a la derecha */
.hero__controles {
    position: absolute;
    right: 2rem;
    bottom: 2rem;
    z-index: 4;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.hero__nav {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    color: var(--color-white);
    background: rgba(10, 10, 10, 0.45);
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: var(--r-full);
    cursor: pointer;
    backdrop-filter: blur(6px);
    transition: var(--t);
}

.hero__nav:hover,
.hero__nav:focus-visible {
    background: var(--color-primary);
    border-color: var(--color-primary);
}

.hero__dots {
    display: flex;
    align-items: center;
    gap: 0.45rem;
}

.hero__dot {
    width: 10px;
    height: 10px;
    padding: 0;
    background: rgba(255, 255, 255, 0.35);
    border: 0;
    border-radius: var(--r-full);
    cursor: pointer;
    transition: width 0.3s ease, background 0.3s ease;
}

.hero__dot.is-active {
    width: 28px;
    background: var(--color-primary);
}

@media (max-width: 1024px) {
    .hero__slides { min-height: 90vh; }
}

@media (max-width: 640px) {
    .hero__slides { min-height: 85vh; }

    .hero__controles {
        right: 50%;
        bottom: 1.25rem;
        transform: translateX(50%);
    }

    .hero__nav { width: 38px; height: 38px; }
}

@media (prefers-reduced-motion: reduce) {
    .hero__slide,
    .hero__slide .hero__bg img,
    .hero__slide .hero__content { transition: none; }
}

/* ---------- HERO EN CARRUSEL: LEGIBILIDAD ---------- */
/* Las fotos del banner son muy luminosas y el degradado diagonal del diseño se
   aclaraba justo detras del texto. En el carrusel el velo es horizontal: firme
   en la columna del texto y mas suave a la derecha, con una franja oscura abajo
   para botones y controles. El velo va sobre la foto aunque esta este animada. */
.hero__slide .hero__bg img {
    position: relative;
    z-index: 0;
}

.hero__slide .hero__overlay {
    z-index: 1;
    background:
        linear-gradient(90deg, rgba(10, 10, 10, 0.94) 0%, rgba(10, 10, 10, 0.86) 35%, rgba(10, 10, 10, 0.55) 62%, rgba(10, 10, 10, 0.3) 100%),
        linear-gradient(0deg, rgba(10, 10, 10, 0.7) 0%, rgba(10, 10, 10, 0) 38%);
}

.hero__slide .hero__tag {
    background: rgba(10, 10, 10, 0.55);
    border-color: rgba(245, 200, 66, 0.45);
    backdrop-filter: blur(6px);
}

.hero__slide .hero__title,
.hero__slide .hero__subtitle {
    text-shadow: 0 2px 20px rgba(0, 0, 0, 0.65);
}

.hero__slide .hero__subtitle { color: rgba(255, 255, 255, 0.86); }

@media (max-width: 1024px) {
    .hero__slide .hero__overlay {
        background: linear-gradient(180deg, rgba(10, 10, 10, 0.72) 0%, rgba(10, 10, 10, 0.82) 50%, rgba(10, 10, 10, 0.92) 100%);
    }
}

/* ---------- HERO EN CARRUSEL: FLECHAS AL CENTRO ---------- */
/* Flechas a los lados, centradas en altura; puntos abajo al centro. El
   contenedor deja de posicionarse para que flechas y puntos se ubiquen
   respecto del hero. Con controles, el indicador "Scroll" se oculta porque
   ocupa el mismo lugar que los puntos. */
.hero__controles {
    position: static;
    right: auto;
    bottom: auto;
    transform: none;
}

.hero__controles .hero__nav {
    position: absolute;
    top: 50%;
    z-index: 4;
    transform: translateY(-50%);
}

.hero__controles .hero__nav:first-child { left: 1.5rem; }

.hero__controles .hero__nav:last-child { right: 1.5rem; }

.hero__controles .hero__dots {
    position: absolute;
    left: 50%;
    bottom: 2rem;
    z-index: 4;
    transform: translateX(-50%);
}

.hero__controles ~ .hero__scroll { display: none; }

@media (max-width: 640px) {
    .hero__controles {
        right: auto;
        bottom: auto;
        transform: none;
    }

    .hero__controles .hero__nav {
        top: auto;
        bottom: 1rem;
        transform: none;
    }

    .hero__controles .hero__nav:first-child { left: 1rem; }

    .hero__controles .hero__nav:last-child { right: 1rem; }

    .hero__controles .hero__dots { bottom: 1.9rem; }
}

/* ---------- BOTON FLOTANTE SUBIR ---------- */
/* Mismo tamaño y margen que .float-whatsapp, ubicado justo encima de el.
   Se muestra con .is-visible cuando la pagina baja mas de 400px. */
.float-subir {
    position: fixed;
    right: 1.5rem;
    bottom: calc(1.5rem + 54px + 0.75rem);
    z-index: 900;
    width: 54px;
    height: 54px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    color: var(--color-white);
    background: var(--color-black);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 50%;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px);
    transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease, background 0.25s ease;
}

.float-subir.is-visible {
    opacity: 1;
    visibility: visible;
    transform: none;
}

.float-subir:hover,
.float-subir:focus-visible {
    color: var(--color-white);
    background: var(--color-primary);
    border-color: var(--color-primary);
    transform: scale(1.08);
}

@media (max-width: 640px) {
    .float-subir {
        right: 1rem;
        bottom: calc(1rem + 48px + 0.6rem);
        width: 48px;
        height: 48px;
        font-size: 1.1rem;
    }
}

/* ---------- MENU: PAGINA ACTUAL ---------- */
/* main.js marca con .is-current la opcion de la pagina abierta. Mismo aspecto
   que el hover: blanco con la linea roja en escritorio, rojo en celular y en
   los submenus. */
.nav__link.is-current { color: var(--color-white); }

.nav__link.is-current::after { width: 60%; }

.nav__submenu a.is-current {
    color: var(--color-primary);
    font-weight: 700;
}

.mobile-nav__link.is-current,
.mobile-nav__sub a.is-current {
    color: var(--color-primary);
}

.mobile-nav__link.is-current {
    padding-left: 0.75rem;
    border-left: 3px solid var(--color-primary);
}

/* ---------- ACCESOS RAPIDOS ADAPTABLES ---------- */
/* Contacto: las tarjetas llenan el ancho sin importar cuantas haya (eran 3
   fijas y ahora son 2). */
.quick-access__grid { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }

/* ---------- HISTORIA: SEPARACIONES DE COLOR ---------- */
/* "Todo comenzo con una idea": la linea de tiempo y los puntos pasan del gris
   a los colores de la marca. En tablet y celular la linea se oculta (diseño):
   cada hito lleva una linea roja arriba para separarlos. */
.history__timeline::before {
    height: 3px;
    background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-secondary) 100%);
    border-radius: 3px;
}

.history__dot {
    border-color: var(--color-primary);
}

.history__step:hover .history__dot {
    background: var(--color-secondary);
    border-color: var(--color-secondary);
}

.history__dot--active,
.history__step:hover .history__dot--active {
    background: var(--color-primary);
    border-color: var(--color-primary);
}

.history__label { color: var(--color-primary); }

@media (max-width: 1024px) {
    .history__step {
        padding-top: 1.1rem;
        border-top: 3px solid var(--color-primary);
    }

    .history__step:nth-child(even) { border-top-color: var(--color-secondary); }
}

/* ---------- GALERIA DEL INICIO: VER MAS ---------- */
/* Galeria del inicio: bajada y boton "Ver mas" hacia la pagina de la galeria. */
.gallery__bajada {
    max-width: 620px;
    margin: 0.75rem auto 1rem;
    font-size: 1rem;
    line-height: 1.6;
    color: var(--color-text-soft);
}



.gallery__mas {
    margin-top: var(--sp-xl);
    text-align: center;
}

/* ---------- HISTORIA: FONDO BLANCO ---------- */
/* "Todo comenzo con una idea" en blanco, entre los bloques negros. */
.history { background: var(--color-white); }

/* ---------- PAGINA DE GALERIA ---------- */
/* Fotos en mosaico tipo masonry (columnas CSS, cada foto con su proporcion, sin
   recortes) y visor a pantalla completa. */
.gal-page {
    padding: var(--sp-3xl) 0;
    background: var(--color-cream);
}

.gal-page__head {
    max-width: 760px;
    margin: 0 auto var(--sp-2xl);
    text-align: center;
}

.gal-page__total {
    margin: 0.5rem 0 0;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-primary);
}

.gal-page__desc {
    margin-top: 1rem;
    font-size: 1rem;
    line-height: 1.75;
    color: var(--color-text-soft);
}

.gal-page__desc > *:last-child { margin-bottom: 0; }

.gal-page__chips {
    justify-content: center;
    margin: 1.25rem 0 0;
}

.gal-page__chips li { background: var(--color-white); }

.gal-grid {
    columns: 4 240px;
    column-gap: 0.85rem;
}

.gal-item {
    position: relative;
    display: block;
    margin-bottom: 0.85rem;
    overflow: hidden;
    border-radius: var(--r-md);
    background: var(--color-black);
    break-inside: avoid;
    box-shadow: var(--sh-sm);
}

.gal-item img {
    display: block;
    width: 100%;
    height: auto;
    transition: transform 0.6s ease, opacity 0.3s ease;
}

.gal-item:hover img,
.gal-item:focus-visible img {
    transform: scale(1.04);
    opacity: 0.85;
}

.gal-item__caption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 2rem 1rem 0.85rem;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--color-white);
    background: linear-gradient(0deg, rgba(10, 10, 10, 0.85), rgba(10, 10, 10, 0));
    opacity: 0;
    transform: translateY(8px);
    transition: var(--t);
}

.gal-item__zoom {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    color: var(--color-white);
    background: var(--color-primary);
    border-radius: var(--r-full);
    opacity: 0;
    transform: scale(0.8);
    transition: var(--t);
}

.gal-item:hover .gal-item__caption,
.gal-item:focus-visible .gal-item__caption,
.gal-item:hover .gal-item__zoom,
.gal-item:focus-visible .gal-item__zoom {
    opacity: 1;
    transform: none;
}

/* Visor */
.gal-visor {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4rem 5rem;
    background: rgba(5, 5, 5, 0.94);
}

.gal-visor[hidden] { display: none; }

.gal-visor__figura {
    margin: 0;
    max-width: 100%;
    max-height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.gal-visor__figura img {
    display: block;
    max-width: 100%;
    max-height: calc(100vh - 11rem);
    object-fit: contain;
    border-radius: var(--r-sm);
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
}

.gal-visor__pie {
    max-width: 760px;
    margin-top: 1rem;
    text-align: center;
    color: rgba(255, 255, 255, 0.75);
}

.gal-visor__contador {
    display: block;
    margin-bottom: 0.3rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: var(--color-secondary);
}

.gal-visor__titulo {
    display: block;
    font-family: var(--font-display);
    font-size: 1.6rem;
    font-weight: 400;
    letter-spacing: 0.02em;
    color: var(--color-white);
}

.gal-visor__titulo:empty,
.gal-visor__texto:empty { display: none; }

.gal-visor__texto {
    display: block;
    margin-top: 0.3rem;
    font-size: 0.92rem;
    line-height: 1.55;
}

.gal-visor__cerrar,
.gal-visor__nav {
    position: absolute;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    color: var(--color-white);
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: var(--r-full);
    cursor: pointer;
    transition: var(--t);
}

.gal-visor__cerrar {
    top: 1.25rem;
    right: 1.25rem;
    width: 46px;
    height: 46px;
    font-size: 1.2rem;
}

.gal-visor__nav {
    top: 50%;
    width: 52px;
    height: 52px;
    font-size: 1.1rem;
    transform: translateY(-50%);
}

.gal-visor__nav--prev { left: 1.25rem; }

.gal-visor__nav--next { right: 1.25rem; }

.gal-visor__nav[hidden] { display: none; }

.gal-visor__cerrar:hover,
.gal-visor__nav:hover,
.gal-visor__cerrar:focus-visible,
.gal-visor__nav:focus-visible {
    background: var(--color-primary);
    border-color: var(--color-primary);
}

@media (max-width: 640px) {
    .gal-grid { columns: 2 140px; column-gap: 0.5rem; }

    .gal-item { margin-bottom: 0.5rem; }

    .gal-item__zoom { display: none; }

    .gal-visor { padding: 4rem 0.75rem 5.5rem; }

    .gal-visor__nav {
        top: auto;
        bottom: 1.25rem;
        transform: none;
    }
}

/* Tarjetas de gastronomia con datos del banner: etiqueta sobre el titulo y
   enlace opcional al final del cuerpo. */
.gastro-card__etiqueta {
    display: block;
    margin-bottom: 0.35rem;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-primary);
}

.gastro-card__link { margin-top: 0.85rem; }