/* VidaFlow Health -- V4.2 homepage layer.
   Loaded on the homepage only, AFTER css/v4-base.css (fonts, tokens, section
   wrapper, eyebrows, buttons, the unified card system, the hair summary).
   This file holds only the homepage's own sections: hero, Así funciona,
   Empieza por lo que buscas, the treatment explorer (tabs, panels, Ver todos),
   Cuidado humano, Aprende, the (flagged-off) newsletter, and Seguridad y
   confianza. Ported from the V4.2 prototype (site/client/src/index.css) into
   v4-* classes so nothing here can collide with protocol.css. */

/* ---------- hero ---------- */
/* The frozen site header is fixed over the hero (the prototype's is sticky
   above it), so the hero carries the header's 78px as top padding on top of
   the prototype's 650px. */
.v4-hero{position:relative;isolation:isolate;overflow:hidden;min-height:728px;padding-top:78px;color:#fff;background:var(--v4-navy-2)}
.v4-hero__image{position:absolute;z-index:-4;inset:0}
.v4-hero__image img{width:100%;height:100%;display:block;object-fit:cover;object-position:right center;opacity:.92}
.v4-hero::after{content:"";position:absolute;z-index:-3;inset:0;background:linear-gradient(90deg,rgba(7,25,59,.99) 0%,rgba(8,31,72,.97) 34%,rgba(10,38,84,.72) 59%,rgba(10,35,72,.23) 100%)}
.v4-hero__glow{position:absolute;z-index:-2;left:-7%;top:-22%;width:72%;height:120%;border-radius:50%;background:radial-gradient(circle,rgba(49,132,255,.17),transparent 63%)}
.v4-flow--hero{z-index:-1;right:0;bottom:-27px;width:100%;height:360px;color:rgba(74,145,255,.55)}
.v4-flow--hero path:nth-child(2){stroke:rgba(83,188,255,.3)}
.v4-flow--hero path:nth-child(3){stroke:rgba(132,187,255,.35)}
.v4-flow--hero path:nth-child(4){stroke:rgba(45,125,244,.42)}
.v4-hero__content{min-height:589px;display:flex;align-items:center}
.v4-hero__copy{max-width:615px;padding:58px 0 90px}
.v4-hero__title{max-width:600px;margin:21px 0;color:#fff;font-family:var(--v4-serif);font-size:clamp(3.3rem,6.1vw,5.75rem);font-weight:500;line-height:.99;letter-spacing:-.055em}
.v4-hero__body{max-width:542px;margin:0;color:#dbeaff;font-size:17px;line-height:1.6}
.v4-hero__actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:29px}
.v4-hero__location{display:inline-flex;align-items:center;gap:8px;margin:28px 0 0;color:#c9def8;font-size:11px;font-weight:600;line-height:1.4}
.v4-location-pin{flex:0 0 auto;display:grid;place-items:center;width:21px;height:21px;border:1px solid rgba(195,231,255,.48);border-radius:50%;color:var(--v4-teal);font-size:17px;line-height:1}
.v4-hero__trust{position:absolute;left:0;bottom:0;width:100%;min-height:61px;border-top:1px solid rgba(184,218,255,.17);background:rgba(5,24,56,.51);backdrop-filter:blur(9px)}
.v4-hero__trust-inner{min-height:61px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.v4-hero__trust-inner>span{display:inline-flex;align-items:center;gap:8px;color:#e8f4ff;font-size:11px;font-weight:600;white-space:nowrap}
.v4-hero__trust-inner svg{color:var(--v4-teal)}
.v4-hero__trust-inner>i{width:1px;height:16px;background:rgba(202,231,255,.26)}

/* ---------- Así funciona ---------- */
.v4-process-section{color:var(--v4-ink);background:#f7f9fe}
.v4-process-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:35px;margin-bottom:37px}
.v4-process-heading h2{max-width:655px}
.v4-process-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:17px}
.v4-process-card{overflow:hidden;border:1px solid rgba(13,51,96,.1);border-radius:19px;background:#fff}
.v4-process-card>img{width:100%;height:164px;display:block;object-fit:cover}
.v4-process-card__body{min-height:286px;padding:20px}
.v4-process-card__badge{display:inline-block;padding:6px 9px;border-radius:100px;color:#236fdf;background:#e7f1ff;font-size:9px;font-weight:700;letter-spacing:.11em}
.v4-process-card h3{margin:17px 0 9px;color:var(--v4-navy);font-family:var(--v4-sans);font-size:18px;font-weight:400;line-height:1.2;letter-spacing:-.03em}
.v4-process-card p{margin:0;color:var(--v4-muted);font-size:12px;line-height:1.55}
.v4-process-card small{display:block;margin-top:18px;color:#5c7688;font-size:10px;font-weight:700}
.v4-process-disclaimer{margin:22px 0 0;color:#738899;font-size:10px}

/* ---------- Empieza por lo que buscas ---------- */
.v4-preference-section{position:relative;overflow:hidden;color:var(--v4-ink);background:#f5f9ff;border-bottom:1px solid rgba(42,105,174,.16)}
.v4-flow--section{z-index:0;left:0;bottom:-100px;width:100%;height:260px;color:rgba(67,142,236,.21)}
.v4-preference-content{position:relative;z-index:1}
.v4-pref-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;padding:13px;border:1px solid rgba(34,103,179,.2);border-radius:24px;background:rgba(255,255,255,.86);box-shadow:0 16px 38px rgba(9,48,99,.07)}
.v4-pref-card{position:relative;overflow:hidden;min-height:139px;padding:21px 21px 48px;display:flex;flex-direction:column;align-items:flex-start;border:1.5px solid rgba(41,108,182,.24);border-radius:17px;background:linear-gradient(145deg,#fff,#f7fbff);box-shadow:0 6px 18px rgba(13,51,96,.06),inset 0 1px 0 #fff;color:var(--v4-ink);transition:transform 180ms var(--v4-ease),box-shadow 180ms var(--v4-ease),border-color 180ms var(--v4-ease)}
.v4-pref-card:hover{transform:translateY(-4px);border-color:rgba(45,125,244,.66);box-shadow:0 16px 28px rgba(13,51,96,.14)}
.v4-pref-card::after{content:"";position:absolute;right:-23px;bottom:-31px;width:86px;height:86px;border-radius:50%;opacity:.66;pointer-events:none}
.v4-pref-card.v4-accent--aqua::after{background:#baf0e9}
.v4-pref-card.v4-accent--sun::after{background:#ffe3a7}
.v4-pref-card.v4-accent--coral::after{background:#facfc4}
.v4-pref-card.v4-accent--violet::after{background:#d9c8ef}
.v4-pref-card.v4-accent--sand::after{background:#f2dfc0}
.v4-pref-card.v4-accent--slate::after{background:#d7e2e9}
.v4-pref-card__num{color:#7899aa;font-size:10px;font-weight:700;letter-spacing:.1em}
.v4-pref-card strong{position:relative;z-index:1;max-width:235px;margin-top:15px;color:#08295b;font-family:var(--v4-serif);font-size:19px;font-weight:700;line-height:1.1;letter-spacing:-.035em}
.v4-pref-card>svg{position:absolute;bottom:18px;left:21px;color:var(--v4-teal)}

/* ---------- Metas de salud (explorer) ---------- */
.v4-explorer-section{position:relative;overflow:hidden;color:#fff;background:linear-gradient(135deg,#0a2759 0%,#10448f 100%)}
.v4-explorer-section::after{content:"";position:absolute;z-index:0;right:-8%;bottom:-50%;width:45%;height:120%;border-radius:50%;background:radial-gradient(circle,rgba(50,129,255,.23),transparent 65%);pointer-events:none}
.v4-explorer-section>.wrap{position:relative;z-index:1}
.v4-explorer-section h2{color:#fff}
.v4-explorer-section .v4-section-intro--split>p{color:#d3e4fd}
.v4-tabs{display:flex;gap:8px;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:18px;scrollbar-width:thin}
.v4-tab{flex:0 0 auto;display:inline-flex;align-items:center;gap:7px;padding:10px 13px;color:#d6e7ff;border:1px solid rgba(191,220,255,.32);border-radius:100px;background:rgba(255,255,255,.05);font-size:11px;font-weight:700;white-space:nowrap;transition:background 150ms var(--v4-ease),color 150ms var(--v4-ease),border-color 150ms var(--v4-ease)}
.v4-tab:hover,.v4-tab.is-active,.v4-tab[aria-selected="true"]{color:var(--v4-navy);border-color:#fff;background:#fff}
.v4-tab__icon{color:var(--v4-teal);font-family:Georgia,serif;font-size:17px;line-height:1}
.v4-explorer-panels{min-height:390px;padding:17px;border:1px solid rgba(189,222,255,.38);border-radius:23px;background:rgba(2,20,56,.24);box-shadow:inset 0 1px 0 rgba(255,255,255,.09),0 22px 42px rgba(2,16,45,.17);backdrop-filter:blur(8px)}
/* [hidden] hides via the UA stylesheet once home-v4.js activates a tab. No
   pre-hide rule on purpose: without JS every panel stays visible and readable. */
.v4-explorer-panel+.v4-explorer-panel{margin-top:28px}
.v4-explorer-panel[hidden]+.v4-explorer-panel,.v4-explorer-panel+.v4-explorer-panel[hidden]{margin-top:0}
.v4-panel-body{max-width:70ch;margin:4px 4px 16px;color:#d3e4fd;font-size:14px;line-height:1.55}
.v4-renewal-note{max-width:80ch;margin:16px 4px 2px;color:rgba(211,228,253,.82);font-size:12px;line-height:1.55}

/* Ver todos */
.v4-category-summary-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:13px}
.v4-category-summary{position:relative;min-height:135px;padding:19px;display:flex;flex-direction:column;align-items:flex-start;border:1.5px solid rgba(120,181,239,.34);border-radius:15px;background:linear-gradient(145deg,#fff,#f3f9ff);box-shadow:0 12px 28px rgba(3,23,59,.16),inset 0 1px 0 #fff;color:var(--v4-ink);transition:transform 160ms var(--v4-ease),box-shadow 160ms var(--v4-ease),border-color 160ms var(--v4-ease)}
.v4-category-summary:hover{transform:translateY(-4px);border-color:rgba(45,125,244,.73);box-shadow:0 20px 37px rgba(3,23,59,.24),inset 0 1px 0 #fff}
.v4-category-summary__icon{color:var(--v4-blue);font-family:Georgia,serif;font-size:24px;line-height:1}
.v4-category-summary strong{margin-top:10px;color:var(--v4-navy);font-family:var(--v4-serif);font-size:19px;font-weight:700;line-height:1.15}
.v4-category-summary small{margin-top:4px;color:var(--v4-muted);font-size:11px}
.v4-category-summary>svg{position:absolute;right:17px;bottom:17px;color:var(--v4-blue)}

/* ---------- Cuidado humano ---------- */
.v4-care-section{color:var(--v4-ink);background:#fff}
.v4-care-layout{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(55px,9vw,135px);align-items:center}
.v4-care-visual{position:relative;overflow:hidden;min-height:430px;border-radius:28px;background:linear-gradient(145deg,#0d2d65,#174c9b)}
.v4-care-visual__orb{position:absolute;right:-65px;top:-34px;width:315px;height:315px;border-radius:50%;background:radial-gradient(circle at 32% 34%,rgba(109,190,255,.85),rgba(48,112,231,.18) 54%,transparent 70%)}
.v4-flow--care{right:-110px;bottom:-70px;width:150%;height:350px;color:rgba(160,214,255,.46)}
.v4-care-visual__card{position:absolute;z-index:1;max-width:190px;padding:16px;display:flex;align-items:center;gap:10px;border:1px solid rgba(255,255,255,.35);border-radius:15px;color:#fff;background:rgba(255,255,255,.12);box-shadow:0 14px 32px rgba(4,18,43,.18);backdrop-filter:blur(9px);font-size:12px;font-weight:700;line-height:1.3}
.v4-care-visual__card svg{color:var(--v4-teal)}
.v4-care-visual__card--one{top:80px;left:45px}
.v4-care-visual__card--two{right:34px;bottom:73px}
.v4-care-copy__body{max-width:525px;margin:20px 0 29px;color:var(--v4-muted);font-size:16px;line-height:1.63}
.v4-care-steps{margin:0;padding:0;list-style:none;border-top:1px solid var(--v4-line)}
.v4-care-steps li{min-height:58px;display:flex;align-items:center;gap:16px;border-bottom:1px solid var(--v4-line)}
.v4-care-steps__num{color:#6797cd;font-size:10px;font-weight:700;letter-spacing:.1em}
.v4-care-steps p{flex:1;margin:0;color:var(--v4-navy);font-size:14px;font-weight:600}
.v4-care-steps svg{color:var(--v4-blue)}

/* ---------- Aprende ---------- */
.v4-learn-section{padding:96px 0;color:var(--v4-ink);background:#f1f8ff;border-top:1px solid rgba(42,105,174,.16);border-bottom:1px solid rgba(42,105,174,.16)}
.v4-learn-shell{position:relative;overflow:hidden;padding:52px;border:1.5px solid rgba(69,147,236,.42);border-radius:30px;background:linear-gradient(120deg,#e7f5ff 0%,#fff 52%,#edf8ff 100%);box-shadow:0 18px 38px rgba(7,47,101,.11),inset 0 1px 0 #fff}
.v4-learn-shell::before{content:"";position:absolute;top:-170px;right:-90px;width:350px;height:350px;border:1px solid rgba(57,144,240,.2);border-radius:50%;box-shadow:0 0 0 36px rgba(57,144,240,.07),0 0 0 73px rgba(57,144,240,.04);pointer-events:none}
.v4-learn-layout{position:relative;z-index:1;display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center}
.v4-learn-layout__body{max-width:505px;margin:20px 0 25px;color:var(--v4-muted);font-size:16px;line-height:1.6}
.v4-learn-cards{display:grid;grid-template-columns:1fr 1fr;gap:13px}
.v4-learn-card{display:block;min-height:224px;padding:22px;border:1.5px solid rgba(46,122,205,.19);border-radius:18px;background:#fff;box-shadow:0 10px 25px rgba(10,51,100,.1);color:var(--v4-ink);transition:transform 180ms var(--v4-ease),box-shadow 180ms var(--v4-ease)}
.v4-learn-card:hover{transform:translateY(-4px);box-shadow:0 16px 30px rgba(10,51,100,.16)}
.v4-learn-card:nth-child(2){transform:translateY(31px);border-color:rgba(99,178,255,.51);background:var(--v4-navy)}
.v4-learn-card:nth-child(2):hover{transform:translateY(27px)}
.v4-learn-card__num{color:var(--v4-blue);font-size:10px;font-weight:700;letter-spacing:.1em}
.v4-learn-card h3{margin:38px 0 9px;color:var(--v4-navy);font-family:var(--v4-serif);font-size:23px;font-weight:400;line-height:1.06;letter-spacing:-.035em}
.v4-learn-card p{margin:0;color:var(--v4-muted);font-size:12px;line-height:1.48}
.v4-learn-card:nth-child(2) .v4-learn-card__num{color:var(--v4-teal)}
.v4-learn-card:nth-child(2) h3{color:#fff}
.v4-learn-card:nth-child(2) p{color:#d4e6ff}

/* ---------- newsletter (behind newsletter_enabled, currently off) ---------- */
.v4-newsletter-section{background:var(--bg-2);color:#fff;padding:64px 0}
.v4-newsletter-inner{display:flex;justify-content:space-between;align-items:center;gap:32px;flex-wrap:wrap}
.v4-newsletter-inner h2{font-family:var(--v4-serif);font-size:22px;font-weight:600;margin-top:8px}
.v4-newsletter-inner p{color:var(--paper-2);font-size:14px;max-width:44ch;margin-top:8px}
.v4-newsletter-form{display:flex;flex-direction:column;gap:8px;min-width:320px}
.v4-newsletter-form > div{display:flex;gap:8px}
.v4-newsletter-form input{flex:1;padding:13px 16px;border-radius:100px;border:1px solid rgba(240,248,255,.3);background:rgba(255,255,255,.06);color:#fff;font-size:14px}
.v4-newsletter-form input::placeholder{color:var(--muted)}
.v4-newsletter-form button{padding:13px 20px;border-radius:100px;background:var(--tan);color:#fff;font-weight:700;font-size:13.5px;white-space:nowrap}
.v4-newsletter-form small{color:var(--muted);font-size:11.5px;max-width:52ch}

/* ---------- Seguridad y confianza ---------- */
.v4-trust-section{color:var(--v4-ink);background:#f7fbff;border-top:1px solid rgba(37,103,176,.25)}
.v4-trust-statement{position:relative;overflow:hidden;display:grid;grid-template-columns:1.1fr .9fr;gap:50px;align-items:end;margin-bottom:26px;padding:40px 42px;border:1px solid rgba(104,178,255,.42);border-radius:25px;background:linear-gradient(130deg,#0b285d,#0d438e);box-shadow:0 19px 38px rgba(3,25,64,.2)}
.v4-trust-statement::after{content:"";position:absolute;right:-85px;bottom:-160px;width:370px;height:370px;border:1px solid rgba(139,207,255,.28);border-radius:50%;box-shadow:0 0 0 39px rgba(139,207,255,.12),0 0 0 79px rgba(139,207,255,.07);pointer-events:none}
.v4-trust-statement>div{position:relative;z-index:1}
.v4-trust-statement h2{color:#fff;font-size:clamp(2.25rem,4vw,3.9rem)}
.v4-trust-role{max-width:430px;margin:0;color:#d8e9ff;font-size:15px;line-height:1.6}
.v4-trust-bar{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;padding:25px;border:1px solid rgba(42,105,174,.18);border-radius:22px;background:#fff;box-shadow:0 10px 26px rgba(13,51,96,.07)}
.v4-trust-bar__item{display:flex;gap:14px;padding:23px;border:1.5px solid rgba(45,125,244,.18);border-top:3px solid var(--v4-blue);border-radius:14px;background:#f8fcff}
.v4-trust-bar__item>svg{color:var(--v4-blue)}
.v4-trust-bar__item h3{margin:0 0 6px;color:var(--v4-navy);font-family:var(--v4-serif);font-size:19px;font-weight:400;line-height:1.15;letter-spacing:-.03em}
.v4-trust-bar__item p{margin:0;color:var(--v4-muted);font-size:12px;line-height:1.45}

/* "Looking for something you don't see here?" -- one more card in the trust row's system */
.v4-trust-bar--single{grid-template-columns:1fr;margin-top:16px}
.v4-upcoming{align-items:center}
.v4-upcoming>div{flex:1 1 auto;min-width:0}
.v4-upcoming__cta{flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;min-height:44px;color:#1f63d0;font-size:13px;font-weight:700;white-space:nowrap;transition:gap 150ms var(--v4-ease)}
.v4-upcoming__cta:hover{gap:10px}
.v4-upcoming__cta:focus-visible{outline:2px solid #1f63d0;outline-offset:3px;border-radius:4px}

/* Frozen header's menu panel (position:fixed): scroll inside it when taller than a short phone,
   so the last links stay reachable with the Categorías submenu open (78px header). */
#mobile{max-height:calc(100vh - 78px);max-height:calc(100dvh - 78px);overflow-y:auto;overscroll-behavior:contain}

/* ================= responsive ================= */
@media (max-width:1120px){
  .v4-process-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:800px){
  .v4-hero__image img{object-position:center 30%}
  /* The prototype darkens 62% of the mobile width to near-opaque, which
     buries the couple in our couple-centred mobile crop. Keep its left-to-
     right direction, but lighter, so the couple stays visible (a locked
     requirement from the previous round) while the copy stays legible. */
  .v4-hero::after{background:linear-gradient(90deg,rgba(7,25,59,.9) 0%,rgba(8,31,72,.74) 55%,rgba(7,27,62,.38) 100%)}
  /* Four trust items wrap to 2-4 rows on phones; pinned to the hero's bottom
     they'd cover the location line, so on mobile they flow after the copy. */
  .v4-hero{min-height:0}
  .v4-hero__content{min-height:0;align-items:flex-start}
  .v4-hero__copy{padding:67px 0 44px}
  .v4-hero__trust{position:relative}
  .v4-hero__body{max-width:490px;font-size:16px}
  .v4-hero__trust-inner{padding-top:9px;padding-bottom:9px;justify-content:flex-start;flex-wrap:wrap}
  .v4-hero__trust-inner>i{display:none}
  .v4-hero__trust-inner>span{margin-right:14px;font-size:10px}
  .v4-pref-grid{grid-template-columns:repeat(2,1fr);padding:10px;border-radius:20px}
  .v4-process-heading{flex-direction:column;align-items:flex-start;gap:22px}
  .v4-explorer-panels{padding:12px}
  .v4-care-layout{grid-template-columns:1fr;gap:43px}
  .v4-care-visual{min-height:340px;max-width:550px}
  .v4-learn-section{padding:72px 0}
  .v4-learn-shell{padding:34px 28px;border-radius:24px}
  .v4-learn-layout{grid-template-columns:1fr;gap:36px}
  .v4-learn-cards{max-width:580px}
  .v4-trust-statement{grid-template-columns:1fr;gap:22px;padding:32px 26px}
  .v4-trust-bar{grid-template-columns:1fr;padding:14px}
  .v4-upcoming{flex-wrap:wrap}
  .v4-upcoming>div{flex-basis:calc(100% - 37px)}
  .v4-upcoming__cta{margin-left:37px}
}
@media (max-width:560px){
  .v4-hero__title{font-size:3.05rem}
  .v4-hero__copy{padding-top:47px}
  .v4-hero__body{font-size:15px}
  .v4-hero__actions{margin-top:24px}
  .v4-pref-grid{grid-template-columns:1fr}
  .v4-pref-card{min-height:124px}
  .v4-process-grid{grid-template-columns:1fr}
  .v4-process-card{display:grid;grid-template-columns:120px 1fr}
  .v4-process-card>img{width:120px;height:100%;min-height:178px}
  .v4-process-card__body{min-height:0;padding:18px}
  .v4-process-card h3{margin:12px 0 7px}
  .v4-category-summary-grid{grid-template-columns:1fr}
  .v4-care-visual{min-height:300px}
  .v4-care-visual__card--one{top:46px;left:24px}
  .v4-care-visual__card--two{right:24px;bottom:43px}
  .v4-learn-shell{padding:30px 21px}
  .v4-learn-cards{grid-template-columns:1fr}
  .v4-learn-card:nth-child(2),.v4-learn-card:nth-child(2):hover{transform:none}
  .v4-trust-statement h2{font-size:2.25rem}
  .v4-trust-role{font-size:14px}
}

@media (max-width:380px){
  .v4-process-card{grid-template-columns:92px 1fr}
  .v4-process-card>img{width:92px}
}

/* Tap targets (see v4-base.css for buttons, links and card CTAs). */
.v4-tab{min-height:44px}

@media (prefers-reduced-motion:no-preference){
  .v4-hero__copy{animation:v4-enter 620ms var(--v4-ease) backwards}
  .v4-pref-card{animation:v4-rise 450ms var(--v4-ease) backwards}
  .v4-pref-card:nth-child(2){animation-delay:35ms}
  .v4-pref-card:nth-child(3){animation-delay:70ms}
  .v4-pref-card:nth-child(4){animation-delay:105ms}
}
@keyframes v4-enter{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
@keyframes v4-rise{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:translateY(0)}}
@media (prefers-reduced-motion:reduce){
  .v4-tab,.v4-pref-card,.v4-category-summary,.v4-learn-card{transition:none}
}

/* ---------- header category menu (frozen header): trigger styled like its sibling links ---------- */
#nav .nav-links .nav-cat>summary{font-family:var(--display);font-size:12.5px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);transition:color .2s}
#nav .nav-links .nav-cat>summary:hover,#nav .nav-links .nav-cat[open]>summary{color:var(--cream)}
#mobile .nav-cat--mobile>summary{display:flex;padding:12px 0;border-bottom:1px solid var(--line);font-family:var(--display);font-size:14px;letter-spacing:.12em;text-transform:uppercase;color:var(--cream)}
/* Between the hamburger breakpoint (1000px) and 1240px: compact the frozen nav so it stays on one line
   (it used to wrap its labels; the one-word "Categorías" cannot wrap). */
@media (min-width:1001px) and (max-width:1240px){#nav .brand{font-size:15px;letter-spacing:.09em;gap:10px}#nav .brand .mk{height:22px}#nav .nav-links{gap:18px}#nav .nav-links a,#nav .nav-links .nav-cat>summary,#nav .nav-cta .login{letter-spacing:.08em}#nav .nav-cta{gap:14px}#nav .nav-cta .btn-nav-cta{padding:11px 18px;letter-spacing:.08em}}
@media (min-width:1001px) and (max-width:1040px){#nav .nav-links{gap:14px}#nav .nav-links a,#nav .nav-links .nav-cat>summary,#nav .nav-cta .login{letter-spacing:.05em}#nav .nav-cta{gap:12px}}
/* Phones: at 320px (ES) the frozen header's menu button sat 16px off-screen (pre-existing). At <=360px the
   header CTA pill yields, as on the inner pages -- "Empieza" is in the menu panel and the sticky CTA bar. */
@media (max-width:360px){#nav .btn-nav-cta{display:none}}