/* ==========================================================================
   Cabecera, menú móvil, barra de acción, pie, cabecera de página y franja de prueba
   ========================================================================== */

/* --- Cabecera fija. En la home empieza transparente y alta; al bajar se compacta --- */
.hdr { --hdr-h: var(--header-h); --logo-h: 36px;
  position: fixed; z-index: 100; top: 0; left: 0; right: 0; height: var(--hdr-h); color: var(--bone);
  background: rgba(17, 21, 24, .9); -webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3);
  border-bottom: var(--rule-dark);
  transition: height .6s var(--ease-out), background-color .5s, border-color .5s; }
main { padding-top: var(--header-h); }
.is-home main { padding-top: 0; }
@media (min-width: 1000px) { .hdr { --logo-h: 34px; } }
@media (min-width: 1000px) {
  .is-home .hdr:not(.is-scrolled) { --hdr-h: 104px; --logo-h: 46px; }
}
.is-home .hdr:not(.is-scrolled) { background: transparent; border-color: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
body.menu-open .hdr { --hdr-h: var(--header-h) !important; --logo-h: 36px !important; background: var(--ink) !important; }
.hdr__progress { position: absolute; left: 0; bottom: -1px; height: 1px; width: 100%; background: var(--bronze);
  transform: scaleX(var(--progress, 0)); transform-origin: left; }
.hdr__in { position: relative; display: flex; align-items: center; gap: var(--s4); height: 100%;
  width: min(100% - 2 * var(--gutter), 1440px); margin-inline: auto; }
.hdr__logo { flex: none; display: block; padding: 8px 0; }
.hdr__logo img { width: auto; height: var(--logo-h); transition: height .6s var(--ease-out); }
.hdr__nav { margin-left: auto; display: none; }
.hdr__nav ul { display: flex; gap: clamp(20px, 2.2vw, 36px); }
.hdr__link { position: relative; display: block; padding: 12px 0; text-decoration: none; overflow: hidden;
  font: 500 .9375rem/1.2 var(--text); letter-spacing: .005em; color: rgba(245, 242, 236, .82); }
/* Texto que «rueda» al pasar: sale hacia arriba y entra su copia desde abajo */
.hdr__lbl { position: relative; display: block; transition: transform .55s var(--ease-out); }
.hdr__lbl::after { content: attr(data-text); position: absolute; left: 0; top: 100%; padding-top: 12px; color: var(--bone); }
.hdr__link:hover .hdr__lbl { transform: translateY(calc(-100% - 12px)); }
.hdr__link[aria-current] { color: var(--bone); }
.hdr__link[aria-current]::before { content: ""; position: absolute; left: 50%; bottom: 2px; width: 5px; height: 5px; margin-left: -2.5px;
  background: var(--bronze); transform: rotate(45deg); }
.hdr__end { display: flex; align-items: center; gap: var(--s3); margin-left: auto; }
.hdr__nav + .hdr__end { margin-left: 0; }
@media (max-width: 999.98px) { .hdr__nav + .hdr__end { margin-left: auto; } }
.hdr__tel { display: none; align-items: center; gap: 8px; min-height: 44px; text-decoration: none;
  font: 500 .875rem/1 var(--text); color: rgba(245, 242, 236, .72); font-variant-numeric: tabular-nums; transition: color .3s; }
.hdr__tel .ico { width: 16px; height: 16px; color: var(--bronze-hi); }
.hdr__tel:hover { color: var(--bone); }
.hdr__cta { display: none; min-height: 48px; padding: 0 20px; }
.hdr__cta .ico { width: 16px; height: 16px; }
@media (min-width: 1000px) {
  .hdr__nav { display: block; }
  .hdr__cta { display: inline-flex; }
}
@media (min-width: 1280px) { .hdr__tel { display: inline-flex; } }

/* Hamburguesa → X */
.burger { position: relative; z-index: 2; display: grid; place-items: center; width: 48px; height: 48px; margin-right: -12px;
  padding: 0; border: 0; background: transparent; color: var(--bone); cursor: pointer; }
.burger__bar { position: absolute; left: 12px; width: 24px; height: 1.5px; background: currentColor;
  transition: transform .45s var(--ease-out), opacity .2s, width .4s var(--ease-out); }
.burger__bar--top { top: 17px; }
.burger__bar--mid { top: 23.5px; width: 14px; left: 22px; }
.burger__bar--bot { top: 30px; }
.burger[aria-expanded="true"] .burger__bar--top { transform: translateY(6.5px) rotate(45deg); }
.burger[aria-expanded="true"] .burger__bar--mid { opacity: 0; transform: translateX(10px); }
.burger[aria-expanded="true"] .burger__bar--bot { transform: translateY(-6.5px) rotate(-45deg); }
.burger--nojs { display: none; }
.no-js .burger[data-burger] { display: none; }
.no-js .burger--nojs { display: grid; }
@media (min-width: 1000px) { .burger { display: none !important; } }

/* --- Menú móvil --- */
.menu { position: fixed; z-index: 90; inset: var(--header-h) 0 0 0; display: none; flex-direction: column;
  overflow-y: auto; overscroll-behavior: contain; background: var(--ink); color: var(--bone);
  padding: var(--s3) var(--gutter) calc(var(--s3) + env(safe-area-inset-bottom, 0px)); }
.menu.is-open, .no-js .menu:target { display: flex; }
.menu__close { display: none; }
.no-js .menu__close { display: block; align-self: flex-end; padding: 12px 0; color: var(--bronze-hi); }
.menu__list li { border-bottom: var(--rule-dark); }
.menu__list a { display: flex; align-items: baseline; gap: var(--s2); min-height: 56px; padding: 14px 0; text-decoration: none;
  font: 700 clamp(1.4rem, 7vw, 2.1rem)/1 var(--display); font-stretch: 122%; letter-spacing: -.015em; text-transform: uppercase; }
.menu__list small { font: 600 var(--fs-micro)/1 var(--text); letter-spacing: .12em; color: var(--bronze-hi); font-variant-numeric: tabular-nums; }
.menu__list a[aria-current] { color: var(--bronze-hi); }
.menu__list li:last-child a { color: var(--bronze-hi); }
.menu__foot { margin-top: auto; padding-top: var(--s4); display: grid; gap: 4px; }
.menu__foot a { display: flex; align-items: center; gap: 12px; min-height: 44px; text-decoration: none; color: var(--muted-dark); }
.menu__foot .ico { width: 20px; height: 20px; color: var(--bronze-hi); }
@media (prefers-reduced-motion: no-preference) {
  .menu.is-open .menu__list li { animation: menu-in .6s var(--ease-out) both; animation-delay: calc(var(--i) * 45ms); }
}
@keyframes menu-in { from { opacity: 0; transform: translateY(16px); } }
body.menu-open { overflow: hidden; }
body.menu-open .abar { display: none; }
@media (min-width: 1000px) { .menu { display: none !important; } }

/* --- Barra de acción inferior (móvil) --- */
.abar { position: fixed; z-index: 95; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: 1fr 1fr 1.6fr;
  height: var(--abar-h); padding-bottom: env(safe-area-inset-bottom, 0px); background: var(--ink); border-top: var(--rule-dark); }
.abar__btn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 44px;
  text-decoration: none; color: var(--bone); font: 600 .6875rem/1 var(--text); letter-spacing: .12em; text-transform: uppercase; }
