/*
Theme Name: Jon Burguera
Theme URI: https://jonburguera.com
Author: Jon Burguera
Author URI: https://jonburguera.com
Description: Tema propio de bloques para jonburguera.com. Dos páginas, sin acento cromático, tipografía Newsreader e IBM Plex Sans.
Version: 1.5.5
Requires at least: 6.5
Tested up to: 6.9
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: jonburguera
Tags: full-site-editing, block-patterns, one-column
*/

/* ============================================================
   1 · BASE
   ============================================================ */

html { -webkit-text-size-adjust: 100%; }

*, *::before, *::after { box-sizing: border-box; }

/* WordPress separa los bloques de primer nivel con block-gap y añade
   margen al primero. En una secuencia de pantallas completas eso desplaza
   cada bloque hacia abajo y lo que esté anclado al pie cae bajo el pliegue. */
.wp-site-blocks > * { margin-block-start: 0; margin-block-end: 0; }
.wp-site-blocks { padding-block: 0; }

body {
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

::selection {
  background: var(--wp--preset--color--texto);
  color: var(--wp--preset--color--fondo);
}

/* Foco visible en todo lo interactivo. Sin color: opacidad y contorno. */
:where(a, button, input, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--wp--preset--color--texto);
  outline-offset: 3px;
}

/* ============================================================
   2 · ELEMENTOS PERSISTENTES
   Identidad a la izquierda, navegación a la derecha.
   Ausentes en el bloque 1: los revela el JS al salir del umbral.
   ============================================================ */

.jb-persistente {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 2rem;
  pointer-events: none;
}

.jb-persistente a,
.jb-persistente span {
  pointer-events: auto;
  font-family: var(--wp--preset--font-family--plex);
  font-size: var(--wp--preset--font-size--utilidad);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--wp--preset--color--texto-tenue);
  text-decoration: none;
}

.jb-persistente a:hover { color: var(--wp--preset--color--texto); }

/* Un solo enlace de navegación visible según dónde estemos. */
.jb-nav-inicio { display: none; }
.home .jb-nav-sobre { display: inline; }
.home .jb-nav-inicio { display: none; }
body:not(.home) .jb-nav-sobre { display: none; }
body:not(.home) .jb-nav-inicio { display: inline; }

/* Estado inicial en la portada: oculto hasta pasar el umbral. */
.home .jb-persistente {
  opacity: 0;
  visibility: hidden;
  transition: opacity 600ms ease, visibility 600ms;
}
.home .jb-persistente.jb-visible {
  opacity: 1;
  visibility: visible;
}

/* ============================================================
   3 · BLOQUES DE LA LANDING
   ============================================================ */

.jb-bloque {
  position: relative;           /* ancla del indicador de continuidad */
  min-height: 100svh;           /* svh: evita el salto de la barra del navegador */
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
}

/* Sin align-items: center. Ese valor encoge cada hijo al ancho de su
   contenido, y por eso el formulario salía estrecho. El centrado lo hace
   cada elemento con su max-width y margin-inline: auto. */
.jb-bloque:not(.jb-umbral) > * { align-self: stretch; }

/* La pregunta.
   La medida va en ch, no en rem: 34 caracteres medidos en el propio
   cuerpo de la letra. En escritorio cabe en una línea; en móvil, donde
   el cuerpo baja a 2rem, reparte en dos o tres de forma natural. */
.jb-pregunta {
  max-width: 34ch;
  margin-inline: auto;
  font-size: var(--wp--preset--font-size--pregunta);
  line-height: 1.15;
  text-wrap: balance;
  margin-block: 0;
}

/* La afirmación del giro: SIEMPRE menor que la pregunta. */
.jb-afirmacion {
  max-width: 34rem;
  margin-inline: auto;
  font-size: var(--wp--preset--font-size--afirmacion);
  line-height: 1.4;
  color: var(--wp--preset--color--texto-tenue);
  margin-top: 8rem;
  text-wrap: balance;
}

