/* V27 - cambios unificados desktop + móvil
   Sucursales: parte superior visible, mitad inferior muy oscura y texto siempre abajo */

.branches-premium{
  gap: 18px;
}

/* Card = foto nítida arriba + franja negra sólida abajo con TODO el texto */
.branches-premium article{
  position: relative;
  min-height: 560px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  gap: 6px;
  overflow: hidden;
  isolation: isolate;
  padding: 34px 34px 30px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 40px;
  /* Solo la foto (con brillo levantado): el negro lo pone ::after */
  background: #4a4a4a url('/assets/images/service-pickup-ffd9cc99.jpg') center 34% / cover no-repeat;
  background-blend-mode: screen;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 30px 85px rgba(0,0,0,.35);
}
.branches-premium article:nth-child(2){
  background-image: url('/assets/images/service-neumaticos-4ba7e3b6.webp');
  background-position: center 30%;
}

/* Sin darkening general: la foto de arriba queda limpia */
.branches-premium article::before{
  display: none;
}

/* Franja negra sólida anclada abajo: cubre por completo el bloque de texto */
.branches-premium article::after{
  content: "";
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  top: auto;
  bottom: 0;
  height: 72%;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(8,8,10,0)  0,
    rgba(8,8,10,.8) 34px,
    #08080a         66px,
    #08080a         100%
  );
}

.branches-premium article > *{
  position: relative;
  z-index: 1;
}

.branches-premium article span{
  margin: 0 0 2px;
  color: #ffd500;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-size: .74rem;
  font-weight: 800;
  line-height: 1;
}

.branches-premium article h3{
  margin: 0 0 10px;
  font-size: clamp(50px, 6vw, 84px);
  line-height: .84;
  letter-spacing: -.02em;
  color: #fff8ef;
  text-shadow: 0 8px 24px rgba(0,0,0,.5);
}

.branches-premium article p,
.branches-premium article small{
  margin: 0;
  max-width: 92%;
}

.branches-premium article p{
  color: #f2f0ea;
  font-size: 1.06rem;
  line-height: 1.35;
  font-weight: 600;
}

.branches-premium article small{
  margin-top: 9px;
  color: rgba(255,255,255,.6);
  font-size: .92rem;
  line-height: 1.5;
}

.branches-premium article div{
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,.12);
}

.branches-premium article div a{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.05));
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 10px 24px rgba(0,0,0,.20);
  color: #ffd500;
  text-decoration: none;
  -webkit-backdrop-filter: blur(12px) saturate(135%);
  backdrop-filter: blur(12px) saturate(135%);
}
.branches-premium article div a:first-child::before{
  content: "⌖";
  display:inline-flex;
  width:18px;height:18px;
  align-items:center;justify-content:center;
}
.branches-premium article div a:last-child::before{
  content: "✆";
  display:inline-flex;
  width:18px;height:18px;
  align-items:center;justify-content:center;
}
.branches-premium article div a:hover{
  transform: translateY(-1px);
  background: linear-gradient(180deg, rgba(255,255,255,.13), rgba(255,255,255,.07));
}

