/* CSV 27 — Restauración táctil premium y corrección responsive */
:root{
  --csv-gold:#c99a2f;
  --csv-gold-light:#f6df93;
  --csv-ivory:#fff8e8;
  --csv-depth:0 18px 38px rgba(4,20,38,.22),0 5px 10px rgba(4,20,38,.16);
  --csv-depth-hover:0 24px 48px rgba(4,20,38,.28),0 8px 16px rgba(4,20,38,.18);
  --csv-press:inset 0 4px 8px rgba(4,20,38,.18),0 4px 9px rgba(4,20,38,.12);
}

/* Marca principal: placa marfil, proporción intacta y destello dorado */
.hero-card.csv-brand-plaque{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  padding:clamp(10px,1.5vw,16px)!important;
  border-radius:clamp(26px,4vw,42px)!important;
  background:
    linear-gradient(145deg,rgba(255,255,255,.98),rgba(255,248,232,.94))!important;
  border:1px solid rgba(201,154,47,.75)!important;
  box-shadow:
    0 0 0 5px rgba(255,248,232,.12),
    0 0 0 6px rgba(246,223,147,.25),
    0 32px 80px rgba(0,0,0,.34),
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 0 -2px 8px rgba(143,98,16,.10)!important;
  transform:perspective(1100px) rotateY(-2deg) rotateX(1deg);
  transition:transform .45s cubic-bezier(.2,.8,.2,1),box-shadow .45s ease;
}
.hero-card.csv-brand-plaque::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
  border-radius:inherit;
  background:linear-gradient(110deg,transparent 34%,rgba(255,255,255,.78) 46%,rgba(255,230,146,.42) 50%,transparent 62%);
  transform:translateX(-135%);
  animation:csvPlaqueShine 6.8s ease-in-out infinite;
  mix-blend-mode:screen;
}
.hero-card.csv-brand-plaque::after{
  content:"";
  position:absolute;
  inset:5px;
  z-index:3;
  border-radius:calc(clamp(26px,4vw,42px) - 7px);
  border:1px solid rgba(201,154,47,.46);
  box-shadow:inset 0 0 18px rgba(246,223,147,.2);
  pointer-events:none;
}
@keyframes csvPlaqueShine{
  0%,58%{transform:translateX(-135%)}
  78%,100%{transform:translateX(135%)}
}
.hero-card.csv-brand-plaque:hover{
  transform:perspective(1100px) rotateY(0) rotateX(0) translateY(-6px) scale(1.01);
  box-shadow:0 0 0 5px rgba(255,248,232,.16),0 0 0 6px rgba(246,223,147,.35),0 40px 95px rgba(0,0,0,.4),inset 0 1px 0 #fff!important;
}
.hero-card.csv-brand-plaque > img{
  position:relative;
  z-index:1;
  display:block;
  width:100%!important;
  height:auto!important;
  aspect-ratio:1/1!important;
  object-fit:contain!important;
  object-position:center!important;
  border-radius:clamp(18px,3vw,31px)!important;
  background:var(--csv-ivory);
}

