/* ==========================================================================
   PAHISSA PIÉ — SISTEMA GLOBAL 2026
   Se carga en TODAS las páginas del rediseño, después de estilos.css.
   Aquí viven: los tokens de anchura y ritmo, las correcciones responsive
   del sistema y los componentes compartidos. Nada específico de una página.
   ========================================================================== */

:root {
  /* Anchuras — una sola escala para toda la web */
  --container-wide: 90rem;     /* 1440px  bloques a sangre */
  --container-default: 82.5rem;/* 1320px  la de la landing madre */
  --container-narrow: 54rem;   /*  864px  texto largo, lectura cómoda */

  /* Ritmo vertical */
  --space-section: clamp(3.5rem, 7vw, 7rem);
  --space-block: clamp(2rem, 4vw, 3.5rem);
  --space-item: clamp(1rem, 2vw, 1.5rem);

  /* Componentes */
  --radio: 4px;
  --borde: rgba(24, 19, 14, 0.12);
  --borde-fuerte: rgba(24, 19, 14, 0.26);
  --sombra-suave: 0 1px 2px rgba(24, 19, 14, .04), 0 12px 32px -18px rgba(24, 19, 14, .25);
  --sombra-alta: 0 2px 4px rgba(24, 19, 14, .05), 0 28px 60px -28px rgba(24, 19, 14, .35);
  --curva: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ==========================================================================
   1. CORRECCIONES DEL SISTEMA  (afectan a todas las páginas)
   ========================================================================== */

/* 1.1 — Hijos de grid y flex que no encogen.
   Por defecto min-width:auto impide que una columna baje del ancho de su
   contenido: un titular largo ensancha la columna y rompe el móvil. */
.shell > *,
.grid > *,
[class*="col-span"],
[class*="flex"] > * {
  min-width: 0;
}

/* 1.2 — Titulares: que partan antes de desbordar. */
h1, h2, h3, h4,
.t-h1, .t-h2, .t-h3, .t-h4 {
  /* Que no parta palabras por la mitad: antes salta de linea. */
  overflow-wrap: normal;
  word-break: keep-all;
  hyphens: none;
}
/* Un titular no parte palabras por la mitad: antes se reduce de tamano.
   La clase pp-h1-largo, que el plugin pone a los titulos de mas de 26
   caracteres, se encarga de que quepan. */
h1, .t-h1 {
  overflow-wrap: normal;
  word-break: keep-all;
  hyphens: none;
}
/* Si aun asi una palabra sola no cabe, se escala en vez de romperse. */
h1 .line,
h1 > span { max-width: 100%; }

/* 1.3 — Escala tipográfica real en móvil.
   El export traía tamaños que en 390px daban titulares de 64px. */
@media (max-width: 767px) {
  h1, .t-h1 {
    font-size: clamp(2rem, 8.5vw, 2.75rem) !important;
    line-height: 1.02;
    letter-spacing: -0.03em;
  }
  h2, .t-h2 {
    font-size: clamp(1.625rem, 6.4vw, 2.125rem) !important;
    line-height: 1.06;
  }
  h3, .t-h3 {
    font-size: clamp(1.1875rem, 4.6vw, 1.4375rem) !important;
  }
  p, li {
    font-size: 1rem;
    line-height: 1.65;
  }
}

/* 1.4 — Nada de scroll horizontal, en ningún ancho. */
html, body {
  max-width: 100%;
  overflow-x: hidden;
}

/* 1.5 — Medias: proporción correcta siempre.
   Fotografía recorta (cover); logotipos y producto se ven enteros (contain). */
img, video {
  max-width: 100%;
}
/* Solo las imagenes sin dimensiones declaradas se reescalan solas: si el HTML
   ya dice width y height (el logotipo, por ejemplo), se respetan. */
img:not([width]):not([height]) {
  height: auto;
}
.media img,
figure:not(.pp-producto) img {
  object-fit: cover;
}
.pp-producto img,
img[src*="logo"] {
  object-fit: contain;
}

/* 1.6 — Gutter mínimo en móvil: el texto nunca pegado al borde. */
@media (max-width: 640px) {
  .shell,
  .o-container,
  .pp-landing-contenido > div {
    padding-inline: 1.25rem;
  }
}

/* 1.7 — Monitores grandes: el contenido no se estira sin control. */
.shell {
  max-width: var(--container-default);
  margin-inline: auto;
}

/* ==========================================================================
   2. COMPONENTES COMPARTIDOS
   ========================================================================== */

/* 2.1 — Botones: una sola altura, un solo radio, una sola transición. */
.btn,
.o-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: 3rem;
  padding: 0.95rem 1.6rem;
  border-radius: var(--radio);
  border: 1px solid transparent;
  font-family: var(--font-display, "Archivo", sans-serif);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition: transform 320ms var(--curva), box-shadow 320ms var(--curva),
              background-color 320ms var(--curva), color 320ms var(--curva),
              border-color 320ms var(--curva);
}
.btn:hover,
.o-btn:hover {
  transform: translateY(-2px);
  box-shadow: var(--sombra-alta);
}
.btn-sm {
  min-height: 2.5rem;
  padding: 0.7rem 1.1rem;
  font-size: 0.75rem;
}
@media (max-width: 480px) {
  /* En pantallas estrechas los CTA ocupan el ancho en vez de salirse. */
  .btn,
  .o-btn {
    white-space: normal;
    text-align: center;
  }
}

