/*
Theme Name: Let's Cars Barcelona
Theme URI: https://letscarsbarcelona.com
Author: Àlex Català
Description: Tema a medida para LET'S CARS BARCELONA — concesionario de ocasión en Rubí. Estilo minimalista inspirado en Porsche: negro/blanco, foto a sangre, tipografía grande en peso regular. Incluye tipo de contenido "Coche" con escaparate, filtros y ficha de vehículo.
Version: 5.2.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
Text Domain: lets-cars
*/

/* ============================================================
   TOKENS  (dirección de diseño Porsche → Let's Cars)
   ============================================================ */
:root{
  --font-sans: "Manrope", "Inter", system-ui, -apple-system, sans-serif;

  --black:   #0A0A0A;
  --white:   #FFFFFF;
  --grey-50: #FAFAFB;
  --grey-100:#F1F1F3;
  --grey-200:#E4E4E8;
  --grey-500:#6E6E73;
  --grey-700:#3A3A3D;
  /* Solo blanco y negro. El "acento" es el color de los botones principales;
     --on-accent es el color del texto que va encima. */
  --accent:  #0A0A0A;
  --accent-dark:#333333;   /* hover */
  --on-accent:#FFFFFF;
  --accent-text:#0A0A0A;   /* líneas, subrayados e iconos de acento */

  --radius-card: 28px;
  --radius-btn:  999px;
  --radius-sm:   12px;
  --section-gap: clamp(64px, 10vw, 120px);
  --container:   1280px;
  --gutter:      clamp(20px, 5vw, 48px);

  --h1-size: clamp(2.4rem, 6vw, 4.4rem);
  --h2-size: clamp(1.9rem, 4vw, 3rem);
  /* Escala de elevación consistente (design-system) */
  --shadow-xs: 0 1px 2px rgba(10,10,10,.05);
  --shadow-sm: 0 2px 8px rgba(10,10,10,.06);
  --shadow:   0 10px 40px rgba(10,10,10,.08);
  --shadow-lg:0 30px 80px rgba(10,10,10,.16);
  --ease: cubic-bezier(.16,1,.3,1);
  --ease-out: cubic-bezier(.22,.61,.36,1);
}

/* ============================================================
   RESET / BASE
   ============================================================ */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0;
  font-family:var(--font-sans);
  font-weight:400;
  color:var(--black);
  background:var(--white);
  line-height:1.55;
  font-size:17px;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; }
h1,h2,h3,h4{ font-weight:400; line-height:1.08; letter-spacing:-.01em; margin:0 0 .4em; }
h1{ font-size:var(--h1-size); }
h2{ font-size:var(--h2-size); }
h3{ font-size:clamp(1.25rem,2.4vw,1.6rem); }
p{ margin:0 0 1em; }
.container{ width:100%; max-width:var(--container); margin-inline:auto; padding-inline:var(--gutter); }
.section{ padding-block:var(--section-gap); }
.eyebrow{ font-size:.78rem; letter-spacing:.22em; text-transform:uppercase; color:var(--grey-500); font-weight:600; }
.muted{ color:var(--grey-500); }
.center{ text-align:center; }

/* ============================================================
   BOTONES
   ============================================================ */
.btn{
  display:inline-flex; align-items:center; gap:.5em;
  padding:.9em 1.7em; border-radius:var(--radius-btn);
  font-weight:600; font-size:.95rem; letter-spacing:.01em;
  border:1.5px solid var(--black); background:var(--black); color:var(--white);
  transition:transform .3s var(--ease), background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
  white-space:nowrap;
}
.btn:hover{ transform:translateY(-2px); background:var(--grey-700); border-color:var(--grey-700); }
.btn--ghost{ background:transparent; color:var(--black); }
.btn--ghost:hover{ background:var(--black); color:var(--white); }
.btn--accent{ background:var(--accent); border-color:var(--accent); }
.btn--accent:hover{ background:var(--accent-dark); border-color:var(--accent-dark); }
.btn--light{ background:var(--white); color:var(--black); border-color:var(--white); }
.btn--sm{ padding:.6em 1.2em; font-size:.85rem; }
.btn--on-dark.btn--ghost{ color:var(--white); border-color:rgba(255,255,255,.6); }
.btn--on-dark.btn--ghost:hover{ background:var(--white); color:var(--black); border-color:var(--white); }

/* ============================================================
   HEADER  (minimal, estilo Porsche)
   ============================================================ */
