/* ============================================================
   PrismaXWeb — Páginas interiores
   ------------------------------------------------------------
   Se carga DESPUÉS de styles.css y reutiliza sus tokens
   (--navy, --accent, --bg, --ff-disp…). No redefine ninguna
   variable ni pisa nada de la home: todas las clases llevan
   prefijo pg-.

   Cubre: cabecera de página, breadcrumb, bloques de contenido,
   tarjetas, tabla de planes, FAQ, casos y CTA final.
   ============================================================ */

/* ── LAYOUT BASE ───────────────────────────────────────────── */

.pg-main { display: block; }

.pg-section { padding: 4.5rem 0; }
.pg-section--alt { background: var(--bg-alt); }
.pg-section--blue { background: var(--bg-blue); }
.pg-section--tight { padding: 3rem 0; }

@media (max-width: 600px) {
  .pg-section { padding: 3.25rem 0; }
  .pg-section--tight { padding: 2.25rem 0; }
}

/* ── CABECERA DE PÁGINA ────────────────────────────────────── */

.pg-hero {
  padding: 8.5rem 0 4rem;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}

@media (max-width: 768px) {
  .pg-hero { padding: 7rem 0 3rem; }
}

.pg-hero-inner { max-width: 780px; }

.pg-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 1.5rem;
  font-size: 0.8rem;
  color: var(--muted);
}

.pg-breadcrumb a { color: var(--muted); transition: color 0.2s; }
.pg-breadcrumb a:hover { color: var(--accent); }
.pg-breadcrumb span[aria-current] { color: var(--navy); }
.pg-breadcrumb .pg-sep { opacity: 0.5; }

.pg-eyebrow {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 1rem;
}

.pg-h1 {
  font-family: var(--ff-disp);
  font-size: clamp(2.15rem, 5vw, 3.4rem);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -0.015em;
  color: var(--navy);
  margin-bottom: 1.1rem;
}

.pg-h1 em { font-style: italic; color: var(--accent); }

.pg-lead {
  font-size: clamp(1.02rem, 2vw, 1.15rem);
  line-height: 1.7;
  color: var(--slate);
  font-weight: 300;
  max-width: 62ch;
}

.pg-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin-top: 2rem;
}

/* ── TÍTULOS DE SECCIÓN ────────────────────────────────────── */

.pg-head { max-width: 62ch; margin-bottom: 2.5rem; }
.pg-head--center { margin-left: auto; margin-right: auto; text-align: center; }

.pg-h2 {
  font-family: var(--ff-disp);
  font-size: clamp(1.6rem, 3.4vw, 2.3rem);
  font-weight: 400;
  line-height: 1.2;
  color: var(--navy);
  margin-bottom: 0.8rem;
}

.pg-h2 em { font-style: italic; color: var(--accent); }

.pg-h3 {
  font-family: var(--ff-body);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--navy);
  margin-bottom: 0.5rem;
}

.pg-p {
  font-size: 0.97rem;
  line-height: 1.75;
  color: var(--slate);
  font-weight: 300;
  margin-bottom: 1rem;
  max-width: 68ch;
}

.pg-p:last-child { margin-bottom: 0; }
.pg-p strong { font-weight: 600; color: var(--navy); }
.pg-p a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }

/* ── REJILLAS Y TARJETAS ───────────────────────────────────── */

.pg-grid { display: grid; gap: 1.5rem; }
.pg-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pg-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

@media (max-width: 900px) { .pg-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .pg-grid--2, .pg-grid--3 { grid-template-columns: minmax(0, 1fr); }
}

.pg-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.6rem;
  transition: transform 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out);
}

.pg-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 40px -28px rgba(15, 23, 42, 0.35);
}

.pg-card-icon {
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border-radius: 9px;
  background: var(--accent-dim);
  color: var(--accent);
  margin-bottom: 1rem;
}

.pg-card .pg-p { font-size: 0.9rem; }

/* ── LISTA DE COMPROBACIÓN ─────────────────────────────────── */

.pg-list { list-style: none; display: grid; gap: 0.7rem; margin: 1.2rem 0; }

.pg-list li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.7rem;
  align-items: start;
  font-size: 0.94rem;
  line-height: 1.6;
  color: var(--slate);
  font-weight: 300;
}

.pg-list li::before {
  content: '✓';
  color: var(--accent);
  font-weight: 700;
  line-height: 1.6;
}

.pg-list--plain li::before { content: '—'; color: var(--muted); font-weight: 400; }

/* ── PLANES ────────────────────────────────────────────────── */