/* Umbral: retícula de dos filas en lugar de posicionamiento absoluto.
   La pregunta ocupa la fila flexible y queda centrada; el indicador
   ocupa la fila inferior. Al estar en flujo no puede caer bajo el
   pliegue por mucho que el bloque crezca. */
.jb-umbral {
  display: grid;
  grid-template-rows: 1fr auto;
  align-items: center;
  justify-items: center;
  padding-bottom: 2rem;
}

/* Indicador de continuidad: una línea vertical fina con un segmento
   luminoso que desciende por ella. Ocupa mucha más altura que un glifo,
   así que se percibe sin necesidad de pesar más.
   Sin clase de preset de WordPress: esas llevan !important y anulan
   cualquier tamaño definido aquí. */
.jb-continuidad {
  position: relative;
  align-self: end;
  width: 1px;
  height: 5rem;
  margin: 0;
  overflow: hidden;
  background: linear-gradient(
    to bottom,
    transparent,
    var(--wp--preset--color--linea) 30%,
    var(--wp--preset--color--linea)
  );
}

.jb-continuidad span {
  position: absolute;
  left: 0;
  right: 0;
  height: 45%;
  background: linear-gradient(
    to bottom,
    transparent,
    var(--wp--preset--color--texto)
  );
  animation: jb-desciende 2.8s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

@keyframes jb-desciende {
  0%   { transform: translateY(-100%); opacity: 0; }
  25%  { opacity: 1; }
  75%  { opacity: 1; }
  100% { transform: translateY(220%); opacity: 0; }
}

/* Con movimiento reducido, la línea se queda quieta y visible. */
.jb-sin-movimiento .jb-continuidad,
.no-js .jb-continuidad {
  background: linear-gradient(
    to bottom,
    transparent,
    var(--wp--preset--color--texto)
  );
}
.jb-sin-movimiento .jb-continuidad span,
.no-js .jb-continuidad span { display: none; }

/* El bloque 4 es el único que crece con su contenido */
.jb-invitacion {
  min-height: auto;
  padding-block: 12rem;
}

/* Dentro del bloque 4 el contenedor es ancho, pero el contenido no:
   retrato, texto y formulario se mantienen en la medida de lectura. */
.jb-invitacion > p,
.jb-invitacion .jb-retrato,
.jb-invitacion form.contact-form,
.jb-invitacion .jb-formulario,
.jb-invitacion .jb-privacidad,
.jb-invitacion .jb-salida {
  width: 100%;
  max-width: 34rem;
  margin-inline: auto;
  align-self: center;
}

/* ============================================================
   4 · MOVIMIENTO
   Fundido en 1→2 y 2→3. Corte —sin transición— en la afirmación.
   ============================================================ */

.jb-fundido {
  opacity: 0;
  transform: translateY(1rem);
  transition: opacity 900ms ease, transform 900ms ease;
}
.jb-fundido.jb-dentro {
  opacity: 1;
  transform: none;
}

/* El corte: aparece sin transición. Es la única ruptura de ritmo. */
.jb-corte { opacity: 0; }
.jb-corte.jb-dentro { opacity: 1; }

/* Sin JavaScript o con movimiento reducido, todo visible. */
.no-js .jb-fundido,
.no-js .jb-corte,
.jb-sin-movimiento .jb-fundido,
.jb-sin-movimiento .jb-corte {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}
.jb-sin-movimiento .home .jb-persistente,
.no-js .jb-persistente {
  opacity: 1;
  visibility: visible;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================================
   5 · RETRATO
   ============================================================ */

.jb-retrato {
  max-width: 24rem;
  margin-inline: auto;
}
.jb-retrato img {
  display: block;
  width: 100%;
  height: auto;
  /* Sin filtro: el retrato es la única presencia de color del sitio. */
}

/* ============================================================
   6 · FORMULARIO
   No es un formulario: es el último rótulo de la secuencia.

   Escrito contra el marcado real del bloque. NADA de reglas
   generales del tipo "> *": el formulario contiene divisiones de
   error que deben permanecer ocultas hasta que el propio bloque las
   active, y forzarlas a display:block las hace visibles siempre.
   ============================================================ */

/* --- Contenedores ------------------------------------------------ */

.jetpack-contact-form-container,
form.contact-form,
form.contact-form .wp-block-jetpack-contact-form {
  display: block !important;
  width: 100% !important;
  max-width: 34rem !important;
  margin-inline: auto !important;
  padding: 0 !important;
  gap: 0 !important;
}

/* La confirmación es hermana del formulario y vive siempre en el DOM.
   Oculta de verdad mientras no se haya enviado nada. */
.contact-form-submission[aria-hidden="true"] { display: none !important; }

/* Salvaguarda. Si algún envoltorio intermedio del bloque encoge el
   formulario, esta anchura mínima lo impide: se mide contra la ventana,
   no contra el contenedor. */
form.contact-form {
  min-width: min(34rem, calc(100vw - 4rem)) !important;
}

/* Y el envoltorio que lo contenga, sea cual sea, deja de encogerse. */
form.contact-form,
.jetpack-contact-form-container {
  flex: none !important;
  align-self: stretch !important;
}

/* --- Envoltorio de cada campo ------------------------------------ */

form.contact-form .grunion-field-wrap,
form.contact-form .wp-block-jetpack-input-wrap {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  flex: none !important;
  margin: 0 0 2rem !important;
  padding: 0 !important;
  box-sizing: border-box;
}

/* --- Etiquetas: presentes para lectores de pantalla, no a la vista - */

form.contact-form .grunion-field-label,
form.contact-form .wp-block-jetpack-label {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
}

/* --- Campos ------------------------------------------------------ */

form.contact-form .grunion-field,
form.contact-form .wp-block-jetpack-input,
form.contact-form textarea,
form.contact-form input[type="email"] {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  background: var(--wp--preset--color--fondo-elevado) !important;
  border: 1px solid var(--wp--preset--color--linea) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: var(--wp--preset--color--texto) !important;
  font-family: var(--wp--preset--font-family--newsreader) !important;
  font-size: var(--wp--preset--font-size--cuerpo) !important;
  line-height: 1.65 !important;
  padding: 1.5rem 2rem !important;
  box-sizing: border-box !important;
}

form.contact-form textarea {
  height: 14rem !important;
  min-height: 14rem !important;
  resize: vertical;
}

form.contact-form .grunion-field:focus {
  border-color: var(--wp--preset--color--texto-tenue) !important;
  outline-offset: 2px;
}

form.contact-form ::placeholder {
  color: var(--wp--preset--color--texto-tenue) !important;
  opacity: 1 !important;
  font-family: var(--wp--preset--font-family--newsreader) !important;
}

/* --- Errores -----------------------------------------------------
   Ocultos por defecto. El bloque añade .show-errors o .has-errors
   cuando toca; solo entonces se muestran, y en el tono del sitio. */

form.contact-form .contact-form__error,
form.contact-form .contact-form__input-error { display: none !important; }

form.contact-form .contact-form__error.show-errors,
form.contact-form .contact-form__input-error.has-errors {
  display: flex !important;
  align-items: center;
  gap: 0.5rem;
  margin: 0.75rem 0 0 !important;
  padding: 0 !important;
  background: none !important;
  border: 0 !important;
  color: var(--wp--preset--color--texto-tenue) !important;
  font-family: var(--wp--preset--font-family--plex) !important;
  font-size: 0.75rem !important;
  letter-spacing: 0.02em;
  text-transform: none;
}

form.contact-form .contact-form__warning-icon svg path { fill: currentColor; }
form.contact-form .grunion-label-required { display: none !important; }

/* --- Botón ------------------------------------------------------- */

form.contact-form .wp-block-button {
  display: block !important;
  width: auto !important;
  margin: 4rem auto 0 !important;
  text-align: center;
}

form.contact-form .wp-block-button__link,
form.contact-form button[type="submit"] {
  display: inline-block !important;
  width: auto !important;
  cursor: pointer;
  background: transparent !important;
  background-color: transparent !important;
  color: var(--wp--preset--color--texto) !important;
  border: 1px solid var(--wp--preset--color--texto) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  font-family: var(--wp--preset--font-family--plex) !important;
  font-size: 0.75rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  padding: 1rem 2.5rem !important;
}

form.contact-form .wp-block-button__link:hover,
form.contact-form button[type="submit"]:hover {
  background-color: var(--wp--preset--color--texto) !important;
  color: var(--wp--preset--color--fondo) !important;
}

/* --- Tras enviar -------------------------------------------------
   El bloque marca el formulario con .submission-success y oculta los
   campos. Como aquí se fuerza display:block en ellos, hay que apagarlos
   explícitamente o quedan visibles bajo el mensaje de confirmación. */

form.contact-form.submission-success .grunion-field-wrap,
form.contact-form.submission-success .wp-block-jetpack-input-wrap,
form.contact-form.submission-success .wp-block-button,
form.contact-form.submission-success .contact-form__error,
form.contact-form.submission-success .grunion-field,
form.contact-form.submission-success button[type="submit"] {
  display: none !important;
}

/* --- Confirmación tras el envío ---------------------------------- */

.contact-form-submission,
.contact-form-submission h3,
.contact-form-submission h4,
.contact-form-submission p,
form.contact-form.submission-success,
.jb-gracias {
  font-family: var(--wp--preset--font-family--newsreader) !important;
  font-size: var(--wp--preset--font-size--cuerpo) !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  color: var(--wp--preset--color--texto) !important;
  text-align: center !important;
  text-wrap: balance;
  margin-inline: auto !important;
  max-width: 34rem;
}

.contact-form-submission {
  padding: 6rem 0 !important;
  border: 0 !important;
  background: none !important;
}

.contact-form-submission .go-back-message,
.contact-form-submission .field-name,
.contact-form-submission .field-value { display: none !important; }

/* En Sobre mí todo se alinea a la izquierda, también el botón. */
.jb-pagina .jetpack-contact-form-container,
.jb-pagina form.contact-form,
.jb-pagina form.contact-form .wp-block-jetpack-contact-form {
  max-width: 100% !important;
  min-width: 0 !important;
  margin-inline: 0 !important;
}
.jb-pagina form.contact-form .wp-block-button {
  margin-inline: 0 !important;
  text-align: left;
}
.jb-pagina .jb-privacidad,
.jb-pagina .jb-salida { text-align: left; margin-inline: 0; }
.jb-pagina .contact-form-submission { text-align: left !important; margin-inline: 0 !important; }

/* --- Aviso de privacidad y salida secundaria --------------------- */

.jb-privacidad {
  margin-top: 2rem !important;
  margin-bottom: 0 !important;
  font-family: var(--wp--preset--font-family--plex);
  font-size: 0.75rem;
  line-height: 1.5;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--wp--preset--color--texto-tenue);
}
.jb-privacidad a { color: inherit; text-underline-offset: 0.25em; }

.jb-salida {
  margin-top: 4rem !important;
  margin-bottom: 0 !important;
  font-family: var(--wp--preset--font-family--newsreader);
  font-size: var(--wp--preset--font-size--salida);
  color: var(--wp--preset--color--texto-tenue);
}
.jb-salida a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.25em;
}
.jb-salida a:hover { color: var(--wp--preset--color--texto); }

