/* ===================================================================
   BarrasdeAccess.css — Producción v2
   Página: Bloques/Servicios/BarrasdeAccess.html
   Depende de: ../../SRC/CSS/index.css
   Cambios v2:
   - Botones animados auto-width (evita recorte de texto)
   - Texto blanco por defecto en .type1--white
   - Hero blanco, textos justificados, grids y FAQ como v1.4/v1.5
   =================================================================== */

:root{
  --brand:#799FEA;
  --mauve:#DBC3DB;
  --graphite:#4E4C49;
  --soft:#EAE0D5;
  --lemon:#E5E580;
}

/* ---------- HERO ---------- */
.service-hero{position:relative;min-height:68svh;display:grid;align-items:end;color:#fff}
.service-hero__media{position:absolute;inset:0;z-index:-2;overflow:hidden}
.service-hero__media img{width:100%;height:100%;object-fit:cover;filter:contrast(1.04) saturate(1.04)}
.service-hero__overlay{position:absolute;inset:0;z-index:-1;background:
  radial-gradient(45% 35% at 30% 22%, rgba(0,0,0,.35) 0%, transparent 60%),
  linear-gradient(180deg, rgba(8,8,8,.35) 0%, rgba(8,8,8,.6) 70%, rgba(8,8,8,.82) 100%)}
.service-hero__content{padding:clamp(18px,3vw,28px) 0 var(--space-l)}
.service-hero__title{font-family:var(--font-header);font-size:clamp(2.2rem,6vw,4rem);margin:.35rem 0 .4rem;color:#fff}
.service-hero__lead{font-size:clamp(1.05rem,2.4vw,1.25rem);color:#fff}
.breadcrumb{display:none}

/* CTA en hero: auto-width + no-wrap (FIX recorte) */
.service-hero__cta{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:1rem}
.service-hero__cta .button,
.cta-center .button,
.service-book .button{min-height:50px;width:auto;padding-inline:1.2rem}
.button .btn-txt{white-space:nowrap;display:inline-block;padding:0 .1rem}

/* Variante blanca por defecto para CTA de certificación */
.type1--white{color:#fff !important;border-color:rgba(255,255,255,.9) !important}
.type1--white .btn-txt{color:#fff !important}
.type1--white.type1::after{background:var(--brand) !important}

/* ---------- INTRO ---------- */
.service-intro{background:linear-gradient(180deg, rgba(0,0,0,.03), transparent)}
.service-intro p{ text-align:justify; text-justify:inter-word }
.service-what .col-text p,
.service-cert .section__lead,
.service-book .section__lead{ text-align:justify; text-justify:inter-word }

/* ---------- BENEFICIOS (cards con blob) ---------- */
.benefits-grid{display:grid;gap:clamp(14px,2.4vw,20px);grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.card{position:relative;border-radius:16px;overflow:hidden;isolation:isolate;height:240px;display:flex;align-items:center;justify-content:center;box-shadow:0 16px 36px rgba(0,0,0,.12);background:transparent}
.card .bg{position:absolute;inset:8px;border-radius:12px;z-index:2;background:rgba(255,255,255,.9);backdrop-filter:blur(18px);border:1px solid rgba(0,0,0,.06);padding:18px;display:grid;place-content:center;text-align:center}
.card .bg h3{font-family:var(--font-header);margin-bottom:.35rem;font-size:1.25rem}
.card .bg p{color:#2b2b2b}
.card .blob{position:absolute;z-index:1;top:50%;left:50%;width:160px;height:160px;border-radius:50%;filter:blur(14px);opacity:.85;transform:translate(-100%,-100%);animation:blob-bounce 6s infinite ease-in-out}
.card .blob[data-color="blue"]{background:var(--brand)}
.card .blob[data-color="mauve"]{background:var(--mauve)}
.card .blob[data-color="graphite"]{background:var(--graphite)}
.card .blob[data-color="soft"]{background:var(--soft)}
.card .blob[data-color="lemon"]{background:var(--lemon)}
.card .blob[data-color="brand"]{background:linear-gradient(135deg,var(--brand),#5a83ea)}
@keyframes blob-bounce{
  0%{transform:translate(-100%,-100%)}
  25%{transform:translate(0%,-100%)}
  50%{transform:translate(0%,0%)}
  75%{transform:translate(-100%,0%)}
  100%{transform:translate(-100%,-100%)}
}

/* ---------- QUÉ ESPERAR ---------- */
.service-what .two-col{display:grid;gap:clamp(14px,2.4vw,24px);grid-template-columns:1fr;align-items:center}
.service-what .col-media img{width:100%;height:360px;object-fit:cover;border-radius:16px;box-shadow:var(--shadow-1)}
.service-what .cta-row{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:.6rem}
@media (min-width:900px){
  .service-what .two-col{grid-template-columns:1.1fr .9fr}
  .service-what .col-media img{height:420px}
}

/* ---------- CERTIFICACIÓN ---------- */
.service-cert .points-grid{display:grid;gap:.6rem;grid-template-columns:1fr;margin:1rem 0}
.service-cert .point{display:flex;align-items:flex-start;gap:.5rem;background:#fff;border:1px solid rgba(0,0,0,.06);padding:.7rem 1rem;border-radius:12px;box-shadow:var(--shadow-1)}
.service-cert .point span{color:var(--brand);font-weight:800}
.service-cert .cta-center{display:flex;justify-content:center;margin-top:.8rem}

/* ---------- RESERVA ---------- */
.service-book .book-form .fields{display:flex;gap:.6rem;flex-wrap:wrap;margin:.6rem 0}
.service-book .book-form input{flex:1 1 220px;padding:.85rem 1rem;border-radius:999px;border:1px solid rgba(0,0,0,.1);background:#fff;font:inherit}
.service-book .book-form .cta-row{display:flex;gap:.6rem;flex-wrap:wrap}
.service-book .fine{margin-top:.6rem;color:#4a4a4a}

/* ---------- FAQ ---------- */
.service-faq .faq{background:#fff;border:1px solid rgba(0,0,0,.08);border-radius:12px;padding:.75rem 1rem;margin:.6rem 0;box-shadow:var(--shadow-1)}
.service-faq .faq:hover{box-shadow:var(--shadow-2)}
.service-faq .faq__content{padding:.25rem .25rem .6rem}
.faq-controls{display:flex;gap:.6rem;flex-wrap:wrap;margin-bottom:.6rem}

/* ---------- Audio toggle ---------- */
.audio-toggle{position:fixed;left:12px;bottom:12px;z-index:1060;border:1px solid rgba(0,0,0,.2);background:rgba(255,255,255,.85);backdrop-filter:blur(8px);border-radius:999px;padding:.5rem .8rem;font-weight:700;box-shadow:var(--shadow-1)}
.audio-toggle:hover{box-shadow:var(--shadow-2)}

/* Utilidades */
.container.narrow{max-width:880px}
.cta-row .btn, .cta-center .button, .service-hero__cta .btn, .service-hero__cta .button{align-self:stretch}
/* ===========================
   Preguntas frecuentes (FAQ)
   Estilos listos para producción
   — Pega este bloque en tu CSS global
   — o en BarrasdeAccess.css
   =========================== */

/* Contenedor */
.service-faq { padding: var(--space-l, 3rem) var(--space-m, 2rem); }

/* Controles (Abrir todo / Cerrar todo) */
.faq-controls{
  display:flex; gap:.6rem; flex-wrap:wrap; margin-bottom:.8rem;
}

/* Tarjeta base */
.service-faq .faq{
  background:#fff;
  border:1px solid rgba(0,0,0,.08);
  border-radius:12px;
  padding:.75rem 1rem;
  margin:.6rem 0;
  box-shadow:0 8px 20px rgba(0,0,0,.08);
  transition:box-shadow .25s ease, border-color .25s ease, transform .25s ease;
}
.service-faq .faq:hover{
  box-shadow:0 16px 34px rgba(0,0,0,.14);
  border-color:rgba(0,0,0,.12);
  transform:translateY(-1px);
}

/* Summary accesible (esconde el triángulo nativo) */
.service-faq summary{
  list-style:none;
  display:flex; align-items:center; gap:.7rem;
  cursor:pointer; user-select:none; outline:0;
}
.service-faq summary::-webkit-details-marker{ display:none; }

/* Título de la pregunta */
.faq__q{
  font-weight:700;
  flex:1;
  font-size:1.05rem;
  line-height:1.4;
}

/* Chevron */
.faq__chev{
  width:22px; height:22px; flex:0 0 auto;
  transition:transform .3s cubic-bezier(.22,.61,.36,1);
  opacity:.9;
}

/* Cuerpo con animación (lo controla CSS o JS) */
.faq__content{
  overflow:hidden;
  height:0;
  opacity:0;
  will-change:height, opacity;
  transition: height .35s cubic-bezier(.22,.61,.36,1), opacity .3s ease;
  padding:0 .25rem;
}
.faq__content p{ margin:.6rem 0; color:#2b2b2b; }

/* Estado abierto (si usas <details open>) */
.service-faq details[open] .faq__chev{ transform:rotate(180deg); }
.service-faq details[open] .faq__content{
  height:auto; opacity:1; padding-bottom:.6rem;
}

/* Estado abierto (si usas clase .open desde JS) */
.service-faq .faq.open .faq__chev{ transform:rotate(180deg); }
.service-faq .faq.open .faq__content{
  height:auto; opacity:1; padding-bottom:.6rem;
}

/* Enfoque teclado */
.service-faq summary:focus-visible{
  outline:3px dashed var(--brand, #799FEA);
  outline-offset:4px;
  border-radius:10px;
}

/* Variantes de color (opcional) */
.service-faq .faq.is-brand{ border-color: rgba(121,159,234,.35); }
.service-faq .faq.is-brand .faq__q{ color: var(--brand, #799FEA); }

/* Responsive fino */
@media (min-width: 900px){
  .service-faq .faq{ padding: .85rem 1.1rem; }
  .faq__q{ font-size:1.08rem; }
}