.pg-plan {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.8rem 1.6rem;
}

.pg-plan--featured { border-color: var(--accent); box-shadow: 0 20px 50px -34px rgba(56, 189, 248, 0.75); }

.pg-plan-name {
  font-family: var(--ff-disp);
  font-size: 1.25rem;
  font-weight: 400;
  color: var(--navy);
  margin-bottom: 0.6rem;
}

.pg-plan-price {
  font-family: var(--ff-disp);
  font-size: 2.5rem;
  font-weight: 400;
  line-height: 1;
  color: var(--navy);
}

.pg-plan-price sup { font-size: 1.1rem; vertical-align: super; margin-right: 0.1rem; }
.pg-plan-price .pg-per { font-family: var(--ff-body); font-size: 0.9rem; font-weight: 400; color: var(--muted); }

.pg-plan-unit {
  display: block;
  font-size: 0.78rem;
  color: var(--muted);
  letter-spacing: 0.04em;
  margin: 0.4rem 0 1rem;
}

.pg-plan .pg-list { margin-top: 0; flex: 1 1 auto; }
.pg-plan .btn-primary { margin-top: 1.4rem; justify-content: center; }

.pg-plan-note { font-size: 0.78rem; color: var(--muted); margin-top: 0.7rem; text-align: center; }

/* ── PASOS ─────────────────────────────────────────────────── */

.pg-steps { display: grid; gap: 1.6rem; grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 900px) { .pg-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .pg-steps { grid-template-columns: minmax(0, 1fr); } }

.pg-step { min-width: 0; }

.pg-step-num {
  font-family: var(--ff-disp);
  font-size: 1.6rem;
  color: var(--accent);
  line-height: 1;
  margin-bottom: 0.7rem;
}

/* ── CASOS Y TESTIMONIOS ───────────────────────────────────── */

.pg-case {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 1.8rem;
  min-width: 0;
}

.pg-case-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1.1rem;
  padding-bottom: 1.2rem;
  margin-bottom: 1.2rem;
  border-bottom: 1px solid var(--border);
}

/* Los dos logos tienen proporciones muy distintas (Autoconsumo 1,5:1
   y MyCarClean 2,54:1). Se les da la misma caja y se ajustan dentro
   con object-fit para que ninguno se deforme ni domine al otro. */
.pg-case-logo {
  width: 132px;
  height: 62px;
  object-fit: contain;
  object-position: left center;
  flex: 0 0 auto;
}

.pg-case-meta { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.pg-case-name { font-weight: 600; color: var(--navy); font-size: 1rem; }
.pg-case-place { font-size: 0.83rem; color: var(--muted); }

.pg-case-rows { display: grid; gap: 0.9rem; margin-bottom: 1.3rem; }

.pg-case-row {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 0.9rem;
  font-size: 0.92rem;
  line-height: 1.65;
  color: var(--slate);
  font-weight: 300;
}

@media (max-width: 520px) {
  .pg-case-row { grid-template-columns: minmax(0, 1fr); gap: 0.2rem; }
}

.pg-case-label {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--accent);
  padding-top: 0.2rem;
}

.pg-stars { color: #F5A524; letter-spacing: 0.12em; font-size: 0.95rem; margin-bottom: 0.6rem; }

.pg-quote {
  border-left: 2px solid var(--accent);
  padding: 0.2rem 0 0.2rem 1.1rem;
  margin-bottom: 1.2rem;
}

.pg-quote p {
  font-family: var(--ff-disp);
  font-size: 1.02rem;
  font-style: italic;
  line-height: 1.65;
  color: var(--navy);
  margin-bottom: 0.6rem;
}

.pg-quote cite { font-style: normal; font-size: 0.8rem; color: var(--muted); }

.pg-case-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 44px;
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--accent);
}

.pg-case-link:hover { text-decoration: underline; }

/* ── PREGUNTAS FRECUENTES ──────────────────────────────────── */

.pg-faq { display: grid; gap: 0.7rem; max-width: 800px; }

.pg-faq details {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
}

.pg-faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 56px;
  padding: 0.9rem 1.2rem;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--navy);
  cursor: pointer;
  list-style: none;
}

.pg-faq summary::-webkit-details-marker { display: none; }
.pg-faq summary::after {
  content: '';
  flex: 0 0 auto;
  width: 9px; height: 9px;
  border-right: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: rotate(45deg);
  transition: transform 0.25s var(--ease-out);
}

.pg-faq details[open] summary::after { transform: rotate(-135deg); }
.pg-faq summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

