:root {
    color-scheme: light;
    --bg: #f7fbfc;
    --surface: rgba(255, 255, 255, .86);
    --surface-solid: #ffffff;
    --ink: #111827;
    --muted: #64748b;
    --line: rgba(15, 23, 42, .10);
    --teal: #007b83;
    --teal-2: #0f9f9d;
    --teal-dark: #06383d;
    --gold: #d6a13b;
    --gold-soft: rgba(214, 161, 59, .18);
    --danger: #ff4f6d;
    --shadow: 0 26px 70px rgba(15, 23, 42, .13);
    --soft-shadow: 0 14px 36px rgba(15, 23, 42, .09);
    --radius-xl: 30px;
    --radius-lg: 22px;
    --radius-md: 16px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    font-family: Inter, "Segoe UI", Roboto, Arial, sans-serif;
    background:
        radial-gradient(circle at 8% 0%, rgba(0, 123, 131, .14), transparent 24rem),
        radial-gradient(circle at 88% 8%, rgba(214, 161, 59, .13), transparent 26rem),
        var(--bg);
    color: var(--ink);
    line-height: 1.58;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
button { cursor: pointer; }
.container {
    width: min(1180px, calc(100% - 32px));
    margin: 0 auto;
}
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Header */
.site-header {
    position: relative;
    overflow: hidden;
    min-height: 720px;
    background: linear-gradient(140deg, #ffffff 0%, #effbfc 52%, #e9f2e7 100%);
}
.site-header::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(255,255,255,.94), rgba(255,255,255,.52)),
        radial-gradient(circle at 78% 42%, rgba(0, 123, 131, .12), transparent 28rem);
    pointer-events: none;
}
.main-nav {
    position: fixed;
    z-index: 50;
    top: 18px;
    left: 50%;
    transform: translateX(-50%);
    width: min(1180px, calc(100% - 28px));
    min-height: 76px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 10px 14px;
    border: 1px solid rgba(255, 255, 255, .75);
    border-radius: 999px;
    background: rgba(255, 255, 255, .84);
    backdrop-filter: blur(18px);
    box-shadow: 0 18px 55px rgba(15, 23, 42, .12);
}
.brand-mark {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    min-width: 220px;
}
.brand-mark img {
    width: 215px;
    height: 64px;
    object-fit: contain;
}
.nav-content {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 16px;
    width: 100%;
}
.nav-content > a:not(.nav-cta) {
    color: #1f2937;
    font-size: .92rem;
    font-weight: 800;
}
.nav-content > a:not(.nav-cta):hover { color: var(--teal); }
.search-box {
    display: flex;
    align-items: center;
    width: min(100%, 285px);
    gap: 8px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: #fff;
    padding: 8px 12px 8px 16px;
}
.search-box input {
    width: 100%;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--ink);
    font-size: .9rem;
}
.search-box span { color: var(--teal); font-size: 1.15rem; }
.nav-cta,
.btn,
.catalog-toolbar button,
.newsletter-form button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 999px;
    background: var(--teal);
    color: #fff;
    font-weight: 900;
    padding: .82rem 1.1rem;
    box-shadow: 0 14px 30px rgba(0, 123, 131, .24);
}
.nav-cta:hover,
.btn:hover,
.catalog-toolbar button:hover,
.newsletter-form button:hover {
    background: var(--teal-dark);
    transform: translateY(-2px);
}
.menu-toggle {
    display: none;
    align-items: center;
    gap: 4px;
    border: 0;
    background: transparent;
    color: var(--ink);
    font-weight: 900;
}
.menu-toggle span {
    display: block;
    width: 18px;
    height: 2px;
    border-radius: 999px;
    background: var(--ink);
}

