/* CARVAL Diseño y Estética — global styles.
   Extracted from the Claude Design source (design-src/index.dc.html <helmet>).
   Component-level styling stays inline on the elements, as authored. */

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#0A0A0F;color:#F4F3F1;font-family:'Jost',system-ui,sans-serif;overflow-x:clip;-webkit-font-smoothing:antialiased}
::selection{background:#C9A96E;color:#0A0A0F}
a{color:inherit}

[data-reveal]{opacity:1;transform:none}
[data-reveal].cv-hidden{opacity:0;transform:translateY(34px)}
[data-reveal].cv-shown{opacity:1;transform:none;transition:opacity .85s cubic-bezier(.22,1,.36,1),transform .85s cubic-bezier(.22,1,.36,1)}
@media (prefers-reduced-motion:reduce){[data-reveal],[data-reveal].cv-hidden{opacity:1!important;transform:none!important}}

@keyframes cvScan{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes cvLine{0%{left:-4%;opacity:0}12%{opacity:1}88%{opacity:1}100%{left:104%;opacity:0}}
@keyframes cvDraw{to{stroke-dashoffset:0}}
@keyframes cvLetterDraw{from{stroke-dashoffset:900}to{stroke-dashoffset:0}}
@keyframes cvLetterFill{from{fill:rgba(201,169,110,0);stroke:#3fdaca}to{fill:#C9A96E;stroke:rgba(201,169,110,.85)}}
@keyframes cvRule{to{stroke-dashoffset:0}}
@keyframes cvTick{0%{opacity:0}100%{opacity:1}}
@keyframes cvLtrIn{from{opacity:0;transform:translateY(14px) scaleY(.94)}to{opacity:1;transform:none}}
@keyframes cvLtrFill{to{color:#C9A96E;-webkit-text-stroke-color:transparent}}
@keyframes cvRuleX{to{transform:scaleX(1)}}
@keyframes cvSub{0%,52%{opacity:0;transform:translateY(12px);letter-spacing:.5em}100%{opacity:1;transform:none;letter-spacing:.34em}}
@keyframes cvPulse{0%{box-shadow:0 0 0 0 rgba(37,211,102,.5)}70%{box-shadow:0 0 0 18px rgba(37,211,102,0)}100%{box-shadow:0 0 0 0 rgba(37,211,102,0)}}
@keyframes cvSpin{to{transform:rotate(360deg)}}
@keyframes cvLogoIn{0%{opacity:0;transform:scale(.82);filter:blur(7px)}100%{opacity:1;transform:scale(1);filter:blur(0)}}
@keyframes cvFloatY{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
@keyframes cvGlow{0%,100%{opacity:.45}50%{opacity:.85}}
@keyframes cvLbFade{from{opacity:0}to{opacity:1}}
@keyframes cvLbRise{from{opacity:0;transform:translateY(26px) scale(.97)}to{opacity:1;transform:none}}
@keyframes cvCertZoom{from{opacity:0;transform:scale(.93)}to{opacity:1;transform:none}}
@keyframes cvPinPulse{0%{transform:translate(-50%,-50%) scale(.5);opacity:.65}100%{transform:translate(-50%,-50%) scale(2.8);opacity:0}}
@keyframes cvPinDrop{0%{transform:translateY(-14px);opacity:0}60%{transform:translateY(2px);opacity:1}100%{transform:translateY(0)}}
@keyframes cvMapSweep{0%{transform:translateX(-30%)}100%{transform:translateX(130%)}}
@keyframes cvShimmer{0%{background-position:-120% 0}100%{background-position:220% 0}}
@keyframes cvWaRing{0%{transform:scale(1);opacity:.55}100%{transform:scale(1.8);opacity:0}}
@keyframes cvStatGlow{0%,100%{text-shadow:0 0 0 rgba(201,169,110,0)}50%{text-shadow:0 6px 30px rgba(201,169,110,.28)}}
@keyframes cvAurora{0%{transform:translate(-6%,-4%) scale(1)}50%{transform:translate(6%,5%) scale(1.15)}100%{transform:translate(-6%,-4%) scale(1)}}
@keyframes cvAurora2{0%{transform:translate(5%,3%) scale(1.1)}50%{transform:translate(-5%,-5%) scale(1)}100%{transform:translate(5%,3%) scale(1.1)}}
@keyframes cvShine{0%{transform:translateX(-130%) skewX(-18deg)}100%{transform:translateX(330%) skewX(-18deg)}}
@keyframes cvBorderFlow{0%,100%{opacity:.5}50%{opacity:1}}

.cv-cert:hover .cv-cert-zoom{opacity:1 !important;transform:scale(1) !important}
.cv-cert:hover .cv-cert-veil{opacity:1 !important}
.cv-cert:hover .cv-cert-img img{transform:scale(1.06)}
.cv-cert:focus-visible{outline:none;box-shadow:0 0 0 2px rgba(201,169,110,.6),0 26px 60px -26px rgba(201,169,110,.55)}
.cv-card{position:relative;transition:transform .5s cubic-bezier(.22,1,.36,1),border-color .45s,box-shadow .45s,background .45s}
.cv-card:hover{transform:translateY(-6px);border-color:rgba(201,169,110,.5)!important;box-shadow:0 30px 60px -34px rgba(201,169,110,.45),inset 0 1px 0 rgba(255,255,255,.06)!important}
.cv-shine{position:relative;overflow:hidden}
.cv-shine::after{content:"";position:absolute;top:0;left:0;width:38%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);transform:translateX(-130%) skewX(-18deg);pointer-events:none}
.cv-shine:hover::after{animation:cvShine .9s cubic-bezier(.22,1,.36,1)}
.cv-glass{backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4)}

@media (max-width:820px){.cv-navlinks{display:none!important}.cv-burger{display:flex!important}.cv-navcta{display:none!important}}
@media (min-width:821px){.cv-mobile-menu{display:none!important}}
@media (max-width:980px){.cv-hero-accent{width:min(38vw,300px)!important;right:24px!important;opacity:.7!important}}
@media (max-width:600px){.cv-hero-accent{width:60vw!important;right:50%!important;top:38%!important;transform:translate(50%,-50%)!important;opacity:.22!important}}
@media (max-width:480px){.cv-cta-label{display:none!important} .cv-navcta{padding:11px 14px!important}}
@media (max-width:380px){.cv-brand-text{display:none!important}}
@media (max-width:760px){.cv-loc-grid{grid-template-columns:1fr!important}.cv-map{min-height:240px!important}}

.cv-wa-label{opacity:0;transform:translateX(8px);transition:opacity .4s,transform .4s}
@media (min-width:760px){.cv-wa-label{opacity:.9;transform:none}}
.cv-soc:hover .cv-soc-fill{transform:translateY(0)!important}

/* ——— Responsive global ——— */
@media (max-width:900px){
  .cv-stats-grid{grid-template-columns:repeat(2,1fr)!important;gap:36px 18px!important}
  .cv-about-grid{grid-template-columns:1fr!important;gap:48px!important}
  .cv-mat-grid{grid-template-columns:1fr!important}
  .cv-footer-grid{grid-template-columns:1fr!important;gap:40px!important}
}
@media (max-width:560px){
  .cv-sec{padding-left:18px!important;padding-right:18px!important}
  .cv-stats-grid{gap:30px 14px!important}
  .cv-gal-grid{grid-template-columns:1fr 1fr!important;gap:12px!important}
  .cv-hero-pad{padding-top:104px!important;padding-bottom:56px!important}
  .cv-hero-cta{width:100%!important}
  .cv-hero-cta>a{flex:1!important;justify-content:center!important}
}
@media (max-width:400px){
  .cv-gal-grid{grid-template-columns:1fr!important}
}

/* Performance: lighten heavy effects on small / touch screens */
@media (max-width:760px){
  .cv-aurora{filter:blur(34px)!important}
}
@media (hover:none){
  .cv-shine::after{display:none}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation-duration:.001ms!important;animation-delay:0ms!important}}

.leaflet-container{background:#111116!important;font-family:'Jost',sans-serif}
.leaflet-control-attribution{background:rgba(12,12,16,.7)!important;color:#8A8A93!important;font-size:9px!important;backdrop-filter:blur(4px)}
.leaflet-control-attribution a{color:#B9967A!important}
.leaflet-bar a{background:rgba(18,18,22,.9)!important;color:#E3C892!important;border-color:rgba(201,169,110,.25)!important}
.leaflet-bar a:hover{background:rgba(201,169,110,.18)!important}
.leaflet-popup-content-wrapper,.leaflet-popup-tip{background:#F4F3F1!important;color:#0A0A0F!important;box-shadow:0 10px 30px -10px rgba(0,0,0,.6)!important}
.leaflet-popup-content{margin:11px 15px!important;font-size:12.5px!important;line-height:1.45}

/* ——— Hover states the design expressed as `style-hover` attributes.
   The DSL applied these on pointer enter/leave; as plain CSS they are :hover rules. */
.cv-navcta:hover{background:#E3C892;box-shadow:0 10px 30px -10px rgba(201,169,110,.7);transform:translateY(-1px)}
.cv-burger:hover{border-color:rgba(201,169,110,.55);background:rgba(255,255,255,.06)}
.cv-hero-ghost:hover{background:rgba(201,169,110,.1);border-color:#C9A96E}
.cv-hero-solid:hover{background:#E3C892;box-shadow:0 14px 36px -12px rgba(201,169,110,.7);transform:translateY(-1px)}
.cv-svc-card:hover{border-color:rgba(201,169,110,.55)!important;box-shadow:0 22px 56px -24px rgba(201,169,110,.4)!important}
.cv-row:hover{border-color:rgba(201,169,110,.3)}
.cv-pillar:hover{border-color:rgba(201,169,110,.4)!important}
.cv-mat:hover{border-color:rgba(201,169,110,.5)!important;box-shadow:0 24px 60px -28px rgba(201,169,110,.4)!important}
.cv-tab:hover{border-color:rgba(201,169,110,.55);color:#E3C892}
.cv-gal-card:hover{border-color:rgba(201,169,110,.55)}
.cv-momento:hover{box-shadow:0 22px 50px -26px rgba(201,169,110,.5)}
.cv-cert:hover{box-shadow:0 26px 60px -26px rgba(201,169,110,.55);border-color:rgba(201,169,110,.55);transform:translateY(-4px)}
.cv-course:hover{border-color:rgba(201,169,110,.5)!important;box-shadow:0 22px 56px -24px rgba(201,169,110,.4)!important}
.cv-wa-big:hover{box-shadow:0 18px 44px -16px rgba(37,211,102,.6)}
.cv-map:hover{border-color:rgba(201,169,110,.42);box-shadow:0 30px 70px -34px rgba(201,169,110,.4)}
.cv-directions:hover{transform:translateY(-2px)}
.cv-footlink:hover{color:#C9A96E}
.cv-soc:hover{color:#0A0A0F;border-color:#C9A96E;transform:translateY(-4px);box-shadow:0 14px 28px -12px rgba(201,169,110,.7)}
.cv-wa-fab:hover{transform:scale(1.06)}
.cv-navlink:hover{color:#E3C892}
.cv-navlink:hover>span{width:100%}
.cv-iconbtn:hover{background:rgba(201,169,110,.14);border-color:#C9A96E}
.cv-lb-arrow:hover{background:rgba(201,169,110,.16)}
.cv-cert-arrow:hover{background:rgba(201,169,110,.18);border-color:#C9A96E}
.cv-play-big:hover{transform:translate(-50%,-50%) scale(1.06);background:rgba(201,169,110,.18)}
.cv-transport:hover{background:rgba(201,169,110,.16);border-color:#C9A96E}