/* ============================================================
   Página Esencial — diseño
   Capa de tokens en 3 niveles sobre los primitivos del sitio
   (style.css ya trae --field, --ink, --ink-soft, --rust, --rust-deep,
   --papel-textura, --aire-lados, --plate).
   ============================================================ */

/* ---- 1. Primitivos propios (mundo del proyecto) ---- */
.pe-hero, .pe-parati, .pe-alerta, .pe-demos, .pe-incluye, .pe-burbuja,
.pe-precio, .pe-extras, .pe-plazas, .pe-faq, .pe-cta {
  --pe-papel: #F3E9D6;
  --pe-crema: #F8F1E0;
  --pe-tinta: #1B1510;
  --pe-suave: #5C5045;
  --pe-terracota: #A63B28;
  --pe-oxido: #8A2F1E;
  --pe-gris-frio: #6E6A63;
  --pe-linea: rgba(27, 21, 16, .16);
  --pe-sombra: 0 1px 2px rgba(27,21,16,.07), 0 12px 32px -12px rgba(27,21,16,.22);
  --pe-radio: 1.1rem;
  --pe-contenedor: 72rem;
}
/* ---- 2. Semánticos (propósito) ---- */
.pe-hero, .pe-parati, .pe-alerta, .pe-demos, .pe-incluye, .pe-burbuja,
.pe-precio, .pe-extras, .pe-plazas, .pe-faq, .pe-cta {
  --pe-fondo: var(--pe-papel);
  --pe-texto: var(--pe-tinta);
  --pe-texto-sec: var(--pe-suave);
  --pe-acento: var(--pe-terracota);
  --pe-acento-texto: var(--pe-oxido);   /* terracota apto para texto pequeño (7:1) */
  --pe-tarjeta: var(--pe-crema);
  --pe-borde: var(--pe-linea);
}
/* ---- 3. Componente ---- */
.pe-hero, .pe-parati, .pe-alerta, .pe-demos, .pe-incluye, .pe-burbuja,
.pe-precio, .pe-extras, .pe-plazas, .pe-faq, .pe-cta {
  --pe-boton-fondo: var(--pe-terracota);
  --pe-boton-fondo-hover: var(--pe-oxido);
  --pe-boton-texto: #F8F1E0;
}

/* ============ base de la landing ============ */
.pe-hero, .pe-parati, .pe-alerta, .pe-demos, .pe-incluye, .pe-burbuja,
.pe-precio, .pe-extras, .pe-plazas, .pe-faq, .pe-cta {
  max-width: var(--pe-contenedor);
  margin-inline: auto;
  padding-inline: var(--aire-lados);
  margin-block: clamp(3.6rem, 9vw, 6.5rem);
  color: var(--pe-texto);
  scroll-margin-top: 2rem;
}
.pe-hero h1, .pe-parati h2, .pe-alerta h2, .pe-demos h2, .pe-incluye h2,
.pe-burbuja h2, .pe-precio h2, .pe-extras h2, .pe-plazas h2,
.pe-faq h2, .pe-cta h2 {
  font-family: 'IM Fell English', 'EB Garamond', serif;
  font-weight: 400;
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  letter-spacing: .002em;
  margin: 0 0 1.4rem;
  text-wrap: balance;
  max-width: 22ch;
}
.pe-hero p, .pe-parati p, .pe-alerta p, .pe-incluye p, .pe-burbuja p,
.pe-precio p, .pe-extras p, .pe-plazas p, .pe-cta p {
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  max-width: 38rem;
}
/* Las clases con nombre propio recuperan su tamaño del sistema: la regla
   de arriba tiene más especificidad (.pe-precio p = 0,1,1) y si no las taparía. */
.pe-precio p.pe-numero, .pe-cta p.pe-numero { font-size: var(--fs-faq); }
.pe-precio p.pe-precio-cifra { font-size: var(--fs-precio); line-height: 1; }
.pe-precio p.pe-precio-bajada { font-size: var(--fs-lede); }
.pe-precio p.pe-precio-letra-pequena { font-size: var(--fs-small); }
.pe-numero {
  font-family: 'IM Fell English', 'EB Garamond', serif;
  font-size: var(--fs-faq);
  color: var(--pe-acento-texto);
  margin: 0 0 .9rem;
  display: flex;
  align-items: center;
  gap: 1rem;
}
.pe-numero::after {
  content: "";
  height: 1px;
  width: min(9rem, 30vw);
  background: linear-gradient(to right, var(--pe-acento), transparent);
}
.pe-lead {
  font-size: var(--fs-lede) !important;
  line-height: var(--lh-lede) !important;
  color: var(--pe-texto);
  max-width: 34rem !important;
}

/* botón principal */
.pe-boton {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  background: var(--pe-boton-fondo);
  color: var(--pe-boton-texto) !important;
  font-family: 'EB Garamond', serif;
  font-size: var(--fs-btn-lg);
  line-height: 1.3;
  padding: 1rem 1.9rem;
  border-radius: 999px;
  text-decoration: none;
  box-shadow: var(--pe-sombra);
  transition: background .25s ease, transform .25s ease, box-shadow .25s ease;
}
.pe-boton:hover {
  background: var(--pe-boton-fondo-hover);
  transform: translateY(-2px);
}
.pe-boton:active { transform: translateY(0); }
.pe-boton svg { width: 1.5em; height: 1.5em; flex: none; }
a.pe-boton:focus-visible, .pe-faq-item summary:focus-visible,
.pe-cta-correo a:focus-visible, .pie-abierto .volver a:focus-visible {
  outline: 3px solid var(--pe-acento);
  outline-offset: 4px;
  border-radius: 6px;
}

/* ============ aparición progresiva (segura sin JS) ============ */
/* Sin JS no se oculta nada: solo cuando <html> lleva .pe-js entran las transiciones. */
html.pe-js [data-pe-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .7s ease, transform .7s cubic-bezier(.22,.8,.3,1);
}
html.pe-js [data-pe-reveal].pe-visible { opacity: 1; transform: none; }