/* MÓVIL: mismo criterio visual, solo se compacta */
@media (max-width: 820px){
  .branches-premium{
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
  .branches-premium article{
    min-height: 440px !important;
    padding: 140px 20px 22px !important;
    border-radius: 26px !important;
    gap: 5px !important;
    background-position: center 30% !important;
  }
  .branches-premium article::before{
    display: none !important;
  }
  .branches-premium article::after{
    display: block !important;
    height: 72% !important;
    background: linear-gradient(
      180deg,
      rgba(8,8,10,0)   0,
      rgba(8,8,10,.8)  40px,
      #08080a          82px,
      #08080a          100%
    ) !important;
  }
  .branches-premium article h3{
    font-size: clamp(2.8rem, 13vw, 4.5rem) !important;
  }
  .branches-premium article p,
  .branches-premium article small{
    max-width: 100% !important;
  }
  .branches-premium article p{font-size: .98rem !important;}
  .branches-premium article small{font-size: .9rem !important;}
  .branches-premium article div{
    justify-content: flex-start !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
  }
  .branches-premium article div a{
    padding: 9px 12px !important;
    font-size: .84rem !important;
  }
}

/* Sucursales lado a lado (2 columnas) SOLO en teléfono.
   Más foto visible arriba, el negro arranca más abajo y textos compactos
   para que todo entre a lo ancho de la card sin apretarse. */
@media (max-width: 760px){
  .branches-premium{ grid-template-columns: 1fr 1fr !important; gap: 8px !important; }
  .branches-premium article{
    min-height: 310px !important;
    padding: 142px 10px 12px !important;
    border-radius: 14px !important;
    gap: 0 !important;
    background-position: center 32% !important;
  }
  /* El panel negro arranca más abajo -> se ve mucho más la foto */
  .branches-premium article::after{
    height: 56% !important;
    background: linear-gradient(
      180deg,
      rgba(8,8,10,0)   0,
      rgba(8,8,10,.82) 26px,
      #08080a          58px,
      #08080a          100%
    ) !important;
  }
  .branches-premium article span{ font-size: .5rem !important; letter-spacing: .07em !important; }
  .branches-premium article h3{ font-size: 1.12rem !important; margin: 2px 0 3px !important; line-height: .95 !important; letter-spacing: 0 !important; }
  .branches-premium article p{ font-size: .62rem !important; line-height: 1.25 !important; max-width: 100% !important; }
  .branches-premium article small{ font-size: .54rem !important; margin-top: 3px !important; line-height: 1.3 !important; max-width: 100% !important; }
  .branches-premium article div{
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 4px !important;
    margin-top: 7px !important;
    padding-top: 7px !important;
  }
  .branches-premium article div a{
    justify-content: center !important;
    padding: 6px 4px !important;
    font-size: .56rem !important;
    border-radius: 8px !important;
  }
  .branches-premium article div a::before{ display: none !important; }
}

/* Móvil: mantener compacidad de V24/V26 también en escritorio y móvil */
.why-section,
.faq-section{
  padding-top: 36px;
  padding-bottom: 44px;
}

.why-grid article,
.faq-section details{
  border-radius: 22px;
}

@media (max-width: 820px){
  .why-section,
  .faq-section{
    padding-top: 26px !important;
    padding-bottom: 30px !important;
  }
}

/* Logo del header: la imagen tiene 25% de aire arriba y abajo.
   Recortamos ese margen (overflow) y agrandamos el logo real ~50%,
   sin cambiar la altura del header (no afecta el hero). */
.premium-header .logo-wrap{ overflow: hidden; align-items: center; }

@media (min-width: 981px){          /* escritorio */
  .premium-header .logo-wrap{ width: auto; height: 52px; }
  .premium-header .logo-wrap img{ width: auto; height: 104px; object-fit: contain; }
}
@media (min-width: 761px) and (max-width: 980px){   /* tablet */
  .premium-header .logo-wrap{ width: auto; height: 47px; }
  .premium-header .logo-wrap img{ width: auto; height: 94px; object-fit: contain; }
}
@media (max-width: 760px){          /* móvil */
  .premium-header .logo-wrap{ width: auto !important; height: 58px !important; overflow: hidden !important; align-items: center !important; }
  .premium-header .logo-wrap img{ width: auto !important; height: 116px !important; object-fit: contain !important; }
  /* Sin botón "Reservar turno" en el header móvil */
  .premium-header .header-cta{ display: none !important; }
}

/* Los íconos de redes de la barra de reseñas son solo para móvil */
.rep-social{ display: none; }

/* ============================================================= *
 *  AUTOS EN VENTA (fichas dinámicas desde el administrador)
 * ============================================================= */
.vehicle-grid-v31{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
}
.vehicle-grid-v31.is-single{ grid-template-columns: 1fr; }

.vehicle-card-v31{
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 26px;
  background: linear-gradient(150deg,#151517,#0b0b0d);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 22px 60px rgba(0,0,0,.32);
}
.vehicle-card-photo-v31{
  position: relative;
  min-height: 220px;
  background-color: #0a0a0b;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
.vehicle-grid-v31.is-single .vehicle-card-photo-v31{ min-height: 340px; }

.vehicle-badge-v31{
  position: absolute; left: 14px; top: 14px;
  padding: 6px 12px; border-radius: 99px;
  font-size: 10px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase;
}
.vehicle-badge-v31.is-ok{ background: rgba(34,197,94,.92); color: #04140a; }
.vehicle-badge-v31.is-off{
  background: rgba(255,255,255,.16); color: #f4f2ed;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}

.vehicle-card-body-v31{ flex: 1; padding: 20px; display: flex; flex-direction: column; gap: 10px; }
.vehicle-card-body-v31 h3{
  margin: 0;
  font-family: var(--font-barlow-condensed), Impact, sans-serif;
  font-size: clamp(24px, 2vw, 34px);
  line-height: .98; letter-spacing: -.01em; text-transform: uppercase;
}
.vehicle-card-specs-v31{ display: flex; flex-wrap: wrap; gap: 7px; }
.vehicle-card-specs-v31 span{
  padding: 5px 10px; border: 1px solid rgba(255,255,255,.16); border-radius: 99px;
  color: #cfcdc7; font-size: 11px; font-weight: 700;
}
.vehicle-card-desc-v31{ margin: 0; color: var(--muted); font-size: 13.5px; line-height: 1.5; }
.vehicle-card-price-v31{
  margin-top: auto; padding-top: 12px;
  display: flex; flex-direction: column; gap: 2px;
  border-top: 1px solid rgba(255,255,255,.1);
}
.vehicle-card-price-v31 small{
  color: #8f8e8a; font-size: 9px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase;
}
.vehicle-card-price-v31 strong{ font-size: 23px; font-weight: 900; color: var(--yellow); }
.vehicle-card-cta-v31{
  margin-top: 12px; min-height: 46px;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  border-radius: 14px;
  background: linear-gradient(135deg,#ffe27a,#ffd100 46%,#b8870a);
  color: #0a0a0a; font-size: 11px; font-weight: 900; letter-spacing: .09em; text-transform: uppercase;
}
.vehicle-card-cta-v31:hover{ filter: brightness(1.06); }

/* ============================================================= *
 *  HERO MÓVIL (solo ≤760px) — estética premium
 *  · Se ocultan los chips
 *  · Los dos botones quedan lado a lado, sin encimarse
 * ============================================================= */
@media (max-width: 760px){
  /* Ocultar los chips (Baterías premium, Neumáticos, etc.) solo en móvil */
  .scrolly-hero .hero-chips{ display: none !important; }

  /* Acortar el hero y bajar el anclaje del contenido: elimina el gran espacio
     muerto debajo de los botones. La tarjeta de reseñas fluye natural (sin
     margen negativo), así NUNCA se encima, en cualquier alto de pantalla. */
  .scrolly-hero{ height: auto !important; min-height: 0 !important; }
  .scrolly-sticky{ height: auto !important; min-height: 0 !important; position: relative !important; }
  /* Fondo (canvas + capas) como absolutos para que el contenido fluya limpio */
  .scrolly-sticky .hero-canvas,
  .scrolly-sticky .hero-shade,
  .scrolly-sticky .hero-noise{ position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; }
  .scrolly-hero .hero-content{
    position: relative !important;
    inset: auto !important;
    transform: none !important;
    width: auto !important;
    max-width: 560px !important;
    margin: 0 !important;
    padding: 26px 12px 24px !important;
  }

  /* Acercar la sección de reseñas a los botones (elimina el espacio muerto
     que deja el hero debajo de los botones) + tarjeta ordenada. Solo móvil. */
  .reputation-strip{
    margin: 10px 12px 0 !important;
    position: relative; z-index: 3;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    padding: 14px !important;
    border: 1px solid rgba(255,209,0,.24) !important;
    border-radius: 18px !important;
    background: linear-gradient(180deg, rgba(22,22,24,.92), rgba(8,8,10,.96)) !important;
    box-shadow: 0 16px 40px rgba(0,0,0,.4) !important;
  }

  /* Bloque de reseñas: RESEÑAS VERIFICADAS + estrellas juntas / Google debajo */
  .reputation-strip > a{
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    column-gap: 9px !important;
    row-gap: 3px !important;
    border: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    min-width: 0 !important;
    flex: 1 1 auto !important;
  }
  .reputation-strip > a span{ font-size: clamp(.62rem, 2.9vw, .72rem) !important; letter-spacing: .12em !important; color: #f4f2ed !important; white-space: nowrap !important; }
  .reputation-strip > a b{ font-size: clamp(.74rem, 3.3vw, .86rem) !important; letter-spacing: .04em !important; color: var(--yellow) !important; white-space: nowrap !important; }
  .reputation-strip > a strong{ flex: 0 0 100% !important; font-size: clamp(.68rem, 3.2vw, .8rem) !important; color: #c7c6c1 !important; white-space: nowrap !important; }
  .reputation-strip > a em{ display: none !important; }

  /* Ocultar la fila de garantías SOLO en móvil */
  .reputation-strip > div{ display: none !important; }

  /* AUTOS EN VENTA: de a dos. Si hay uno solo, una ficha grande. */
  .vehicle-grid-v31{ grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
  .vehicle-grid-v31.is-single{ grid-template-columns: 1fr !important; }
  .vehicle-card-v31{ border-radius: 16px !important; }
  .vehicle-card-photo-v31{ min-height: 118px !important; }
  .vehicle-grid-v31.is-single .vehicle-card-photo-v31{ min-height: 235px !important; }
  .vehicle-badge-v31{ left: 8px !important; top: 8px !important; padding: 4px 8px !important; font-size: .52rem !important; }
  .vehicle-card-body-v31{ padding: 12px !important; gap: 7px !important; }
  .vehicle-card-body-v31 h3{ font-size: 1.05rem !important; }
  .vehicle-grid-v31.is-single .vehicle-card-body-v31 h3{ font-size: 1.75rem !important; }
  .vehicle-card-specs-v31{ gap: 5px !important; }
  .vehicle-card-specs-v31 span{ padding: 4px 7px !important; font-size: .56rem !important; }
  .vehicle-grid-v31.is-single .vehicle-card-specs-v31 span{ padding: 5px 10px !important; font-size: .72rem !important; }
  /* En la vista de a dos la descripción no entra: se muestra solo en la grande */
  .vehicle-grid-v31:not(.is-single) .vehicle-card-desc-v31{ display: none !important; }
  .vehicle-card-desc-v31{ font-size: .8rem !important; }
  .vehicle-card-price-v31{ padding-top: 9px !important; }
  .vehicle-card-price-v31 small{ font-size: .48rem !important; }
  .vehicle-card-price-v31 strong{ font-size: 1.05rem !important; }
  .vehicle-grid-v31.is-single .vehicle-card-price-v31 strong{ font-size: 1.6rem !important; }
  .vehicle-card-cta-v31{ margin-top: 9px !important; min-height: 38px !important; font-size: .6rem !important; border-radius: 10px !important; }
  .vehicle-grid-v31.is-single .vehicle-card-cta-v31{ min-height: 48px !important; font-size: .72rem !important; }

  /* Tarjetas de servicios en 2x2 (dos arriba, dos abajo), compactas */
  .services-bento{ grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
  .service-card{ min-height: 0 !important; padding: 12px !important; grid-template-rows: auto auto 1fr !important; border-radius: 16px !important; }
  .service-art{ margin: 10px 0 !important; height: 104px !important; border-radius: 12px !important; }
  .service-art span{ padding: 7px 9px !important; font-size: 7px !important; }
  .service-meta span{ font-size: 9px !important; }
  .service-meta p{ font-size: 6.5px !important; letter-spacing: .08em !important; }
  .service-copy small{ font-size: 7px !important; }
  .service-copy h3{ font-size: 1.02rem !important; margin: 6px 0 !important; line-height: .98 !important; }
  .service-copy > p{ font-size: .72rem !important; line-height: 1.34 !important; margin: 6px 0 !important; }
  .service-copy a{ margin-top: 10px !important; padding-top: 10px !important; font-size: 7.5px !important; }

  /* Botón "CONSULTAR" del portal: altura y peso premium (igual al input) */
  .plate-form button{
    height: 56px !important;
    margin-left: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    font-size: .82rem !important;
    letter-spacing: .06em !important;
    border-radius: 16px !important;
  }

  /* Íconos de redes a la derecha, en línea con las reseñas */
  .rep-social{ display: flex !important; align-items: center !important; gap: 8px !important; flex: 0 0 auto !important; }
  .rep-social a{
    width: 38px; height: 38px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 11px;
    color: #f4f2ed;
    background: linear-gradient(180deg, rgba(255,255,255,.1), rgba(255,255,255,.04));
    border: 1px solid rgba(255,255,255,.16);
    -webkit-backdrop-filter: blur(10px) saturate(140%);
    backdrop-filter: blur(10px) saturate(140%);
    transition: transform .18s ease, background .18s ease, color .18s ease, border-color .18s ease;
  }
  .rep-social a svg{ width: 19px; height: 19px; }
  .rep-social a:active{ transform: translateY(1px); }
  .rep-social a:hover{ color: #0a0a0a; background: var(--yellow); border-color: var(--yellow); }

  /* Dos botones en una sola fila, mismo ancho */
  .scrolly-hero .hero-actions{
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 11px !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
    margin-top: 24px !important;
  }

  .scrolly-hero .hero-actions .cta{
    width: 100% !important;
    min-width: 0 !important;
    min-height: 58px !important;
    padding: 0 10px !important;
    gap: 7px !important;
    font-size: .74rem !important;
    letter-spacing: .02em !important;
    justify-content: center !important;
    text-align: center !important;
    white-space: nowrap !important;
    border-radius: 16px !important;
    transition: transform .18s ease, box-shadow .18s ease !important;
  }
  .scrolly-hero .hero-actions .cta b{ font-size: .95em !important; }
  .scrolly-hero .hero-actions .cta:active{ transform: translateY(1px) !important; }

  /* Botón primario: amarillo con glow premium */
  .scrolly-hero .hero-actions .cta-primary{
    background: linear-gradient(135deg, #ffe27a, #ffd100 46%, #b8870a) !important;
    color: #0a0a0a !important;
    box-shadow: 0 14px 32px rgba(245,197,24,.30),
                inset 0 1px 0 rgba(255,255,255,.55) !important;
  }

  /* Botón secundario: vidrio esmerilado refinado */
  .scrolly-hero .hero-actions .cta-glass{
    background: linear-gradient(180deg, rgba(255,255,255,.13), rgba(255,255,255,.045)) !important;
    border: 1px solid rgba(255,255,255,.22) !important;
    color: #f4f2ed !important;
    -webkit-backdrop-filter: blur(16px) saturate(140%) !important;
    backdrop-filter: blur(16px) saturate(140%) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.14) !important;
  }
}