.abar__btn + .abar__btn { border-left: var(--rule-dark); }
.abar__btn .ico { width: 20px; height: 20px; color: var(--bronze-hi); }
.abar__btn--main { flex-direction: row; gap: 10px; background: var(--bronze); color: var(--ink);
  font: 650 .78rem/1 var(--display); font-stretch: 112%; letter-spacing: .08em; }
.abar__btn--main .ico { color: var(--ink); width: 16px; }
@media (min-width: 900px) { .abar { display: none; } }

/* --- Pie --- */
.ftr { position: relative; background: var(--ink); color: var(--muted-dark); padding: var(--s10) 0 var(--s4); border-top: var(--rule-dark); }
.ftr a { text-decoration: none; transition: color .3s; }
.ftr a:hover { color: var(--bone); }
.ftr__main { row-gap: var(--s5); padding-bottom: var(--s6); }
.ftr__brand img { width: min(300px, 72vw); height: auto; }
.ftr__about { margin-top: var(--s3); max-width: 36ch; font-size: var(--fs-small); line-height: 1.6; }
.ftr__h { margin-bottom: var(--s2); font: 600 var(--fs-micro)/1 var(--text); letter-spacing: .18em; text-transform: uppercase; color: var(--bronze-hi); }
.ftr__col { font-size: .9375rem; line-height: 1.7; overflow-wrap: anywhere; }
.ftr__col p + p { margin-top: var(--s1); }
.ftr__big { font: 600 1.0625rem/1.35 var(--display); font-stretch: 105%; color: var(--bone); }
.ftr__hours li { display: flex; justify-content: space-between; gap: var(--s2); padding: 6px 0; border-bottom: var(--rule-dark); }
.ftr__hours b { color: var(--bone); font-weight: 500; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ftr__links li a { display: inline-block; padding: 4px 0; }
.ftr__base { row-gap: var(--s2); padding-top: var(--s3); border-top: var(--rule-dark); font-size: var(--fs-micro); line-height: 1.6; color: rgba(245, 242, 236, .6); }
.ftr__legal { display: flex; flex-wrap: wrap; gap: 4px var(--s3); }
.ftr__legal a { display: inline-flex; align-items: center; min-height: 32px; }
.ftr__coords { font-variant-numeric: tabular-nums; letter-spacing: .12em; text-transform: uppercase; }
@media (max-width: 899px) {
  .ftr { padding-top: var(--s8); }
  .ftr__pages { display: none; }
  .ftr__main { grid-template-columns: 1fr 1fr; column-gap: var(--s2); row-gap: var(--s4); padding-bottom: var(--s4); }
  .ftr__brand, .ftr__hourscol { grid-column: 1 / -1; }
  .ftr__main > .ftr__col:not(.ftr__hourscol) { grid-column: span 1; }
  .ftr__col { font-size: .875rem; }
  .ftr__about { display: none; }
  .ftr__brand img { width: 200px; }
  .ftr__hours li { padding: 4px 0; }
  .ftr__note { font-size: .6875rem; }
  .ftr__base { grid-template-columns: auto 1fr; row-gap: var(--s1); }
  .ftr__note { grid-column: 1 / -1; }
  .ftr__coords { grid-column: 1; align-self: center; }
  .ftr__legal { grid-column: 2; justify-content: flex-end; }
}
@media (min-width: 900px) {
  .ftr__brand { grid-column: 1 / span 4; }
  .ftr__visit { grid-column: 6 / span 2; }
  .ftr__contact { grid-column: 8 / span 2; }
  .ftr__hourscol { grid-column: 10 / span 3; }
  .ftr__pages { grid-column: 6 / span 7; }
  .ftr__pages ul { display: flex; flex-wrap: wrap; gap: 0 var(--s4); }
  .ftr__base { align-items: center; }
  .ftr__note { grid-column: 1 / span 6; }
  .ftr__coords { grid-column: 7 / span 2; }
  .ftr__legal { grid-column: 9 / span 4; justify-content: flex-end; }
}


/* Cabecera de páginas interiores */
.phero { position: relative; isolation: isolate; display: grid; background: var(--ink); color: var(--bone); overflow: hidden; }
.phero__media { position: relative; height: 240px; }
.phero__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(17, 21, 24, .15), rgba(17, 21, 24, .55) 70%, var(--ink)); }
.phero__img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.08) brightness(.8); }
.phero__body { position: relative; z-index: 1; padding: 0 var(--gutter) clamp(40px, 6vw, 72px); margin-top: -56px; }
.phero__title { font-size: clamp(1.75rem, 7.4vw, 4.6rem); }
@media (min-width: 900px) { .phero__title { max-width: 18ch; } }
.phero__lead { margin-top: 18px; max-width: 52ch; color: rgba(245, 242, 236, .8); font-size: 1.08rem; }
.phero__bar { position: absolute; left: 0; bottom: 0; height: 6px; width: 62%; background: var(--bronze); }
@media (prefers-reduced-motion: no-preference) {
  .phero__bar { animation: bar-in 1.1s .2s var(--ease) both; transform-origin: left; }
  .phero__title { animation: rise .9s var(--ease) both; }
}
@keyframes bar-in { from { transform: scaleX(0); } }
@keyframes rise { from { opacity: 0; transform: translateY(24px); } }
@media (min-width: 900px) {
  .phero { grid-template-columns: 1fr 1fr; min-height: min(560px, 70vh); }
  .phero__media { grid-column: 2; grid-row: 1; height: auto;
    clip-path: polygon(18% 0, 100% 0, 100% 100%, 0 100%); }
  .phero__media::after { background: linear-gradient(90deg, rgba(17, 21, 24, .55), rgba(17, 21, 24, .1) 50%); }
  .phero__img { position: absolute; inset: 0; }  /* la foto no estira la cabecera: manda min-height */
  .phero__body { grid-column: 1; grid-row: 1; align-self: end; margin: 0; padding: 72px 0 80px var(--gutter);
    padding-left: max(var(--gutter), calc((100vw - var(--max)) / 2)); }
}

/* Franja de prueba gratis (bronce) */
.trial { position: relative; isolation: isolate; overflow: hidden; background: var(--bronze); color: var(--ink);
  padding: clamp(56px, 8vw, 112px) var(--gutter); }
.trial__in { position: relative; z-index: 1; max-width: var(--max); margin-inline: auto; }
.trial__kicker { font: 700 .86rem/1 var(--display); font-stretch: 62%; letter-spacing: .22em; text-transform: uppercase; margin-bottom: 18px; }
.trial__title { max-width: 18ch; font-size: clamp(1.8rem, 5.2vw, 4.2rem); }
.trial__text { max-width: 52ch; margin-top: 18px; font-size: 1.1rem; }
.trial__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.trial__seven { position: absolute; z-index: 0; right: -.05em; bottom: -.28em; font: 900 clamp(14rem, 42vw, 40rem)/1 var(--display);
  font-stretch: 150%; color: rgba(17, 21, 24, .09); pointer-events: none; }
@media (max-width: 359px) { .abar__btn--main { font-size: .6875rem; letter-spacing: .04em; gap: 6px; } }