/*
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: 1.0.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;
  --accent:  #C8102E;      /* rojo automoción — cambiable si el cliente da color de marca */
  --accent-dark:#9E0C24;

  --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); }
.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,.75) 0%, rgba(0,0,0,.15) 45%, rgba(0,0,0,.25) 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:#fff; }
.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); }
.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
   ============================================================ */
.testimonials{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:24px; }
.testimonial{ background:var(--grey-50); border-radius:var(--radius-card); padding:32px; border:1px solid var(--grey-100); }
.testimonial__stars{ color:#FFC531; margin-bottom:14px; letter-spacing:2px; }
.testimonial__text{ font-size:1.02rem; line-height:1.6; margin-bottom:16px; }
.testimonial__author{ font-weight:600; font-size:.92rem; }
.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); }
.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:#fff; box-shadow:var(--shadow-lg); font-size:1.4rem; }
.fab--wa{ background:#25D366; }
.fab--tel{ background:var(--black); }

/* ============================================================
   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:#fff; }
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); 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,.82) 0%, rgba(0,0,0,.28) 40%, rgba(0,0,0,.12) 70%, rgba(0,0,0,.35) 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),var(--accent)) 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 rgba(200,16,46,.12); }

/* 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 rgba(200,16,46,.12); }
.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:rgba(200,16,46,.08); 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); 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; }
}


/* ============================================================
   ★★ INVERSIÓN — Negro base / Blanco texto + Rojo Porsche + Verde botella ★★
   Intercambia blanco↔negro del diseño original. Acentos: #C8102E (rojo) · #0F3D2E (verde botella)
   ============================================================ */
: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:#9A2B34; --accent-dark:#6B1E26;   /* rojo apagado / burdeos (menos vivo) */
  --green:#0F3D2E; --green-2:#164a38;         /* verde botella */
  --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:#F4F2EF; }
.trustbar__item .star{ color:#E7C97A; }
.trustbar__sep{ color:rgba(244,242,239,.35); }

/* TARJETAS DE COCHE */
.car-card{ background:var(--surface); border:1px solid rgba(244,242,239,.10); }
.car-card:hover{ border-color:rgba(154,43,52,.55); }
.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:#F4F2EF; }

/* 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:rgba(154,43,52,.18); color:#c06b73; }

/* EDITORIAL / "VENDE TU COCHE" → bloque ROJO PROFUNDO */
.editorial--dark{ background:var(--accent-dark); 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); 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); }
.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); }
.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; } }