/* ============================================================
   7 · SOBRE MÍ — página impresa, no secuencia de rótulos
   ============================================================ */

.jb-pagina {
  max-width: 42rem;
  margin-inline: auto;
  padding-block: 12rem;
  text-align: left;
}

.jb-pagina p:not(.jb-rotulo):not(.jb-privacidad):not(.jb-salida) {
  margin-block: 0 2.25rem;
}

/* Apertura: la primera frase es un titular, no un párrafo más.
   Es lo único de la página que se compone a cuerpo grande. */
.jb-apertura {
  font-family: var(--wp--preset--font-family--newsreader);
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  line-height: 1.2;
  font-weight: 400;
  margin: 0 0 3rem;
}

/* Rótulo de sección: el espacio superior sostiene la jerarquía. */
.jb-pagina .jb-rotulo,
.jb-rotulo {
  margin-top: 10rem !important;
  font-family: var(--wp--preset--font-family--plex);
  font-size: var(--wp--preset--font-size--rotulo);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--wp--preset--color--texto-tenue);
  margin-bottom: 1.5rem;
}
.jb-pagina > .jb-rotulo:first-child { margin-top: 0 !important; }

/* Listas densas: trayectoria, formación, publicaciones. */
.jb-lista {
  list-style: none;
  padding: 0;
  margin-block: 2rem;
  font-family: var(--wp--preset--font-family--plex);
  font-size: 0.875rem;
  line-height: 1.6;
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--wp--preset--color--texto-tenue);
}