/* 2.2 — Tarjetas: mismo radio, mismo borde, misma sombra, mismo hover. */
.card-surface,
.pp-card {
  background: var(--surface, #fff);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  transition: transform 420ms var(--curva), box-shadow 420ms var(--curva),
              border-color 420ms var(--curva);
}
.card-surface:hover,
.pp-card:hover {
  transform: translateY(-4px);
  border-color: var(--borde-fuerte);
  box-shadow: var(--sombra-alta);
}

/* 2.3 — Migas de pan: idénticas en toda la web. */
nav[aria-label="Migas de pan"] ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8125rem;
}

/* 2.4 — Elemento de menú sin página de destino. */
.pp-sin-enlace {
  opacity: 0.55;
  cursor: default;
}

/* 2.5 — Botón flotante de WhatsApp (Botón negro y letras naranjas) */
.pp-wa-flotante,
a.pp-wa-flotante {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 99990;
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.75rem 1.15rem;
  border-radius: 999px;
  background: #0D0D0D !important;
  color: #E14D1A !important;
  border: 1px solid rgba(225, 77, 26, 0.45) !important;
  text-decoration: none !important;
  font-family: var(--font-display, "Archivo", sans-serif);
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.15;
  box-shadow: 0 10px 30px -8px rgba(0, 0, 0, .75), 0 0 15px -3px rgba(225, 77, 26, 0.25) !important;
  transition: transform .3s cubic-bezier(0.22, 1, 0.36, 1), box-shadow .3s cubic-bezier(0.22, 1, 0.36, 1), background-color .2s ease, border-color .2s ease !important;
}
.pp-wa-flotante:hover,
a.pp-wa-flotante:hover {
  transform: translateY(-3px) scale(1.03) !important;
  background: #000000 !important;
  color: #FF5A1F !important;
  border-color: #FF5A1F !important;
  box-shadow: 0 16px 40px -10px rgba(0, 0, 0, .85), 0 0 25px -2px rgba(225, 77, 26, 0.45) !important;
}
.pp-wa-flotante svg,
a.pp-wa-flotante svg {
  flex: 0 0 auto;
  fill: #E14D1A !important;
  color: #E14D1A !important;
  transition: fill .2s ease, transform .2s ease;
}
.pp-wa-flotante:hover svg,
a.pp-wa-flotante:hover svg {
  fill: #FF5A1F !important;
  color: #FF5A1F !important;
  transform: scale(1.08);
}
.pp-wa-flotante span,
a.pp-wa-flotante span {
  white-space: nowrap;
  color: #E14D1A !important;
}
.pp-wa-flotante:hover span,
a.pp-wa-flotante:hover span {
  color: #FF5A1F !important;
}
.pp-wa-flotante strong,
a.pp-wa-flotante strong {
  font-weight: 800;
  letter-spacing: .02em;
  color: #FF5A1F !important;
}
@media (max-width: 640px) {
  .pp-wa-flotante span,
  a.pp-wa-flotante span { display: none !important; }
  .pp-wa-flotante,
  a.pp-wa-flotante { padding: 0.9rem !important; border-radius: 50% !important; }
}
@media print {
  .pp-wa-flotante,
  a.pp-wa-flotante { display: none !important; }
}

/* ==========================================================================
   3. MOVIMIENTO — el mismo lenguaje en todas las páginas
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal,
  .reveal-mask {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
  }
}

/* 1.8 — Techo del titular: ni en 1920 debe pasar de la escala de la madre. */
h1, .t-h1 { font-size: min(6.25rem, 7.2vw + 1rem); }
@media (min-width: 1600px) {
  h1, .t-h1 { font-size: 6.25rem; }
}
/* Titulares largos (más de 34 caracteres) bajan un escalón para no cortarse. */
h1.pp-h1-largo { font-size: min(3.75rem, 4.4vw + 0.75rem); line-height: 1.02; }
@media (max-width: 767px) {
  h1.pp-h1-largo { font-size: clamp(1.75rem, 7.6vw, 2.25rem) !important; }
}


/* ==========================================================================
   4. CONTENIDO VISIBLE DESDE EL PRIMER FRAME
   El diseno ocultaba los bloques (opacity:0) y los revelaba al hacer scroll
   mediante un observador que en este montaje no llega a dispararse. Eso
   dejaba la pagina en blanco, y aun con un respaldo por script producia un
   parpadeo de unas decimas en cada carga.
   El contenido ya no se oculta nunca. Se conservan las animaciones que no
   dependen de ello: hover, marquesina, transiciones y zoom de imagenes.
   ========================================================================== */