.pg-faq-body { padding: 0 1.2rem 1.2rem; }
.pg-faq-body .pg-p { font-size: 0.92rem; margin-bottom: 0.7rem; }

/* ── ZONAS / PERSONA DE CONTACTO ───────────────────────────── */

.pg-person {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.2rem 1.4rem;
  min-width: 0;
}

.pg-person img { width: 60px; height: 60px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; }
.pg-person-body { min-width: 0; }
.pg-person-name { font-weight: 600; color: var(--navy); }
.pg-person-role { font-size: 0.84rem; color: var(--muted); }

/* ── CTA FINAL ─────────────────────────────────────────────── */

.pg-cta {
  background: var(--dark);
  border-radius: 16px;
  padding: 3rem 2rem;
  text-align: center;
}

@media (max-width: 600px) { .pg-cta { padding: 2.25rem 1.25rem; } }

.pg-cta .pg-h2 { color: var(--white); }
.pg-cta .pg-h2 em { color: var(--accent-lt); }
.pg-cta .pg-p { color: #C7D2E1; margin-left: auto; margin-right: auto; }

.pg-cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  justify-content: center;
  margin-top: 1.8rem;
}

/* Botones reutilizados de la home, con área táctil garantizada. */
.pg-hero-actions .btn-primary,
.pg-hero-actions .btn-ghost,
.pg-cta-actions .btn-primary,
.pg-cta-actions .btn-ghost { min-height: 48px; }

.pg-cta-actions .btn-ghost { color: var(--white); border-color: rgba(255, 255, 255, 0.35); }
.pg-cta-actions .btn-ghost:hover { border-color: var(--accent-lt); color: var(--accent-lt); }

/* ── ENLACES RELACIONADOS ──────────────────────────────────── */

.pg-related { display: grid; gap: 0.9rem; grid-template-columns: repeat(3, minmax(0, 1fr)); }

@media (max-width: 780px) { .pg-related { grid-template-columns: minmax(0, 1fr); } }

.pg-related a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  min-height: 56px;
  padding: 0.9rem 1.1rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  font-size: 0.92rem;
  color: var(--navy);
  transition: border-color 0.2s, transform 0.2s var(--ease-out);
}

.pg-related a:hover { border-color: var(--accent); transform: translateY(-1px); }
.pg-related a::after { content: '→'; color: var(--accent); flex: 0 0 auto; }

/* ── AVISO NEUTRO ──────────────────────────────────────────── */

.pg-note {
  background: var(--accent-dim);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1.1rem 1.3rem;
  font-size: 0.9rem;
  line-height: 1.65;
  color: var(--slate);
}

.pg-note strong { color: var(--navy); }

/* ── MOVIMIENTO REDUCIDO ───────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .pg-card, .pg-related a, .pg-faq summary::after { transition: none; }
  .pg-card:hover, .pg-related a:hover { transform: none; }
}

/* ============================================================
   BANNER DE ZONA
   ------------------------------------------------------------
   Cabecera con foto del lugar para las páginas locales. La foto
   es contexto, no decoración gratuita: sitúa al visitante en su
   ciudad en el primer segundo.

   El texto va SIEMPRE sobre una capa oscura con degradado, no
   sobre la foto pelada, para que el contraste se mantenga sea
   cual sea la imagen. Es lo que garantiza que se lea.
   ============================================================ */

.pg-hero--zona {
  position: relative;
  padding: 0;
  border-bottom: 0;
  background: var(--dark);
  overflow: hidden;
  isolation: isolate;
}

.pg-zona-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}

/* Doble capa: un velo general que asegura contraste en toda la
   superficie, y un degradado lateral más denso bajo el texto. */
.pg-hero--zona::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(100deg, rgba(10,18,34,0.94) 0%, rgba(10,18,34,0.82) 42%, rgba(10,18,34,0.42) 72%, rgba(10,18,34,0.30) 100%),
    linear-gradient(180deg, rgba(10,18,34,0.55) 0%, rgba(10,18,34,0.10) 45%, rgba(10,18,34,0.65) 100%);
}

.pg-zona-inner {
  position: relative;
  max-width: 720px;
  padding: 9rem 0 4.5rem;
}

@media (max-width: 768px) {
  .pg-zona-inner { padding: 7.25rem 0 3.25rem; }
  /* En móvil la foto se ve menos y el texto manda: se oscurece más. */
  .pg-hero--zona::before {
    background: linear-gradient(180deg, rgba(10,18,34,0.86) 0%, rgba(10,18,34,0.74) 45%, rgba(10,18,34,0.92) 100%);
  }
}