/* Hero */
.hero-section {
    position: relative;
    z-index: 1;
    padding: 150px 0 70px;
}
.hero-grid {
    display: grid;
    grid-template-columns: minmax(0, .92fr) minmax(420px, 1fr);
    align-items: center;
    gap: 48px;
}
.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
    color: var(--teal);
    font-size: .78rem;
    font-weight: 900;
    letter-spacing: .13em;
    text-transform: uppercase;
}
.eyebrow::before {
    content: "";
    width: 34px;
    height: 2px;
    background: currentColor;
}
.hero-copy h1,
.section-heading h2,
.newsletter-card h2 {
    margin: 0;
    color: var(--ink);
    font-size: clamp(2.55rem, 6vw, 5.4rem);
    line-height: .96;
    font-weight: 900;
    letter-spacing: -.07em;
}
.hero-copy h1 span { color: var(--teal); letter-spacing: -.08em; }
.hero-copy p,
.section-heading p,
.newsletter-card p {
    max-width: 650px;
    margin: 22px 0 0;
    color: var(--muted);
    font-size: 1.06rem;
}
.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 30px;
}
.btn { min-height: 50px; padding-inline: 26px; }
.btn-secondary {
    background: #fff;
    color: var(--teal-dark);
    border: 1px solid rgba(0, 123, 131, .20);
    box-shadow: none;
}
.btn-secondary:hover { color: #fff; }
.trust-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 28px;
}
.trust-row span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1px solid rgba(0, 123, 131, .13);
    border-radius: 999px;
    background: rgba(255,255,255,.72);
    color: #174146;
    font-size: .88rem;
    font-weight: 800;
    padding: 9px 12px;
}
.hero-visual {
    position: relative;
    min-height: 520px;
}
.hero-phones {
    position: absolute;
    inset: 15px 0 0 16px;
}
.hero-phone {
    position: absolute;
    width: 210px;
    height: 410px;
    border-radius: 42px;
    border: 8px solid rgba(17, 24, 39, .86);
    box-shadow: 0 36px 75px rgba(17, 24, 39, .22);
}
.hero-phone::before {
    content: "";
    position: absolute;
    top: 18px;
    left: 18px;
    width: 74px;
    height: 74px;
    border-radius: 25px;
    background: rgba(255,255,255,.22);
    box-shadow:
        inset 0 0 0 2px rgba(255,255,255,.20),
        0 0 0 1px rgba(0,0,0,.03);
}
.hero-phone::after {
    content: "";
    position: absolute;
    top: 31px;
    left: 31px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #111827;
    box-shadow: 34px 0 0 #111827, 0 34px 0 #111827;
}
.hero-phone--dark {
    left: 12px;
    top: 64px;
    transform: rotate(-15deg);
    background: linear-gradient(150deg, #0e1d2a, #0a5261);
}
.hero-phone--orange {
    left: 150px;
    top: 22px;
    transform: rotate(-5deg);
    background: linear-gradient(150deg, #ff8a3c, #c75520);
}
.hero-phone--silver {
    left: 295px;
    top: 42px;
    transform: rotate(7deg);
    background: linear-gradient(150deg, #f8fafc, #cbd5e1);
}
.hero-phone--green {
    left: 425px;
    top: 75px;
    transform: rotate(16deg);
    background: linear-gradient(150deg, #dce3cc, #9ba985);
}
.hero-card {
    position: absolute;
    z-index: 4;
    border: 1px solid rgba(255,255,255,.85);
    border-radius: 22px;
    background: rgba(255,255,255,.84);
    backdrop-filter: blur(16px);
    box-shadow: var(--soft-shadow);
    color: var(--ink);
    padding: 16px 18px;
}
.hero-card--price {
    left: 30px;
    bottom: 50px;
    display: grid;
}
.hero-card--price strong { color: var(--teal); font-size: 1.25rem; }
.hero-card--price span { color: var(--muted); font-size: .9rem; }
.hero-card--gift { right: 18px; bottom: 82px; font-weight: 900; color: #294b4f; }

/* Benefits */
.benefits-strip,
.products-section,
.newsletter-section { padding: 70px 0; }
.benefit-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}
.benefit-item {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: var(--soft-shadow);
    padding: 22px;
}
.benefit-item > span {
    display: grid;
    width: 46px;
    height: 46px;
    flex: 0 0 46px;
    place-items: center;
    border-radius: 16px;
    background: rgba(0, 123, 131, .10);
    color: var(--teal);
    font-size: 1.35rem;
}
.benefit-item h2 { margin: 0 0 4px; font-size: 1rem; font-weight: 900; }
.benefit-item p { margin: 0; color: var(--muted); font-size: .92rem; }

/* Catalog */
.products-section { padding-top: 35px; }
.section-heading { max-width: 850px; margin-bottom: 28px; }
.section-heading h2,
.newsletter-card h2 { font-size: clamp(2rem, 4.3vw, 4.1rem); }
.catalog-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 28px;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: #fff;
    box-shadow: var(--soft-shadow);
    padding: 16px 18px;
}
.catalog-toolbar div { display: grid; }
.catalog-toolbar strong { font-size: 1rem; font-weight: 900; color: var(--ink); }
.catalog-toolbar span { color: var(--muted); font-size: .92rem; }
.catalog-toolbar button {
    background: rgba(0, 123, 131, .10);
    color: var(--teal-dark);
    box-shadow: none;
    padding: .75rem 1rem;
}
.catalog-list { display: grid; gap: 18px; }
.catalog-family {
    display: grid;
    grid-template-columns: 124px minmax(0, 1fr);
    gap: 18px;
    align-items: stretch;
    border-bottom: 1px solid rgba(15, 23, 42, .07);
    padding-bottom: 18px;
}
.family-label {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 12px;
    min-height: 100%;
    border-radius: var(--radius-lg);
    background: rgba(255,255,255,.52);
    border: 1px solid rgba(0, 123, 131, .10);
    text-align: center;
    padding: 16px 10px;
}
.family-label span {
    display: grid;
    width: 36px;
    height: 36px;
    place-items: center;
    border: 2px solid var(--teal);
    border-radius: 10px;
    color: var(--teal);
    font-weight: 900;
}
.family-label h3 { margin: 0; font-size: 1rem; line-height: 1.12; font-weight: 900; }
.catalog-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}
.catalog-grid--final { grid-template-columns: minmax(0, .7fr); }
.product-card {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: 112px minmax(0, 1fr);
    gap: 16px;
    min-height: 210px;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--surface-solid);
    box-shadow: 0 14px 32px rgba(15, 23, 42, .07);
    padding: 20px;
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.product-card:hover {
    transform: translateY(-5px);
    border-color: rgba(0, 123, 131, .22);
    box-shadow: var(--shadow);
}
.product-card.premium,
.product-card.pro {
    border-color: rgba(214, 161, 59, .48);
    background: linear-gradient(180deg, #ffffff 0%, #fffdf8 100%);
}
.product-card--wide {
    grid-template-columns: 115px minmax(0, 1fr);
    min-height: 150px;
}
.product-badge {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 2;
    border-radius: 999px;
    color: #fff;
    font-size: .72rem;
    font-weight: 900;
    padding: 5px 10px;
}
.badge-new { background: var(--teal); }
.badge-best { background: #b7791f; }
.badge-offer { background: var(--danger); }
.premium-mark {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 2;
    width: 26px;
    height: 26px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--gold-soft);
    color: #9c6b0d;
    font-size: .95rem;
}
.phone-thumb {
    position: relative;
    display: grid;
    place-items: center;
    min-width: 0;
    padding-top: 8px;
}
.phone-body {
    position: relative;
    width: 84px;
    height: 158px;
    border-radius: 22px;
    border: 5px solid rgba(17, 24, 39, .88);
    background: var(--phone-bg, linear-gradient(160deg, #94a3b8, #334155));
    box-shadow: 0 16px 30px rgba(15, 23, 42, .18);
}
.phone-body::before {
    content: "";
    position: absolute;
    top: 10px;
    left: 10px;
    width: 38px;
    height: 46px;
    border-radius: 14px;
    background: rgba(255,255,255,.24);
}
.phone-body::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 17px;
    background: linear-gradient(120deg, rgba(255,255,255,.34), transparent 38%, rgba(0,0,0,.05));
    pointer-events: none;
}
.phone-body span {
    position: absolute;
    z-index: 1;
    top: 18px;
    left: 18px;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: #0b1220;
    box-shadow: 23px 0 0 #0b1220, 0 23px 0 #0b1220;
}
.standard .phone-body span { box-shadow: 0 23px 0 #0b1220; }
.product-info { min-width: 0; }
.product-family {
    margin: 0 0 5px;
    color: var(--teal);
    font-size: .68rem;
    font-weight: 900;
    letter-spacing: .12em;
    text-transform: uppercase;
}
.product-info h4 {
    margin: 0 78px 6px 0;
    color: var(--ink);
    font-size: 1.06rem;
    line-height: 1.15;
    font-weight: 900;
}
.price-main {
    color: var(--teal);
    font-size: .95rem;
    font-weight: 900;
}
.price-main strong { font-size: 1.1rem; }
.price-range {
    margin: 2px 0 12px;
    color: #475569;
    font-size: .84rem;
}
.variant-details {
    border-radius: 12px;
    background: rgba(0, 123, 131, .06);
}
.variant-details summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 32px;
    list-style: none;
    border-radius: 12px;
    background: var(--teal);
    color: #fff;
    font-size: .78rem;
    font-weight: 900;
    padding: 7px 12px;
    cursor: pointer;
}
.variant-details summary::-webkit-details-marker { display: none; }
.variant-details[open] summary span { transform: rotate(180deg); }
.variant-details ul {
    display: grid;
    gap: 3px;
    margin: 0;
    padding: 10px 12px 11px;
    list-style: none;
}
.variant-details li {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    color: #111827;
    font-size: .84rem;
}
.variant-details li span { color: #475569; font-weight: 700; }
.variant-details li strong { font-weight: 900; }
.product-card.is-hidden { display: none; }
.catalog-family.is-hidden { display: none; }

/* phone color tokens */
.color-orange { --phone-bg: linear-gradient(160deg, #ff8a3d, #c14d1b); }
.color-bronze { --phone-bg: linear-gradient(160deg, #c87845, #8f4725); }
.color-lavender { --phone-bg: linear-gradient(160deg, #e6dcff, #b6a0ea); }
.color-titanium { --phone-bg: linear-gradient(160deg, #e5d6c2, #9b8669); }
.color-graphite { --phone-bg: linear-gradient(160deg, #74736d, #1f2937); }
.color-blue { --phone-bg: linear-gradient(160deg, #9ec5ff, #3978e6); }
.color-natural { --phone-bg: linear-gradient(160deg, #e9e3da, #9f9284); }
.color-slate { --phone-bg: linear-gradient(160deg, #8d98a5, #2c3846); }
.color-green { --phone-bg: linear-gradient(160deg, #d9f2d6, #7fb57d); }
.color-purple { --phone-bg: linear-gradient(160deg, #9b7cff, #251640); }
.color-deep-purple { --phone-bg: linear-gradient(160deg, #5b4a8f, #151325); }
.color-sky { --phone-bg: linear-gradient(160deg, #c1e6ff, #277da1); }
.color-sierra { --phone-bg: linear-gradient(160deg, #a1c8e8, #3b6d95); }
.color-alpine { --phone-bg: linear-gradient(160deg, #86c2e9, #183a64); }
.color-midnight-green { --phone-bg: linear-gradient(160deg, #184e41, #0a1f19); }
.color-pacific { --phone-bg: linear-gradient(160deg, #194e61, #07141d); }
.color-navy { --phone-bg: linear-gradient(160deg, #1d4f7c, #07192f); }
.color-violet { --phone-bg: linear-gradient(160deg, #d8b4fe, #7c3aed); }
.color-moss { --phone-bg: linear-gradient(160deg, #66745b, #1d2a20); }

/* Newsletter and footer */
.newsletter-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(300px, .65fr);
    gap: 24px;
    align-items: center;
    border-radius: var(--radius-xl);
    background: linear-gradient(135deg, #062b2f 0%, #007b83 58%, #17b5aa 100%);
    box-shadow: var(--shadow);
    color: #fff;
    padding: 34px;
}
.newsletter-card .eyebrow { color: #a7ffef; }
.newsletter-card h2,
.newsletter-card p { color: #fff; }
.newsletter-card p { opacity: .82; }
.newsletter-form {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 10px;
}
.newsletter-form input {
    width: 100%;
    min-height: 50px;
    border: 1px solid rgba(255,255,255,.32);
    border-radius: 999px;
    background: rgba(255,255,255,.96);
    color: #111827;
    outline: 0;
    padding: 0 18px;
}
.newsletter-form input:focus { box-shadow: 0 0 0 4px rgba(167, 255, 239, .34); }
.newsletter-form button { background: #fff; color: var(--teal-dark); box-shadow: none; }
.newsletter-form button:hover { background: #e6fffb; color: var(--teal-dark); }
.site-footer {
    background: #031416;
    color: rgba(255,255,255,.76);
    padding: 56px 0 24px;
}
.footer-grid {
    display: grid;
    grid-template-columns: 1.5fr .8fr .8fr 1fr;
    gap: 32px;
    align-items: start;
}
.footer-brand img {
    width: 220px;
    max-width: 100%;
    padding: 8px;
    border-radius: 16px;
    background: #fff;
}
.footer-brand p { max-width: 330px; margin: 16px 0 0; }
.site-footer h3 {
    margin: 0 0 14px;
    color: #fff;
    font-size: 1rem;
    font-weight: 900;
}
.site-footer a,
.site-footer p {
    display: block;
    margin: 0 0 8px;
    color: rgba(255,255,255,.72);
}
.site-footer a:hover { color: #8cf4e9; }
.footer-bottom {
    width: min(1180px, calc(100% - 32px));
    margin: 36px auto 0;
    border-top: 1px solid rgba(255,255,255,.12);
    padding-top: 20px;
    color: rgba(255,255,255,.58);
    text-align: center;
    font-size: .9rem;
}

@media (max-width: 1100px) {
    .nav-content { gap: 11px; }
    .search-box { width: 230px; }
    .hero-grid { grid-template-columns: 1fr; }
    .hero-visual { min-height: 430px; }
    .hero-phones { transform: scale(.82); transform-origin: left top; left: 50%; translate: -42% 0; width: 720px; }
    .benefit-grid { grid-template-columns: repeat(2, 1fr); }
    .catalog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .catalog-grid--final { grid-template-columns: 1fr; }
}

@media (max-width: 860px) {
    .main-nav { border-radius: 28px; align-items: flex-start; flex-wrap: wrap; }
    .brand-mark { min-width: 190px; }
    .brand-mark img { width: 190px; }
    .menu-toggle { display: inline-flex; margin-top: 17px; }
    .menu-toggle strong { margin-left: 6px; }
    .nav-content {
        display: none;
        width: 100%;
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
        padding: 8px 6px 6px;
    }
    .nav-content.is-open { display: flex; }
    .nav-content > a:not(.nav-cta) { padding: 10px 12px; border-radius: 14px; background: rgba(0,123,131,.06); }
    .search-box { width: 100%; }
    .hero-section { padding-top: 140px; }
    .catalog-family { grid-template-columns: 1fr; }
    .family-label { flex-direction: row; justify-content: flex-start; min-height: auto; text-align: left; }
    .catalog-grid { grid-template-columns: 1fr; }
    .catalog-toolbar { align-items: flex-start; flex-direction: column; }
    .catalog-toolbar button { width: 100%; }
    .newsletter-card { grid-template-columns: 1fr; padding: 26px; }
    .newsletter-form { grid-template-columns: 1fr; }
    .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 620px) {
    .container { width: min(100% - 22px, 1180px); }
    .site-header { min-height: auto; }
    .main-nav { top: 10px; width: calc(100% - 18px); }
    .hero-copy h1 { font-size: clamp(2.4rem, 13vw, 3.6rem); }
    .hero-visual { display: none; }
    .benefit-grid { grid-template-columns: 1fr; }
    .product-card,
    .product-card--wide { grid-template-columns: 92px minmax(0, 1fr); padding: 16px; gap: 12px; }
    .phone-body { width: 70px; height: 136px; border-radius: 18px; }
    .product-info h4 { margin-right: 0; padding-right: 78px; font-size: .98rem; }
    .product-badge { top: 14px; right: 14px; }
    .price-range { font-size: .78rem; }
    .footer-grid { grid-template-columns: 1fr; }
}


/* ==========================================================
   HOT APPLE - Hero con imagen PNG real
   Reemplaza los celulares dibujados en CSS por una imagen
   transparente ubicada en assets/images/hero-iphones.png
   ========================================================== */
.hero-visual {
    position: relative;
    min-height: clamp(360px, 43vw, 560px);
    display: grid;
    place-items: center;
    isolation: isolate;
    overflow: visible;
}

.hero-visual::before {
    content: "";
    position: absolute;
    z-index: 0;
    width: min(92%, 680px);
    aspect-ratio: 1.55;
    border-radius: 999px;
    background:
        radial-gradient(circle, rgba(0, 123, 131, .16), transparent 64%),
        radial-gradient(circle at 75% 35%, rgba(214, 161, 59, .16), transparent 48%);
    filter: blur(8px);
    transform: translateY(28px);
    pointer-events: none;
}

.hero-product-image {
    position: relative;
    z-index: 2;
    width: min(100%, 680px);
    max-height: clamp(310px, 42vw, 520px);
    object-fit: contain;
    filter: drop-shadow(0 34px 42px rgba(15, 23, 42, .18));
    transform: translateY(8px);
}

.hero-phones,
.hero-phone {
    display: none !important;
}

.hero-card {
    z-index: 4;
}

.hero-card--price {
    left: clamp(0px, 3vw, 34px);
    bottom: clamp(34px, 6vw, 68px);
}

.hero-card--gift {
    right: clamp(0px, 2vw, 24px);
    bottom: clamp(62px, 8vw, 96px);
}

@media (max-width: 1100px) {
    .hero-visual {
        min-height: clamp(330px, 56vw, 480px);
        margin-top: 10px;
    }

    .hero-product-image {
        width: min(100%, 640px);
        max-height: clamp(300px, 54vw, 450px);
    }
}

@media (max-width: 860px) {
    .hero-visual {
        min-height: clamp(310px, 64vw, 430px);
    }

    .hero-product-image {
        width: min(100%, 560px);
    }

    .hero-card--price {
        left: 8px;
        bottom: 20px;
    }

    .hero-card--gift {
        right: 8px;
        bottom: 46px;
    }
}

@media (max-width: 620px) {
    .hero-visual {
        display: grid;
        min-height: auto;
        gap: 12px;
        margin-top: 30px;
        padding-bottom: 4px;
    }

    .hero-visual::before {
        width: 100%;
        transform: translateY(8px);
    }

    .hero-product-image {
        width: min(100%, 430px);
        max-height: 310px;
        transform: none;
        filter: drop-shadow(0 22px 28px rgba(15, 23, 42, .17));
    }

    .hero-card {
        position: relative;
        inset: auto;
        justify-self: center;
        width: min(100%, 360px);
        padding: 13px 15px;
        text-align: center;
    }

    .hero-card--price {
        display: grid;
        margin-top: -12px;
    }

    .hero-card--gift {
        font-size: .9rem;
    }
}


/* Imagen real de producto en las tarjetas
   Cambia solo el src en el HTML si quieres usar una imagen distinta por modelo.
   Sí, por fin dejamos de dibujar iPhones con divs, que bastante castigo era eso. */
.product-image-wrap {
    margin: 0;
    padding: 0;
    min-height: 170px;
    align-self: center;
}

.product-phone-image {
    width: min(100%, 118px);
    height: 170px;
    object-fit: contain;
    margin: 0 auto;
    filter: drop-shadow(0 16px 18px rgba(15, 23, 42, .16));
}

.product-card--wide .product-phone-image {
    width: min(100%, 132px);
    height: 145px;
}

.phone-body {
    display: none;
}

@media (max-width: 620px) {
    .product-image-wrap {
        min-height: 132px;
    }

    .product-phone-image {
        width: min(100%, 86px);
        height: 132px;
    }

    .product-card--wide .product-phone-image {
        width: min(100%, 92px);
        height: 132px;
    }
}


/* Botón comercial de compra por WhatsApp en cada producto */
.buy-whatsapp-btn {
    position: relative;
    isolation: isolate;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-height: 38px;
    margin-top: 10px;
    border-radius: 12px;
    background: linear-gradient(135deg, #20c45a 0%, #0a8f3d 52%, #075f2b 100%);
    color: #ffffff;
    font-size: .82rem;
    font-weight: 950;
    letter-spacing: .01em;
    text-align: center;
    text-decoration: none;
    box-shadow: 0 12px 24px rgba(10, 143, 61, .26);
    overflow: hidden;
}

.buy-whatsapp-btn::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(115deg, transparent 0%, rgba(255,255,255,.34) 45%, transparent 70%);
    transform: translateX(-110%);
    transition: transform .55s ease;
}

.buy-whatsapp-btn:hover,
.buy-whatsapp-btn:focus-visible {
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 16px 30px rgba(10, 143, 61, .34);
}

.buy-whatsapp-btn:hover::before,
.buy-whatsapp-btn:focus-visible::before {
    transform: translateX(110%);
}

.buy-whatsapp-btn:focus-visible {
    outline: 3px solid rgba(32, 196, 90, .34);
    outline-offset: 3px;
}

/* CTA superior a WhatsApp */
.nav-cta {
    background: linear-gradient(135deg, #20c45a 0%, #0a8f3d 58%, #075f2b 100%);
    box-shadow: 0 14px 30px rgba(10, 143, 61, .26);
}

.nav-cta:hover,
.nav-cta:focus-visible {
    background: linear-gradient(135deg, #25d366 0%, #0a8f3d 70%);
    color: #fff;
}

@media (max-width: 620px) {
    .buy-whatsapp-btn {
        min-height: 40px;
        font-size: .8rem;
    }
}


/* Botón flotante fijo de WhatsApp.
   Siempre visible en la esquina inferior derecha, aunque el usuario haga scroll.
   La humanidad bajó la página: el botón también la persigue, como debe ser. */
.floating-whatsapp-btn {
    position: fixed;
    right: clamp(14px, 2vw, 28px);
    bottom: calc(clamp(14px, 2vw, 28px) + env(safe-area-inset-bottom, 0px));
    z-index: 9999;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-width: 188px;
    min-height: 54px;
    padding: 13px 20px;
    border-radius: 999px;
    background: linear-gradient(135deg, #25D366 0%, #128C7E 55%, #075E54 100%);
    color: #ffffff;
    font-weight: 950;
    font-size: .98rem;
    letter-spacing: .01em;
    text-decoration: none;
    box-shadow: 0 18px 38px rgba(37, 211, 102, .34);
    border: 1px solid rgba(255, 255, 255, .45);
    overflow: hidden;
    isolation: isolate;
    transform: translateZ(0);
}

.floating-whatsapp-btn::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(115deg, transparent 0%, rgba(255,255,255,.46) 46%, transparent 72%);
    transform: translateX(-120%);
    transition: transform .62s ease;
}

.floating-whatsapp-btn:hover,
.floating-whatsapp-btn:focus-visible {
    color: #1f1600;
    transform: translateY(-3px);
    box-shadow: 0 22px 44px rgba(156, 107, 13, .42);
}

.floating-whatsapp-btn:hover::before,
.floating-whatsapp-btn:focus-visible::before {
    transform: translateX(120%);
}

.floating-whatsapp-btn:focus-visible {
    outline: 3px solid rgba(214, 161, 59, .35);
    outline-offset: 4px;
}

.floating-whatsapp-icon {
    display: grid;
    place-items: center;
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #25D366;
    box-shadow: inset 0 0 0 2px rgba(255,255,255,.35);
}

.floating-whatsapp-icon svg {
    width: 21px;
    height: 21px;
    fill: #ffffff;
}

.floating-whatsapp-text {
    white-space: nowrap;
}

@media (max-width: 620px) {
    .floating-whatsapp-btn {
        right: 12px;
        bottom: calc(12px + env(safe-area-inset-bottom, 0px));
        min-width: 58px;
        min-height: 58px;
        width: 58px;
        height: 58px;
        padding: 0;
        border-radius: 50%;
    }

    .floating-whatsapp-text {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }

    .floating-whatsapp-icon {
        width: 34px;
        height: 34px;
    }

    .floating-whatsapp-icon svg {
        width: 23px;
        height: 23px;
    }
}