/* ============ CABECERA MÍNIMA (volver a la principal) ============ */
.pe-cabecera {
  max-width: var(--pe-contenedor, 72rem);
  margin: 0 auto;
  padding: 1.1rem var(--aire-lados, 1.2rem) 0;
}
.pe-cabecera-marca {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-family: 'IM Fell English', serif;
  font-size: 1.05rem;
  color: var(--ink-soft, #5C5045);
  text-decoration: none;
}
.pe-cabecera-marca svg { width: 1.1em; height: 1.1em; }
.pe-cabecera-marca:hover { color: var(--rust, #A63B28); }

/* ============ HERO ============ */
/* pieza: composición editorial propia; sello circular y marquee portados de
   beUI "Marquee" (https://beui.dev, MIT) a CSS artesanal */
.pe-hero { margin-top: clamp(2rem, 5vw, 4rem); }
.pe-hero-cuadricula {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.pe-marginal {
  font-size: var(--fs-small);
  color: var(--pe-acento-texto);
  margin: 0 0 1.1rem;
  display: flex;
  align-items: center;
  gap: .8rem;
}
.pe-marginal::before {
  content: "";
  width: 2.6rem; height: 2px;
  background: var(--pe-acento);
  border-radius: 2px;
}
.pe-hero h1 {
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  margin: 0 0 1.6rem;
  max-width: 12ch;
}
.pe-hero h1 em { font-style: italic; }
.pe-cta-line { margin: 2.2rem 0 .9rem; }
.pe-precio-line { margin: 0; }
.pe-sello-precio {
  display: inline-block;
  font-size: var(--fs-base);
  color: var(--pe-acento-texto);
  border: 1.5px solid var(--pe-acento);
  border-radius: 999px;
  padding: .42rem 1.1rem;
  background: rgba(166, 59, 40, .06);
}

/* artefacto: mini página en papel + sello giratorio */
.pe-arte { position: relative; justify-self: center; width: min(100%, 24rem); }
.pe-mockup {
  background: var(--pe-tarjeta);
  border: 1px solid var(--pe-borde);
  border-radius: .9rem;
  box-shadow: var(--pe-sombra);
  padding: 1.1rem 1.2rem 1.4rem;
  transform: rotate(-2.5deg);
  position: relative;
}
.pe-mockup::before { /* textura de papel del sitio */
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background-image: var(--papel-textura); background-size: 140px;
  opacity: .5; pointer-events: none;
}
.pe-mockup-barra { display: flex; gap: .45rem; margin-bottom: 1rem; }
.pe-mockup-barra i {
  width: .7rem; height: .7rem; border-radius: 50%;
  background: var(--pe-linea);
}
.pe-mockup-barra i:first-child { background: var(--pe-acento); opacity: .75; }
.pe-mockup-titulo {
  font-family: 'IM Fell English', serif; font-weight: 400;
  font-size: var(--fs-h3); line-height: var(--lh-h3); margin: 0 0 .8rem; color: var(--pe-texto);
}
.pe-mockup-titulo span { color: var(--pe-acento-texto); font-style: italic; }
.pe-mockup-linea {
  height: .62rem; border-radius: 99px;
  background: rgba(27,21,16,.13); margin: .55rem 0;
}
.pe-mockup-linea.corta { width: 62%; }
.pe-mockup-linea.media { width: 82%; }
.pe-mockup-boton {
  margin-top: 1.1rem; display: inline-block;
  background: var(--pe-acento); color: var(--pe-crema);
  font-size: var(--fs-kicker); padding: .5rem 1.3rem; border-radius: 999px;
}
.pe-mockup-foto {
  margin-top: 1.1rem; height: 4.6rem; border-radius: .6rem;
  background:
    radial-gradient(80% 120% at 20% 10%, rgba(166,59,40,.35), transparent 60%),
    radial-gradient(70% 100% at 85% 90%, rgba(92,80,69,.4), transparent 65%),
    linear-gradient(135deg, #E4D3B4, #D9BE96);
  border: 1px solid var(--pe-borde);
}
.pe-sello {
  position: absolute;
  top: -2.6rem; right: -1.4rem;
  width: 8.6rem; height: 8.6rem;
}
.pe-sello svg { width: 100%; height: 100%; overflow: visible; }
.pe-sello .pe-sello-giro {
  transform-origin: 50% 50%;
  animation: pe-giro 26s linear infinite;
}
.pe-sello text {
  font-family: 'EB Garamond', serif;
  font-size: 10.5px;
  letter-spacing: 1.4px;
  fill: var(--pe-acento-texto);
}
.pe-sello-centro {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font-family: 'IM Fell English', serif;
  font-size: 2rem; color: var(--pe-acento-texto);
}
@keyframes pe-giro { to { transform: rotate(360deg); } }

/* marquee: tira infinita de palabras del oficio */
.pe-mq {
  margin-top: clamp(2.6rem, 6vw, 4.2rem);
  border-top: 1px solid var(--pe-borde);
  border-bottom: 1px solid var(--pe-borde);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
  mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}
.pe-mq-pista { display: flex; width: max-content; }
/* la animación solo existe cuando el JS ha duplicado la pista (sin salto) */
html.pe-js .pe-mq-pista.pe-mq--anim { animation: pe-mq 34s linear infinite; }
.pe-mq:hover .pe-mq-pista.pe-mq--anim { animation-play-state: paused; }
.pe-mq-pista span {
  font-family: 'EB Garamond', serif; font-style: italic;
  font-size: var(--fs-faq); color: var(--pe-texto-sec);
  padding: 1rem 0; white-space: nowrap;
}
.pe-mq-pista span::after { content: "·"; margin: 0 1.6rem; color: var(--pe-acento); font-style: normal; }
@keyframes pe-mq { to { transform: translateX(-50%); } }

@media (max-width: 900px) {
  .pe-hero-cuadricula { grid-template-columns: 1fr; }
  .pe-arte { margin-top: 1.4rem; }
  .pe-sello { top: -2.2rem; right: .4rem; }
  /* el titular respira a todo el ancho en móvil (en escritorio va a 12ch) */
  .pe-hero h1 { max-width: none; }
  /* la cápsula del precio, centrada en móvil */
  .pe-precio-line { text-align: center; }
}

/* ============ ¿ES ESTO PARA TI? ============ */
.pe-parati-columnas {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.2rem, 3vw, 2.2rem);
  margin-top: 2rem;
}
.pe-parati-tarjeta {
  border-radius: var(--pe-radio);
  padding: clamp(1.6rem, 3vw, 2.4rem);
  position: relative;
}
.pe-parati-tarjeta h3 {
  font-family: 'IM Fell English', serif;
  font-weight: 400;
  font-size: var(--fs-h3);
  margin: 0 0 1rem;
  display: flex; align-items: center; gap: .8rem;
}
.pe-parati-tarjeta h3 svg { width: 1.9rem; height: 1.9rem; flex: none; }
.pe-parati-tarjeta p { font-size: var(--fs-base); margin: 0; max-width: 30rem; }
/* chunking: aire entre párrafos */
.pe-parati-tarjeta p + p, .pe-burbuja p + p, .pe-plazas p + p { margin-top: 1em; }
.pe-precio-filosofia + .pe-precio-filosofia { margin-top: 1.2em; }
.pe-parati-si {
  background: var(--pe-tarjeta);
  border: 1px solid var(--pe-borde);
  box-shadow: var(--pe-sombra);
}
.pe-parati-si h3 { color: var(--pe-acento-texto); }
.pe-parati-no {
  border: 1.5px dashed rgba(27,21,16,.28);
  color: var(--pe-texto-sec);
}
.pe-parati-no h3 { color: var(--pe-texto-sec); }
@media (max-width: 760px) { .pe-parati-columnas { grid-template-columns: 1fr; } }

/* ============ ALERTA IA ============ */
/* contraste frío/cálido entre las dos maneras de trabajar */
.pe-alerta-grupos {
  display: grid;
  grid-template-columns: 1fr 1.35fr;
  gap: clamp(1.2rem, 3vw, 2.2rem);
  margin-top: 2rem;
  align-items: start;
}
.pe-alerta-grupo {
  border-radius: var(--pe-radio);
  padding: clamp(1.6rem, 3vw, 2.4rem);
}
.pe-alerta-grupo h3 {
  font-family: 'IM Fell English', serif;
  font-weight: 400;
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  margin: 0 0 1rem;
  display: flex; align-items: flex-start; gap: .8rem;
}
.pe-alerta-grupo h3 svg { width: 2rem; height: 2rem; flex: none; margin-top: .15rem; }
.pe-alerta-grupo p { font-size: var(--fs-base); margin: 0; }
.pe-alerta-frio {
  background: rgba(110, 106, 99, .1);
  border: 1px solid rgba(110, 106, 99, .35);
  color: var(--pe-suave); /* QA 2026-09-29: --pe-gris-frio (#6E6A63) daba 3.96:1 y falla AA; --pe-suave da 5.75:1 */
}
.pe-alerta-frio h3 { color: #57534C; }
.pe-alerta-calido {
  background: var(--pe-tarjeta);
  border: 1px solid var(--pe-borde);
  border-top: 4px solid var(--pe-acento);
  box-shadow: var(--pe-sombra);
}
.pe-alerta-calido h3 { color: var(--pe-acento-texto); }
/* chunking: aire entre párrafos para que el ojo descanse */
.pe-alerta-grupo p + p { margin-top: 1em; }
/* pull quote: la frase que se queda en la retina */
.pe-cita {
  margin: 1.4em 0;
  padding: .2em 0 .2em 1.1em;
  border-left: 3px solid var(--pe-acento);
  font-family: 'IM Fell English', 'EB Garamond', serif;
  font-size: 1.25em;
  line-height: 1.45;
  color: var(--pe-texto);
}
@media (max-width: 860px) { .pe-alerta-grupos { grid-template-columns: 1fr; } }

/* ============ QUÉ INCLUYE: bento ============ */
/* pieza: "bento-01" de Watermelon UI (https://ui.watermelon.sh, MIT)
   portada a HTML/CSS artesanal: celdas con micro-visuales propios */
.pe-lista {
  list-style: none;
  margin: 2.2rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: clamp(.9rem, 2vw, 1.4rem);
}
.pe-bento {
  grid-column: span 2;
  background: var(--pe-tarjeta);
  border: 1px solid var(--pe-borde);
  border-radius: var(--pe-radio);
  padding: clamp(1.3rem, 2.4vw, 1.9rem);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: .9rem;
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.pe-bento:hover {
  transform: translateY(-4px);
  box-shadow: var(--pe-sombra);
  border-color: rgba(166, 59, 40, .45);
}
.pe-bento[data-pe-item="pe-incluye-1"],
.pe-bento[data-pe-item="pe-incluye-4"] { grid-column: span 4; }
.pe-bento[data-pe-item="pe-incluye-5"],
.pe-bento[data-pe-item="pe-incluye-6"],
.pe-bento[data-pe-item="pe-incluye-7"],
.pe-bento[data-pe-item="pe-incluye-8"] { grid-column: span 3; }
/* icono auténtico Iconoir (glifo real servido como data-URI, por item) */
.pe-ico { display: block; width: 2.9rem; height: 2.9rem; position: relative; z-index: 1; }
.pe-ico::before {
  content: ""; display: block; width: 100%; height: 100%;
  background-image: var(--pe-item-ico);
  background-size: contain; background-repeat: no-repeat; background-position: center;
}
/* marca de agua del mismo glifo, al fondo de la celda */
.pe-bento::after {
  content: ""; position: absolute;
  right: -1.2rem; bottom: -1.4rem;
  width: 8.5rem; height: 8.5rem;
  background-image: var(--pe-item-ico);
  background-size: contain; background-repeat: no-repeat;
  opacity: .1; pointer-events: none;
}
/* etiqueta corta de diseño (cromo visual, no copy editable) */
.pe-bento-nombre {
  font-family: 'IM Fell English', serif;
  font-size: var(--fs-lede);
  color: var(--pe-acento-texto);
  position: relative; z-index: 1;
}
.pe-bento[data-pe-item="pe-incluye-1"] .pe-bento-nombre::before { content: "Conversación inicial"; }
.pe-bento[data-pe-item="pe-incluye-2"] .pe-bento-nombre::before { content: "Tu página"; }
.pe-bento[data-pe-item="pe-incluye-3"] .pe-bento-nombre::before { content: "Ronda de cambios"; }
.pe-bento[data-pe-item="pe-incluye-4"] .pe-bento-nombre::before { content: "Panel sencillo"; }
.pe-bento[data-pe-item="pe-incluye-5"] .pe-bento-nombre::before { content: "Dominio protegido"; }
.pe-bento[data-pe-item="pe-incluye-6"] .pe-bento-nombre::before { content: "Alojamiento"; }
.pe-bento[data-pe-item="pe-incluye-7"] .pe-bento-nombre::before { content: "Mantenimiento"; }
.pe-bento[data-pe-item="pe-incluye-8"] .pe-bento-nombre::before { content: "Pago en dos partes"; }
.pe-bento-texto { font-size: var(--fs-small); line-height: var(--lh-small); margin: 0; position: relative; z-index: 1; color: var(--pe-texto); }
/* mini-artefactos CSS en las celdas anchas: bocadillos y panel */
.pe-bento-mock { display: none; }
.pe-bento[data-pe-item="pe-incluye-1"] .pe-bento-mock,
.pe-bento[data-pe-item="pe-incluye-4"] .pe-bento-mock {
  display: flex; gap: .7rem; align-items: flex-end;
  margin-top: .4rem; position: relative; z-index: 1;
}
.pe-bento[data-pe-item="pe-incluye-1"] .pe-bento-mock i {
  display: block; height: 2.1rem; border-radius: 1rem;
  background: rgba(166, 59, 40, .16); border: 1px solid rgba(166, 59, 40, .3);
}
.pe-bento[data-pe-item="pe-incluye-1"] .pe-bento-mock i:nth-child(1) { width: 38%; align-self: flex-start; }
.pe-bento[data-pe-item="pe-incluye-1"] .pe-bento-mock i:nth-child(2) { width: 52%; background: rgba(166,59,40,.3); }
.pe-bento[data-pe-item="pe-incluye-1"] .pe-bento-mock i:nth-child(3) { width: 30%; align-self: flex-start; }
.pe-bento[data-pe-item="pe-incluye-4"] .pe-bento-mock i {
  display: block; border-radius: .35rem;
  background: rgba(27,21,16,.12); border: 1px solid var(--pe-borde);
}
.pe-bento[data-pe-item="pe-incluye-4"] .pe-bento-mock i:nth-child(1) { width: 22%; height: 3.4rem; }
.pe-bento[data-pe-item="pe-incluye-4"] .pe-bento-mock i:nth-child(2) { width: 40%; height: 2.4rem; align-self: flex-start; background: rgba(166,59,40,.18); }
.pe-bento[data-pe-item="pe-incluye-4"] .pe-bento-mock i:nth-child(3) { width: 30%; height: 2.9rem; }
.pe-cierre { margin-top: 2rem; font-size: var(--fs-lede); }
.pe-cierre a { color: var(--pe-acento-texto); font-weight: 700; }
@media (max-width: 1000px) {
  .pe-bento, .pe-bento[data-pe-item="pe-incluye-1"], .pe-bento[data-pe-item="pe-incluye-4"],
  .pe-bento[data-pe-item="pe-incluye-5"], .pe-bento[data-pe-item="pe-incluye-6"],
  .pe-bento[data-pe-item="pe-incluye-7"], .pe-bento[data-pe-item="pe-incluye-8"] { grid-column: span 3; }
}
@media (max-width: 640px) {
  .pe-lista { grid-template-columns: 1fr 1fr; }
  .pe-bento, .pe-bento[data-pe-item="pe-incluye-1"], .pe-bento[data-pe-item="pe-incluye-4"],
  .pe-bento[data-pe-item="pe-incluye-5"], .pe-bento[data-pe-item="pe-incluye-6"],
  .pe-bento[data-pe-item="pe-incluye-7"], .pe-bento[data-pe-item="pe-incluye-8"] { grid-column: span 2; }
}

/* ============ LA BURBUJA: diagrama que se pincha ============ */
.pe-burbuja { position: relative; }
/* la burbuja decorativa: flota sobre la sección hasta que se pincha */
.pe-burbuja::before {
  content: "";
  position: absolute;
  top: -1rem; right: clamp(0rem, 4vw, 3rem);
  width: clamp(7rem, 16vw, 11rem); height: clamp(7rem, 16vw, 11rem);
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 28%, rgba(255,255,255,.75), transparent 42%),
    radial-gradient(circle at 50% 55%, rgba(110,106,99,.28), rgba(110,106,99,.08) 70%);
  border: 2px solid rgba(110,106,99,.4);
  box-shadow: inset -8px -12px 24px rgba(110,106,99,.18);
  pointer-events: none;
}
.pe-burbuja::after { /* anillo de la explosión, quieto hasta el pinchazo */
  content: "";
  position: absolute;
  top: -1rem; right: clamp(0rem, 4vw, 3rem);
  width: clamp(7rem, 16vw, 11rem); height: clamp(7rem, 16vw, 11rem);
  border-radius: 50%;
  border: 3px solid var(--pe-acento);
  opacity: 0; pointer-events: none;
}
/* estado pinchado: la burbuja revienta y deja paso a lo simple */
.pe-burbuja--pinchada::before { animation: pe-burbuja-pop .55s ease-in forwards; }
.pe-burbuja--pinchada::after { animation: pe-burbuja-onda .8s ease-out .1s forwards; }
@keyframes pe-burbuja-pop {
  0% { transform: scale(1); opacity: 1; }
  35% { transform: scale(1.14); opacity: 1; }
  100% { transform: scale(.1); opacity: 0; }
}
@keyframes pe-burbuja-onda {
  0% { transform: scale(.6); opacity: .9; }
  100% { transform: scale(1.9); opacity: 0; }
}
.pe-burbuja-lista { list-style: none; margin: 1.8rem 0; padding: 0; }
/* los 5 dolores: dentro de la burbuja, pesados */
.pe-burbuja-problemas {
  background: rgba(110, 106, 99, .13);
  border: 1.5px solid rgba(110, 106, 99, .4);
  border-radius: 1.6rem;
  padding: clamp(1.2rem, 3vw, 2rem);
  display: grid; gap: .4rem;
  box-shadow: inset 0 2px 14px rgba(110,106,99,.14);
}
.pe-burbuja-problemas .pe-burbuja-punto {
  font-size: var(--fs-base); line-height: var(--lh-base);
  color: #57534C;
  padding: .55rem .4rem .55rem 2rem;
  position: relative;
}
.pe-burbuja-problemas .pe-burbuja-punto::before {
  content: ""; position: absolute; left: .2rem; top: 1.05rem;
  width: .6rem; height: .6rem; border-radius: 50%;
  background: rgba(110,106,99,.55);
}
.pe-burbuja-problemas .pe-burbuja-punto strong { color: #3F3B35; }
/* el pinchazo: el giro */
.pe-burbuja-giro {
  font-size: var(--fs-h3) !important;
  line-height: var(--lh-h3) !important;
  font-style: italic;
  color: var(--pe-texto);
  max-width: 40rem !important;
  margin: 2.4rem auto !important;
  text-align: center;
  position: relative;
  padding-top: 3.4rem;
}
.pe-burbuja-giro::before {
  content: "";
  position: absolute; top: 0; left: 50%;
  width: 2.6rem; height: 2.6rem;
  transform: translateX(-50%) rotate(24deg);
  background-size: contain; background-repeat: no-repeat; background-position: center;
}
/* los 5 beneficios: lo simple que queda después */
.pe-burbuja-ventajas { display: grid; gap: .9rem; }
.pe-burbuja-ventajas .pe-burbuja-punto {
  background: var(--pe-tarjeta);
  border: 1px solid var(--pe-borde);
  border-left: 4px solid var(--pe-acento);
  border-radius: .9rem;
  padding: 1.1rem 1.3rem 1.1rem 3.4rem;
  font-size: var(--fs-base); line-height: var(--lh-base);
  position: relative;
  box-shadow: var(--pe-sombra);
}
.pe-burbuja-ventajas .pe-burbuja-punto::before {
  content: "";
  position: absolute; left: 1.1rem; top: 1.25rem;
  width: 1.5rem; height: 1.5rem;
  background-size: contain; background-repeat: no-repeat;
}
.pe-burbuja-ventajas .pe-burbuja-punto strong { color: var(--pe-acento-texto); }

/* ============ PRECIO ============ */
/* pieza: "Stats 1" de SmoothUI (https://smoothui.dev, MIT): cifras con
   entrada escalonada, portada a HTML/CSS artesanal + count-up propio */
.pe-precio-cifra {
  font-family: 'IM Fell English', serif;
  font-size: var(--fs-precio);
  line-height: 1;
  color: var(--pe-texto);
  margin: 1.6rem 0 .6rem;
  letter-spacing: .01em;
}
.pe-precio-cifra .pe-euro { color: var(--pe-acento-texto); }
.pe-precio-bajada { font-size: var(--fs-lede); color: var(--pe-acento-texto); margin: 0 0 2.4rem; }
.pe-stats {
  list-style: none; margin: 0 0 2.6rem; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(.9rem, 2.4vw, 1.6rem);
}
.pe-stat {
  background: var(--pe-tarjeta);
  border: 1px solid var(--pe-borde);
  border-radius: var(--pe-radio);
  padding: 1.6rem 1.4rem;
  text-align: center;
  transition: border-color .3s ease, box-shadow .3s ease, transform .3s ease;
}
.pe-stat:hover { border-color: rgba(166,59,40,.5); box-shadow: var(--pe-sombra); transform: translateY(-3px); }
.pe-stat-valor {
  font-family: 'IM Fell English', serif;
  font-size: var(--fs-h1);
  line-height: 1;
  color: var(--pe-acento-texto);
  display: block; margin-bottom: .6rem;
}
.pe-stat-etiqueta { font-size: var(--fs-base); color: var(--pe-texto); display: block; }
.pe-stat-detalle { font-size: var(--fs-small); color: var(--pe-texto-sec); display: block; margin-top: .3rem; }
.pe-precio-pago {
  display: inline-block;
  font-size: var(--fs-base);
  border: 1.5px dashed rgba(166,59,40,.55);
  border-radius: 999px;
  padding: .55rem 1.4rem;
  color: var(--pe-acento-texto);
  margin: 0 0 1.6rem;
}
/* En móvil la cápsula de pago va centrada */
@media (max-width: 860px) {
  .pe-precio-pago { display: block; width: fit-content; margin: 0 auto 1.6rem; }
}
.pe-precio-letra-pequena { font-size: var(--fs-small); color: var(--pe-texto-sec); max-width: 44rem; }
.pe-precio-filosofia {
  font-size: var(--fs-h3) !important;
  line-height: var(--lh-h3) !important;
  font-style: italic;
  border-left: 3px solid var(--pe-acento);
  padding-left: 1.6rem;
  margin: 2.6rem 0 !important;
  max-width: 42rem !important;
  color: var(--pe-texto);
  text-wrap: pretty;
}
.pe-precio .pe-cta-line { margin-top: 2.4rem; }
@media (max-width: 760px) { .pe-stats { grid-template-columns: 1fr; } }

/* ============ EXTRAS ============ */
.pe-extras-lista {
  list-style: none; margin: 2rem 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 2.6vw, 1.8rem);
}
.pe-extra {
  background: var(--pe-tarjeta);
  border: 1px solid var(--pe-borde);
  border-radius: var(--pe-radio);
  padding: 1.8rem 1.6rem;
  position: relative;
  display: flex; flex-direction: column; gap: .8rem;
  transition: transform .3s ease, box-shadow .3s ease;
}
.pe-extra:hover { transform: translateY(-4px); box-shadow: var(--pe-sombra); }
.pe-extra h3 {
  font-family: 'IM Fell English', serif; font-weight: 400;
  font-size: var(--fs-h3); line-height: var(--lh-h3); margin: 0; color: var(--pe-texto);
}
.pe-extra p { font-size: var(--fs-small); margin: 0; color: var(--pe-texto); }
.pe-extra-precio {
  font-family: 'IM Fell English', serif;
  font-size: var(--fs-h2); color: var(--pe-acento-texto);
  margin-top: auto !important; padding-top: .8rem;
}
p.pe-extra-sello {
  position: absolute; top: -0.85rem; right: 1.2rem;
  background: var(--pe-acento); color: var(--pe-crema);
  font-size: var(--fs-kicker); letter-spacing: .04em;
  padding: .3rem .95rem; border-radius: 999px;
  box-shadow: var(--pe-sombra);
  margin: 0 !important;
}
@media (max-width: 860px) { .pe-extras-lista { grid-template-columns: 1fr; max-width: 30rem; } }

/* ============ PLAZAS ============ */
.pe-plazas-slots {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(.9rem, 2.4vw, 1.6rem);
  margin: 2.2rem 0;
}
.pe-plaza-slot {
  border: 1.5px solid rgba(166, 59, 40, .5);
  border-radius: var(--pe-radio);
  background: var(--pe-tarjeta);
  padding: 1.8rem 1.4rem 1.5rem;
  text-align: center;
  box-shadow: var(--pe-sombra);
  position: relative;
}
.pe-plaza-slot::before {
  content: "";
  display: block; width: 2.4rem; height: 2.4rem; margin: 0 auto .9rem;
  background-size: contain; background-repeat: no-repeat; background-position: center;
  opacity: .9;
}
.pe-plaza-slot-num {
  font-family: 'IM Fell English', serif;
  font-size: var(--fs-h2); color: var(--pe-acento-texto);
  display: block;
}
.pe-plaza-slot-estado {
  font-size: var(--fs-small); color: var(--pe-texto-sec);
  display: block; margin-top: .3rem;
}
.pe-plazas p { max-width: 42rem; }
@media (max-width: 640px) { .pe-plazas-slots { grid-template-columns: 1fr; max-width: 24rem; } }

/* ============ FAQ: acordeón elegante ============ */
/* pieza: "Faq 2" de SmoothUI (https://smoothui.dev, MIT) portada a <details>
   nativo: funciona sin JS; la animación es solo mejora progresiva */
.pe-faq-lista { display: grid; gap: 1rem; margin-top: 2rem; max-width: 52rem; }
.pe-faq-item {
  background: var(--pe-tarjeta);
  border: 1px solid var(--pe-borde);
  border-radius: var(--pe-radio);
  overflow: hidden;
  transition: border-color .3s ease, box-shadow .3s ease;
}
.pe-faq-item:hover { border-color: rgba(166,59,40,.4); }
.pe-faq-item[open] { border-color: rgba(166,59,40,.55); box-shadow: var(--pe-sombra); }
.pe-faq-item summary {
  list-style: none;
  cursor: pointer;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.2rem;
  padding: 1.35rem 1.6rem;
  font-family: 'IM Fell English', serif;
  font-size: var(--fs-faq); line-height: 1.3;
  color: var(--pe-texto);
}
.pe-faq-item summary::-webkit-details-marker { display: none; }
.pe-faq-mas {
  flex: none; width: 2.1rem; height: 2.1rem;
  border: 1.5px solid var(--pe-acento);
  border-radius: 50%;
  display: grid; place-items: center;
  transition: transform .35s ease, background .3s ease;
}
.pe-faq-mas svg { width: 1.05rem; height: 1.05rem; }
.pe-faq-item[open] .pe-faq-mas { transform: rotate(45deg); background: rgba(166,59,40,.1); }
.pe-faq-respuesta {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows .45s cubic-bezier(.22,.8,.3,1);
}
.pe-faq-item[open] .pe-faq-respuesta { grid-template-rows: 1fr; }
.pe-faq-respuesta > div { overflow: hidden; }
.pe-faq-respuesta p {
  font-size: var(--fs-base); line-height: var(--lh-base);
  margin: 0; padding: 0 1.6rem 1.5rem;
  color: var(--pe-texto);
  max-width: 44rem;
}
.pe-faq-respuesta p + p { padding-top: .2rem; }

/* ============ CTA FINAL ============ */
.pe-cta {
  text-align: center;
  background: var(--pe-tarjeta);
  border: 1px solid var(--pe-borde);
  border-radius: 1.6rem;
  padding: clamp(2.6rem, 6vw, 4.5rem) clamp(1.6rem, 5vw, 4rem);
  box-shadow: var(--pe-sombra);
  position: relative;
  overflow: hidden;
}
.pe-cta::before {
  content: ""; position: absolute; inset: 0;
  background-image: var(--papel-textura); background-size: 140px;
  opacity: .45; pointer-events: none;
}
.pe-cta > * { position: relative; }
.pe-cta .pe-numero { justify-content: center; }
.pe-cta .pe-numero::after { background: linear-gradient(to right, var(--pe-acento), transparent); }
.pe-cta .pe-numero::before {
  content: ""; height: 1px; width: min(9rem, 30vw);
  background: linear-gradient(to left, var(--pe-acento), transparent);
}
.pe-cta h2 { margin-inline: auto; font-size: var(--fs-h1); }
.pe-cta p { margin-inline: auto; }
/* botón nota de voz */
.pe-boton-audio {
  font-size: var(--fs-btn-lg);
  padding: 1.25rem 2.4rem;
  margin-top: 1.2rem;
}
.pe-onda { display: inline-flex; align-items: flex-end; gap: 3px; height: 1.5em; }
.pe-onda i {
  width: 3px; border-radius: 2px;
  background: currentColor; opacity: .85;
  animation: pe-onda 1.6s ease-in-out infinite;
}
.pe-onda i:nth-child(1) { height: 40%; animation-delay: 0s; }
.pe-onda i:nth-child(2) { height: 75%; animation-delay: .15s; }
.pe-onda i:nth-child(3) { height: 100%; animation-delay: .3s; }
.pe-onda i:nth-child(4) { height: 60%; animation-delay: .45s; }
.pe-onda i:nth-child(5) { height: 85%; animation-delay: .6s; }
.pe-onda i:nth-child(6) { height: 45%; animation-delay: .75s; }
.pe-onda i:nth-child(7) { height: 70%; animation-delay: .9s; }
@keyframes pe-onda { 0%, 100% { transform: scaleY(.55); } 50% { transform: scaleY(1); } }
.pe-cta-correo { margin-top: 1.8rem; font-size: var(--fs-base); color: var(--pe-texto-sec); }
.pe-cta-correo a { color: var(--pe-acento-texto); }
/* en móvil la tarjeta no toca los bordes: mismo aire lateral que el resto */
@media (max-width: 640px) {
  .pe-cta { margin-inline: var(--aire-lados); }
}

/* volver al inicio */
.pie-abierto { max-width: var(--pe-contenedor, 72rem); margin: 0 auto; padding: 0 var(--aire-lados); }
.pie-abierto .volver { margin: 0 0 1rem; }
.pie-abierto .volver a {
  color: var(--pe-texto-sec, #5C5045);
  font-size: var(--fs-base); text-decoration: none;
  border-bottom: 1px solid currentColor;
}
.pie-abierto .volver a:hover { color: #8A2F1E; }

/* ============ movimiento reducido: todo quieto y visible ============ */
@media (prefers-reduced-motion: reduce) {
  html.pe-js [data-pe-reveal] { opacity: 1; transform: none; transition: none; }
  .pe-sello .pe-sello-giro, .pe-mq-pista, .pe-onda i { animation: none; }
  .pe-burbuja--pinchada::before, .pe-burbuja--pinchada::after { animation: none; opacity: 0; }
  .pe-bento, .pe-stat, .pe-extra, .pe-boton, .pe-faq-respuesta { transition: none; }
  .pe-bento:hover, .pe-stat:hover, .pe-extra:hover, .pe-boton:hover { transform: none; }
}

/* ============ iconos Iconoir por item (glifos auténticos) ============ */
[data-pe-item="pe-incluye-1"]{--pe-item-ico:url("data:image/svg+xml,%3Csvg%20stroke-width%3D%221.5%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20d%3D%22M17%2012.5C17.2761%2012.5%2017.5%2012.2761%2017.5%2012C17.5%2011.7239%2017.2761%2011.5%2017%2011.5C16.7239%2011.5%2016.5%2011.7239%2016.5%2012C16.5%2012.2761%2016.7239%2012.5%2017%2012.5Z%22%20fill%3D%22%23A63B28%22%20stroke%3D%22%23A63B28%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%0A%3Cpath%20d%3D%22M12%2012.5C12.2761%2012.5%2012.5%2012.2761%2012.5%2012C12.5%2011.7239%2012.2761%2011.5%2012%2011.5C11.7239%2011.5%2011.5%2011.7239%2011.5%2012C11.5%2012.2761%2011.7239%2012.5%2012%2012.5Z%22%20fill%3D%22%23A63B28%22%20stroke%3D%22%23A63B28%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%0A%3Cpath%20d%3D%22M7%2012.5C7.27614%2012.5%207.5%2012.2761%207.5%2012C7.5%2011.7239%207.27614%2011.5%207%2011.5C6.72386%2011.5%206.5%2011.7239%206.5%2012C6.5%2012.2761%206.72386%2012.5%207%2012.5Z%22%20fill%3D%22%23A63B28%22%20stroke%3D%22%23A63B28%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%0A%3Cpath%20d%3D%22M12%2022C17.5228%2022%2022%2017.5228%2022%2012C22%206.47715%2017.5228%202%2012%202C6.47715%202%202%206.47715%202%2012C2%2013.8214%202.48697%2015.5291%203.33782%2017L2.5%2021.5L7%2020.6622C8.47087%2021.513%2010.1786%2022%2012%2022Z%22%20stroke%3D%22%23A63B28%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%0A%3C%2Fsvg%3E");}
[data-pe-item="pe-incluye-2"]{--pe-item-ico:url("data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%2024%2024%22%20stroke-width%3D%221.5%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20d%3D%22M5%207H6%22%20stroke%3D%22%23A63B28%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%0A%3Cpath%20d%3D%22M2%2017.7143V6.28571C2%205.02335%202.99492%204%204.22222%204H19.7778C21.0051%204%2022%205.02335%2022%206.28571V17.7143C22%2018.9767%2021.0051%2020%2019.7778%2020H4.22222C2.99492%2020%202%2018.9767%202%2017.7143Z%22%20stroke%3D%22%23A63B28%22%20stroke-width%3D%221.5%22%2F%3E%0A%3C%2Fsvg%3E");}
[data-pe-item="pe-incluye-3"]{--pe-item-ico:url("data:image/svg+xml,%3Csvg%20stroke-width%3D%221.5%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20d%3D%22M21.8883%2013.5C21.1645%2018.3113%2017.013%2022%2012%2022C6.47715%2022%202%2017.5228%202%2012C2%206.47715%206.47715%202%2012%202C16.1006%202%2019.6248%204.46819%2021.1679%208%22%20stroke%3D%22%23A63B28%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%0A%3Cpath%20d%3D%22M17%208H21.4C21.7314%208%2022%207.73137%2022%207.4V3%22%20stroke%3D%22%23A63B28%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%0A%3C%2Fsvg%3E");}
[data-pe-item="pe-incluye-4"]{--pe-item-ico:url("data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%2024%2024%22%20stroke-width%3D%221.5%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20d%3D%22M14.3632%205.65156L15.8431%204.17157C16.6242%203.39052%2017.8905%203.39052%2018.6716%204.17157L20.0858%205.58579C20.8668%206.36683%2020.8668%207.63316%2020.0858%208.41421L18.6058%209.8942M14.3632%205.65156L4.74749%2015.2672C4.41542%2015.5993%204.21079%2016.0376%204.16947%2016.5054L3.92738%2019.2459C3.87261%2019.8659%204.39148%2020.3848%205.0115%2020.33L7.75191%2020.0879C8.21972%2020.0466%208.65806%2019.8419%208.99013%2019.5099L18.6058%209.8942M14.3632%205.65156L18.6058%209.8942%22%20stroke%3D%22%23A63B28%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%0A%3C%2Fsvg%3E");}
[data-pe-item="pe-incluye-5"]{--pe-item-ico:url("data:image/svg+xml,%3Csvg%20stroke-width%3D%221.5%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20d%3D%22M8.5%2011.5L11.5%2014.5L16.5%209.5%22%20stroke%3D%22%23A63B28%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%0A%3Cpath%20d%3D%22M5%2018L3.13036%204.91253C3.05646%204.39524%203.39389%203.91247%203.90398%203.79912L11.5661%202.09641C11.8519%202.03291%2012.1481%202.03291%2012.4339%202.09641L20.096%203.79912C20.6061%203.91247%2020.9435%204.39524%2020.8696%204.91252L19%2018C18.9293%2018.495%2018.5%2021.5%2012%2021.5C5.5%2021.5%205.07071%2018.495%205%2018Z%22%20stroke%3D%22%23A63B28%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%0A%3C%2Fsvg%3E");}
[data-pe-item="pe-incluye-6"]{--pe-item-ico:url("data:image/svg+xml,%3Csvg%20stroke-width%3D%221.5%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20d%3D%22M6%2018.01L6.01%2017.9989%22%20stroke%3D%22%23A63B28%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%0A%3Cpath%20d%3D%22M6%206.01L6.01%205.99889%22%20stroke%3D%22%23A63B28%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%0A%3Cpath%20d%3D%22M2%209.4V2.6C2%202.26863%202.26863%202%202.6%202H21.4C21.7314%202%2022%202.26863%2022%202.6V9.4C22%209.73137%2021.7314%2010%2021.4%2010H2.6C2.26863%2010%202%209.73137%202%209.4Z%22%20stroke%3D%22%23A63B28%22%20stroke-width%3D%221.5%22%2F%3E%0A%3Cpath%20d%3D%22M2%2021.4V14.6C2%2014.2686%202.26863%2014%202.6%2014H21.4C21.7314%2014%2022%2014.2686%2022%2014.6V21.4C22%2021.7314%2021.7314%2022%2021.4%2022H2.6C2.26863%2022%202%2021.7314%202%2021.4Z%22%20stroke%3D%22%23A63B28%22%20stroke-width%3D%221.5%22%2F%3E%0A%3C%2Fsvg%3E");}
[data-pe-item="pe-incluye-7"]{--pe-item-ico:url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20stroke-width%3D%221.5%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20d%3D%22M19%2020H5C3.89543%2020%203%2019.1046%203%2018V9C3%207.89543%203.89543%207%205%207H19C20.1046%207%2021%207.89543%2021%209V18C21%2019.1046%2020.1046%2020%2019%2020Z%22%20stroke%3D%22%23A63B28%22%20%2F%3E%0A%3Cpath%20d%3D%22M16.5%2014C16.2239%2014%2016%2013.7761%2016%2013.5C16%2013.2239%2016.2239%2013%2016.5%2013C16.7761%2013%2017%2013.2239%2017%2013.5C17%2013.7761%2016.7761%2014%2016.5%2014Z%22%20fill%3D%22%23A63B28%22%20stroke%3D%22%23A63B28%22%20%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%0A%3Cpath%20d%3D%22M18%207V5.60322C18%204.28916%2016.7544%203.33217%2015.4847%203.67075L4.48467%206.60409C3.60917%206.83756%203%207.63046%203%208.53656V9%22%20stroke%3D%22%23A63B28%22%20%2F%3E%0A%3C%2Fsvg%3E");}
[data-pe-item="pe-incluye-8"]{--pe-item-ico:url("data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%2024%2024%22%20stroke-width%3D%221.5%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20d%3D%22M16%2013C13.2386%2013%2011%2011.8807%2011%2010.5C11%209.11929%2013.2386%208%2016%208C18.7614%208%2021%209.11929%2021%2010.5C21%2011.8807%2018.7614%2013%2016%2013Z%22%20stroke%3D%22%23A63B28%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%0A%3Cpath%20d%3D%22M11%2014.5C11%2015.8807%2013.2386%2017%2016%2017C18.7614%2017%2021%2015.8807%2021%2014.5%22%20stroke%3D%22%23A63B28%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%0A%3Cpath%20d%3D%22M3%209.5C3%2010.8807%205.23858%2012%208%2012C9.12583%2012%2010.1647%2011.814%2011.0005%2011.5%22%20stroke%3D%22%23A63B28%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%0A%3Cpath%20d%3D%22M3%2013C3%2014.3807%205.23858%2015.5%208%2015.5C9.12561%2015.5%2010.1643%2015.314%2011%2015.0002%22%20stroke%3D%22%23A63B28%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%0A%3Cpath%20d%3D%22M3%205.5V16.5C3%2017.8807%205.23858%2019%208%2019C9.12563%2019%2010.1643%2018.8139%2011%2018.5%22%20stroke%3D%22%23A63B28%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%0A%3Cpath%20d%3D%22M13%208.5V5.5%22%20stroke%3D%22%23A63B28%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%0A%3Cpath%20d%3D%22M11%2010.5V18.5C11%2019.8807%2013.2386%2021%2016%2021C18.7614%2021%2021%2019.8807%2021%2018.5V10.5%22%20stroke%3D%22%23A63B28%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%0A%3Cpath%20d%3D%22M8%208C5.23858%208%203%206.88071%203%205.5C3%204.11929%205.23858%203%208%203C10.7614%203%2013%204.11929%2013%205.5C13%206.88071%2010.7614%208%208%208Z%22%20stroke%3D%22%23A63B28%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%0A%3C%2Fsvg%3E");}
[data-pe-item="pe-extra-1"]{--pe-item-ico:url("data:image/svg+xml,%3Csvg%20stroke-width%3D%221.5%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20d%3D%22M7%2012L17%2012%22%20stroke%3D%22%23A63B28%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%0A%3Cpath%20d%3D%22M7%208L13%208%22%20stroke%3D%22%23A63B28%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%0A%3Cpath%20d%3D%22M3%2020.2895V5C3%203.89543%203.89543%203%205%203H19C20.1046%203%2021%203.89543%2021%205V15C21%2016.1046%2020.1046%2017%2019%2017H7.96125C7.35368%2017%206.77906%2017.2762%206.39951%2017.7506L4.06852%2020.6643C3.71421%2021.1072%203%2020.8567%203%2020.2895Z%22%20stroke%3D%22%23A63B28%22%20stroke-width%3D%221.5%22%2F%3E%0A%3C%2Fsvg%3E");}
[data-pe-item="pe-extra-2"]{--pe-item-ico:url("data:image/svg+xml,%3Csvg%20stroke-width%3D%221.5%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20d%3D%22M20%2010C20%2014.4183%2012%2022%2012%2022C12%2022%204%2014.4183%204%2010C4%205.58172%207.58172%202%2012%202C16.4183%202%2020%205.58172%2020%2010Z%22%20stroke%3D%22%23A63B28%22%20stroke-width%3D%221.5%22%2F%3E%0A%3Cpath%20d%3D%22M12%2011C12.5523%2011%2013%2010.5523%2013%2010C13%209.44772%2012.5523%209%2012%209C11.4477%209%2011%209.44772%2011%2010C11%2010.5523%2011.4477%2011%2012%2011Z%22%20fill%3D%22%23A63B28%22%20stroke%3D%22%23A63B28%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%0A%3C%2Fsvg%3E");}
[data-pe-item="pe-extra-3"]{--pe-item-ico:url("data:image/svg+xml,%3Csvg%20stroke-width%3D%221.5%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20d%3D%22M8%2014L16%2014%22%20stroke%3D%22%23A63B28%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%0A%3Cpath%20d%3D%22M8%2010L10%2010%22%20stroke%3D%22%23A63B28%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%0A%3Cpath%20d%3D%22M8%2018L12%2018%22%20stroke%3D%22%23A63B28%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%0A%3Cpath%20d%3D%22M10%203H6C4.89543%203%204%203.89543%204%205V20C4%2021.1046%204.89543%2022%206%2022H18C19.1046%2022%2020%2021.1046%2020%2020V5C20%203.89543%2019.1046%203%2018%203H14.5M10%203V1M10%203V5%22%20stroke%3D%22%23A63B28%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%0A%3C%2Fsvg%3E");}
.pe-burbuja-giro::before{background-image:url("data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%2024%2024%22%20stroke-width%3D%221.5%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20d%3D%22M9.5%2014.5L3%2021%22%20stroke%3D%22%238A2F1E%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%0A%3Cpath%20d%3D%22M5.00007%209.48528L14.1925%2018.6777L15.8895%2016.9806L15.4974%2013.1944L21.0065%208.5211L15.1568%202.67141L10.4834%208.18034L6.69713%207.78823L5.00007%209.48528Z%22%20stroke%3D%22%238A2F1E%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%0A%3C%2Fsvg%3E");}
.pe-plaza-slot::before{background-image:url("data:image/svg+xml,%3Csvg%20stroke-width%3D%221.5%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20d%3D%22M5%2020V19C5%2015.134%208.13401%2012%2012%2012V12C15.866%2012%2019%2015.134%2019%2019V20%22%20stroke%3D%22%23A63B28%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%0A%3Cpath%20d%3D%22M12%2012C14.2091%2012%2016%2010.2091%2016%208C16%205.79086%2014.2091%204%2012%204C9.79086%204%208%205.79086%208%208C8%2010.2091%209.79086%2012%2012%2012Z%22%20stroke%3D%22%23A63B28%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%0A%3C%2Fsvg%3E");}
.pe-burbuja-ventajas .pe-burbuja-punto::before{background-image:url("data:image/svg+xml,%3Csvg%20stroke-width%3D%221.5%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20d%3D%22M7%2012.5L10%2015.5L17%208.5%22%20stroke%3D%22%23A63B28%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%0A%3Cpath%20d%3D%22M12%2022C17.5228%2022%2022%2017.5228%2022%2012C22%206.47715%2017.5228%202%2012%202C6.47715%202%202%206.47715%202%2012C2%2017.5228%206.47715%2022%2012%2022Z%22%20stroke%3D%22%23A63B28%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%0A%3C%2Fsvg%3E");}

/* ============ pe-panel: tu panel propio (maqueta animada) ============ */
.pe-panel {
  --pe-papel: #F3E9D6;
  --pe-crema: #F8F1E0;
  --pe-tinta: #1B1510;
  --pe-suave: #5C5045;
  --pe-terracota: #A63B28;
  --pe-oxido: #8A2F1E;
  --pe-linea: rgba(27, 21, 16, .16);
  --pe-sombra: 0 1px 2px rgba(27,21,16,.07), 0 12px 32px -12px rgba(27,21,16,.22);
  --pe-radio: 1.1rem;
  --pe-contenedor: 72rem;
  --pe-fondo: var(--pe-papel);
  --pe-texto: var(--pe-tinta);
  --pe-texto-sec: var(--pe-suave);
  --pe-acento: var(--pe-terracota);
  max-width: var(--pe-contenedor);
  margin-inline: auto;
  padding-inline: var(--aire-lados);
  margin-block: clamp(3.6rem, 9vw, 6.5rem);
  color: var(--pe-texto);
  scroll-margin-top: 2rem;
}
.pe-panel h2 {
  font-family: 'IM Fell English', 'EB Garamond', serif;
  font-weight: 400;
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  letter-spacing: .002em;
  margin: 0 0 1.4rem;
}
.pe-panel-intro, .pe-panel-cierre {
  max-width: 42rem;
  color: var(--pe-texto-sec);
  font-size: var(--fs-base);
  line-height: 1.65;
  margin: 0 0 1rem;
}
.pe-panel-cierre { margin: 1.6rem 0 0; }
/* demo: panel + web, lado a lado en escritorio */
.pe-panel-demo { margin-top: 2.2rem; }
.pe-panel-demo-leyenda {
  font-size: .85rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--pe-texto-sec); margin: 0 0 1rem;
}
.pe-panel-demo-dos {
  display: grid; gap: 1.4rem; align-items: stretch;
}
@media (min-width: 860px) {
  .pe-panel-demo-dos { grid-template-columns: 1fr 1fr; gap: 2rem; align-items: center; }
}
/* --- maqueta del panel (paleta real del Panel Esencial) --- */
.pe-pmock, .pe-wmock {
  border-radius: 1rem; overflow: hidden;
  box-shadow: var(--pe-sombra);
  border: 1px solid var(--pe-linea);
  background: #fff;
}
.pe-pmock-barra, .pe-wmock-barra {
  display: flex; align-items: center; gap: .45rem;
  padding: .65rem .9rem; background: #EDE8DB;
  border-bottom: 1px solid #D8D2C0;
}
.pe-pmock-punto, .pe-wmock-punto {
  width: .6rem; height: .6rem; border-radius: 50%; background: #C9C2B2;
}
.pe-pmock-nombre, .pe-wmock-nombre {
  margin-left: .4rem; font-size: .8rem; color: #6F675B;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
}
.pe-pmock-cuerpo {
  background: #F5F3EE; padding: 1.1rem;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  color: #26241F;
}
.pe-pmock-hola { font-size: .8rem; color: #6F675B; margin: 0 0 .7rem; }
.pe-pmock-tarjeta {
  background: #FCF8EE; border: 1px solid #D8D2C0; border-radius: .75rem;
  padding: 1rem 1.1rem;
}
.pe-pmock-th { font-weight: 650; font-size: .95rem; margin: 0 0 .8rem; letter-spacing: -.01em; }
.pe-pmock-campos { display: grid; gap: .55rem; margin-bottom: .9rem; }
.pe-pmock-campo {
  display: flex; justify-content: space-between; align-items: center; gap: .8rem;
  background: #fff; border: 1px solid #D8D2C0; border-radius: .5rem;
  padding: .5rem .7rem; font-size: .85rem;
  transition: border-color .3s, box-shadow .3s;
}
.pe-pmock-et { color: #6F675B; }
.pe-pmock-val { font-weight: 600; }
.pe-pmock-campo--precio.destaca {
  border-color: #A63B28;
  box-shadow: 0 0 0 3px rgba(166, 59, 40, .18);
}
.pe-pmock-btn {
  display: inline-block; background: #3F3B35; color: #FAF8F3;
  font-size: .85rem; font-weight: 600; padding: .6rem 1.1rem; border-radius: .6rem;
}
.pe-pmock-btn.publicando { background: #6F675B; }
.pe-pmock-ok {
  display: none; margin-top: .7rem; font-size: .85rem; color: #3E7C4F; font-weight: 600;
}
.pe-panel-demo[data-estado="publicado"] .pe-pmock-ok { display: block; }
.pe-panel-demo[data-estado="publicado"] .pe-pmock-btn { display: none; }
/* --- maqueta de la web de la clienta --- */
.pe-wmock-cuerpo { padding: 1.1rem; background: #FDFBF6; }
.pe-wmock-h {
  font-family: 'IM Fell English', 'EB Garamond', serif;
  font-size: 1.05rem; margin: 0 0 .8rem; color: #1B1510;
}
.pe-wmock-tarjeta {
  background: #fff; border: 1px solid rgba(27,21,16,.12); border-radius: .7rem;
  padding: .9rem 1rem;
}
.pe-wmock-t { font-weight: 650; font-size: .9rem; margin: 0 0 .25rem; color: #1B1510; }
.pe-wmock-d { font-size: .8rem; color: #5C5045; margin: 0 0 .4rem; }
.pe-wmock-p {
  font-size: 1rem; font-weight: 700; color: #A63B28; margin: 0;
  display: inline-block; padding: .1rem .5rem; border-radius: .4rem;
  transition: background-color .4s;
}
.pe-wmock-p.actualizado { background: rgba(62, 124, 79, .16); }
/* sin JS o movimiento reducido: estado final, todo visible y quieto */
.pe-panel-demo[data-estado="quieto"] .pe-pmock-ok { display: block; }
.pe-panel-demo[data-estado="quieto"] .pe-pmock-btn { display: none; }
@media (prefers-reduced-motion: reduce) {
  .pe-pmock-campo, .pe-wmock-p { transition: none; }
}