:root {
  --blue:#0814f2;
  --deep:#0714ba;
  --navy:#0b1464;
  --cyan:#00d1db;
  --soft:#e4edff;
  --white-line:#ffffff80;
  --ink:#121c43;
  --muted:#4c5c7c;
  --summer:linear-gradient(90deg,#fbb03b 0%,#f15a24 50%,#fa146b 100%);
  --winter:linear-gradient(90deg,#0690fb 0%,#05a8ff 50%,#02b9f8 100%);
  --nav-height:84px;
  color-scheme:light;
}
* {box-sizing:border-box}
html {scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-height) + 16px)}
body {margin:0;background:#f7f9fd;color:var(--ink);font:500 17px/1.45 Barlow,Arial,sans-serif}
a {color:inherit;text-decoration:none}
a,button,input {-webkit-tap-highlight-color:transparent}
button,input {font:inherit}
button {cursor:pointer}
[hidden] {display:none!important}
:focus-visible {outline:3px solid #2d52d4;outline-offset:4px}
header :focus-visible,.intro :focus-visible,.catalog-content :focus-visible,footer :focus-visible {outline-color:white}
.wrap {width:min(1184px,calc(100% - 96px));margin-inline:auto}
.skip,.sr-only {position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skip:focus {width:auto;height:auto;clip-path:none;z-index:10;background:var(--navy);color:white;padding:12px}
header {position:fixed;z-index:5;inset:0 0 auto;color:white;transition:background-color .22s}
header.scrolled,header.menu-open {background:var(--navy)}
.nav {display:flex;min-height:var(--nav-height);justify-content:space-between;align-items:center;gap:20px}
.nav img {display:block;max-width:100%;height:auto}
nav {display:flex;gap:26px;font-weight:600}
.nav-panel {display:flex;align-items:center;gap:24px}
.nav-toggle {display:none}
.nav-panel .social-links a {width:34px;height:34px;border:0}
.nav-panel .social-links a:hover {color:var(--cyan)}
nav a:hover,footer a:hover {color:var(--cyan)}
.button {display:inline-flex;align-items:center;justify-content:center;gap:12px;border-radius:99px;padding:10px 19px;font-weight:700;width:max-content;transition:background-color .2s,color .2s}
.outline {border:2px solid #ffffff88}
.outline:hover {background:white;color:var(--deep)}
.primary {background:var(--cyan);color:#061477}
.primary:hover {background:white}
.intro {
  position:relative;
  isolation:isolate;
  overflow:hidden;
  min-height:clamp(510px,48vw,635px);
  display:grid;
  align-items:center;
  padding:calc(var(--nav-height) + 42px) 0 68px;
  color:white;
}
.intro::before {
  content:"";
  position:absolute;
  z-index:-1;
  inset:-10px -10px 0;
  background:linear-gradient(90deg,#080d4db8 0%,#080d4d5c 43%,#080d4d10 100%),url("assets/hero-3c-profundidad.webp") right center / cover no-repeat,var(--navy);
  mask-image:linear-gradient(#000 76%,transparent 100%);
}
.hero-button {margin-top:23px;border:2px solid var(--white-line);color:white;background:transparent}
.hero-button:hover {border-color:white;background:#ffffff13}
.hero-arrow {animation:arrow-bounce 1.65s ease-in-out infinite}
@keyframes arrow-bounce {0%,55%,100%{transform:translateY(0)} 72%{transform:translateY(4px)} 85%{transform:translateY(1px)}}
h1,h2,h3,p {margin:0}
h1 {font-size:clamp(3rem,6.3vw,5.625rem);font-weight:600;line-height:.89;letter-spacing:-.046em;margin:0 0 22px}
h1 em {color:var(--cyan);font-style:normal}
.intro p {font-size:clamp(1rem,2vw,1.25rem);max-width:420px;color:var(--soft)}
.catalog {background:var(--blue);color:white}
.catalog-content {padding-block:35px 38px}
.catalog-top,.toolbar {display:flex;align-items:center;justify-content:space-between;gap:16px}
h2 {font-size:clamp(1.7rem,4vw,2.75rem);font-weight:600;line-height:1.1;letter-spacing:-.035em}
.catalog-top h2 {font-weight:600;font-size:clamp(1.4rem,3vw,2rem);margin-bottom:7px}
.catalog-top p,.fineprint,.empty {color:var(--soft);font-size:.94rem}
.seasons,.filters {display:flex;gap:10px}
.season {padding:8px 15px;border:2px solid var(--white-line);border-radius:99px;background:transparent;color:white;white-space:nowrap;font-size:1.1rem;font-weight:700}
.season[aria-selected="true"] {border-color:transparent}
.season.verano[aria-selected="true"] {background:var(--summer) border-box}
.season.invierno[aria-selected="true"] {background:var(--winter) border-box;color:white}
.toolbar {padding:16px 0;margin-top:10px}
.filters {flex-wrap:wrap}
.filter {border:2px solid var(--white-line);border-radius:99px;padding:6px 13px;background:transparent;color:white;font-size:.91rem}
.filter:hover {border-color:white}
.filter[aria-pressed="true"] {background:var(--cyan);color:#061477;border-color:var(--cyan);font-weight:700}
.search {border:2px solid var(--white-line);border-radius:99px;padding:7px 12px;display:flex;gap:8px;align-items:center;color:white}
.search:focus-within {border-color:white}
.search input {width:170px;min-width:0;background:transparent;border:0;color:white;outline:none!important;font-size:.93rem}
.search input::placeholder {color:var(--soft)}
.grid {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.promo {background:#1320f1;border-radius:16px;padding:10px 10px 15px;text-align:center;min-height:162px;display:flex;flex-direction:column;align-items:center;box-shadow:0 3px 9px #02075438;transition:transform .2s,box-shadow .2s,background-color .2s}
@media (hover:hover) {
  .promo:hover {transform:translateY(-3px);background:#202cf5;box-shadow:0 6px 13px #02075455}
}
.promo img {display:block;width:98px;height:98px;object-fit:contain;margin-bottom:5px}
.promo h3 {font-size:1.03rem;font-weight:700;line-height:1.15;margin-bottom:4px}
.price {color:white;font-size:1.7rem;font-weight:600;line-height:1.12;margin-top:auto;padding-top:6px}
.price-times {color:var(--cyan)}
.price-detail {margin-top:4px;color:var(--soft);font-size:.85rem;font-weight:500}
.empty {grid-column:1/-1;padding:22px 0}
.fineprint {font-size:.86rem;margin-top:15px}
.section {margin-top:58px}
.services {display:grid;grid-template-columns:repeat(3,1fr);gap:25px;margin-top:20px}
.service-title-line {display:inline}
#servicios h2,.services h3,.location h2,.location-label,.social h2 {color:var(--deep)}
.services img {display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;border-radius:14px;margin-bottom:14px}
.services h3 {font-size:1.32rem;font-weight:600;margin-bottom:4px}
.services p,.social p {color:var(--muted)}

#social-title a:hover {text-decoration:underline;text-underline-offset:5px}
#social-title a span {font:600 .63em system-ui,sans-serif;vertical-align:middle}
.social-controls {display:flex;align-items:center;gap:8px;margin-top:18px;color:var(--deep)}
.social-controls h3 {margin-right:auto;font-size:1.12rem;font-weight:600}
.social-controls button {min-width:40px;min-height:38px;color:var(--deep);border-color:#94a7d4}
.social-controls button:hover {border-color:var(--deep)}
.social-strip {position:relative;display:grid;grid-auto-flow:column;grid-auto-columns:23.5%;gap:12px;overflow-x:auto;scroll-behavior:auto;margin-top:12px;padding-bottom:9px;scrollbar-color:#9baad3 #eef2f9;scrollbar-width:thin}
.social-strip a {display:grid;gap:8px;align-content:start;min-width:0}
.social-strip a:focus-visible {outline-offset:-3px}
.social-strip a:hover strong {color:var(--deep);text-decoration:underline}
.social-strip :is(img,video) {display:block;width:100%;aspect-ratio:4/5;object-fit:cover;object-position:center;border-radius:12px;background:#e2e8f5}
.social-strip strong {font-size:1.03rem;font-weight:600}
@media(hover:hover) {
  .services img {transition:transform .24s ease,filter .24s ease}
  .services article:hover img {transform:translateY(-3px) scale(1.015);filter:brightness(1.04)}
}
.location {display:grid;grid-template-columns:1fr 1.3fr;gap:24px;width:min(1184px,calc(100% - 96px));margin-inline:auto}
.location-copy.wrap {width:100%}
.location-label {font-size:.9rem;font-weight:600;color:var(--deep)}
.location h2 {margin:5px 0 12px}
.location address {font-style:normal;color:var(--muted)}
.phone {display:block;width:max-content;margin:8px 0 15px;font-weight:700}
.phone:hover,.delivery a:hover {text-decoration:underline}
.location iframe {display:block;border:0;width:100%;height:100%;min-height:300px;border-radius:12px}
.delivery {margin-top:20px;display:flex;flex-wrap:wrap;gap:5px 14px}
.delivery h3 {width:100%;font-size:1.05rem;font-weight:600;color:var(--deep)}
.delivery a {color:var(--deep);font-size:.95rem}
footer {margin-top:54px;background:var(--blue);color:white}
.footer-inner {display:grid;gap:20px;padding:28px 0 84px;font-size:.9rem}
.footer-logo {width:max-content}
.footer-logo img {display:block;width:155px;height:auto}
.footer-nav {display:flex;flex-wrap:wrap;gap:8px 24px}
.footer-legal {display:flex;flex-wrap:wrap;gap:8px 24px;color:var(--soft)}
.footer-legal p {max-width:620px}
@media(prefers-reduced-motion:reduce) {
  .social-strip {scroll-snap-type:x mandatory}
  .social-strip a {scroll-snap-align:start}
}
.privacy-note summary {cursor:pointer;width:max-content}
.privacy-note p {max-width:640px;margin-top:8px}
@media(max-width:900px) {
  .nav-panel {gap:14px}
  nav {gap:13px}
  .nav-panel .social-links {gap:2px}
  .wrap {width:calc(100% - 52px)}
  .catalog-top {align-items:flex-start;flex-direction:column}
  .location {width:calc(100% - 52px)}
}
@media(max-width:760px) {
  .nav-toggle {display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:transparent;color:white}
  .nav-panel {display:none;position:absolute;inset:100% 0 auto;flex-direction:column;align-items:flex-start;gap:16px;background:var(--navy);padding:8px 26px 22px}
  header.menu-open .nav-panel {display:flex}
  .nav-panel nav {display:grid;gap:0;width:100%;font-size:1rem}
  .nav-panel nav a {padding:9px 0}
  .nav-panel .social-links {gap:10px}
}
@media(max-width:650px) {
  :root {--nav-height:68px}
  .wrap {width:calc(100% - 32px)}
  .nav {gap:10px}
  .nav img {width:clamp(104px,32vw,128px)}
  nav {gap:10px;font-size:.83rem}
  .intro {min-height:435px;padding:calc(var(--nav-height) + 40px) 0 51px}
  .intro::before {background-position:center,64% center;filter:blur(5px) brightness(.83);mask-image:linear-gradient(transparent -9%,#000 18%,#000 51%,transparent 100%)}
  .intro p {max-width:315px}
  h1 {font-size:clamp(2.565rem,10.62vw,5.04rem);margin-bottom:16px}
  .catalog-content {padding-block:26px}
  .catalog-top {gap:12px}
  .seasons {width:100%;gap:6px}
  .season {flex:1;padding:8px 4px;font-size:clamp(.78rem,3.65vw,1.04rem)}
  .toolbar {align-items:stretch;flex-direction:column-reverse;gap:10px;padding:12px 0;margin-top:12px}
  .search input {width:100%}
  .grid {grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .promo {padding-inline:6px;min-height:139px}
  .promo img {width:82px;height:82px}
  .promo h3 {font-size:.94rem}
  .price {font-size:1.47rem}
  .section {margin-top:38px}
  .service-title-line {display:block}
  .services {grid-template-columns:1fr;gap:23px}
  .services img {aspect-ratio:16/10;margin-bottom:10px}
  .social-strip {grid-auto-columns:86%}
  .social-controls {gap:5px}
  .social-controls h3 {font-size:1rem}
  .social-controls button {min-width:34px;padding-inline:9px}
  .location {width:100%;grid-template-columns:1fr}
  .location-copy.wrap {width:calc(100% - 32px);text-align:center}
  .location-actions {display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px 16px;margin-top:14px}
  .location-actions .phone {margin:0}
  .location .delivery {justify-content:center;margin-top:16px}
  .footer-inner {gap:16px}
  .footer-nav {gap:8px 15px}
  .location iframe {height:260px;min-height:0;border-radius:0}
  footer {margin-top:0}
}
@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after {scroll-behavior:auto!important;transition:none!important;animation:none!important}
}

.brand-icon {display:block;width:21px;height:21px;flex:none;fill:currentColor}
.social-links {display:flex;gap:10px;align-items:center}
.social-links a {display:grid;place-items:center;width:42px;height:42px;border:2px solid currentColor;border-radius:50%}
.social .social-links {color:var(--deep)}
.social .social-links a:hover {background:#eaf0ff}
.delivery-widget {position:fixed;z-index:6;right:max(50px,env(safe-area-inset-right));bottom:calc(50px + env(safe-area-inset-bottom));color:white}
.delivery-widget summary {position:relative;display:grid;place-items:center;width:56px;height:56px;border:0;border-radius:50%;cursor:pointer;background:#3bc45d;list-style:none;box-shadow:0 16px 24px #49687e29;transition:transform .2s,box-shadow .2s}
.delivery-widget summary::-webkit-details-marker {display:none}
.delivery-widget summary .brand-icon {width:33px;height:34px}
.delivery-widget summary:hover,.delivery-widget summary:focus-visible {transform:translateY(-2px) scale(1.06);box-shadow:0 10px 30px #3bc45d40}
.delivery-tooltip {position:absolute;right:calc(100% + 10px);white-space:nowrap;background:var(--navy);color:white;border-radius:99px;padding:6px 11px;font-size:.85rem;opacity:0;visibility:hidden}
.delivery-widget summary:hover .delivery-tooltip,.delivery-widget summary:focus-visible .delivery-tooltip {opacity:1;visibility:visible}
@media(max-width:760px) {
  .delivery-widget {right:max(30px,env(safe-area-inset-right));bottom:calc(30px + env(safe-area-inset-bottom))}
}
.delivery-options {position:absolute;right:0;bottom:calc(100% + 8px);width:230px;max-width:calc(100vw - 32px);background:white;color:var(--ink);border:2px solid #b9c9ef;border-radius:14px;padding:6px}
.delivery-options a {display:block;padding:10px;border-radius:8px;font-weight:600}
.delivery-options a:hover {background:#ecf7f1}
.delivery-options a + a {border-top:1px solid #e1e8ed}

@media (prefers-reduced-motion: no-preference) {
  .promo.reveal {animation:promo-in .42s ease-out;animation-delay:var(--reveal-delay,0ms)}
}
@media (max-width: 760px) {
  .promo.reveal {animation-delay:0ms}
}
@keyframes promo-in {from{translate:0 4px} to{translate:0 0}}