/* Sangría francesa: cuando una entrada rompe línea —y en móvil romperán
   todas— la continuación queda indentada y no se confunde con una entrada
   nueva. El nombre en negrita sigue siendo el único que empieza al margen. */
.jb-lista li {
  margin-bottom: 0.75rem;
  padding-left: 1.25rem;
  text-indent: -1.25rem;
}
.jb-lista li:last-child { margin-bottom: 0; }

/* Dos listas seguidas —trayectoria y formación— se separan con espacio,
   no con un rótulo. Sin esto se leen como una sola. */
.jb-lista + .jb-lista { margin-top: 4rem; }
.jb-lista strong {
  font-weight: 500;
  color: var(--wp--preset--color--texto);
}

/* Nota desplegable de «Resonar» */
.jb-nota {
  margin-block: 3rem;
  padding: 0;
  background: none;
  border: 0;
  border-top: 1px solid var(--wp--preset--color--linea);
  padding-top: 1.5rem;
}
.jb-nota summary {
  cursor: pointer;
  list-style: none;
  font-family: var(--wp--preset--font-family--plex);
  font-size: var(--wp--preset--font-size--utilidad);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--wp--preset--color--texto-tenue);
}
.jb-nota summary::-webkit-details-marker { display: none; }
.jb-nota summary::marker { content: ""; }
.jb-nota summary::after { content: "  +"; }
.jb-nota[open] summary::after { content: "  −"; }
.jb-nota summary:hover { color: var(--wp--preset--color--texto); }
.jb-nota > div { margin-top: 1.5rem; }
.jb-nota > div p {
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--wp--preset--color--texto-tenue);
  margin-bottom: 1.5rem;
}
.jb-nota p:last-child { margin-bottom: 0; }

/* En publicaciones, cada entrada necesita respirar entre sí. */
.jb-publicaciones li {
  margin-bottom: 1rem;
  line-height: 1.6;
}

/* Etiquetas solo para lectores de pantalla. */
.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ============================================================
   8 · PÁGINAS LEGALES — texto largo y denso
   ============================================================ */

.jb-legal { max-width: 42rem; line-height: 1.7; }
.jb-legal a { overflow-wrap: anywhere; }
.jb-legal h3 {
  font-family: var(--wp--preset--font-family--plex);
  font-size: var(--wp--preset--font-size--rotulo);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--wp--preset--color--texto-tenue);
  margin-top: 4rem;
}

/* ============================================================
   9 · PIE
   ============================================================ */

.jb-pie {
  padding-block: 4rem;
  text-align: center;
  font-family: var(--wp--preset--font-family--plex);
  font-size: var(--wp--preset--font-size--utilidad);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--wp--preset--color--texto-tenue);
}
.jb-pie a { color: inherit; text-decoration: none; }
.jb-pie a:hover { text-decoration: underline; }