:root {
            --sf-bg: #101820;
            --sf-bg-soft: #17232d;
            --sf-card: #1c2a35;
            --sf-yellow: #ffd21f;
            --sf-red: #e82d45;
            --sf-teal: #14c8c2;
            --sf-white: #fff;
            --sf-muted: #b8c5ce;
            --sf-radius: 10px;
            --sf-shadow: 0 18px 48px rgba(0,0,0,.24);
            --sf-width: 1180px;
        }
        * { box-sizing: border-box; }
        html { scroll-behavior: smooth; scroll-padding-top: 90px; }
        body {
            margin: 0; font-family: "Roboto", Arial, sans-serif; color: var(--sf-white);
            background: var(--sf-bg); line-height: 1.6;
        }
        img, video { display: block; max-width: 100%; }
        a { color: inherit; }
        button, input, textarea { font: inherit; }
        .sf-container { width: min(var(--sf-width), calc(100% - 40px)); margin-inline: auto; }
        .sf-section { padding: 76px 0; }
        .sf-section--alt { background: var(--sf-bg-soft); }
        .sf-eyebrow { color: var(--sf-teal); text-transform: uppercase; letter-spacing: .16em; font-weight: 900; font-size: .78rem; }
		.sf-eyebrow2 { color: #000; text-transform: uppercase; letter-spacing: .16em; font-weight: 900; font-size: .78rem; }
        .sf-section-heading { max-width: 720px; margin: 0 auto 34px; text-align: center; }
        .sf-section-heading h2 { margin: 8px 0 10px; font-size: clamp(2rem, 4vw, 3.2rem); line-height: 1.08; letter-spacing: -.035em; }
        .sf-section-heading p { margin: 0; color: var(--sf-muted); }
        .sf-btn {
            display: inline-flex; align-items: center; justify-content: center; gap: 9px;
            min-height: 48px; padding: 12px 20px; border: 2px solid transparent; border-radius: 999px;
            text-decoration: none; font-weight: 900; transition: transform .2s, background .2s, border-color .2s;
        }
        .sf-btn:hover { transform: translateY(-2px); }
        .sf-btn--primary { background: var(--sf-yellow); color: #17202a; }
        .sf-btn--outline { border-color: rgba(255,255,255,.5); color: var(--sf-white); background: transparent; }
        .sf-btn--red { background: var(--sf-red); color: white; }
        .sf-header { position: sticky; top: 0; z-index: 100; background: rgba(16,24,32,.94); backdrop-filter: blur(14px); border-bottom: 1px solid rgba(255,255,255,.09); }
        .sf-nav { min-height: 78px; display: flex; align-items: center; justify-content: space-between; gap: 22px; }
        .sf-brand { display: flex; align-items: center; flex: 0 0 auto; }
        .sf-brand img { width: 150px; max-height: 62px; object-fit: contain; }
        .sf-nav-links { display: flex; align-items: center; justify-content: flex-end; gap: clamp(12px, 1.8vw, 25px); margin: 0; padding: 0; list-style: none; }
        .sf-nav-links a { text-decoration: none; color: #eef3f6; font-size: .91rem; font-weight: 700; }
        .sf-nav-links a:hover { color: var(--sf-yellow); }
        .sf-nav-links .sf-nav-cta { padding: 10px 15px; border-radius: 999px; background: var(--sf-red); color: white; }
        .sf-menu-toggle { display: none; border: 1px solid rgba(255,255,255,.25); color: white; background: transparent; border-radius: 10px; padding: 8px 12px; cursor: pointer; }
        .sf-hero {
            position: relative; overflow: hidden; isolation: isolate;
            background: #101820 url("../imagenes/web/hero-springfield.jpg") center center / cover no-repeat;
        }
        .sf-hero::before {
            content: ""; position: absolute; inset: 0; z-index: -1;
            background: linear-gradient(90deg, rgba(8,12,15,.20) 0%, rgba(8,12,15,.12) 38%, rgba(8,12,15,.02) 72%, transparent 100%),
                        linear-gradient(0deg, rgba(8,12,15,.10), transparent 58%);
        }
        .sf-hero::after { content: ""; position: absolute; z-index: -1; width: 420px; height: 420px; border: 1px solid rgba(255,210,31,.18); border-radius: 50%; right: -140px; top: -150px; box-shadow: 0 0 0 45px rgba(255,210,31,.025), 0 0 0 90px rgba(255,210,31,.02); }
        .sf-hero-grid { min-height: min(740px, calc(100svh - 78px)); display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; gap: 40px; padding-block: 70px; }
        .sf-hero-copy { position: relative; z-index: 1; }
        .sf-hero h1 { max-width: 680px; margin: 14px 0 20px; font-size: clamp(2.8rem, 6.3vw, 5.5rem); line-height: .98; letter-spacing: -.055em; }
        .sf-hero h1 span { color: var(--sf-yellow); }
        .sf-hero-copy > p { max-width: 570px; color: #d1dce3; font-size: clamp(1rem, 1.6vw, 1.2rem); }
        .sf-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
        .sf-location { margin-top: 28px; display: flex; align-items: center; gap: 10px; color: var(--sf-muted); font-size: .95rem; }
        .sf-location strong { color: white; }
        .sf-hero-logo { width: min(100%, 310px); max-height: 300px; object-fit: contain; filter: drop-shadow(0 24px 30px rgba(0,0,0,.5)); }
        .sf-hero-sticker { position: absolute; right: 0; bottom: 24px; max-width: 190px; padding: 14px 18px; border-radius: 16px; background: var(--sf-yellow); color: #18222b; font-weight: 900; transform: rotate(4deg); box-shadow: var(--sf-shadow); }
        .sf-feature-strip { background: var(--sf-yellow); color: #17202a; }
        .sf-feature-strip-inner { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; padding-block: 18px; text-align: center; font-weight: 900; }
        .sf-feature-strip span { display: block; font-size: .85rem; font-weight: 500; opacity: .8; }

        .sf-photo-story { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: clamp(28px, 5vw, 64px); }
        .sf-photo-story + .sf-photo-story { margin-top: 76px; }
        .sf-photo-story--reverse .sf-photo { order: 2; }
        .sf-photo { position: relative; overflow: hidden; min-height: 350px; border-radius: 22px; background: #0a0d10; box-shadow: var(--sf-shadow); }
        .sf-photo img { width: 100%; height: 100%; min-height: 350px; position: absolute; inset: 0; object-fit: cover; transition: transform .5s; }
        .sf-photo:hover img { transform: scale(1.035); }
        .sf-photo-copy .sf-eyebrow { display: inline-block; margin-bottom: 8px; }
        .sf-photo-copy h2 { margin: 0 0 14px; font-size: clamp(2rem, 4vw, 3.3rem); line-height: 1.04; letter-spacing: -.04em; }
        .sf-photo-copy p { color: var(--sf-muted); font-size: 1.05rem; }
        .sf-photo-copy .sf-btn { margin-top: 14px; }
        .sf-promo-photo { display: grid; grid-template-columns: .95fr 1.05fr; align-items: center; gap: 32px; margin-bottom: 34px; }
        .sf-promo-photo img { width: 100%; max-height: 340px; object-fit: cover; border-radius: 20px; }
        .sf-food-showcase { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 16px; margin-top: 34px; }
        .sf-food-showcase a { position: relative; min-height: 260px; overflow: hidden; border-radius: 16px; background: #080d11; }
        .sf-food-showcase img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
        .sf-food-showcase a:hover img { transform: scale(1.05); }
        .sf-food-showcase span { position: absolute; inset: auto 0 0; padding: 34px 16px 14px; font-weight: 900; background: linear-gradient(transparent, rgba(0,0,0,.85)); }
        .sf-promo-tag { display: inline-flex; align-items: center; padding: 7px 12px; margin-bottom: 12px; border-radius: 999px; background: var(--sf-yellow); color: #17202a; font-size: .78rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
        .sf-promo-feature h3 { max-width: 520px; margin: 0 0 8px; font-size: clamp(2.2rem, 4.2vw, 4.3rem); line-height: .98; letter-spacing: -.04em; text-transform: uppercase; }
        .sf-promo-feature p { max-width: 430px; margin: 0 0 20px; color: #f1f4f6; font-size: 1.02rem; }
        .sf-promo-packages { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; grid-template-rows: repeat(2, minmax(0, 1fr)) !important; gap: 16px; min-width: 0; }
        .sf-package-copy { padding: 14px 14px 13px; }
        .sf-package-copy h3 { margin: 0 0 5px; font-size: clamp(.95rem, 1.25vw, 1.25rem); line-height: 1.08; text-transform: uppercase; text-shadow: 0 2px 8px rgba(0,0,0,.4); }
        .sf-package-copy p { margin: 0 0 10px; color: #e0e7ec; font-size: .78rem; line-height: 1.3; }
        .sf-package-copy .sf-btn { min-height: 34px; padding: 7px 12px; font-size: .76rem; }
        .sf-promo-note { margin-top: 18px; color: var(--sf-muted); text-align: center; font-size: .88rem; }
        .sf-empty { padding: 28px; text-align: center; color: var(--sf-muted); background: var(--sf-card); border-radius: var(--sf-radius); }
        .sf-food-list { display: grid; gap: 44px; }
        .sf-food-group h3 { margin: 0 0 5px; font-size: clamp(1.35rem, 2.5vw, 1.8rem); }
        .sf-food-group > p { margin: 0 0 18px; color: var(--sf-muted); }
        .sf-food-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
        .sf-food-item { overflow: hidden; border-radius: 15px; background: #080d11; border: 1px solid rgba(255,255,255,.1); }
        .sf-food-item a { display: block; }
        .sf-food-item video { width: 100%; aspect-ratio: 4/5; object-fit: cover; background: #080d11; }
        .sf-food-caption { padding: 10px 12px; font-size: .88rem; color: #dbe4e9; }
        .sf-service-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
        .sf-service-card { padding: 25px; border-radius: var(--sf-radius); background: var(--sf-card); border: 1px solid rgba(255,255,255,.07); }
        .sf-service-icon { display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 15px; border-radius: 14px; background: rgba(255,210,31,.13); color: var(--sf-yellow); font-size: 1.5rem; }
        .sf-service-card h3 { margin: 0 0 8px; font-size: 1.15rem; }
        .sf-service-card p { margin: 0; color: var(--sf-muted); font-size: .96rem; }
        .sf-hours-wrap { display: grid; grid-template-columns: .8fr 1.2fr; align-items: center; gap: 40px; max-width: 900px; margin: auto; }
        .sf-hours-art { display: grid; place-items: center; padding: 20px; }
        .sf-hours-art img { width: min(100%, 280px); max-height: 280px; object-fit: contain; }
        .sf-hours-card { padding: clamp(22px, 4vw, 38px); border-radius: var(--sf-radius); background: var(--sf-card); box-shadow: var(--sf-shadow); }
        .sf-hours-card h3 { margin: 0 0 18px; font-size: 1.45rem; }
        .sf-hours-row { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,.1); }
        .sf-hours-row:last-child { border-bottom: 0; }
        .sf-hours-row span:last-child { color: var(--sf-yellow); font-weight: 700; text-align: right; }
        .sf-menu-layout { display: grid; grid-template-columns: .7fr 1.3fr; align-items: center; gap: 35px; }
        .sf-menu-copy h2 { margin: 8px 0 14px; font-size: clamp(2rem, 4vw, 3rem); line-height: 1.05; }
        .sf-menu-copy p { color: var(--sf-muted); }
        .sf-menu-gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
        .sf-menu-gallery img { width: 100%; max-height: 310px; object-fit: contain; border-radius: 12px; background: #0b1116; }
        .sf-menu-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
        .sf-contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: stretch; }
        .sf-contact-card { padding: clamp(22px, 3vw, 32px); background: var(--sf-card); border-radius: var(--sf-radius); border: 1px solid rgba(255,255,255,.08); }
        .sf-contact-card h3 { margin: 0 0 20px; font-size: 1.4rem; }
        .sf-form { display: grid; gap: 13px; }
        .sf-form label { font-size: .9rem; font-weight: 700; }
        .sf-form input, .sf-form textarea { width: 100%; margin-top: 5px; padding: 13px 14px; border: 1px solid #42515d; border-radius: 10px; background: #111b23; color: white; }
        .sf-form textarea { min-height: 125px; resize: vertical; }
        .sf-form input:focus, .sf-form textarea:focus { outline: 2px solid var(--sf-teal); outline-offset: 1px; }
        .sf-map { width: 100%; min-height: 280px; border: 0; border-radius: 12px; }
        .sf-contact-links { display: grid; gap: 12px; margin-top: 18px; }
        .sf-contact-link { display: flex; align-items: center; gap: 12px; text-decoration: none; overflow-wrap: anywhere; }
        .sf-contact-link strong { color: var(--sf-teal); }
        .sf-socials { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
        .sf-socials a { padding: 9px 13px; border: 1px solid rgba(255,255,255,.2); border-radius: 999px; text-decoration: none; font-weight: 700; }
        .sf-socials a:hover { border-color: var(--sf-yellow); color: var(--sf-yellow); }
        .sf-footer { padding: 26px 0; background: #080d11; color: var(--sf-muted); font-size: .9rem; }
        .sf-footer-inner { display: flex; justify-content: space-between; align-items: center; gap: 15px; flex-wrap: wrap; }
        .sf-footer a { color: white; }
        .sf-back-top { position: fixed; right: 18px; bottom: 18px; z-index: 90; width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%; background: var(--sf-red); color: white; text-decoration: none; font-size: 1.35rem; box-shadow: var(--sf-shadow); opacity: 0; pointer-events: none; transform: translateY(8px); transition: .2s; }
        .sf-back-top.is-visible { opacity: 1; pointer-events: auto; transform: translateY(0); }
        .sf-order-widget { position: fixed; left: 16px; bottom: 16px; z-index: 80; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
        .sf-order-widget .glf-button { cursor: pointer; display: inline-flex; padding: 11px 16px; border-radius: 999px; background: var(--sf-yellow); color: #17202a; font-weight: 900; box-shadow: var(--sf-shadow); }
        .sf-order-widget .glf-button.reservation { background: var(--sf-teal); }
        @media (max-width: 980px) {
            .sf-menu-toggle { display: inline-flex; align-items: center; gap: 8px; }
            .sf-nav { position: relative; min-height: 72px; }
            .sf-nav-links { display: none; position: absolute; top: calc(100% - 1px); left: -20px; right: -20px; padding: 16px 20px 22px; background: #101820; border-bottom: 1px solid rgba(255,255,255,.1); flex-direction: column; align-items: stretch; gap: 0; }
            .sf-nav-links.is-open { display: flex; }
            .sf-nav-links li a { display: block; padding: 12px 8px; }
            .sf-nav-links .sf-nav-cta { text-align: center; margin-top: 8px; }
            .sf-hero-grid { grid-template-columns: minmax(0, 1fr); gap: 18px; }
            .sf-food-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
            /* La composición de promociones permanece lado a lado en tablet y escritorio. */
            .sf-promo-layout { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr) !important; gap: 12px; }
            .sf-promo-feature { min-height: 410px; }
            .sf-promo-packages { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 12px; }
            .sf-package-card { min-height: 0; }
            .sf-package-copy { padding: 10px; }
            .sf-package-copy p { font-size: .74rem; }
            .sf-package-copy .sf-btn { padding: 7px 9px; font-size: .7rem; }
            .sf-service-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
        }
        @media (max-width: 480px) {
            .sf-promo-layout { grid-template-columns: minmax(0, 1fr); }
            .sf-promo-feature { min-height: 360px; }
            .sf-promo-packages { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto auto; }
            .sf-package-card { min-height: 190px; }
        }
        @media (max-width: 680px) {
            .sf-container { width: min(100% - 28px, var(--sf-width)); }
            .sf-section { padding: 54px 0; }
            .sf-brand img { width: 125px; }
            .sf-hero-grid { grid-template-columns: 1fr; min-height: 670px; padding-block: 48px 38px; gap: 12px; }
            .sf-hero::before { background: linear-gradient(90deg, rgba(8,12,15,.42), rgba(8,12,15,.24) 65%, rgba(8,12,15,.10)), linear-gradient(0deg, rgba(8,12,15,.16), transparent 70%); }
            .sf-photo-story, .sf-promo-photo { grid-template-columns: 1fr; gap: 22px; }
            .sf-photo-story--reverse .sf-photo { order: 0; }
            .sf-photo, .sf-photo img { min-height: 280px; }
            .sf-food-showcase { grid-template-columns: 1fr 1fr; }
            .sf-food-showcase a { min-height: 200px; }
            .sf-hero h1 { font-size: clamp(2.65rem, 13vw, 4rem); }
            .sf-hero-logo { width: min(75%, 290px); max-height: 250px; }
            .sf-hero-sticker { right: 2%; bottom: 5px; font-size: .85rem; max-width: 155px; }
            .sf-feature-strip-inner { grid-template-columns: 1fr; gap: 12px; padding-block: 16px; }
            .sf-feature-strip-inner > div { display: flex; align-items: baseline; justify-content: center; gap: 8px; }
            .sf-promo-feature { min-height: 340px; }
            .sf-promo-packages { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto auto; gap: 10px; }
            .sf-package-card { min-height: 180px; }
            .sf-package-copy { padding: 10px; }
            .sf-package-copy p { font-size: .76rem; }
            .sf-package-copy .sf-btn { width: 100%; padding: 8px 9px; font-size: .72rem; }
            .sf-food-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
            .sf-food-showcase { grid-template-columns: 1fr; }
            .sf-food-showcase a { min-height: 240px; }
            .sf-food-caption { font-size: .8rem; padding: 8px; }
            .sf-service-grid { grid-template-columns: 1fr; }
            .sf-hours-wrap, .sf-menu-layout, .sf-contact-grid { grid-template-columns: 1fr; gap: 22px; }
            .sf-hours-art { padding: 0; }
            .sf-hours-art img { width: 180px; max-height: 180px; }
            .sf-menu-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
            .sf-menu-gallery img { max-height: 220px; }
            .sf-order-widget { left: 10px; bottom: 10px; }
            .sf-order-widget .glf-button { font-size: .82rem; padding: 10px 12px; }
            .sf-back-top { right: 10px; bottom: 10px; }
        }
        @media (prefers-reduced-motion: reduce) {
            html { scroll-behavior: auto; }
            *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
        }
/* --- NUEVA DISTRIBUCIÓN DE LA SECCIÓN DE PROMO --- */

/* Contenedor principal: Activa una rejilla de dos columnas iguales (50% / 50%) en pantallas grandes */

.sf-promo-layout {
    display: grid;
    grid-template-columns: 1fr; /* Por defecto una columna para móviles */
    gap: 16px; /* Espacio de separación interno entre las tarjetas */
    align-items: stretch; /* Estira los elementos para que queden alineados simétricamente */
    margin-bottom: 40px;

    /* --- NUEVAS SENTENCIAS PARA EL MARCO ROJO --- */
    background: var(--sf-bg);
    padding: 16px; /* Genera el colchón de aire o margen interno alrededor de todo el grupo de imágenes */
    border-radius: var(--sf-radius); /* Redondea las esquinas exteriores del contenedor rojo para que haga juego con tus tarjetas */
    width: 100%; /* Asegura que cubra el ancho completo de su sección */
}

/* Responsividad para computadoras y tablets grandes */
@media (min-width: 992px) {
    .sf-promo-layout {
        grid-template-columns: minmax(0, .98fr) minmax(0, 1.02fr);
    }
}

/* --- ESTILOS DE LA PROMOCIÓN DESTACADA (IZQUIERDA) --- */

/*
.sf-promo-feature::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(90deg, rgba(4,8,12,.78) 0%, rgba(4,8,12,.52) 45%, rgba(4,8,12,.08) 100%), linear-gradient(0deg, rgba(4,8,12,.72), transparent 70%);
}
*/

.sf-promo-feature {
	min-height: 440px;
	isolation: isolate;
    background: var(--sf-card);
    border-radius: var(--sf-radius);
    position: relative;
	overflow: hidden;
    box-shadow: var(--sf-shadow);
    height: 100%; /* Se estira para igualar la altura de los bloques de la derecha */
    display: flex;
    flex-direction: column;
}


.sf-promo-feature img {
	z-index: -2;
	object-position: center;
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    inset: 0;
}

.sf-promo-feature-copy {
	align-items: flex-start;
	justify-content: flex-end;
	width: 100%;
    padding: 30px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    flex-grow: 1; /* Empuja el botón al fondo si hay poco texto */
}

.sf-promo-tag {
    align-self: flex-start;
    background: var(--sf-yellow);
    color: #101820;
    font-weight: 900;
    text-transform: uppercase;
    font-size: 0.75rem;
    padding: 4px 12px;
    border-radius: 999px;
    letter-spacing: 0.05em;
}

.sf-promo-feature-copy h3 {
    margin: 0;
    font-size: 2.2rem;
    color: var(--sf-white);
    line-height: 1.2;
}

.sf-promo-feature-copy p {
    margin: 0;
    color: var(--sf-muted);
}

.sf-promo-feature-copy .sf-btn {
    align-self: flex-start;
    margin-top: auto; /* Mantiene el botón siempre alineado abajo */
}

/* --- ESTILOS DE LOS 4 PAQUETES (DERECHA) --- */
/* Distribuye las 4 tarjetas en una cuadrícula compacta de 2x2 */
.sf-promo-packages {
    display: grid;
    grid-template-columns: 1fr; /* Una columna para celulares */
    gap: 20px;
}

@media (min-width: 576px) {
    .sf-promo-packages {
        grid-template-columns: repeat(2, 1fr); /* Cuadrícula de 2x2 desde pantallas medianas */
    }
}

.sf-package-card::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
}

.sf-package-card:hover img {
	transform: scale(1.025);
}

/* Tarjetas individuales de paquetes */
.sf-package-card {
    isolation: isolate;
    border: 1px solid rgba(255,255,255,.08);
    box-shadow: var(--sf-shadow);
    min-width: 0;
    /* 1. ELIMINAMOS min-height: 200px; para que la altura no sea fija */
    position: relative;
    justify-content: flex-end;
    background: var(--sf-card);
    border-radius: var(--sf-radius);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    
    /* 2. FORZAMOS A LA TARJETA A SER SIEMPRE UN CUADRADO PERFECTO */
    aspect-ratio: 1 / 1; 
}

.sf-package-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--sf-shadow);
}

.sf-package-card img {
    /* 3. LA IMAGEN OCUPA EL 100% SIN POSICIONAMIENTO ABSOLUTO */
    width: 100%;
    height: 100%;
    
    /* 4. CAMBIAMOS A contian O fill YA QUE LA TARJETA AHORA TIENE LA MISMA FORMA QUE LA FOTO */
    object-fit: contain; 
    
    /* 5. ENVIAMOS LA IMAGEN AL FONDO SI DESEAS QUE EL BOTÓN FLOTE ENCIMA */
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
}
.sf-package-copy {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex-grow: 1;
}

.sf-package-copy h3 {
    margin: 0;
    font-size: 1.3rem;
}

.sf-package-copy p {
    margin: 0;
    font-size: 0.9rem;
    color: var(--sf-muted);
    line-height: 1.4;
}

.sf-package-copy .sf-btn {
    align-self: flex-start;
    margin-top: auto; /* Alinea los botones de consulta simétricamente */
    min-height: 40px;
    font-size: 0.85rem;
    padding: 8px 16px;
}

/* Nota aclaratoria al final */
.sf-promo-note {
    text-align: center;
    font-size: 0.85rem;
    color: var(--sf-muted);
    margin-top: 20px;
}


/* Ajustes exclusivos para celulares: conservar intacta la composición de escritorio. */
@media (max-width: 680px) {
    .sf-promo-layout {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 16px;
        margin-bottom: 24px;
    }

    /* La promoción principal ocupa una fila completa. */
    .sf-promo-feature {
        width: 100%;
        min-width: 0;
        min-height: 340px;
        height: auto;
    }

    .sf-promo-feature img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .sf-promo-feature-copy {
        padding: 22px;
        gap: 12px;
    }

    .sf-promo-feature-copy h3 {
        font-size: clamp(1.8rem, 8vw, 2.4rem);
        overflow-wrap: anywhere;
    }

    .sf-promo-feature-copy p {
        font-size: .95rem;
    }

    /* En móvil, los cuatro paquetes van uno debajo del otro. */
    .sf-promo-packages {
        grid-template-columns: minmax(0, 1fr) !important;
        grid-template-rows: none !important;
        gap: 14px;
        width: 100%;
    }

    .sf-package-card {
        width: 100%;
        min-width: 0;
        min-height: 230px;
    }

    .sf-package-card img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .sf-package-copy {
        padding: 16px;
    }

    .sf-package-copy h3 {
        font-size: 1.15rem;
        overflow-wrap: anywhere;
    }

    .sf-package-copy p {
        font-size: .88rem;
    }

    .sf-package-copy .sf-btn {
        width: auto;
        max-width: 100%;
        align-self: flex-start;
        white-space: normal;
        text-align: center;
    }
}

/* En teléfonos muy estrechos, reducir un poco los espacios interiores. */
@media (max-width: 380px) {
    .sf-promo-feature {
        min-height: 310px;
    }

    .sf-promo-feature-copy {
        padding: 18px;
    }

    .sf-promo-tag {
        font-size: .68rem;
    }

    .sf-package-card {
        min-height: 210px;
    }
}