.site-header{
  position:sticky; top:0; z-index:100;
  background:rgba(255,255,255,.85); backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--grey-100);
}
.site-header__inner{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; height:72px; }
.wordmark{ text-align:center; line-height:1; }
.wordmark__main{ display:block; font-weight:700; font-size:1.25rem; letter-spacing:.02em; }
.wordmark__sub{ display:block; font-weight:400; font-size:.62rem; letter-spacing:.35em; color:var(--grey-500); margin-top:3px; }
.wordmark__dot{ color:var(--accent-text); }
.main-nav{ display:flex; gap:2rem; align-items:center; }
.main-nav a{ font-size:.92rem; font-weight:500; color:var(--grey-700); transition:color .2s; position:relative; }
.main-nav a:hover, .main-nav .current-menu-item > a{ color:var(--black); }
.header-actions{ display:flex; gap:.8rem; align-items:center; justify-content:flex-end; }
.header-tel{ font-weight:600; font-size:.92rem; }
.nav-toggle{ display:none; background:none; border:none; padding:8px; }
.nav-toggle span{ display:block; width:22px; height:2px; background:var(--black); margin:4px 0; transition:.3s; }

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative; min-height:min(88vh,760px); display:flex; align-items:flex-end;
  color:var(--white); overflow:hidden; background:var(--black);
}
.hero__media{ position:absolute; inset:0; z-index:0; }
.hero__media img{ width:100%; height:100%; object-fit:cover; }
.hero::after{ content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(to top, rgba(0,0,0,.90) 0%, rgba(0,0,0,.62) 42%, rgba(0,0,0,.22) 72%, rgba(0,0,0,.34) 100%); }
.hero__inner{ position:relative; z-index:2; padding-block:clamp(40px,7vw,88px); }
.hero h1{ max-width:16ch; margin-bottom:.35em; }
.hero__sub{ max-width:52ch; font-size:1.1rem; color:rgba(255,255,255,.85); margin-bottom:1.8em; }
.hero__cta{ display:flex; gap:1rem; flex-wrap:wrap; }
.hero__scroll{ position:absolute; right:var(--gutter); bottom:32px; z-index:2; color:#fff; opacity:.8; font-size:.8rem; letter-spacing:.15em; text-transform:uppercase; }

/* placeholder de foto (mientras el cliente no sube imágenes reales) */
.ph-media{ background:
  radial-gradient(120% 120% at 70% 10%, #2a2a2e 0%, #101012 55%, #0a0a0a 100%); }

/* ============================================================
   BARRA DE CONFIANZA
   ============================================================ */
.trustbar{ background:var(--black); color:var(--white); }
.trustbar__inner{ display:flex; flex-wrap:wrap; gap:clamp(16px,4vw,48px); justify-content:center; align-items:center;
  padding-block:20px; text-align:center; }
.trustbar__item{ font-size:.92rem; font-weight:500; display:flex; align-items:center; gap:.4em; }
.trustbar__item strong{ font-weight:700; }
.trustbar__item .star{ color:#FFC531; }
.trustbar__sep{ color:rgba(255,255,255,.3); }

/* ============================================================
   REJILLA + TARJETA DE COCHE
   ============================================================ */
.cars-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:clamp(20px,3vw,36px); }
.car-card{ background:var(--white); border-radius:var(--radius-card); overflow:hidden; border:1px solid var(--grey-100);
  transition:transform .4s var(--ease), box-shadow .4s var(--ease); display:flex; flex-direction:column; }
.car-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-lg); }
.car-card__media{ position:relative; aspect-ratio:4/3; overflow:hidden; background:var(--grey-100); }
.car-card__media img{ width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease); }
.car-card:hover .car-card__media img{ transform:scale(1.04); }
.car-card__badge{ position:absolute; top:14px; left:14px; background:var(--white); color:var(--black);
  font-size:.72rem; font-weight:700; letter-spacing:.04em; padding:.35em .8em; border-radius:var(--radius-btn); }
.car-card__badge--sold{ background:var(--black); color:#fff; }
.car-card__badge--reserved{ background:var(--accent); color:var(--on-accent); }
.car-card__fav{ position:absolute; top:12px; right:12px; width:34px; height:34px; border-radius:50%;
  background:rgba(255,255,255,.9); border:none; display:grid; place-items:center; font-size:1rem; }
.car-card__body{ padding:22px 22px 24px; display:flex; flex-direction:column; flex:1; }
.car-card__title{ font-size:1.12rem; font-weight:600; letter-spacing:-.01em; line-height:1.2; margin:0 0 .3em; }
.car-card__meta{ font-size:.86rem; color:var(--grey-500); margin-bottom:1em; }
.car-card__meta span+span::before{ content:"·"; margin:0 .5em; color:var(--grey-200); }
.car-card__foot{ margin-top:auto; display:flex; align-items:center; justify-content:space-between; gap:12px; }
.car-card__price{ font-size:1.35rem; font-weight:700; letter-spacing:-.02em; }
.car-card__price small{ font-weight:500; font-size:.75rem; color:var(--grey-500); display:block; }

/* ============================================================
   FILTROS
   ============================================================ */
.filters{ background:var(--grey-50); border:1px solid var(--grey-100); border-radius:var(--radius-card); padding:22px; margin-bottom:36px; }
.filters__row{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:14px; align-items:end; }
.field label{ display:block; font-size:.74rem; letter-spacing:.08em; text-transform:uppercase; color:var(--grey-500); font-weight:600; margin-bottom:6px; }
.field select, .field input{ width:100%; padding:.7em .9em; border:1px solid var(--grey-200); border-radius:var(--radius-sm);
  font-family:inherit; font-size:.92rem; background:var(--white); color:var(--black); }
.field select:focus, .field input:focus{ outline:none; border-color:var(--black); }
.filters__actions{ display:flex; gap:10px; }
.results-bar{ display:flex; justify-content:space-between; align-items:center; margin-bottom:24px; flex-wrap:wrap; gap:12px; }
.results-bar__count{ font-weight:600; }
.empty-state{ text-align:center; padding:80px 20px; color:var(--grey-500); }

/* ============================================================
   SECCIÓN "POR QUÉ" (features)
   ============================================================ */
.features{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:clamp(24px,4vw,48px); }
.feature__icon{ width:48px; height:48px; margin-bottom:16px; color:var(--accent-text); }
.feature h3{ font-size:1.15rem; font-weight:600; margin-bottom:.3em; }
.feature p{ color:var(--grey-500); font-size:.95rem; margin:0; }

/* ============================================================
   BLOQUE EDITORIAL
   ============================================================ */
.editorial{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,6vw,80px); align-items:center; }
.editorial__media{ border-radius:var(--radius-card); overflow:hidden; aspect-ratio:5/4; min-height:320px; }
.editorial--dark{ background:var(--black); color:var(--white); border-radius:var(--radius-card); padding:clamp(32px,6vw,72px); }

