/*
Theme Name: ImporTours
Theme URI: https://paginasmexico.com
Author: PáginasMX
Description: Tema a la medida de ImporTours, hecho por PáginasMX. Editable desde el editor de bloques.
Version: 1.0
Requires at least: 6.5
Tested up to: 7.1
Text Domain: pmx-importours
*/

/* ═══ ImporTours — estilos del tema ═══════════════════════════════
   Todo lo visual que no cabe en theme.json vive aquí, con clases, para que
   los bloques no lleven estilos sueltos en sus atributos (un borde de un
   solo lado escrito como atributo invalida el bloque en el editor).

   El ancho de contenido del tema es 1180 px para que las secciones ocupen
   el lienzo; la MEDIDA DE LECTURA se recupera aquí, limitando el ancho de
   los párrafos y los títulos. Estrangular el layout entero a 760 px dejaba
   media pantalla vacía. */

:root{--pmx-linea:#DCE3EB;--pmx-linea-suave:#EEF2F7}

/* ── La sangría de la columna de contenido ─────────────────────────
   El layout "constrained" de WordPress NO estrecha al contenedor: le pone
   max-width a CADA hijo y lo centra con margin:auto. Por eso un hijo con una
   medida de lectura propia (un h2 de 24ch) al que se le pone margin-left:0
   no se alinea con la columna de contenido: se pega al borde del contenedor,
   que es de ancho completo. Ese era el defecto — el rótulo de sección quedaba
   en su sitio y el título de al lado se iba al filo de la pantalla.

   Esta es la distancia que hay del borde del contenedor a la columna de
   contenido. El 100% se resuelve contra el contenedor de cada elemento, así
   que la misma variable sirve dentro de la portada y dentro de las secciones.
   En pantallas más angostas que la medida da 0 y todo queda a ras. */
:root{
  --pmx-sangria:max(0px,(100% - var(--wp--style--global--content-size)) / 2);
  --pmx-sangria-borde:max(var(--wp--preset--spacing--20),
                          (100% - var(--wp--style--global--content-size)) / 2);
}

/* Franja tricolor bajo el encabezado */
.pmx-tricolor{height:3px;background-image:linear-gradient(to right,#006847 33%,#ffffff 33%,#ffffff 66%,#CE1126 66%)}

/* Encabezado
   El sticky va en la PARTE DE PLANTILLA, no en el grupo de adentro. Un
   elemento sticky no puede salirse de su padre, y el padre del grupo mide
   exactamente lo que mide el encabezado (73 px): se despegaba en cuanto
   pasabas la portada. El padre de la parte de plantilla es .wp-site-blocks,
   que sí mide toda la página, así que ahí sí acompaña el scroll. La franja
   tricolor va dentro, y baja pegada al menú. */
header.wp-block-template-part{position:sticky;top:0;z-index:60}
header.wp-block-group{border-bottom:1px solid var(--pmx-linea)}
header .wp-block-navigation{font-size:.92rem}
/* Y los saltos del menú no quedan escondidos debajo del encabezado. */
html{scroll-padding-top:5.5rem}

/* ── Medida de lectura ─────────────────────────────────────────────
   El layout "constrained" de WordPress centra con margin:auto todo hijo que
   tenga un ancho menor al del contenedor. Al limitar la medida de lectura hay
   que devolver el margen izquierdo, o los títulos quedan flotando a la mitad
   de la sección, desalineados del rótulo que va encima. Ese margen es la
   sangría de la columna, NO cero: el contenedor es de ancho completo y un
   cero pega el título al filo de la pantalla. */
.wp-block-group>h2.wp-block-heading,
.wp-block-group>h2.wp-block-heading+p,
.wp-block-cover h1.wp-block-heading,
.wp-block-cover p.has-grande-font-size{margin-left:var(--pmx-sangria) !important;margin-right:auto !important}
.wp-block-group>h2.wp-block-heading{max-width:24ch;margin-bottom:.4em}
.wp-block-group>h2.wp-block-heading+p{max-width:62ch}
.wp-block-cover h1.wp-block-heading{max-width:20ch}
.wp-block-cover p.has-grande-font-size{max-width:56ch}
.wp-block-column>p{max-width:62ch}
.wp-block-group>.wp-block-columns{margin-top:2.75rem}

/* Rótulo de sección: la línea de ruta empieza en él */
.wp-block-group>p.has-pequeno-font-size:first-child{margin-bottom:1.5rem}

/* La línea de ruta: el separador de la marca, tomada del logo */
.pmx-ruta{border:0;height:1px;background-color:var(--pmx-linea);opacity:1;margin-top:3rem;margin-bottom:0}

/* ── Cifras de la feria ────────────────────────────────────────── */
.pmx-cifras{gap:2rem}
.pmx-cifras .wp-block-column{border-top:3px solid var(--wp--preset--color--acento);padding-top:1.1rem}
.pmx-cifras h3{margin:0 0 .3rem;line-height:1.05;letter-spacing:-.03em;white-space:nowrap}
.pmx-cifras p{margin:0}

/* ── Servicios: número angosto, texto ancho ────────────────────── */
.pmx-fila{border-bottom:1px solid var(--pmx-linea);padding-bottom:1.9rem;margin-top:1.9rem;
  gap:0 2.5rem;align-items:flex-start}
.pmx-fila>.wp-block-column:first-child{flex:0 0 84px}
.pmx-fila>.wp-block-column:last-child{flex:1 1 auto}
.pmx-fila>.wp-block-column:first-child p{margin:.35rem 0 0;color:#B9C6D6}
.pmx-fila h3{margin:0 0 .5rem}
.pmx-fila p{margin:0}

/* ── Qué incluye ───────────────────────────────────────────────── */
.pmx-incluye-grid{gap:4.5rem}
.pmx-incluye{list-style:none;padding-left:0;margin:.35rem 0 0}
.pmx-incluye li{position:relative;padding:.9rem 0 .9rem 2rem;border-bottom:1px solid var(--pmx-linea-suave);
  font-weight:500;list-style:none}
.pmx-incluye li::before{content:"";position:absolute;left:.15rem;top:1.4rem;width:.75rem;height:.4rem;
  border-left:2px solid var(--wp--preset--color--acento);border-bottom:2px solid var(--wp--preset--color--acento);
  transform:rotate(-45deg)}
.pmx-incluye-grid h3{margin:1.9rem 0 .4rem;font-size:1.05rem;letter-spacing:0}
.pmx-incluye-grid h3+p{margin:0;font-size:.95rem}
.pmx-incluye-grid .wp-block-buttons{margin-top:2.25rem}

/* ── Tarjetas: documentos y fases ──────────────────────────────── */
.pmx-docs,.pmx-fases{gap:1.6rem}
.pmx-doc,.pmx-fase{border:1px solid var(--pmx-linea);height:100%;display:flex;flex-direction:column}
.pmx-doc{border-left-width:3px;border-left-color:var(--wp--preset--color--acento)}
.pmx-fase{border-top-width:3px;border-top-color:var(--wp--preset--color--acento)}
.pmx-doc h3,.pmx-fase h3{margin:.9rem 0 .55rem}
.pmx-doc p,.pmx-fase p{margin:0}
.pmx-doc .wp-block-buttons{margin-top:auto;padding-top:1.75rem}
.pmx-fase .wp-block-buttons{margin-top:auto;padding-top:1.25rem}
.pmx-cats{list-style:none;padding-left:0;border-top:1px solid var(--pmx-linea);margin:1.1rem 0 0}
.pmx-cats li{padding:.6rem 0;border-bottom:1px solid var(--pmx-linea-suave);font-size:.92rem;
  color:var(--wp--preset--color--tenue);list-style:none}

/* ── Proceso ───────────────────────────────────────────────────── */
.pmx-proceso{gap:2.5rem}
.pmx-proceso .wp-block-column{border-top:1px solid var(--pmx-linea);padding-top:1.1rem}
.pmx-proceso h3{margin:.5rem 0 .5rem}
.pmx-proceso p{margin:0}

/* ── Secciones oscuras: la diferencia, el contacto y el pie ────── */
.pmx-oscuro p,.pmx-oscuro li{color:#DCE6F2}
.pmx-oscuro .has-tenue-color{color:#93A7BE !important}
.pmx-oscuro .has-acento-color{color:#6FB6FF !important}
.pmx-oscuro .wp-block-site-title a{color:#fff;text-decoration:none}
.pmx-dif{border-bottom:1px solid rgba(255,255,255,.14);padding-bottom:1.4rem;margin-top:1.4rem;gap:2.5rem}
.pmx-dif p{margin:.45rem 0 0;max-width:52ch}
.pmx-dif+.pmx-dif{margin-top:1.4rem}

/* ── Formulario de contacto ────────────────────────────────────── */
.pmx-contacto{gap:4rem;align-items:flex-start}
.pmx-form{display:grid;gap:1rem;background-color:#fff;padding:2rem;color:#0B1F3C}
.pmx-form label{display:grid;gap:.4rem;font-size:.8rem;font-weight:700;letter-spacing:.03em;
  text-transform:uppercase;color:#4E5F76}
.pmx-form input,.pmx-form textarea{font:inherit;font-weight:400;text-transform:none;letter-spacing:normal;
  padding:.75rem .85rem;border:1px solid var(--pmx-linea);border-radius:2px;background-color:#F4F6F8;
  color:#0B1F3C;width:100%;box-sizing:border-box}
.pmx-form input:focus,.pmx-form textarea:focus{outline:2px solid var(--wp--preset--color--acento);outline-offset:1px}
.pmx-form button{font:inherit;font-weight:700;cursor:pointer;border:0;border-radius:2px;padding:.95rem 1.5rem;
  background-color:var(--wp--preset--color--acento);color:#fff}
.pmx-form button:disabled{opacity:.6;cursor:progress}
.pmx-form-aviso{margin:0;font-size:.9rem;color:#4E5F76}

/* ── Móvil ─────────────────────────────────────────────────────── */
@media (max-width:781px){
  .pmx-fila{gap:0}
  .pmx-fila>.wp-block-column:first-child{flex:0 0 100%}
  .pmx-fila>.wp-block-column:first-child p{margin-bottom:.6rem}
  .pmx-incluye-grid,.pmx-contacto,.pmx-dif{gap:2.25rem}
  .pmx-cifras h3{white-space:normal}
  .pmx-form{padding:1.4rem}
}

/* Aviso de privacidad: el PDF incrustado necesita alto propio o colapsa a 0 */
.pmx-pdf{display:block;width:100%;height:80vh;min-height:520px;margin-top:2.5rem;border:1px solid var(--pmx-linea)}
.pmx-oscuro a{color:#8CC4FF}
@media (max-width:781px){.pmx-pdf{height:60vh;min-height:380px}}

/* ═══════════════════════════════════════════════════════════════════
   CAPA DE DISEÑO — añadida tras revisar el sitio en el navegador.
   Lo que había era correcto pero plano: escala tímida, sin dispositivo
   propio, sin estados y con el pie como lista de ligas.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Estados: se revisan siempre y casi nunca se diseñan ──────────── */
::selection{background-color:var(--wp--preset--color--acento);color:#fff}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,
.wp-block-button__link:focus-visible{outline:2px solid var(--wp--preset--color--acento);
  outline-offset:3px;border-radius:2px}
.wp-block-button__link{transition:background-color .2s cubic-bezier(.4,0,.2,1),
  color .2s cubic-bezier(.4,0,.2,1),transform .12s cubic-bezier(.4,0,.2,1)}
.wp-block-button__link:active{transform:scale(.97)}
.is-style-outline .wp-block-button__link{border-width:1px}

/* ── La línea de ruta: el dispositivo de la marca ──────────────────
   Sale de la línea ascendente que ya vive dentro del logotipo. Hairline
   con nodos encendidos; aparece en tres secciones y en el pie. */
.pmx-ruta{border:0;height:7px;opacity:1;margin:3.5rem 0 0;background-color:transparent;
  background-image:
    linear-gradient(to right,var(--pmx-linea) 0 100%),
    radial-gradient(circle at 0 50%,var(--wp--preset--color--acento) 3px,transparent 3.5px),
    radial-gradient(circle at 50% 50%,var(--wp--preset--color--acento) 3px,transparent 3.5px),
    radial-gradient(circle at 100% 50%,var(--wp--preset--color--acento) 3px,transparent 3.5px);
  background-size:100% 1px,100% 100%,100% 100%,100% 100%;
  background-position:0 50%,0 0,0 0,0 0;background-repeat:no-repeat}

/* ── Portada: aire, escala y metadatos de esquina ─────────────────── */
.wp-block-cover{--pmx-alto:100svh}
.wp-block-cover h1.wp-block-heading{line-height:.92;margin-bottom:.5em}
.wp-block-cover .wp-block-buttons{margin-top:2.5rem}
/* Van pegados al pie de la portada, alineados con la columna de contenido
   (el mismo filo donde arrancan el título y los botones). El margin:0 es
   necesario: el margen de párrafo que trae por defecto se sumaba al bottom
   y los subía encima de los botones. */
.pmx-meta{position:absolute;left:var(--pmx-sangria-borde);right:var(--pmx-sangria-borde);
  bottom:1.75rem;margin:0;max-width:none;display:flex;justify-content:space-between;
  gap:1rem;flex-wrap:wrap;padding:0;opacity:.72;font-size:.72rem}
.pmx-meta span{text-align:right}
.wp-block-cover__inner-container{position:static}
/* Y el contenido en flujo reserva ese renglón, o con la portada llena el
   botón de WhatsApp se encima con la fecha de la edición. */
@media (min-width:782px){.wp-block-cover__inner-container{padding-bottom:5rem}}

/* ── Banda de enunciado: el respiro y el volteo de tono ───────────── */
.pmx-enunciado p{line-height:1.1;max-width:22ch;margin-left:var(--pmx-sangria) !important}

/* ── Cierre: la llamada final en tipografía de portada ────────────── */
.pmx-cierre h2{line-height:.95;margin:.15em 0 .35em}
.pmx-cierre .wp-block-buttons{margin-top:2.25rem}
.pmx-cierre .wp-block-button__link{font-size:1.05rem;padding:1.1rem 2rem}

/* ── El pie como destino, no como lista de ligas ──────────────────── */
.pmx-pie{position:relative;overflow:hidden}
.pmx-pie-datos{gap:2.5rem;position:relative;z-index:1}
.pmx-pie-datos p{margin:0}
.pmx-pie-datos p+p{margin-top:.5rem}
.pmx-pie a{color:#8CC4FF;text-decoration:none;border-bottom:1px solid rgba(140,196,255,.35)}
.pmx-pie a:hover{color:#fff;border-bottom-color:#fff}
.pmx-pie-credito{position:relative;z-index:1;margin-top:3rem;padding-top:1.25rem;
  border-top:1px solid rgba(255,255,255,.14)}
.pmx-marca{position:absolute;left:0;right:0;bottom:-.28em;pointer-events:none;user-select:none;
  font-family:var(--wp--preset--font-family--titulos);font-size:22vw;line-height:.8;
  letter-spacing:-.04em;color:rgba(255,255,255,.05);white-space:nowrap;text-align:center}

/* ── Revelado al entrar en pantalla ───────────────────────────────── */
.pmx-rev{opacity:0;transform:translateY(22px);
  transition:opacity .7s cubic-bezier(.22,1,.36,1),transform .7s cubic-bezier(.22,1,.36,1)}
.pmx-rev.pmx-visible{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .pmx-rev{opacity:1;transform:none;transition:none}
}

/* ── WhatsApp fijo en móvil, después de que la portada sale ───────── */
.pmx-wa{position:fixed;left:1rem;right:1rem;bottom:calc(1rem + env(safe-area-inset-bottom));z-index:80;
  display:none;align-items:center;justify-content:center;gap:.6rem;min-height:52px;padding:.9rem 1.25rem;
  background-color:var(--wp--preset--color--acento);color:#fff;font-weight:700;text-decoration:none;
  border-radius:2px;box-shadow:0 10px 30px rgba(11,31,60,.28);
  opacity:0;transform:translateY(120%);transition:opacity .25s,transform .25s cubic-bezier(.22,1,.36,1)}
.pmx-wa.pmx-wa-visible{opacity:1;transform:none}
.pmx-wa svg{flex:0 0 auto}
@media (max-width:781px){.pmx-wa{display:flex}}

/* ── Ritmo de densidad ────────────────────────────────────────────── */
.pmx-enunciado{padding-top:clamp(5rem,16vh,11rem) !important;padding-bottom:clamp(5rem,16vh,11rem) !important}

@media (max-width:781px){
  .pmx-meta{position:static;margin-top:2rem;padding:0;opacity:.65}
  .pmx-meta span{text-align:left}
  .pmx-marca{font-size:26vw}
  .pmx-pie-credito{margin-top:2rem}
}