.pg-hero--zona .pg-breadcrumb { color: rgba(255,255,255,0.72); }
.pg-hero--zona .pg-breadcrumb a { color: rgba(255,255,255,0.72); }
.pg-hero--zona .pg-breadcrumb a:hover { color: var(--accent-lt); }
.pg-hero--zona .pg-breadcrumb span[aria-current] { color: #fff; }

.pg-hero--zona .pg-h1 { color: #fff; }
.pg-hero--zona .pg-h1 em { color: var(--accent-lt); }
.pg-hero--zona .pg-lead { color: #D5DFEC; }

/* Chip que nombra el lugar de la foto: da crédito visual al
   sitio y refuerza la señal local sin ensuciar el titular. */
.pg-zona-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.9rem;
  margin-bottom: 1.1rem;
  border: 1px solid rgba(255,255,255,0.28);
  border-radius: 999px;
  background: rgba(255,255,255,0.08);
  backdrop-filter: blur(4px);
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fff;
}

.pg-zona-tag svg { flex: 0 0 auto; opacity: 0.85; }

.pg-hero--zona .pg-hero-actions .btn-ghost {
  color: #fff;
  border-color: rgba(255,255,255,0.4);
}

.pg-hero--zona .pg-hero-actions .btn-ghost:hover {
  border-color: var(--accent-lt);
  color: var(--accent-lt);
}

/* Pie del banner: la persona que cubre la zona, visible desde el
   primer pantallazo. Es la señal de que hay alguien real detrás. */
.pg-zona-firma {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-top: 2rem;
  padding-top: 1.4rem;
  border-top: 1px solid rgba(255,255,255,0.16);
  max-width: 30rem;
}

.pg-zona-firma img {
  width: 42px; height: 42px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(255,255,255,0.28);
  flex: 0 0 auto;
}

.pg-zona-firma-txt { min-width: 0; font-size: 0.86rem; line-height: 1.45; color: #D5DFEC; }
.pg-zona-firma-txt strong { color: #fff; font-weight: 600; }

/* ── TARJETAS DE ZONA (home) ───────────────────────────────── */

.pg-zonas-grid { display: grid; gap: 1.2rem; grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 1000px) { .pg-zonas-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px)  { .pg-zonas-grid { grid-template-columns: minmax(0, 1fr); } }

.pg-zona-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-width: 0;
  min-height: 190px;
  padding: 1.1rem 1.2rem;
  border-radius: 12px;
  overflow: hidden;
  isolation: isolate;
  color: #fff;
  transition: transform 0.28s var(--ease-out), box-shadow 0.28s var(--ease-out);
}

.pg-zona-card img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: -2;
  transition: transform 0.5s var(--ease-out);
}

.pg-zona-card::before {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(10,18,34,0.15) 0%, rgba(10,18,34,0.55) 52%, rgba(10,18,34,0.9) 100%);
}

.pg-zona-card:hover { transform: translateY(-3px); box-shadow: 0 22px 44px -26px rgba(15,23,42,0.6); }
.pg-zona-card:hover img { transform: scale(1.05); }
.pg-zona-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.pg-zona-card-nombre { font-family: var(--ff-disp); font-size: 1.35rem; line-height: 1.15; }
.pg-zona-card-sub { font-size: 0.82rem; color: #C7D2E1; margin-top: 0.2rem; }

@media (prefers-reduced-motion: reduce) {
  .pg-zona-card, .pg-zona-card img { transition: none; }
  .pg-zona-card:hover { transform: none; }
  .pg-zona-card:hover img { transform: none; }
}


/* ── NAVBAR SOBRE BANNER OSCURO ─────────────────────────────
   En las paginas de zona la barra flota sobre una foto oscura.
   El logo es navy por defecto y ahi desaparecia: solo se leia
   el "Web" en color de acento. Mientras no hay scroll se pinta
   todo en claro; al hacer scroll el navbar recupera su fondo
   propio y vuelven los colores normales.
   ─────────────────────────────────────────────────────────── */

body.page-zona #navbar:not(.scrolled) .nav-logo { color: #fff; }
body.page-zona #navbar:not(.scrolled) .nav-logo span { color: var(--accent-lt); }
body.page-zona #navbar:not(.scrolled) .nav-links > li > a:not(.nav-cta) { color: rgba(255,255,255,0.88); }
body.page-zona #navbar:not(.scrolled) .nav-links > li > a:not(.nav-cta):hover { color: #fff; }
body.page-zona #navbar:not(.scrolled) .nav-ham span { background: #fff; }