/* Pulso Escénico — estilos de sitio
   Componentes del design system reescritos como CSS plano (sin React)
   + el CSS de página que venía del lienzo de Claude Design. */

/* ============================================================
   1. Base de página
   ============================================================ */
html { scroll-behavior: smooth; }
body { margin: 0; background: #F2EDE4; }
a { color: #880008; text-decoration: none; }
a:hover { color: #6E0009; }

/* Muchos bloques del diseño llevan display en el atributo style, que gana a la
   regla del navegador para [hidden]. Sin esto, el aviso de "recibido" del
   formulario se vería siempre. */
[hidden] { display: none !important; }

/* Solo para lectores de pantalla y buscadores. */
.pe-sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.pe-root {
  background: #F2EDE4;
  color: #0E0E11;
  font-family: 'Jost', sans-serif;
  overflow-x: hidden;
}

/* ============================================================
   2. Marca — Logo y WaveRule
   ============================================================ */
.pe-brand {
  display: inline-flex;
  align-items: center;
  border: 0;
  text-decoration: none;
}

/* Lockup horizontal: símbolo + nombre. El símbolo del design system es
   vertical y a 32 px no se leería, así que el nombre va compuesto en Jost. */
.pe-lockup {
  display: inline-flex;
  align-items: center;
  line-height: 1;
}
.pe-lockup img { display: block; }
.pe-wordmark {
  font-family: 'Jost', 'Futura', 'Century Gothic', sans-serif;
  font-weight: 400;
  letter-spacing: .2em;
  text-transform: uppercase;
  white-space: nowrap;
  line-height: 1;
  padding-left: .1em;
}
.pe-lockup--cream .pe-wordmark { color: #F2EDE4; }
.pe-lockup--ink   .pe-wordmark { color: #880008; }

.pe-wave {
  width: 100%;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
}
.pe-wave--ink   { background-image: url("../assets/waveform.png");       opacity: .55; }
.pe-wave--cream { background-image: url("../assets/waveform-cream.png"); opacity: .7;  }

/* ============================================================
   3. Botón
   ============================================================ */
.pe-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--font-ui);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  line-height: 1;
  border-radius: var(--radius-xs);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: var(--transition-control), transform var(--dur-instant) var(--ease-standard);
}
.pe-btn:active { transform: scale(var(--press-scale)); }

.pe-btn--sm { padding: 8px 14px;  font-size: 10px; }
.pe-btn--md { padding: var(--pad-control-y) var(--pad-control-x); font-size: 11px; }
.pe-btn--lg { padding: 16px 32px; font-size: 12px; }

.pe-btn--solid { background: var(--crimson-600); color: var(--paper-200); border: 2px solid var(--crimson-600); }
.pe-btn--solid:hover { background: var(--crimson-700); border-color: var(--crimson-700); color: var(--paper-200); }

.pe-btn--outline { background: transparent; color: var(--ink-900); border: 2px solid var(--ink-900); }
.pe-btn--outline:hover { background: var(--ink-900); color: var(--paper-200); }

.pe-btn--ghost { background: transparent; color: var(--crimson-600); border: 2px solid transparent; }
.pe-btn--ghost:hover { background: var(--crimson-100); color: var(--crimson-600); }

.pe-btn--stage { background: transparent; color: var(--paper-200); border: 2px solid rgba(242,237,228,.5); }
.pe-btn--stage:hover { background: var(--paper-200); color: var(--ink-900); border-color: var(--paper-200); }

/* ============================================================
   4. Formularios
   ============================================================ */
.pe-field { display: flex; flex-direction: column; gap: 7px; }
.pe-label {
  font: var(--type-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--ink-300);
}
.pe-input {
  width: 100%;
  padding: 12px 14px;
  font-family: var(--font-ui);
  font-size: var(--size-body-sm);
  line-height: 1.45;
  color: var(--paper-200);
  background: rgba(242,237,228,.06);
  border: 1px solid rgba(242,237,228,.24);
  border-radius: var(--radius-xs);
  outline: none;
  transition: var(--transition-control);
}
.pe-input:focus { border-color: var(--crimson-600); }
textarea.pe-input { resize: vertical; }
select.pe-input {
  appearance: none;
  -webkit-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, rgba(242,237,228,.6) 50%),
                    linear-gradient(135deg, rgba(242,237,228,.6) 50%, transparent 50%);
  background-position: calc(100% - 18px) calc(50% + 1px), calc(100% - 13px) calc(50% + 1px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
select.pe-input option { color: #0E0E11; background: #F2EDE4; }
.pe-input::placeholder { color: rgba(242,237,228,.38); }
.pe-input:-webkit-autofill {
  -webkit-text-fill-color: #F2EDE4;
  -webkit-box-shadow: 0 0 0 1000px #16161A inset;
}

/* ============================================================
   5. Hueco de imagen (placeholder)
   Sustituye a <image-slot>. Cuando tengas la foto real:
     <img class="pe-slot-img" src="assets/loquesea.jpg" alt="...">
   ============================================================ */
/* El hueco se pinta con currentColor, así que se adapta solo al fondo
   crema o al fondo negro de la sección en la que esté. */
.pe-slot {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  text-align: center;
  background: color-mix(in srgb, currentColor 6%, transparent);
  border: 1px dashed color-mix(in srgb, currentColor 28%, transparent);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  line-height: 1.5;
  letter-spacing: .04em;
  overflow: hidden;
}
.pe-slot > span { opacity: .55; max-width: 22em; }
.pe-slot--circle { border-radius: 50%; padding: 0; }
.pe-slot--circle > span { display: none; }
.pe-slot-img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Enlace real dentro de una tarjeta clicable: el rastreador necesita un <a>
   con destino y texto ancla; el visitante no tiene por qué notarlo. */
.pe-enlace-tarjeta { color: inherit; text-decoration: none; border: 0; }
.pe-enlace-tarjeta:hover { color: inherit; }

/* ============================================================
   6. CSS de página (venía del lienzo)
   ============================================================ */
[data-rv="off"] { opacity: 0; transform: translateY(16px); transition: opacity .72s cubic-bezier(.2,0,.2,1), transform .72s cubic-bezier(.2,0,.2,1); }
[data-rv="in"] { opacity: 1; transform: none; }
[data-rv] h1, [data-rv] h2, [data-rv] h3, h1[data-rv], h2[data-rv], h3[data-rv] { transition: clip-path .84s cubic-bezier(.2,0,.2,1) .08s, transform .84s cubic-bezier(.2,0,.2,1) .08s; }
[data-rv="off"] h1, [data-rv="off"] h2, [data-rv="off"] h3, h1[data-rv="off"], h2[data-rv="off"], h3[data-rv="off"] { clip-path: inset(0 0 108% 0); }
[data-rv="in"] h1, [data-rv="in"] h2, [data-rv="in"] h3, h1[data-rv="in"], h2[data-rv="in"], h3[data-rv="in"] { clip-path: inset(-14% 0 -18% 0); }
[data-drift] { will-change: transform; }
[data-progreso] { position: absolute; left: 0; bottom: -1px; height: 2px; width: 0; background: #880008; transition: width .16s linear; }

[data-acc] { cursor: pointer; }
[data-acc] > div:first-child { transition: transform .24s cubic-bezier(.2,0,.2,1); }
[data-acc]:hover > div:first-child { transform: translateX(8px); }
[data-acc-plus] { transition: transform .24s cubic-bezier(.2,0,.2,1), color .24s cubic-bezier(.2,0,.2,1); }
[data-acc="open"] [data-acc-plus] { transform: rotate(45deg); }
[data-acc-body] { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .42s cubic-bezier(.2,0,.2,1); }
[data-acc-body] > div { overflow: hidden; }
[data-acc="open"] [data-acc-body] { grid-template-rows: 1fr; }

[data-hd="1"] { padding-top: 10px !important; padding-bottom: 10px !important; }
[data-nav] { white-space: nowrap; font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; color: rgba(242,237,228,.72); background: none; border: 0; padding: 6px 0; cursor: pointer; font-family: 'Jost', sans-serif; border-bottom: 1px solid transparent; transition: color .16s cubic-bezier(.2,0,.2,1), border-color .16s cubic-bezier(.2,0,.2,1); text-decoration: none; }
[data-nav]:hover { color: #F2EDE4; }
[data-nav="on"] { color: #F2EDE4; border-bottom-color: #880008; }

[data-gal] { transition: opacity .72s cubic-bezier(.2,0,.2,1); }
[data-gal="off"] { opacity: 0; pointer-events: none; }
[data-gal="on"] { opacity: 1; }
[data-galdot] { width: 26px; height: 3px; border: 0; padding: 0; cursor: pointer; background: rgba(14,14,17,.18); transition: background .24s cubic-bezier(.2,0,.2,1); }
[data-galdot="on"] { background: #880008; }
[data-galnav] { width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center; font-family: 'IBM Plex Mono', monospace; font-size: 15px; color: #0E0E11; background: none; border: 1px solid rgba(14,14,17,.24); cursor: pointer; transition: background .16s cubic-bezier(.2,0,.2,1), color .16s cubic-bezier(.2,0,.2,1); }
[data-galnav]:hover { background: #0E0E11; color: #F2EDE4; }

[data-volver] { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; text-align: left; font-family: 'IBM Plex Mono', monospace; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: rgba(242,237,228,.72); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: none; }
[data-volver]:hover { color: #F2EDE4; }

[data-media] .pe-slot, [data-media] img { transition: transform .42s cubic-bezier(.2,0,.2,1); display: block; }
[data-media]:hover .pe-slot, [data-media]:hover img { transform: scale(1.03); }
[data-rail]::-webkit-scrollbar { height: 2px; }
[data-rail]::-webkit-scrollbar-thumb { background: rgba(14,14,17,.3); }

footer[data-tone="ink"] { background: #0E0E11; color: rgba(242,237,228,.6); }
footer[data-tone="cream"] { background: #F2EDE4; color: rgba(14,14,17,.6); }
footer[data-tone="cream"] [data-nav] { color: rgba(14,14,17,.72); }
footer[data-tone="cream"] [data-nav]:hover { color: #0E0E11; }

@keyframes peIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
@keyframes peLine { 0% { opacity: 0; transform: translateY(16px) } 16% { opacity: 1; transform: none } 76% { opacity: 1; transform: none } 100% { opacity: 0; transform: translateY(-10px) } }
@keyframes peVeil { to { opacity: 0; visibility: hidden } }
@keyframes peCue { 0%,100% { transform: translateY(0); opacity: .5 } 50% { transform: translateY(8px); opacity: 1 } }

/* La cortina de entrada arranca oculta: solo la muestra el JS, y solo una vez
   por sesión. Quien llegue sin JS (o Google) ve la portada directamente. */
#pe-intro { display: none; }
#pe-intro[data-on="1"] { display: flex; }

@media (prefers-reduced-motion: reduce) {
  [data-rv], [data-rv="off"] { opacity: 1 !important; transform: none !important; transition: none !important; }
  [data-rv] h1, [data-rv] h2, [data-rv] h3 { clip-path: none !important; transform: none !important; transition: none !important; }
  [data-drift] { transform: none !important; }
}

/* ============================================================
   7. Ajustes de pantalla pequeña
   ============================================================ */
@media (max-width: 720px) {
  header { padding: 14px 20px !important; gap: 12px !important; }
  header nav { gap: 14px !important; }
  section { padding-left: 20px !important; padding-right: 20px !important; }
  footer { padding-left: 20px !important; padding-right: 20px !important; }
}

/* ============================================================
   8. Instagram en la cabecera y WhatsApp flotante
   ============================================================ */

/* El banner ocupa su propia línea del flex de la cabecera (que ya lleva
   flex-wrap), así que se ve siempre debajo del logo y la navegación, en las
   nueve páginas, sin tener que medir la altura de la cabecera fija. */
.pe-ig {
  flex: 1 0 100%;
  order: 9;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: -6px -40px -18px;
  padding: 9px 40px;
  border-top: 1px solid rgba(242,237,228,.14);
  background: rgba(136,0,8,.16);
  color: rgba(242,237,228,.86);
  font-family: 'Jost', system-ui, sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color .24s cubic-bezier(.2,0,.2,1), color .24s cubic-bezier(.2,0,.2,1);
}
.pe-ig:hover { background: rgba(136,0,8,.42); color: #F2EDE4; }
.pe-ig-icono { width: 16px; height: 16px; flex: none; }
.pe-ig-cuenta { font-family: 'IBM Plex Mono', ui-monospace, monospace; letter-spacing: .06em; text-transform: none; opacity: .72; }
.pe-ig:hover .pe-ig-cuenta { opacity: 1; }

/* La cabecera encoge al bajar (data-hd="1"): el banner encoge con ella. */
header[data-hd="1"] .pe-ig { padding-top: 6px; padding-bottom: 6px; }

/* Botón flotante de WhatsApp. z-index 55: por debajo de la cabecera (60) y de
   la cortina de entrada (200). */
.pe-wa {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 55;
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #880008;
  color: #F2EDE4;
  box-shadow: 0 10px 28px rgba(8,8,10,.32);
  transition: transform .24s cubic-bezier(.16,.84,.44,1), background-color .16s cubic-bezier(.2,0,.2,1);
}
.pe-wa svg { width: 30px; height: 30px; }
.pe-wa:hover { background: #A50E18; transform: translateY(-2px) scale(1.04); }
.pe-wa:active { transform: scale(.985); }

@media (max-width: 720px) {
  .pe-ig { margin: -4px -20px -14px; padding: 8px 20px; gap: 8px; font-size: 11px; letter-spacing: .12em; }
  .pe-ig-cuenta { display: none; }
  .pe-wa { right: 16px; bottom: 16px; width: 52px; height: 52px; }
  .pe-wa svg { width: 27px; height: 27px; }
}

@media (prefers-reduced-motion: reduce) {
  .pe-wa, .pe-ig { transition: none; }
  .pe-wa:hover { transform: none; }
}

/* ============================================================
   9. Botón de sonido del vídeo del hero
   ============================================================ */

/* Arranca grande y en el centro del hero: es una invitación, no un control.
   En cuanto se pulsa se aparta a la esquina y se queda como un simple mudo,
   que es lo mínimo decente cuando una web suena sola. */
.pe-sonido {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 5;
  display: inline-flex;
  align-items: center;
  gap: 15px;
  padding: 19px 36px 19px 31px;
  border: 1px solid rgba(242,237,228,.5);
  border-radius: 999px;
  background: rgba(14,14,17,.4);
  color: #F2EDE4;
  cursor: pointer;
  font-family: 'Jost', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .26em;
  text-transform: uppercase;
  white-space: nowrap;
  backdrop-filter: blur(6px);
  animation: peAudio 1.1s cubic-bezier(.2,0,.2,1) 1.1s both;
  transition: background-color .2s cubic-bezier(.2,0,.2,1),
              border-color .2s cubic-bezier(.2,0,.2,1),
              opacity .38s cubic-bezier(.2,0,.2,1),
              transform .38s cubic-bezier(.2,0,.2,1);
}
@keyframes peAudio { from { opacity: 0; transform: translate(-50%, -50%) scale(.96) } to { opacity: 1; transform: translate(-50%, -50%) scale(1) } }

.pe-sonido:hover { background: rgba(136,0,8,.72); border-color: #F2EDE4; }
.pe-sonido svg { width: 24px; height: 24px; flex: none; }
.pe-sonido-texto { line-height: 1; padding-top: 1px; }

/* El icono cambia según suene o no. */
.pe-sonido .pe-sonido-on { display: none; }
.pe-sonido[aria-pressed="true"] .pe-sonido-on { display: block; }
.pe-sonido[aria-pressed="true"] .pe-sonido-off { display: none; }

/* Salida: se desvanece en el sitio, sin moverse. */
.pe-sonido--saliendo { opacity: 0; transform: translate(-50%, -50%) scale(.94); pointer-events: none; }

/* Y reaparece pequeño en la esquina, encima del botón de WhatsApp, ya sin
   rótulo: a partir de aquí solo sirve para callarlo. */
.pe-sonido--min {
  left: auto;
  top: auto;
  right: 24px;
  bottom: 96px;
  transform: none;
  width: 44px;
  height: 44px;
  padding: 0;
  justify-content: center;
  gap: 0;
  border-color: rgba(242,237,228,.42);
  background: rgba(14,14,17,.55);
  backdrop-filter: blur(3px);
  animation: peAudioMin .42s cubic-bezier(.2,0,.2,1) both;
}
@keyframes peAudioMin { from { opacity: 0 } to { opacity: 1 } }
.pe-sonido--min .pe-sonido-texto { display: none; }
.pe-sonido--min svg { width: 20px; height: 20px; }
.pe-sonido--min[aria-pressed="true"] { border-color: #880008; background: rgba(136,0,8,.6); }

@media (max-width: 720px) {
  .pe-sonido { padding: 16px 26px 16px 22px; gap: 12px; font-size: 11.5px; letter-spacing: .2em; }
  .pe-sonido svg { width: 21px; height: 21px; }
  .pe-sonido--min { right: 16px; bottom: 80px; width: 40px; height: 40px; padding: 0; }
  .pe-sonido--min svg { width: 18px; height: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .pe-sonido { animation: none; }
  .pe-sonido--min { animation: none; }
}

/* ============================================================
   10. Acabado
   Detalles que no cambian la estructura, solo el nivel de
   terminación: la tira de Instagram deja de gritar, los huecos
   de foto pasan a parecer intencionados, y se afina el
   comportamiento de tipografía, foco, enlaces y botones.
   ============================================================ */

/* ---- Tipografía: que el navegador reparta bien las líneas ---- */
h1, h2, h3, blockquote { text-wrap: balance; }
p, li, figcaption { text-wrap: pretty; }

/* Los números grandes y los rótulos en versalitas piden cifras de caja alta
   y del mismo ancho, o bailan al animarse. */
h1, h2, h3 { font-variant-numeric: lining-nums tabular-nums; }

/* ---- Selección y foco ---- */
::selection { background: var(--crimson-600, #880008); color: var(--paper-200, #F2EDE4); }
:focus-visible {
  outline: 2px solid var(--crimson-400, #C4454C);
  outline-offset: 3px;
  border-radius: 1px;
}
:focus:not(:focus-visible) { outline: none; }

/* ---- Navegación: el subrayado entra desde un lado, no aparece de golpe ---- */
[data-nav] { position: relative; }
[data-nav="off"]::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background: var(--crimson-600, #880008);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .42s cubic-bezier(.2,0,.2,1);
}
[data-nav="off"]:hover::after { transform: scaleX(1); transform-origin: left; }

/* ---- Botones: el color entra barriendo, no parpadeando ---- */
.pe-btn { position: relative; overflow: hidden; isolation: isolate; }
.pe-btn--solid::before,
.pe-btn--stage::before,
.pe-btn--outline::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .46s cubic-bezier(.2,0,.2,1);
}
.pe-btn--solid::before  { background: var(--crimson-700, #6E0009); }
.pe-btn--stage::before  { background: var(--paper-200, #F2EDE4); }
.pe-btn--outline::before { background: var(--ink-900, #0E0E11); }
.pe-btn--solid:hover::before,
.pe-btn--stage:hover::before,
.pe-btn--outline:hover::before { transform: scaleX(1); transform-origin: left; }

/* ---- Banner de Instagram: de tira roja a línea discreta ----
   Ocupaba el ancho entero en crimson y era lo primero que veía el ojo, por
   encima del propio hero. Ahora es un filete: se lee si lo buscas. */
.pe-ig {
  background: transparent;
  border-top: 1px solid rgba(242,237,228,.10);
  color: rgba(242,237,228,.46);
  letter-spacing: .2em;
  transition: color .28s cubic-bezier(.2,0,.2,1);
}
.pe-ig:hover { background: transparent; color: rgba(242,237,228,.92); }
.pe-ig-icono { color: var(--crimson-300, #DE8A8E); opacity: .8; transition: opacity .28s; }
.pe-ig:hover .pe-ig-icono { opacity: 1; }

/* ---- Huecos de foto ----
   Mientras no haya fotos, que no parezcan un error: fondo con profundidad,
   filete finísimo y una circunferencia de encuadre en el centro. Todo con
   currentColor, así funciona igual sobre crema que sobre negro. */
.pe-slot {
  position: relative;
  border: 0;
  background:
    linear-gradient(148deg,
      color-mix(in srgb, currentColor 10%, transparent),
      color-mix(in srgb, currentColor 3%, transparent) 44%,
      color-mix(in srgb, currentColor 12%, transparent));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 15%, transparent);
}
.pe-slot::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(34%, 128px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border: 1px solid color-mix(in srgb, currentColor 13%, transparent);
  border-radius: 50%;
  pointer-events: none;
}
.pe-slot > span {
  position: relative;
  z-index: 1;
  opacity: .4;
  letter-spacing: .1em;
}
.pe-slot--circle { box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 18%, transparent); }
.pe-slot--circle::before { display: none; }

/* Cuando llegue la foto de verdad, que entre con el mismo temple. */
.pe-slot-img { filter: saturate(.94) contrast(1.02); transition: filter .5s cubic-bezier(.2,0,.2,1); }
[data-media]:hover .pe-slot-img { filter: none; }

@media (prefers-reduced-motion: reduce) {
  [data-nav="off"]::after,
  .pe-btn--solid::before,
  .pe-btn--stage::before,
  .pe-btn--outline::before,
  .pe-slot-img { transition: none; }
}

/* ============================================================
   11. Pie de página
   ============================================================ */

/* Teléfono, correo e Instagram. Sin subrayado de serie: se enciende al pasar,
   como el resto de enlaces del sitio. */
.pe-pie-dato {
  color: inherit;
  opacity: .68;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  width: fit-content;
  transition: opacity .18s cubic-bezier(.2,0,.2,1), border-color .18s cubic-bezier(.2,0,.2,1);
}
.pe-pie-dato:hover { opacity: 1; border-bottom-color: var(--crimson-600, #880008); }

@media (prefers-reduced-motion: reduce) {
  .pe-pie-dato { transition: none; }
}

/* ============================================================
   12. Páginas legales y casilla de consentimiento
   ============================================================
   El aviso legal y la política de privacidad no vienen del lienzo: son texto
   corrido, y aquí se les da el ancho de lectura y la jerarquía del resto del
   sitio. Nada de esto se usa en las nueve páginas de contenido.            */

.pe-legal {
  max-width: 42em;
  margin: 0 auto;
}

.pe-legal-kicker {
  margin: 0 0 18px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--crimson-600, #880008);
}

.pe-legal h1 {
  margin: 0 0 24px;
  font-size: clamp(34px, 4.4vw, 56px);
  font-weight: 300;
  line-height: 1.02;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.pe-legal-entradilla {
  margin: 0 0 8px;
  font-family: 'Newsreader', Georgia, serif;
  font-size: 19px;
  line-height: 1.72;
  color: rgba(14, 14, 17, .78);
}

.pe-legal section {
  margin-top: 52px;
  padding-top: 28px;
  border-top: 1px solid rgba(14, 14, 17, .14);
}

.pe-legal h2 {
  margin: 0 0 20px;
  font-size: 19px;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.pe-legal p,
.pe-legal li {
  font-family: 'Newsreader', Georgia, serif;
  font-size: 17px;
  line-height: 1.68;
  color: rgba(14, 14, 17, .8);
  text-wrap: pretty;
}

.pe-legal p { margin: 0 0 16px; }
.pe-legal p:last-child { margin-bottom: 0; }

.pe-legal ul {
  margin: 0 0 16px;
  padding-left: 0;
  list-style: none;
}

.pe-legal li {
  position: relative;
  margin: 0 0 14px;
  padding-left: 24px;
}

.pe-legal li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: .72em;
  width: 9px;
  height: 1px;
  background: var(--crimson-600, #880008);
}

.pe-legal a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid rgba(136, 0, 8, .42);
  transition: border-color .18s cubic-bezier(.2, 0, .2, 1);
}

.pe-legal a:hover { border-bottom-color: var(--crimson-600, #880008); }

/* Ficha del titular: en pantalla ancha, dos columnas; apilada en móvil. */
.pe-legal-ficha {
  margin: 0 0 20px;
  display: grid;
  grid-template-columns: minmax(9em, auto) 1fr;
  gap: 10px 28px;
  padding: 26px 28px;
  border: 1px solid rgba(14, 14, 17, .14);
  background: rgba(14, 14, 17, .025);
}

.pe-legal-ficha dt {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(14, 14, 17, .5);
  padding-top: .35em;
}

.pe-legal-ficha dd {
  margin: 0;
  font-family: 'Newsreader', Georgia, serif;
  font-size: 17px;
  line-height: 1.55;
}

.pe-legal-fecha {
  margin: 52px 0 0;
  padding-top: 24px;
  border-top: 1px solid rgba(14, 14, 17, .14);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(14, 14, 17, .5);
}

@media (max-width: 640px) {
  .pe-legal-ficha {
    grid-template-columns: 1fr;
    gap: 4px;
    padding: 22px 20px;
  }
  .pe-legal-ficha dd { margin-bottom: 14px; }
  .pe-legal-ficha dd:last-child { margin-bottom: 0; }
}

/* ---- Casilla de consentimiento de los formularios ----
   Hereda el color del texto de su sección, que en unas es tinta sobre crema y
   en otras al revés: por eso todo se compone con currentColor. */

.pe-consent {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px 12px;
  margin-top: 4px;
}

.pe-consent input[type="checkbox"] {
  width: 17px;
  height: 17px;
  margin: 3px 0 0;
  accent-color: var(--crimson-600, #880008);
  flex: none;
  cursor: pointer;
}

.pe-consent label {
  font-family: 'Newsreader', Georgia, serif;
  font-size: 14px;
  line-height: 1.6;
  opacity: .78;
  cursor: pointer;
  text-wrap: pretty;
}

.pe-consent label a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
}

.pe-consent-error {
  grid-column: 2;
  margin: 0;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  line-height: 1.5;
  color: var(--crimson-400, #C4454C);
}

/* Trampa de bots del formulario.

   No se usa `display: none` ni `hidden`: los robots que valen algo saltan lo
   que está oculto de forma obvia. Esto lo saca de la pantalla sin sacarlo del
   documento, y `aria-hidden` en el contenedor evita que un lector de pantalla
   se lo lea a nadie. */
.pe-trampa {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Aviso de error del formulario: mismo tono que el de la casilla de
   privacidad, pero a ancho completo porque el texto es más largo. */
.pe-form-error {
  margin: 0;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 13px;
  line-height: 1.5;
  color: var(--crimson-400, #C4454C);
}