/* ============================================================
   TESTIMONIOS
   ============================================================ */
/* 3 filas, cada una con su propio scroll horizontal (móvil: 1 tarjeta/fila · escritorio: 3/fila) */
.testimonials-rows{ display:flex; flex-direction:column; gap:20px; }
.testimonial-row{
  display:flex; align-items:flex-start; gap:20px; overflow-x:auto; scroll-snap-type:x proximity;
  padding-bottom:14px; overscroll-behavior-x:contain; -webkit-overflow-scrolling:touch;
  scrollbar-width:thin; scrollbar-color:var(--grey-200) transparent;
}
.testimonial-row::-webkit-scrollbar{ height:6px; }
.testimonial-row::-webkit-scrollbar-track{ background:transparent; }
.testimonial-row::-webkit-scrollbar-thumb{ background:var(--grey-200); border-radius:99px; }
.testimonial-row::-webkit-scrollbar-thumb:hover{ background:var(--accent); }
.testimonial{ flex:0 0 auto; scroll-snap-align:start; width:88%; display:flex; flex-direction:column; gap:16px; background:var(--grey-50); border-radius:var(--radius-card); padding:28px; border:1px solid var(--grey-100); transition:border-color .25s var(--ease), transform .25s var(--ease); }
@media (min-width:600px){ .testimonial{ width:calc(50% - 10px); } }
@media (min-width:1024px){ .testimonial{ width:calc((100% - 40px)/3); } }
.testimonial:hover{ border-color:var(--accent-text); transform:translateY(-3px); }
.testimonial__head{ display:flex; align-items:flex-start; gap:12px; }
.testimonial__avatar{ width:44px; height:44px; border-radius:50%; flex-shrink:0; display:grid; place-items:center; color:#F4F2EF; font-weight:700; font-size:1rem; }
.testimonial__id{ flex:1; min-width:0; }
.testimonial__author{ font-weight:600; font-size:.94rem; margin:0 0 3px; }
.testimonial__meta{ display:flex; align-items:center; gap:8px; }
.testimonial__stars{ color:var(--black); letter-spacing:1.5px; font-size:.82rem; }
.testimonial__time{ font-size:.78rem; color:var(--grey-500); }
.testimonial__gbadge{ width:20px; height:20px; flex-shrink:0; margin-top:2px; }
.testimonial__text{ font-size:.98rem; line-height:1.6; margin:0; }
.testimonial__photos{ display:grid; grid-template-columns:1fr; gap:8px; }
.testimonial__photos--2{ grid-template-columns:1fr 1fr; }
.testimonial__photo{ width:100%; max-height:280px; object-fit:contain; border-radius:var(--radius-sm); background:var(--grey-100); display:block; }
.testimonial__photo-placeholder{ width:100%; aspect-ratio:4/3; border-radius:var(--radius-sm); background:var(--grey-100); border:1px dashed var(--grey-200); display:grid; place-items:center; color:var(--grey-500); }
.testimonial__photo-placeholder svg{ width:26px; height:26px; opacity:.5; }
.testimonial__footer{ display:flex; align-items:center; padding-top:12px; margin-top:auto; border-top:1px solid var(--grey-100); }
.testimonial__link{ font-size:.86rem; font-weight:600; color:var(--accent-text); display:inline-flex; align-items:center; gap:.35em; min-height:44px; transition:gap .2s var(--ease); }
.testimonial__link:hover{ gap:.6em; }
.google-badge{ display:inline-flex; align-items:center; gap:.6em; background:var(--white); border:1px solid var(--grey-200);
  border-radius:var(--radius-btn); padding:.6em 1.2em; font-weight:600; font-size:.92rem; box-shadow:var(--shadow); }
.google-badge .big{ font-size:1.3rem; font-weight:800; }

/* ============================================================
   FICHA DE COCHE (single)
   ============================================================ */
.single-car{ display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(32px,5vw,64px); align-items:start; }
.gallery__main{ border-radius:var(--radius-card); overflow:hidden; aspect-ratio:4/3; background:var(--grey-100); margin-bottom:14px; }
.gallery__main img{ width:100%; height:100%; object-fit:cover; }
.gallery__thumbs{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
.gallery__thumbs img{ border-radius:12px; aspect-ratio:1; object-fit:cover; cursor:pointer; border:2px solid transparent; }
.gallery__thumbs img:hover{ border-color:var(--black); }
.car-detail__price{ font-size:2.4rem; font-weight:800; letter-spacing:-.02em; margin:.2em 0; }
.car-detail__tag{ display:inline-block; background:var(--grey-100); border-radius:var(--radius-btn); padding:.3em .9em; font-size:.8rem; font-weight:600; margin-bottom:8px; }
.spec-table{ width:100%; border-collapse:collapse; margin:24px 0; }
.spec-table td{ padding:13px 0; border-bottom:1px solid var(--grey-100); font-size:.95rem; }
.spec-table td:first-child{ color:var(--grey-500); width:45%; }
.spec-table td:last-child{ font-weight:600; text-align:right; }
.detail-cta{ display:grid; gap:10px; margin-top:20px; }
.detail-cta .btn{ justify-content:center; }
.warranty-box{ background:var(--grey-50); border-radius:var(--radius-card); padding:24px; margin-top:24px; font-size:.92rem; }

/* ============================================================
   FORMULARIOS
   ============================================================ */
.form-card{ background:var(--white); border:1px solid var(--grey-100); border-radius:var(--radius-card); padding:clamp(24px,4vw,40px); box-shadow:var(--shadow); }
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.form-grid .full{ grid-column:1/-1; }
.form-card label{ display:block; font-size:.8rem; font-weight:600; color:var(--grey-700); margin-bottom:6px; }
.form-card input, .form-card select, .form-card textarea{ width:100%; padding:.85em 1em; border:1px solid var(--grey-200);
  border-radius:var(--radius-sm); font-family:inherit; font-size:.95rem; background:var(--white); }
.form-card input:focus, .form-card textarea:focus, .form-card select:focus{ outline:none; border-color:var(--black); }
.form-card textarea{ min-height:120px; resize:vertical; }
.consent{ display:flex; gap:.6em; align-items:flex-start; font-size:.82rem; color:var(--grey-500); }
.consent input{ width:auto; margin-top:3px; }
.form-note{ padding:14px 16px; border-radius:var(--radius-sm); font-size:.9rem; margin-bottom:18px; }
.form-note--ok{ background:#E9F7EE; color:#1B7A3D; }

/* steps (vende tu coche) */
.steps{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:24px; counter-reset:step; }
.step{ padding:28px; border:1px solid var(--grey-100); border-radius:var(--radius-card); }
.step__num{ counter-increment:step; font-size:2rem; font-weight:800; color:var(--accent-text); }
.step__num::before{ content:"0" counter(step); }

/* ============================================================
   PAGE HERO (interiores)
   ============================================================ */
.page-hero{ padding-block:clamp(48px,8vw,96px) clamp(24px,4vw,40px); }
.page-hero h1{ max-width:20ch; }
.page-hero p{ max-width:56ch; color:var(--grey-500); font-size:1.1rem; }

.stats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:24px; text-align:center; }
.stat__num{ font-size:clamp(2.4rem,5vw,3.4rem); font-weight:800; letter-spacing:-.02em; }
.stat__label{ color:var(--grey-500); font-size:.9rem; }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer{ background:var(--black); color:rgba(255,255,255,.72); padding-block:64px 32px; margin-top:var(--section-gap); }
.site-footer a{ color:rgba(255,255,255,.72); transition:color .2s; }
.site-footer a:hover{ color:#fff; }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:40px; }
.footer-grid h4{ color:#fff; font-size:.82rem; letter-spacing:.12em; text-transform:uppercase; margin-bottom:16px; font-weight:600; }
.footer-grid ul{ list-style:none; padding:0; margin:0; display:grid; gap:10px; font-size:.92rem; }
.footer__word .wordmark__main{ color:#fff; }
.footer-bottom{ border-top:1px solid rgba(255,255,255,.12); margin-top:48px; padding-top:24px;
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; font-size:.82rem; color:rgba(255,255,255,.5); }

/* ============================================================
   BOTÓN FLOTANTE WHATSAPP (móvil)
   ============================================================ */
.float-actions{ position:fixed; right:16px; bottom:16px; z-index:90; display:flex; flex-direction:column; gap:12px; }
.fab{ width:56px; height:56px; border-radius:50%; display:grid; place-items:center; color:var(--on-accent); box-shadow:var(--shadow-lg); font-size:1.4rem; }
.fab--wa{ background:var(--accent); }
.fab--tel{ background:var(--surface-2, var(--grey-100)); color:var(--black); border:1px solid var(--grey-200); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:900px){
  .single-car{ grid-template-columns:1fr; }
  .editorial{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:768px){
  .site-header__inner{ grid-template-columns:auto 1fr auto; }
  .main-nav{ position:fixed; inset:72px 0 auto 0; flex-direction:column; background:#fff; padding:24px var(--gutter);
    border-bottom:1px solid var(--grey-100); gap:1.2rem; transform:translateY(-120%); transition:transform .4s var(--ease); box-shadow:var(--shadow); }
  .main-nav.is-open{ transform:translateY(0); }
  .wordmark{ text-align:left; }
  .nav-toggle{ display:block; }
  .header-tel{ display:none; }
  .form-grid{ grid-template-columns:1fr; }
}
@media (max-width:520px){
  .footer-grid{ grid-template-columns:1fr; }
  .float-actions{ right:12px; bottom:12px; }
}

/* ============================================================
   ★ CAPA DE PULIDO PREMIUM  (dirección ui-ux-pro-max)
   Microinteracciones, foco accesible, ritmo editorial
   ============================================================ */

/* Selección y cursor */
::selection{ background:var(--accent); color:var(--on-accent); }
a, button, select, input, label[for], .car-card, .fab{ cursor:pointer; }
input, textarea{ cursor:text; }

/* Foco accesible visible (teclado) */
a:focus-visible, button:focus-visible, select:focus-visible,
input:focus-visible, textarea:focus-visible, .car-card a:focus-visible{
  outline:2.5px solid var(--accent-text); outline-offset:3px; border-radius:6px;
}

/* Cifras tabulares para precios y datos → sin saltos */
.car-card__price, .car-detail__price, .spec-table td:last-child,
.stat__num, .trustbar__item strong, .google-badge .big{
  font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1;
}

/* Eyebrows con hairline */
.eyebrow{ display:inline-flex; align-items:center; gap:.7em; }
.eyebrow::before{ content:""; width:24px; height:1.5px; background:currentColor; opacity:.5; }
.center .eyebrow, .eyebrow.center{ justify-content:center; }

/* Titulares aún más finos y con mejor tracking (Porsche) */
h1, h2{ letter-spacing:-.02em; }
.hero h1{ line-height:1.03; }

/* HERO — degradado más cinematográfico + grano sutil + scroll animado */
.hero::after{
  background:linear-gradient(to top, rgba(0,0,0,.80) 0%, rgba(0,0,0,.46) 34%, rgba(0,0,0,.10) 62%, rgba(0,0,0,.06) 82%, rgba(0,0,0,.30) 100%);
}
.hero::before{
  content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  opacity:.06; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.hero__inner .eyebrow{ animation:lc-rise .8s var(--ease-out) both; }
.hero h1{ animation:lc-rise .8s .08s var(--ease-out) both; }
.hero__sub{ animation:lc-rise .8s .16s var(--ease-out) both; }
.hero__cta{ animation:lc-rise .8s .24s var(--ease-out) both; }
@keyframes lc-rise{ from{ opacity:0; transform:translateY(26px); } to{ opacity:1; transform:none; } }
.hero__scroll{ display:flex; align-items:center; gap:.6em; }
.hero__scroll::after{ content:""; width:1px; height:34px; background:linear-gradient(#fff,transparent); animation:lc-scroll 1.8s ease-in-out infinite; }
@keyframes lc-scroll{ 0%{ transform:scaleY(0); transform-origin:top; } 50%{ transform:scaleY(1); transform-origin:top; } 51%{ transform-origin:bottom; } 100%{ transform:scaleY(0); transform-origin:bottom; } }

/* BOTONES — microinteracción de flecha + sombra al pulsar */
.btn{ position:relative; overflow:hidden; box-shadow:var(--shadow-xs); }
.btn::after{ content:"→"; width:0; opacity:0; transform:translateX(-6px); transition:.35s var(--ease); font-weight:400; }
.btn:not(.btn--sm):hover::after{ width:1em; opacity:1; transform:none; }
.btn:active{ transform:translateY(0) scale(.98); }

/* TRUSTBAR — más aire y refinamiento */
.trustbar__inner{ padding-block:22px; }
.trustbar__item{ letter-spacing:.01em; }
.trustbar__item .star{ font-size:1.05em; }

/* TARJETA DE COCHE — elevación premium, media más rica */
.car-card{ box-shadow:var(--shadow-xs); transition:transform .5s var(--ease), box-shadow .5s var(--ease), border-color .5s var(--ease); }
.car-card:hover{ transform:translateY(-8px); box-shadow:var(--shadow-lg); border-color:transparent; }
.car-card__media::after{ content:""; position:absolute; inset:0; background:linear-gradient(to top, rgba(0,0,0,.10), transparent 40%); opacity:0; transition:opacity .5s var(--ease); }
.car-card:hover .car-card__media::after{ opacity:1; }
.car-card__media img{ transition:transform .8s var(--ease); }
.car-card:hover .car-card__media img{ transform:scale(1.06); }
.car-card__badge{ box-shadow:var(--shadow-sm); backdrop-filter:blur(4px); letter-spacing:.06em; text-transform:uppercase; font-size:.68rem; }
.car-card__title a{ background:linear-gradient(var(--accent-text),var(--accent-text)) 0 100%/0 1.5px no-repeat; transition:background-size .4s var(--ease); padding-bottom:1px; }
.car-card:hover .car-card__title a{ background-size:100% 1.5px; }
.car-card__price{ letter-spacing:-.03em; }

/* FILTROS — inputs premium con flecha custom */
.filters{ box-shadow:var(--shadow-xs); }
.field select{
  appearance:none; -webkit-appearance:none; padding-right:2.4em;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%236E6E73' stroke-width='1.6'%3E%3Cpath d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right .95em center;
}
.field select:hover, .field input:hover{ border-color:var(--grey-500); }
.field select, .field input{ transition:border-color .2s, box-shadow .2s; }
.field select:focus, .field input:focus{ box-shadow:0 0 0 3px color-mix(in srgb, var(--accent-text) 22%, transparent); }

/* FICHA — precio con más presencia, tabla más elegante */
.car-detail__price{ letter-spacing:-.035em; }
.spec-table td{ transition:none; }
.spec-table tr{ transition:background .2s; }
.spec-table tr:hover td{ color:var(--black); }
.gallery__main{ box-shadow:var(--shadow-sm); }

/* SECCIONES — hairline superior sutil entre bloques claros/grises */
.section + .section{ position:relative; }

/* FORMULARIOS — foco premium */
.form-card input:focus, .form-card textarea:focus, .form-card select:focus{ box-shadow:0 0 0 3px color-mix(in srgb, var(--accent-text) 22%, transparent); }
.form-card{ box-shadow:var(--shadow-sm); }

/* FEATURE ICONS — círculo de acento suave */
.feature__icon{ padding:12px; width:56px; height:56px; border-radius:16px; background:color-mix(in srgb, var(--accent-text) 10%, transparent); box-sizing:border-box; }

/* Header: micro-sombra al hacer scroll (siempre sutil) */
.site-header{ box-shadow:var(--shadow-xs); }

/* Enlaces del nav con subrayado animado */
.main-nav a::after{ content:""; position:absolute; left:0; bottom:-4px; width:0; height:1.5px; background:var(--accent-text); transition:width .3s var(--ease); }
.main-nav a:hover::after, .main-nav .current-menu-item > a::after{ width:100%; }

/* Paginación */
.pagination{ display:flex; gap:8px; justify-content:center; }
.pagination .page-numbers{ display:grid; place-items:center; min-width:44px; height:44px; padding:0 12px; border-radius:var(--radius-btn); border:1px solid var(--grey-200); font-weight:600; font-size:.9rem; transition:.2s var(--ease); }
.pagination .page-numbers:hover{ border-color:var(--black); }
.pagination .page-numbers.current{ background:var(--black); color:#fff; border-color:var(--black); }

/* Respeto a reduce-motion (accesibilidad) */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
  [data-reveal]{ opacity:1 !important; transform:none !important; }
}


/* ============================================================
   ★★ ESTILO DE LA WEB — fondo negro, texto blanco ★★
   Intercambia blanco↔negro del diseño original. Blanco, negro y el rojo de acento.
   ============================================================ */
:root{
  --white:#0A0A0A;          /* "blanco" → negro (fondos base) */
  --black:#F4F2EF;          /* "negro"  → blanco cálido (texto/elementos) */
  --grey-50:#111110;        /* secciones alternas oscuras */
  --grey-100:rgba(244,242,239,.10);
  --grey-200:rgba(244,242,239,.20);
  --grey-500:#9a9793;       /* muted claro */
  --grey-700:#d8d5d0;       /* nav / texto claro */
  --accent:#F4F2EF; --accent-dark:#D8D5D0; --on-accent:#0A0A0A; --accent-text:#F4F2EF;   /* blanco (botones claros sobre fondo negro) */
  --avatar-1:#2B2A28; --avatar-2:#3A3936;
  --surface:#161514; --surface-2:#201F1D;
  --shadow-xs:0 1px 2px rgba(0,0,0,.5); --shadow-sm:0 3px 12px rgba(0,0,0,.55);
  --shadow:0 16px 44px rgba(0,0,0,.6); --shadow-lg:0 34px 80px rgba(0,0,0,.65);
}

/* HEADER (el fondo estaba hardcodeado en blanco) */
.site-header{ background:rgba(10,10,10,.82); border-bottom:1px solid rgba(244,242,239,.10); }

/* HERO — texto claro (el .hero fijaba color al token invertido) */
.hero{ color:#F4F2EF; }
.hero h1{ color:#F4F2EF; }
.btn--light{ background:#F4F2EF; color:#0A0A0A; border-color:#F4F2EF; }

/* TRUST BAR → franja ROJO PORSCHE */
.trustbar{ background:var(--accent); color:var(--on-accent); }
.trustbar__item .star{ color:var(--on-accent); }
.trustbar__sep{ color:color-mix(in srgb, var(--on-accent) 35%, transparent); }

/* TARJETAS DE COCHE */
.car-card{ background:var(--surface); border:1px solid rgba(244,242,239,.10); }
.car-card:hover{ border-color:color-mix(in srgb, var(--accent-text) 55%, transparent); }
.car-card__media{ background:#0a0908; }
.car-card__meta{ color:var(--grey-500); }
.car-card__price small{ color:var(--grey-500); }
.car-card__badge{ background:#F4F2EF; color:#0A0A0A; }
.car-card__badge--sold{ background:#000; color:#F4F2EF; }
.car-card__badge--reserved{ background:var(--accent); color:var(--on-accent); }

/* FILTROS */
.filters{ background:var(--surface); border:1px solid rgba(244,242,239,.10); }
.field select, .field input{ background-color:var(--surface-2); border-color:rgba(244,242,239,.16); color:#F4F2EF; }
.field select{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%23d8d5d0' stroke-width='1.6'%3E%3Cpath d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right .95em center; }
.field input::placeholder{ color:#7c7773; }

/* FEATURES → iconos en ROJO PORSCHE */
.feature__icon{ background:var(--accent); color:var(--on-accent); }

/* EDITORIAL / "VENDE TU COCHE" → bloque ROJO PROFUNDO */
.editorial--dark{ background:#1B1A19; color:#F4F2EF; }

/* TESTIMONIOS */
.testimonial{ background:var(--surface); border:1px solid rgba(244,242,239,.10); }
.google-badge{ background:var(--surface-2); border-color:rgba(244,242,239,.16); color:#F4F2EF; }

/* FICHA / FORM */
.car-detail__tag{ background:var(--surface-2); color:var(--grey-700); }
.warranty-box{ background:var(--surface); border:1px solid rgba(244,242,239,.10); }
.form-card{ background:var(--surface); border:1px solid rgba(244,242,239,.10); }
.form-card input, .form-card select, .form-card textarea{ background:var(--surface-2); border-color:rgba(244,242,239,.16); color:#F4F2EF; }
.form-card input::placeholder, .form-card textarea::placeholder{ color:#7c7773; }

/* FOOTER (el fondo era var(--black) → ahora forzamos oscuro) */
.site-footer{ background:#0a0908; }

/* eyebrow con línea roja Porsche */
.eyebrow::before{ background:var(--accent-text); opacity:.9; }

/* Logo personalizado en la cabecera */
.site-logo{ text-align:center; line-height:0; }
.site-logo img{ max-height:48px; width:auto; display:inline-block; }
@media (max-width:768px){ .site-logo{ text-align:left; } .site-logo img{ max-height:40px; } }

/* ============================================================
   CABECERA BLANCA (sobre web oscura) — para logo/texto en negro
   ============================================================ */
.site-header{ background:rgba(245,244,242,.92); border-bottom:1px solid rgba(10,10,10,.10); }
.wordmark__main{ color:#0A0A0A; }
.wordmark__sub{ color:#5a5a5f; }
.wordmark__dot{ color:var(--accent-text); }
.main-nav{ background:#F5F4F2; }
.main-nav a{ color:#3A3A3D; }
.main-nav a:hover, .main-nav .current-menu-item > a{ color:#0A0A0A; }
.main-nav a::after{ background:var(--accent-text); }
.header-tel{ color:#0A0A0A; }
.nav-toggle span{ background:#0A0A0A; }

/* Corrección: nav sin caja en escritorio + logo (con marcas) más grande */
.main-nav{ background:transparent; }
@media (max-width:768px){ .main-nav{ background:#F5F4F2; } }
.site-header__inner{ height:auto; min-height:80px; padding-block:8px; }
.site-logo img{ max-height:82px; }
@media (max-width:900px){ .site-logo img{ max-height:58px; } }

/* ============================================================
   CABECERA OSCURA de nuevo (logo blanco con marcas)
   ============================================================ */
.site-header{ background:rgba(10,10,10,.85); border-bottom:1px solid rgba(244,242,239,.10); }
.wordmark__main{ color:#F4F2EF; }
.wordmark__sub{ color:#cfcabb; }
.main-nav a{ color:#d8d5d0; }
.main-nav a:hover, .main-nav .current-menu-item > a{ color:#F4F2EF; }
.header-tel{ color:#F4F2EF; }
.nav-toggle span{ background:#F4F2EF; }
@media (max-width:768px){ .main-nav{ background:#0A0A0A; } }

/* ============================================================
   FIX HEADER MÓVIL — barra en una sola fila + menú bien oculto
   ============================================================ */
@media (max-width:768px){
  .site-header__inner{
    display:flex !important;
    align-items:center;
    gap:10px;
    height:auto;
    min-height:60px;
  }
  .nav-toggle{ order:0; flex:0 0 auto; }
  .site-logo{ order:1; flex:1 1 auto; text-align:center; }
  .site-logo img{ max-height:44px; }
  .header-actions{ order:2; flex:0 0 auto; }
  /* el contenedor del menú no ocupa hueco: su lista es un desplegable fijo */
  .site-header__inner > nav:not(.main-nav){ position:absolute; width:0; height:0; padding:0; margin:0; overflow:visible; }
  /* menú: totalmente oculto cuando está cerrado, se abre con la hamburguesa */
  .main-nav{ inset:60px 0 auto 0; transform:translateY(-170%); }
  .main-nav.is-open{ transform:translateY(0); }
}

/* imagen dentro del hueco editorial */
.editorial__media img{ width:100%; height:100%; object-fit:cover; display:block; }

/* ============================================================
   AJUSTES PEDIDOS POR EL CLIENTE (v2.8)
   ============================================================ */

/* Portada más luminosa: se aclara la foto y baja el velo oscuro */
.hero__media img{ filter:brightness(1.04) contrast(1.01) saturate(1.02); }
/* Nota: la foto del hero ya viene revelada en claro desde el archivo;
   este filtro es solo un remate, no la corrección principal. */
.hero::before{ opacity:.04; }
/* Sombra suave detrás del texto para que siga leyéndose sobre foto clara */
.hero h1, .hero__sub, .hero__inner .eyebrow, .hero__note{ text-shadow:0 2px 18px rgba(0,0,0,.55); }

/* Aviso de cita previa en el hero */
.hero__note{
  margin-top:1.5em; font-size:.9rem; line-height:1.45; color:#fff;
  display:inline-flex; align-items:center; gap:.65em; max-width:56ch;
  padding:.7em 1.15em; border-radius:var(--radius-btn);
  background:rgba(10,10,10,.5); backdrop-filter:saturate(160%) blur(8px);
  border:1px solid rgba(255,255,255,.18);
  animation:lc-rise .8s .32s var(--ease-out) both;
}
.hero__note::before{
  content:""; flex:none; width:16px; height:16px; border-radius:50%;
  border:2px solid rgba(255,255,255,.75);
  background:
    linear-gradient(#fff,#fff) center/2px 6px no-repeat,
    linear-gradient(#fff,#fff) 60% 50%/5px 2px no-repeat;
}

/* ---- Etiqueta ambiental DGT (pegatina oficial) ---- */
.dgt{ display:inline-flex; align-items:center; gap:.6em; vertical-align:middle; }
.dgt__img{ flex:none; width:64px; height:64px; border-radius:50%; filter:drop-shadow(0 2px 8px rgba(0,0,0,.35)); }
.dgt__label{ font-size:.78rem; letter-spacing:.06em; text-transform:uppercase; color:var(--grey-500); }

/* En la ficha del coche la pegatina va suelta sobre el título */
.single-car .dgt{ margin-bottom:.9em; }

/* En la tarjeta, la pegatina flota sobre la foto */
.car-card__dgt{ position:absolute; top:12px; left:12px; z-index:2; line-height:0; }
.car-card__dgt .dgt__img{ width:58px; height:58px; }

/* ---- Precio contado + financiado, uno al lado del otro ---- */
.car-card__foot{ flex-direction:column; align-items:stretch; gap:10px; }
.prices{ display:flex; align-items:flex-end; gap:0; }
.prices__item{ display:flex; flex-direction:column; min-width:0; }
.prices--dual .prices__item{ flex:1; }
.prices__item--fin{ padding-left:16px; margin-left:16px; border-left:1px solid var(--grey-200); }
.prices__label{ font-size:.68rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--grey-500); margin-bottom:.15em; }
.prices__item--fin .prices__label{ color:var(--black); }   /* financiado: en blanco */
.prices--dual .car-card__price{ font-size:1.22rem; white-space:nowrap; }
.car-card__row{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.car-card__note{ font-size:.75rem; color:var(--grey-500); line-height:1.3; }
.prices--detail{ margin:.3em 0 .4em; }
.prices--detail .car-detail__price{ margin:0; }
.prices--detail.prices--dual .prices__item--fin{ padding-left:24px; margin-left:24px; }
@media (max-width:420px){ .prices--detail.prices--dual .car-detail__price{ font-size:1.9rem; } }

/* ---- Cuota de financiación ---- */
.car-detail__cuota{
  margin:.2em 0 .6em; font-size:1rem; font-weight:600; color:var(--accent-text);
}
.car-card__cuota{ display:block; color:var(--accent-text); font-weight:600; font-size:.8rem; }

/* Texto solo para lectores de pantalla */
.screen-reader-text{
  position:absolute!important; width:1px; height:1px; overflow:hidden;
  clip:rect(1px,1px,1px,1px); clip-path:inset(50%); white-space:nowrap;
}

/* Velo direccional: oscurece solo la columna del texto, la nave sigue clara */
.hero::after{
  background:
    linear-gradient(to right, rgba(0,0,0,.46) 0%, rgba(0,0,0,.24) 26%, rgba(0,0,0,.06) 50%, rgba(0,0,0,0) 68%),
    linear-gradient(to top, rgba(0,0,0,.50) 0%, rgba(0,0,0,.16) 34%, rgba(0,0,0,0) 62%, rgba(0,0,0,.02) 84%, rgba(0,0,0,.20) 100%);
}
.hero h1, .hero__sub, .hero__inner .eyebrow{ text-shadow:0 1px 3px rgba(0,0,0,.55), 0 4px 26px rgba(0,0,0,.75); }
.hero__note{ text-shadow:none; }

/* Legibilidad del hero sin oscurecer la foto: el texto se refuerza solo */
.hero__sub{ color:#fff; font-weight:500; }
.hero__inner .eyebrow{ color:rgba(255,255,255,.95) !important; }
.hero h1, .hero__sub, .hero__inner .eyebrow{
  text-shadow:0 1px 2px rgba(0,0,0,.65), 0 2px 10px rgba(0,0,0,.6), 0 6px 34px rgba(0,0,0,.7);
}

/* ============================================================
   GALERÍA DE LA FICHA — flechas + miniaturas (v2.9)
   ============================================================ */
.gallery__main{ position:relative; }

.gallery__nav{
  position:absolute; top:50%; transform:translateY(-50%); z-index:3;
  width:46px; height:46px; border-radius:50%; border:none; padding:0;
  display:grid; place-items:center;
  background:rgba(10,10,10,.55); color:#fff;
  backdrop-filter:saturate(160%) blur(8px);
  box-shadow:0 4px 18px rgba(0,0,0,.35);
  /* Siempre visibles: escondidas tras el hover no se encuentran */
  opacity:.82; transition:opacity .25s var(--ease), background .25s var(--ease), transform .25s var(--ease);
}
.gallery__main:hover .gallery__nav,
.gallery__nav:focus-visible{ opacity:1; }
.gallery__nav:hover{ background:#0A0A0A; }
.gallery__nav:active{ transform:translateY(-50%) scale(.94); }
.gallery__nav--prev{ left:14px; }
.gallery__nav--next{ right:14px; }
.gallery__nav svg{ width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }

/* Contador de fotos */
.gallery__count{
  position:absolute; right:14px; bottom:14px; z-index:3;
  padding:.35em .8em; border-radius:var(--radius-btn);
  background:rgba(10,10,10,.55); color:#fff;
  backdrop-filter:saturate(160%) blur(8px);
  font-size:.78rem; font-weight:600; letter-spacing:.04em;
}

/* Miniatura activa */
.gallery__thumbs img{ transition:border-color .25s var(--ease), opacity .25s var(--ease); opacity:.72; }
.gallery__thumbs img:hover{ opacity:1; }
.gallery__thumbs img.is-active{ border-color:var(--accent-text); opacity:1; }

/* En táctil no hay hover: las flechas se quedan siempre visibles */
/* En movil y en cualquier pantalla tactil la flecha se ve SIEMPRE,
   a plena opacidad y con el circulo mas grande para el dedo. */
@media (hover:none), (max-width:768px){
  .gallery__nav{
    opacity:1;
    width:52px; height:52px;
    background:rgba(10,10,10,.62);
    box-shadow:0 4px 20px rgba(0,0,0,.5);
  }
  .gallery__nav svg{ width:26px; height:26px; stroke-width:2.2; }
  .gallery__nav--prev{ left:10px; }
  .gallery__nav--next{ right:10px; }
}

/* Con muchas fotos la tira de miniaturas descuadraba la columna:
   se limita la altura y se desplaza dentro. La miniatura activa se
   trae a la vista sola desde main.js. */
.gallery__thumbs{
  max-height:342px; overflow-y:auto; overscroll-behavior:contain;
  padding-right:6px; scrollbar-width:thin;
  scrollbar-color:rgba(244,242,239,.28) transparent;
}
.gallery__thumbs::-webkit-scrollbar{ width:6px; }
.gallery__thumbs::-webkit-scrollbar-track{ background:transparent; }
.gallery__thumbs::-webkit-scrollbar-thumb{ background:rgba(244,242,239,.22); border-radius:99px; }
.gallery__thumbs::-webkit-scrollbar-thumb:hover{ background:rgba(244,242,239,.38); }

/* ---- Botón principal ("Pide cita", WhatsApp…) en blanco y negro ---- */
.btn--accent{ color:var(--on-accent); }
.btn--accent:hover{ color:var(--on-accent); }

/* ---- Filtros instantáneos: sin botón "Filtrar" cuando hay JavaScript ---- */
.filters.is-auto .filters__submit{ display:none; }
[data-results]{ transition:opacity .2s var(--ease); }
[data-results].is-loading{ opacity:.45; pointer-events:none; }


/* ============================================================
   COLOR DE ACENTO — ROJO  (#C8102E)
   Tiñe el relleno de los botones, la barra de confianza y los iconos.
   El resto de la web es blanco y negro.
   ============================================================ */
body{ --accent:#C8102E; --accent-dark:#960C22; --on-accent:#FFFFFF; }

/* El botón de llamar flotante no se tiñe: se queda neutro */
.fab--tel{ background:var(--surface-2); color:var(--black); }

/* Sobre la foto de la portada el botón también lleva el rojo */
.hero .btn--accent{ background:var(--accent); border-color:var(--accent); color:var(--on-accent); }
.hero .btn--accent:hover{ background:var(--accent-dark); border-color:var(--accent-dark); color:var(--on-accent); }