/* Jerarquía de marca */
.hero-copy h1{max-width:900px!important}
.hero-copy .accent{display:block}
.hero-copy .brand-lead{color:#fff}

/* Repsol legible dentro de una píldora blanca */
.operator{gap:12px!important;align-items:center!important;flex-wrap:wrap}
.operator .repsol-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:150px;
  min-height:54px;
  padding:7px 16px;
  border-radius:999px;
  background:linear-gradient(145deg,#fff,#f3f3f3);
  border:1px solid rgba(255,255,255,.92);
  box-shadow:inset 0 2px 0 #fff,inset 0 -2px 4px rgba(4,20,38,.08),0 12px 26px rgba(0,0,0,.22);
}
.operator .repsol-pill img{
  width:132px!important;
  height:auto!important;
  max-height:42px!important;
  padding:0!important;
  border-radius:0!important;
  background:transparent!important;
  object-fit:contain!important;
}

/* Sistema táctil: todo lo interactivo tiene volumen */
.btn,
.card-actions a,
.station-action,
.contact-card,
.social a,
.hero-station-nav a,
.utility-pill,
.touch-btn,
.v-link,
.v-call,
a.station-tab,
button.station-tab,
.toggle-form,
.traveler-link{
  position:relative;
  transform:translateZ(0);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.72),inset 0 -3px 5px rgba(4,20,38,.13),var(--csv-depth)!important;
  transition:transform .18s cubic-bezier(.2,.8,.2,1),box-shadow .18s ease,filter .18s ease!important;
}
.btn:hover,
.card-actions a:hover,
.station-action:hover,
.contact-card:hover,
.social a:hover,
.hero-station-nav a:hover,
.utility-pill:hover,
.touch-btn:hover,
.v-link:hover,
.v-call:hover,
.station-tab:hover,
.toggle-form:hover{
  transform:translateY(-3px)!important;
  box-shadow:inset 0 2px 0 rgba(255,255,255,.82),inset 0 -3px 5px rgba(4,20,38,.11),var(--csv-depth-hover)!important;
  filter:saturate(1.04);
}
.btn:active,
.card-actions a:active,
.station-action:active,
.contact-card:active,
.social a:active,
.hero-station-nav a:active,
.utility-pill:active,
.touch-btn:active,
.v-link:active,
.v-call:active,
.station-tab:active,
.toggle-form:active{
  transform:translateY(2px) scale(.985)!important;
  box-shadow:var(--csv-press)!important;
}

/* Botones del hero: acabados plásticos coherentes */
.hero .actions .btn{
  background:linear-gradient(180deg,#ff9d29 0%,#ff7600 48%,#e94d12 100%)!important;
  color:#fff!important;
  border:1px solid rgba(255,191,104,.72)!important;
}
.hero .actions .btn.alt{
  background:linear-gradient(180deg,#ffffff 0%,#f3f6f9 52%,#dce4ec 100%)!important;
  color:#071b31!important;
  border:1px solid rgba(255,255,255,.9)!important;
}

/* Métricas premium y animación */
.hero-proof{position:relative;z-index:4}
.hero-proof div{
  background:linear-gradient(165deg,rgba(7,27,49,.96),rgba(15,61,101,.92))!important;
  border:1px solid rgba(246,223,147,.34)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18),inset 0 -4px 10px rgba(0,0,0,.2),0 12px 24px rgba(4,20,38,.18)!important;
}
.hero-proof strong{font-variant-numeric:tabular-nums;text-shadow:0 2px 8px rgba(0,0,0,.25)}

/* Móvil: logo primero, sin deformación y con respiración */
@media(max-width:1080px){
  .hero-grid{grid-template-columns:1fr!important}
}
@media(max-width:650px){
  .hero .wrap{padding:34px 0 112px!important}
  .hero-grid{gap:28px!important}
  .hero-card.csv-brand-plaque{
    order:-1;
    width:min(100%,420px);
    margin:0 auto;
    transform:none!important;
    border-radius:28px!important;
    padding:10px!important;
  }
  .hero-card.csv-brand-plaque > img{
    width:100%!important;
    height:auto!important;
    aspect-ratio:1/1!important;
    object-fit:contain!important;
    border-radius:20px!important;
  }
  .hero-copy{text-align:center}
  .hero-copy h1{font-size:clamp(2.35rem,11vw,3.5rem)!important;line-height:.95!important;margin-top:14px!important}
  .hero-copy p{margin-inline:auto}
  .actions{justify-content:center}
  .actions .btn{width:min(100%,360px)}
  .operator{justify-content:center;margin-top:24px!important;padding-top:18px!important}
  .operator > span{width:100%;text-align:center}
  .operator .repsol-pill{min-width:170px}
  .operator .repsol-pill img{width:145px!important}
  .hero-proof{gap:7px!important}
  .hero-proof div{padding:11px 5px!important;border-radius:14px!important}
  .hero-proof strong{font-size:1.05rem!important}
  .hero-proof span{font-size:.61rem!important;line-height:1.15!important}
}
@media(max-width:380px){
  .hero-card.csv-brand-plaque{width:100%}
  .hero-copy h1{font-size:2.25rem!important}
  .hero-proof span{font-size:.57rem!important}
}
@media(prefers-reduced-motion:reduce){
  .hero-card.csv-brand-plaque::before{animation:none!important}
}