/* ============================================================
   AblaCars Rent a Car — estilos de marca
   Complementan a Tailwind (animaciones, cabecera, banderas...)
   Paleta:
     --brand   #F7D246  amarillo AblaCars
     --brand-d #E0B92E  amarillo oscuro
     --sea     #0E9CA5  turquesa Menorca
     --ink     #16181D  negro · texto / footer
     --sand    #F6F2EA  fondo cálido
     --line    #E7E2D7  líneas
   ============================================================ */
:root{
  --brand:#F7D246; --brand-d:#E0B92E; --sea:#0E9CA5;
  --ink:#16181D; --sand:#F6F2EA; --line:#E7E2D7;
}

html{ scroll-behavior:smooth; }
body{ font-family:'Inter',system-ui,sans-serif; color:#23262E; }
h1,h2,h3,h4,.font-display{ font-family:'Poppins',system-ui,sans-serif; }

/* ---- Cabecera fija con transición ---- */
#siteHeader{ transition:box-shadow .25s ease, background-color .25s ease; }
#siteHeader.scrolled{ box-shadow:0 6px 24px -12px rgba(0,0,0,.25); }

/* ---- Banderas / conmutador de idioma ---- */
[data-flag]{
  width:30px; height:21px; border-radius:3px; overflow:hidden;
  outline:2px solid transparent; outline-offset:2px;
  opacity:.55; transition:opacity .2s, transform .2s, outline-color .2s;
  background-size:cover; background-position:center;
}
[data-flag]:hover{ opacity:1; transform:translateY(-1px); }
[data-flag].flag-active{ opacity:1; outline-color:var(--ink); }
.flag-es{ background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzIDIiPjxyZWN0IHdpZHRoPSIzIiBoZWlnaHQ9IjIiIGZpbGw9InJnYigxOTgsMTEsMzApIi8+PHJlY3QgeT0iMC41IiB3aWR0aD0iMyIgaGVpZ2h0PSIxIiBmaWxsPSJyZ2IoMjU1LDE5NiwwKSIvPjwvc3ZnPg=="); }
.flag-en{ background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1IDMiPjxyZWN0IHdpZHRoPSI1IiBoZWlnaHQ9IjMiIGZpbGw9InJnYigyNTUsMjU1LDI1NSkiLz48cmVjdCB4PSIyIiB3aWR0aD0iMSIgaGVpZ2h0PSIzIiBmaWxsPSJyZ2IoMjA2LDE3LDM4KSIvPjxyZWN0IHk9IjEiIHdpZHRoPSI1IiBoZWlnaHQ9IjEiIGZpbGw9InJnYigyMDYsMTcsMzgpIi8+PC9zdmc+"); }
.flag-it{ background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzIDIiPjxyZWN0IHdpZHRoPSIzIiBoZWlnaHQ9IjIiIGZpbGw9InJnYigyNTUsMjU1LDI1NSkiLz48cmVjdCB3aWR0aD0iMSIgaGVpZ2h0PSIyIiBmaWxsPSJyZ2IoMCwxNDAsNjkpIi8+PHJlY3QgeD0iMiIgd2lkdGg9IjEiIGhlaWdodD0iMiIgZmlsbD0icmdiKDIwNSwzMyw0MikiLz48L3N2Zz4="); }
.flag-fr{ background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzIDIiPjxyZWN0IHdpZHRoPSIzIiBoZWlnaHQ9IjIiIGZpbGw9InJnYigyNTUsMjU1LDI1NSkiLz48cmVjdCB3aWR0aD0iMSIgaGVpZ2h0PSIyIiBmaWxsPSJyZ2IoMCw4NSwxNjQpIi8+PHJlY3QgeD0iMiIgd2lkdGg9IjEiIGhlaWdodD0iMiIgZmlsbD0icmdiKDIzOSw2NSw1MykiLz48L3N2Zz4="); }
.flag-de{ background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzIDMiPjxyZWN0IHdpZHRoPSIzIiBoZWlnaHQ9IjMiIGZpbGw9InJnYigyNTUsMjA2LDApIi8+PHJlY3Qgd2lkdGg9IjMiIGhlaWdodD0iMSIgZmlsbD0icmdiKDAsMCwwKSIvPjxyZWN0IHk9IjEiIHdpZHRoPSIzIiBoZWlnaHQ9IjEiIGZpbGw9InJnYigyMjEsMCwwKSIvPjwvc3ZnPg=="); }
.flag-pt{ background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1IDMiPjxyZWN0IHdpZHRoPSI1IiBoZWlnaHQ9IjMiIGZpbGw9InJnYigyMTgsNDEsMjgpIi8+PHJlY3Qgd2lkdGg9IjIiIGhlaWdodD0iMyIgZmlsbD0icmdiKDAsMTAyLDApIi8+PGNpcmNsZSBjeD0iMiIgY3k9IjEuNSIgcj0iMC41IiBmaWxsPSJyZ2IoMjU1LDIwNCw0MSkiLz48Y2lyY2xlIGN4PSIyIiBjeT0iMS41IiByPSIwLjI3IiBmaWxsPSJyZ2IoMCw4MiwxNTUpIi8+PC9zdmc+"); }
.flag-ca{ background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA5IDYiPjxyZWN0IHdpZHRoPSI5IiBoZWlnaHQ9IjYiIGZpbGw9InJnYigyNTIsMjA5LDIyKSIvPjxnIGZpbGw9InJnYigyMTgsNDEsMjgpIj48cmVjdCB5PSIwLjY2NyIgd2lkdGg9IjkiIGhlaWdodD0iMC42NjciLz48cmVjdCB5PSIyIiB3aWR0aD0iOSIgaGVpZ2h0PSIwLjY2NyIvPjxyZWN0IHk9IjMuMzMzIiB3aWR0aD0iOSIgaGVpZ2h0PSIwLjY2NyIvPjxyZWN0IHk9IjQuNjY3IiB3aWR0aD0iOSIgaGVpZ2h0PSIwLjY2NyIvPjwvZz48L3N2Zz4="); }

/* ---- Animaciones de aparición ---- */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); }
.reveal.in{ opacity:1; transform:none; }
.reveal.d1{ transition-delay:.08s } .reveal.d2{ transition-delay:.16s }
.reveal.d3{ transition-delay:.24s } .reveal.d4{ transition-delay:.32s }
.reveal.d5{ transition-delay:.40s }
@media (prefers-reduced-motion: reduce){ .reveal{ transition:none; } }

/* ---- Hero: costa turquesa de Menorca ---- */
.hero-bg{
  background:
    radial-gradient(1200px 500px at 80% -10%, rgba(14,156,165,.18), transparent 60%),
    linear-gradient(180deg, #fbfaf7 0%, #f3f1ea 100%);
}
.hero-wave{ position:absolute; inset:auto 0 0 0; line-height:0; }

/* Cinta de confianza diagonal */
.trust-ribbon{ background:var(--ink); }

/* Tarjetas */
.card{ background:#fff; border:1px solid var(--line); border-radius:18px; }
.card-hover{ transition:transform .25s ease, box-shadow .25s ease, border-color .25s; }
.card-hover:hover{ transform:translateY(-4px); box-shadow:0 22px 40px -28px rgba(22,24,29,.45); border-color:#d9d3c6; }

/* Acordeón */
[data-acc-panel]{ max-height:0; overflow:hidden; transition:max-height .35s ease; }
[data-acc-icon]{ transition:transform .3s ease; }

/* Botones */
.btn{ display:inline-flex; align-items:center; gap:.5rem; font-weight:600; border-radius:9999px; transition:transform .15s, box-shadow .2s, background-color .2s; }
.btn:active{ transform:translateY(1px); }
.btn-primary{ background:var(--brand); color:#161616; box-shadow:0 12px 22px -14px rgba(224,185,46,.9); }
.btn-primary:hover{ background:var(--brand-d); }
.btn-ghost{ background:#fff; color:var(--ink); border:1px solid var(--line); }
.btn-ghost:hover{ border-color:var(--ink); color:var(--ink); background:rgba(247,210,70,.18); }

/* Enlace de salto accesible */
.skip-link{ position:absolute; left:-999px; top:0; z-index:100; }
.skip-link:focus{ left:8px; top:8px; background:#fff; padding:.5rem .9rem; border-radius:8px; box-shadow:0 4px 14px rgba(0,0,0,.2); }

/* Realce de subrayado de marca */
.underline-brand{ background-image:linear-gradient(transparent 60%, rgba(247,210,70,.55) 0); }

/* ---- Logotipo ---- */
.site-logo{ height:46px; width:auto; display:block; }
.site-logo--footer{ height:40px; background:transparent; padding:0; border-radius:0; }

/* ---- Imágenes de coche / secciones (ligeras) ---- */
.car-img{ width:100%; height:190px; object-fit:contain; background:#fff; }
.ph-img{ width:100%; height:190px; display:grid; place-items:center;
  background:linear-gradient(135deg,#FCF4D4,#FFFFFF); color:#B9912A; }

/* ---- Foto de Menorca (banda) con degradado para legibilidad ---- */
.menorca-band{ position:relative; background-size:cover; background-position:center; }
.menorca-band::before{ content:""; position:absolute; inset:0; background:linear-gradient(90deg, rgba(22,24,29,.78), rgba(22,24,29,.35)); }
.menorca-band > *{ position:relative; }

/* Navegacion activa (paleta amarillo/negro) */
.nav-active{ color:#161616 !important; background:rgba(247,210,70,.30); box-shadow:inset 0 -2px 0 var(--brand); }

/* ---- Páginas legales ---- */
.legal{ color:#3a3d45; }
.legal h2{ font-family:'Poppins',sans-serif; font-weight:700; font-size:1.2rem; color:var(--ink); margin:1.9rem 0 .5rem; }
.legal h3{ font-weight:700; color:var(--ink); margin:1.2rem 0 .25rem; font-size:1.02rem; }
.legal p{ margin:.6rem 0; line-height:1.75; }
.legal ul{ list-style:disc; padding-left:1.3rem; margin:.6rem 0; }
.legal li{ margin:.3rem 0; line-height:1.65; }
.legal a{ color:#9E7A12; text-decoration:underline; word-break:break-word; }
.legal strong{ color:var(--ink); }

/* ---- Banner de cookies ---- */
.cookie-bar{ position:fixed; left:0; right:0; bottom:0; z-index:60;
  background:var(--ink); color:#fff; padding:14px 16px;
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:12px 18px;
  box-shadow:0 -8px 30px -12px rgba(0,0,0,.5); }
.cookie-bar[hidden]{ display:none; }
.cookie-txt{ font-size:14px; color:rgba(255,255,255,.85); max-width:620px; }
.cookie-actions{ display:flex; align-items:center; gap:10px; }
.cookie-more{ color:var(--brand); font-size:14px; text-decoration:underline; }

/* ---- Hero con foto de Menorca ---- */
.hero-photo{ position:relative;
  background-image:linear-gradient(105deg, rgba(8,20,30,.88) 0%, rgba(8,20,30,.58) 42%, rgba(8,20,30,.20) 100%), url("img/menorca-hero.jpg");
  background-size:cover; background-position:center center; }
.hero-copy h1, .hero-copy p, .hero-copy span{ text-shadow:0 2px 16px rgba(0,0,0,.38); }
.hero-copy .bg-white\/15{ box-shadow:0 2px 16px rgba(0,0,0,.18); }
@media (max-width:1023px){
  .hero-photo{ background-image:linear-gradient(180deg, rgba(8,20,30,.80) 0%, rgba(8,20,30,.55) 55%, rgba(8,20,30,.45) 100%), url("img/menorca-hero.jpg"); }
}