/* Páginas creadas por el distribuidor (pagina.php + pages/bloques/*.php).
   Estilos neutros: heredan tipografía de la plantilla y usan var(--primary) como acento.
   Una plantilla puede redefinir cualquier bloque en themes/<plantilla>/bloques/<tipo>.php
   o ajustar estas clases desde su theme.css. */

.pgb-page { overflow: hidden; }
.pgb { padding-block: clamp(36px, 5vw, 72px); }
.pgb + .pgb { padding-top: 0; }
.pgb-portada + .pgb, .pgb-banner + .pgb { padding-top: clamp(36px, 5vw, 72px); }

.pgb-borrador { background: #fff4d6; color: #6b4e00; text-align: center; font-size: .9rem; padding: 10px 16px; border-bottom: 1px solid #f0dc9f; }

.pgb-eyebrow { margin: 0 0 12px; font-size: .78rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--primary, #16171a); }
.pgb-title { margin: 0 0 16px; font-size: clamp(1.6rem, 2.8vw, 2.5rem); font-weight: 700; line-height: 1.15; color: inherit; }
h1.pgb-title { font-size: clamp(2rem, 4vw, 3.4rem); }
.pgb p { line-height: 1.65; }
.pgb-body p, .pgb-head p { color: var(--text-2, #5b5f66); }
.pgb-narrow { max-width: 820px; }
.pgb.is-center .pgb-narrow, .pgb-texto.is-center .pgb-narrow { margin-inline: auto; text-align: center; }
.pgb-head { max-width: 820px; margin-bottom: clamp(24px, 3vw, 40px); }
.pgb-head--row { max-width: none; display: flex; align-items: end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.pgb-head--row .pgb-title { margin-bottom: 0; }
.pgb-link { font-weight: 600; white-space: nowrap; }
.pgb-btn { margin-top: 8px; }

/* Portada */
.pgb-portada { position: relative; display: flex; align-items: center; color: #fff; padding-block: 0;
  background: #16171a var(--pgb-bg, none) center / cover no-repeat; }
.pgb-portada::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10,11,13,.72), rgba(10,11,13,.25)); }
.pgb-portada.is-center::before { background: rgba(10,11,13,.5); }
.pgb-portada.is-sin-imagen::before { display: none; }
.pgb-portada .container { position: relative; }
.pgb-portada--baja { min-height: 320px; }
.pgb-portada--media { min-height: 460px; }
.pgb-portada--alta { min-height: min(86vh, 760px); }
.pgb-portada__copy { max-width: 720px; padding-block: clamp(48px, 7vw, 96px); }
.pgb-portada.is-center .pgb-portada__copy { margin-inline: auto; text-align: center; }
.pgb-portada .pgb-eyebrow { color: rgba(255,255,255,.85); }
.pgb-portada .pgb-lead { color: rgba(255,255,255,.88); font-size: 1.08rem; }

/* Imagen + texto */
.pgb-split { display: grid; grid-template-columns: 1fr; gap: clamp(24px, 4vw, 64px); align-items: center; }
@media (min-width: 992px) {
  .pgb-split { grid-template-columns: 1fr 1fr; }
  .pgb-imagen-texto.is-derecha .pgb-split__media { order: 2; }
}
.pgb-split__media img { width: 100%; height: auto; border-radius: 14px; display: block; }
.pgb-img-vacia { aspect-ratio: 4 / 3; border-radius: 14px; background: #f1f3f5; display: flex; align-items: center; justify-content: center; font-size: 42px; color: #b4b9c0; }

/* Tarjetas y galería */
.pgb-grid { display: grid; gap: clamp(14px, 2vw, 24px); grid-template-columns: 1fr; }
@media (min-width: 768px) {
  .pgb-grid--2, .pgb-grid--3, .pgb-grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1200px) {
  .pgb-grid--3 { grid-template-columns: repeat(3, 1fr); }
  .pgb-grid--4 { grid-template-columns: repeat(4, 1fr); }
}
.pgb-card { border: 1px solid rgba(0,0,0,.08); border-radius: 14px; padding: clamp(20px, 2.4vw, 28px); background: #fff; }
.pgb-card h3 { margin: 0 0 10px; font-size: 1.1rem; font-weight: 600; }
.pgb-card p { margin: 0 0 8px; color: var(--text-2, #5b5f66); }
.pgb-galeria__item { margin: 0; }
.pgb-galeria__item img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 12px; display: block; }
.pgb-galeria__item figcaption { margin-top: 8px; font-size: .9rem; color: var(--text-2, #5b5f66); }

/* Pasos */
.pgb-steps { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 18px; }
.pgb-steps li { display: flex; gap: 16px; align-items: flex-start; }
.pgb-steps__mark { flex-shrink: 0; width: 36px; height: 36px; border-radius: 50%; background: var(--primary, #16171a); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: .95rem; }
.pgb-steps.is-vinetas .pgb-steps__mark { width: 10px; height: 10px; margin-top: 8px; }
.pgb-steps strong { display: block; margin-bottom: 4px; }
.pgb-steps p { margin: 0 0 6px; color: var(--text-2, #5b5f66); }

/* Preguntas */
.pgb-faq { margin-top: 16px; border-top: 1px solid rgba(0,0,0,.1); }
.pgb-faq__item { border-bottom: 1px solid rgba(0,0,0,.1); }
.pgb-faq__item summary { cursor: pointer; list-style: none; padding: 18px 36px 18px 0; font-weight: 600; position: relative; }
.pgb-faq__item summary::-webkit-details-marker { display: none; }
.pgb-faq__item summary::after { content: "+"; position: absolute; right: 4px; top: 50%; transform: translateY(-50%); font-size: 1.4rem; font-weight: 400; transition: transform .2s ease; }
.pgb-faq__item[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.pgb-faq__answer { padding: 0 0 18px; }
.pgb-faq__answer p { margin: 0 0 8px; color: var(--text-2, #5b5f66); }

/* Banner */
.pgb-banner__box { border-radius: 14px; padding: clamp(28px, 4vw, 56px); display: flex; flex-direction: column; gap: 20px; align-items: flex-start; }
@media (min-width: 992px) { .pgb-banner__box { flex-direction: row; align-items: center; justify-content: space-between; } }
.pgb-banner__box .pgb-title { margin-bottom: 8px; }
.pgb-banner__box p { margin: 0; opacity: .85; color: inherit; }
.pgb-banner__btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 28px; border-radius: 8px; font-weight: 600; text-decoration: none; white-space: nowrap; flex-shrink: 0; }
.pgb-banner__btn:hover { opacity: .88; }

/* Formulario */
.pgb-form { display: grid; gap: 14px; margin-top: 20px; }
.pgb-form label { display: grid; gap: 6px; font-size: .9rem; font-weight: 500; }
.pgb-form input, .pgb-form textarea { width: 100%; }
.pgb-form__row { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 768px) { .pgb-form__row { grid-template-columns: 1fr 1fr; } }
.pgb-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }
.pgb-alert { margin-top: 16px; padding: 14px 16px; border-radius: 10px; font-size: .95rem; }
.pgb-alert.is-ok { background: #e8f6ee; color: #1d6b3f; }
.pgb-alert.is-error { background: #fdecec; color: #9b2c2c; }