.reveal,
.reveal-mask,
html.pp-js .reveal,
html.pp-js .reveal-mask,
html.pp-js .reveal:not(.is-in),
html.pp-js .reveal-mask:not(.is-in) {
  opacity: 1 !important;
  transform: none !important;
  clip-path: none !important;
}

/* El logotipo mantiene su proporcion pase lo que pase. */
header img[src*="logo"],
footer img[src*="logo"] {
  width: auto;
  max-height: 3rem;
  object-fit: contain;
}
@media (max-width: 640px) {
  header img[src*="logo"] { max-height: 2.25rem; }
}

/* Red de seguridad: si por lo que sea el observador de scroll no llega a
   marcar los bloques, a los 2,5 s se muestran igualmente. Nunca en blanco. */
html.pp-js.pp-reveal-todo .reveal,
html.pp-js.pp-reveal-todo .reveal-mask { opacity: 1; transform: none; clip-path: none; }

/* El header va fijo y el export lo dejaba transparente: al hacer scroll el
   contenido se leia por debajo del menu. Fondo solido siempre; el script
   puede seguir modulando la sombra al hacer scroll. */
/* ...pero NO cuando el diseno la quiere transparente sobre un hero oscuro:
   ahi el texto va en blanco, y un fondo claro lo dejaria invisible. El script
   del sitio ya le pone fondo solido al hacer scroll. */
header.fixed:not(.header-dark-intro):not(.bg-transparent),
header[class*="fixed"]:not(.header-dark-intro):not(.bg-transparent) {
  background: var(--background, #F8F6F2);
  border-bottom: 1px solid var(--borde, rgba(24, 19, 14, .12));
}

/* El wordmark gigante del pie, retirado a petición del cliente. Se deja la
   regla por si algún resto volviera a inyectarlo desde otro sitio. */
footer [aria-hidden="true"][class*="11.9vw"],
footer [aria-hidden="true"][class*="text-primary"][class*="whitespace-nowrap"][class*="font-black"] {
  display: none !important;
}

/* El texto gigante de fondo del hero, retirado tambien. */
.hero-backprint,
.home-hero .hero-backprint { display: none !important; }

/* ==========================================================================
   BLOQUE "45+ / TALLER"
   El diseño original ponía la cifra a 512 px y hacía que las fotos la
   solaparan (margin-left: -8rem). Al reducir la cifra, ese solape dejaba el
   número medio tapado. Aquí se deshace el solape: la cifra va arriba, en su
   línea, y las fotografías debajo a ancho completo.
   ========================================================================== */

.years {
  display: block !important;
  margin-top: 2rem;
}
.years-number {
  display: block;
  font-size: clamp(3.25rem, 7vw, 5.5rem) !important;
  line-height: 0.9;
  margin-bottom: clamp(1.25rem, 2.5vw, 2rem);
}
.years-photos {
  margin: 0 !important;
  width: 100%;
}
@media (max-width: 767px) {
  .years-number { font-size: clamp(2.75rem, 12vw, 4rem) !important; }
}

/* ==========================================================================
   5. HUECO DE NAVEGACION ENTRE 1024 Y 1279 px
   El menu principal aparece a partir de 1280 px (xl:flex) pero el boton de
   menu se oculta ya a partir de 1024 px (lg:hidden). En esa franja —el ancho
   de un portatil normal, o de uno grande con escalado al 125%— la web se
   quedaba sin ninguna forma de navegar. Aqui se devuelve el boton.
   ========================================================================== */

@media (min-width: 1024px) and (max-width: 1279px) {
  /* El contenedor del boton de menu vuelve a mostrarse. */
  header [class*="lg:hidden"]:has(> button[aria-expanded]),
  header [class*="lg:hidden"]:has(> button[aria-label*="men"]) {
    display: flex !important;
  }
  /* Y el panel desplegable debe poder abrirse en ese ancho. */
  header [class*="lg:hidden"][class*="fixed"],
  header [id*="menu"] {
    display: block;
  }
}

/* Si el navegador no entiende :has(), el boton se muestra igualmente por su
   cuenta: mas vale un boton suelto que una web sin navegacion. */
@supports not selector(:has(*)) {
  @media (min-width: 1024px) and (max-width: 1279px) {
    header button[aria-expanded] {
      display: flex !important;
      position: relative;
      z-index: 60;
    }
  }
}


/* ==========================================================================
   6. TITULARES POR LINEAS — visibles desde el primer frame
   El diseno los hacia entrar linea a linea desde abajo, ocultos hasta que el
   observador de scroll los marcaba. Ese observador no llega a dispararse en
   este montaje, asi que los titulares no aparecian nunca. Y aunque un
   respaldo los muestre despues, el texto no puede depender de que se ejecute
   un script: un titular es contenido, no decoracion.
   Se muestran siempre. El resto de animaciones (bloques, imagenes, marquesina)
   se mantienen.
   ========================================================================== */

.reveal-lines .line > span,
.reveal-lines .line > *,
html.pp-js .reveal-lines .line > span,
html.pp-js .reveal-lines:not(.is-in) .line > span {
  transform: none !important;
  opacity: 1 !important;
}
.reveal-lines .line {
  overflow: visible;
}