/*
Theme Name:   GI Football — GP Child
Theme URI:    https://gifootball.com
Description:  Child theme de GeneratePress preparado para montar HTML a medida con Gutenberg. Incluye plantilla lienzo, helpers full-bleed y un reset acotado para secciones pegadas.
Author:       Saraga Marketing
Author URI:   https://saragamarketing.com
Template:     generatepress
Version:      2.0.1
License:      GNU General Public License v2 or later
Text Domain:  gi-gp-child
*/

/* ============================================================
   1. VARIABLES BASE
   Cambiá estos valores y todo el sitio se mueve con ellos.
   ============================================================ */
:root {
  --gi-max: 1200px;          /* ancho del contenedor */
  --gi-max-narrow: 820px;    /* ancho para texto largo */
  --gi-gutter: 24px;         /* padding lateral en móvil */
  --gi-space: 80px;          /* aire vertical entre secciones */
  --gi-radius: 14px;
  --gi-accent: #0f62fe;
  --gi-ink: #14161a;
  --gi-muted: #5b6570;
  --gi-soft: #f4f6f8;
  --gi-border: #e3e7ec;
}

/* ============================================================
   2. HIGIENE GENERAL
   ============================================================ */
img, svg, video, canvas { max-width: 100%; height: auto; }
iframe { max-width: 100%; }

/* Tablas que no rompen el layout en móvil */
.entry-content table { width: 100%; border-collapse: collapse; display: block; overflow-x: auto; }
.entry-content th, .entry-content td { padding: 10px 14px; border: 1px solid var(--gi-border); text-align: left; }
.entry-content th { background: var(--gi-soft); }

/* ============================================================
   3. PLANTILLA LIENZO (page-templates/lienzo-html.php)
   Cero padding, cero max-width: el HTML manda.
   ============================================================ */
.gi-canvas { width: 100%; }
.gi-canvas > * { max-width: none; }

/* Rompemos el contenedor de GeneratePress solo en esta plantilla */
.page-template-lienzo-html #page,
.page-template-lienzo-html .site-content,
.page-template-lienzo-html .content-area,
.page-template-lienzo-html .entry-content {
  max-width: 100% !important;
  width: 100%;
  padding: 0 !important;
  margin-left: 0;
  margin-right: 0;
}
.page-template-lienzo-html.one-container .site-content { padding: 0 !important; }
.page-template-lienzo-html .gi-canvas > * { margin-top: 0; margin-bottom: 0; }

/* Dentro del lienzo, todo lo pegado arranca con box-sizing sano */
.gi-canvas *, .gi-canvas *::before, .gi-canvas *::after { box-sizing: border-box; }

/* ============================================================
   4. HELPERS PARA HTML PEGADO
   Usalas como class en el HTML que montes.
   ============================================================ */

/* Sección de ancho completo con contenido centrado */
.gi-ui-section { padding: var(--gi-space) var(--gi-gutter); }
.gi-ui-section--tight { padding: 48px var(--gi-gutter); }
.gi-ui-section--soft { background: var(--gi-soft); }
.gi-ui-section--dark { background: var(--gi-ink); color: #fff; }
.gi-ui-section--dark a { color: #9ec1ff; }

/* Contenedor interno */
.gi-ui-wrap { max-width: var(--gi-max); margin-inline: auto; width: 100%; }
.gi-ui-wrap--narrow { max-width: var(--gi-max-narrow); margin-inline: auto; }

/* Full-bleed: rompe el contenedor de GP dentro de una página normal */
.gi-ui-full {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* Grids rápidas */
.gi-ui-grid { display: grid; gap: 24px; }
.gi-ui-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gi-ui-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.gi-ui-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 900px) {
  .gi-ui-grid--3, .gi-ui-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .gi-ui-grid--2, .gi-ui-grid--3, .gi-ui-grid--4 { grid-template-columns: 1fr; }
}

/* Tarjetas */
.gi-ui-card {
  background: #fff;
  border: 1px solid var(--gi-border);
  border-radius: var(--gi-radius);
  padding: 28px;
}

/* Botones */
.gi-ui-btn {
  display: inline-block;
  padding: 14px 28px;
  border-radius: 999px;
  background: var(--gi-accent);
  color: #fff !important;
  font-weight: 600;
  text-decoration: none;
  line-height: 1.2;
  transition: transform .15s ease, opacity .15s ease;
}
.gi-ui-btn:hover { transform: translateY(-1px); opacity: .92; }
.gi-ui-btn--ghost { background: transparent; color: var(--gi-ink) !important; border: 1px solid var(--gi-border); }

/* Utilidades sueltas */
.gi-ui-center { text-align: center; }
.gi-ui-muted { color: var(--gi-muted); }
.gi-mt-0 { margin-top: 0 !important; }
.gi-mb-0 { margin-bottom: 0 !important; }
.gi-ui-stack > * + * { margin-top: 16px; }

/* ============================================================
   5. CONTENIDO EDITORIAL NORMAL (páginas sin lienzo)
   ============================================================ */
.entry-content > h2 { margin-top: 1.8em; }
.entry-content > h3 { margin-top: 1.5em; }
.entry-content blockquote {
  border-left: 3px solid var(--gi-accent);
  padding-left: 20px;
  margin-left: 0;
  color: var(--gi-muted);
}
.entry-content pre {
  background: var(--gi-ink);
  color: #f2f4f7;
  padding: 20px;
  border-radius: var(--gi-radius);
  overflow-x: auto;
}


/* ============================================================
   6. CABECERA Y PIE — paleta de marca
   ============================================================ */
.site-logo img, .site-header .header-image {
  max-width: 54px;
  width: 100%;
  height: auto;
}
.site-header .site-branding { display: block; }
.site-header .site-title { font-size: 1.15rem; font-weight: 800; letter-spacing: -.01em; }
.site-header .site-description { font-size: .78rem; color: var(--gi-texto-tenue); }
.inside-header { align-items: center; gap: 14px; }

@media (max-width: 768px) {
  .site-logo img, .site-header .header-image { max-width: 42px; }
  .site-header .site-description { display: none; }
}

/* El pie del tema se apoya en las clases gi-pie del paquete */
.site-footer .copyright-bar {
  padding: 0;
  background: var(--gi-fondo-alt);
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}
.site-footer .copyright-bar .gi-sec { padding-bottom: 0 !important; }
/* =====================================================================
   G&I Football — estilos para WordPress
   Pegar completo en: Apariencia → Editor → Estilos → ⋮ → CSS adicional
   (en temas clásicos: Apariencia → Personalizar → CSS adicional)

   Todo va con el prefijo gi- y solo afecta a los bloques que llevan esas
   clases, así que no rompe nada del tema.
   ===================================================================== */


:root {
  --gi-amarillo: #FFC400;
  --gi-amarillo-claro: #FFD84D;
  --gi-azul: #2B5CB8;
  --gi-azul-claro: #4C82E8;
  --gi-rojo: #D4232E;
  --gi-fondo: #0A0D14;
  --gi-fondo-alt: #10141F;
  --gi-superficie: #161B29;
  --gi-superficie-alta: #1E2436;
  --gi-borde: #262E45;
  --gi-texto: #F2F4F8;
  --gi-texto-medio: #AEB6C8;
  --gi-texto-tenue: #7B849A;
  --gi-fuente: 'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --gi-radio: 14px;
  --gi-radio-lg: 22px;
  --gi-t: 180ms cubic-bezier(.4, 0, .2, 1);
}

/* --- 0. Paleta global (adaptado a GeneratePress) ------------------------
   El paquete original apuntaba a las variables de Twenty Twenty-Five.
   Acá se aplica lo mismo sobre el marcado de GeneratePress. */
body {
  background-color: var(--gi-fondo);
  color: var(--gi-texto);
  font-family: var(--gi-fuente);
}
#page,
.site-content,
.one-container .site-content,
.inside-article,
.site-header,
.site-footer,
.separate-containers .site-main { background-color: var(--gi-fondo); }

.site-header { border-bottom: 1px solid var(--gi-borde); }
.site-header .site-title a,
.site-header .site-description { color: var(--gi-texto); }
.site-header .site-title a:hover { color: var(--gi-amarillo); }

.main-navigation,
.main-navigation ul ul,
.main-navigation .main-nav ul ul { background-color: var(--gi-fondo); }
.main-navigation .main-nav ul li a,
.main-navigation .menu-toggle,
.main-navigation .menu-bar-items { color: var(--gi-texto); }
.main-navigation .main-nav ul li a:hover,
.main-navigation .main-nav ul li.current-menu-item a { color: var(--gi-amarillo); }

body :where(a:not(.wp-element-button):not(.wp-block-button__link)) { color: var(--gi-amarillo); }
body :where(.wp-element-button, .wp-block-button__link) {
  background-color: var(--gi-amarillo);
  color: var(--gi-fondo);
}

.entry-title, .entry-title a, h1, h2, h3, h4, h5, h6 { color: #fff; }
.entry-meta, .entry-meta a { color: var(--gi-texto-tenue); }

html { scroll-behavior: smooth; scroll-padding-top: 90px; }

/* --- 1. Secciones ----------------------------------------------------- */

.gi-sec {
  background: var(--gi-fondo);
  color: var(--gi-texto);
  font-family: var(--gi-fuente);
  font-size: 17px;
  line-height: 1.65;
  padding: clamp(56px, 9vw, 104px) 20px !important;
  margin-block: 0 !important;
}
.gi-sec.gi-alt { background: var(--gi-fondo-alt); border-top: 1px solid var(--gi-borde); }

.gi-sec :is(h1, h2, h3, h4, p, li, a, summary, figcaption) { font-family: var(--gi-fuente); }

.gi-sec :is(h1, h2, h3, h4) {
  color: #fff;
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -.022em;
  text-wrap: balance;
  margin-top: 0;
}
.gi-sec h1 { font-size: clamp(2.05rem, 5.2vw, 3.35rem); }
.gi-sec h2 { font-size: clamp(1.75rem, 4.4vw, 2.85rem); }
.gi-sec h3 { font-size: clamp(1.1rem, 2.2vw, 1.3rem); font-weight: 700; }
.gi-sec h1 em, .gi-sec h2 em { font-style: normal; color: var(--gi-amarillo); }

.gi-sec p, .gi-sec li { color: var(--gi-texto-medio); }
.gi-sec strong { color: #fff; }
.gi-sec a:not(.wp-block-button__link) { color: var(--gi-amarillo); text-decoration: none; }
.gi-sec a:not(.wp-block-button__link):hover { color: var(--gi-amarillo-claro); text-decoration: underline; }

.gi-texto-medio { color: var(--gi-texto-medio) !important; }
.gi-texto-tenue { color: var(--gi-texto-tenue) !important; font-size: .92rem; }

/* --- 2. Encabezados de sección --------------------------------------- */

.gi-eyebrow {
  display: flex; align-items: center; gap: .6em;
  font-size: .78rem !important; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--gi-amarillo) !important;
  margin-bottom: 0 !important;
}
.gi-eyebrow::before { content: ''; width: 26px; height: 2px; background: var(--gi-amarillo); border-radius: 2px; }

.gi-intro > * { max-width: 720px; }
.gi-intro > * + * { margin-block-start: .8rem !important; }
.gi-intro__texto { font-size: 1.08rem; color: var(--gi-texto-medio) !important; }

.gi-intro--centro { text-align: center; }
.gi-intro--centro > * { margin-left: auto !important; margin-right: auto !important; }
.gi-intro--centro .gi-eyebrow { justify-content: center; }
.gi-intro--centro .gi-eyebrow::before { display: none; }

.gi-intro + .gi-grid,
.gi-intro + .gi-galeria,
.gi-intro + .gi-faq,
.gi-intro + .gi-agencia { margin-block-start: clamp(36px, 5vw, 56px) !important; }

/* --- 3. Botones ------------------------------------------------------- */

.gi-sec .wp-block-button__link {
  background: var(--gi-amarillo) !important;
  color: #0A0D14 !important;
  border: 2px solid transparent !important;
  border-radius: 999px !important;
  padding: 15px 28px !important;
  font-family: var(--gi-fuente);
  font-size: 1rem !important;
  font-weight: 700 !important;
  line-height: 1.2;
  text-decoration: none !important;
  box-shadow: 0 8px 26px rgba(255, 196, 0, .28);
  transition: transform var(--gi-t), background var(--gi-t), box-shadow var(--gi-t);
}
.gi-sec .wp-block-button__link:hover {
  background: var(--gi-amarillo-claro) !important;
  transform: translateY(-2px);
  box-shadow: 0 12px 34px rgba(255, 196, 0, .4);
}
.gi-sec .gi-btn--fantasma .wp-block-button__link {
  background: transparent !important;
  color: var(--gi-texto) !important;
  border-color: var(--gi-borde) !important;
  box-shadow: none;
}
.gi-sec .gi-btn--fantasma .wp-block-button__link:hover {
  border-color: var(--gi-amarillo) !important;
  color: var(--gi-amarillo) !important;
}

/* --- 4. Hero ---------------------------------------------------------- */

.gi-hero {
  position: relative;
  padding-top: clamp(64px, 8vw, 110px) !important;
  background-color: var(--gi-fondo);
  /* Si subes las imágenes en otro mes, cambia 2026/09 por el que corresponda. */
  background-image:
    radial-gradient(90% 65% at 15% 12%, rgba(43, 92, 184, .30), transparent 62%),
    radial-gradient(75% 60% at 92% 88%, rgba(212, 35, 46, .20), transparent 60%),
    linear-gradient(180deg, rgba(10, 13, 20, .90) 0%, rgba(10, 13, 20, .82) 45%, var(--gi-fondo) 100%),
    url('/wp-content/uploads/2026/09/equipo-rey-pele.jpg');
  background-size: auto, auto, auto, cover;
  background-position: center, center, center, center 30%;
}

.gi-hero__cols { gap: clamp(40px, 5vw, 56px) !important; align-items: center !important; }

.gi-badge {
  display: inline-flex !important; align-items: center; gap: .6em;
  width: fit-content;
  padding: 7px 15px 7px 9px;
  background: rgba(255, 196, 0, .11);
  border: 1px solid rgba(255, 196, 0, .3);
  border-radius: 999px;
  font-size: .82rem !important; font-weight: 600;
  color: var(--gi-amarillo-claro) !important;
}
.gi-badge strong {
  padding: 2px 9px; border-radius: 999px;
  background: var(--gi-amarillo); color: #0A0D14 !important;
  font-size: .72rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
}

.gi-hero__titulo { margin-block: 22px 18px !important; }
.gi-hero__entrada { font-size: clamp(1.05rem, 2.1vw, 1.2rem); max-width: 34em; }

/* Listas con check amarillo */
.gi-sec ul.gi-checks { list-style: none; padding: 0; margin: 26px 0 0; display: grid; gap: 11px; }
.gi-sec ul.gi-checks li {
  position: relative; padding-left: 30px; margin: 0; font-size: 1rem;
}
.gi-sec ul.gi-checks li::before {
  content: ''; position: absolute; left: 0; top: .3em;
  width: 18px; height: 18px;
  background: var(--gi-amarillo);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / contain no-repeat;
}
.gi-sec ul.gi-checks--sm { margin-top: 16px; gap: 8px; }
.gi-sec ul.gi-checks--sm li { font-size: .93rem; }

/* --- 5. Tarjeta del formulario --------------------------------------- */

.gi-form-card {
  position: relative;
  padding: 30px 24px 26px !important;
  background: linear-gradient(165deg, var(--gi-superficie-alta), var(--gi-superficie));
  border: 1px solid rgba(255, 196, 0, .3);
  border-radius: var(--gi-radio-lg);
  box-shadow: 0 18px 44px rgba(0, 0, 0, .42);
  scroll-margin-top: 100px;
}
.gi-form-card > * + * { margin-block-start: .5rem !important; }
.gi-sec .gi-form-card__titulo { font-size: 1.32rem !important; margin: 0 !important; }
.gi-form-card__sub { font-size: .95rem; margin-bottom: 18px !important; }
.gi-form-card__nota {
  font-size: .82rem !important; color: var(--gi-texto-tenue) !important;
  margin-top: 14px !important; text-align: center;
}

/* Fluent Forms dentro de la tarjeta */
.gi-form-card .fluentform .ff-el-group { margin-bottom: 14px; }
.gi-form-card .fluentform .ff-el-input--label label {
  color: var(--gi-texto-medio) !important;
  font-family: var(--gi-fuente); font-size: .85rem; font-weight: 600;
}
.gi-form-card .fluentform .ff-el-is-required.asterisk-right label::after,
.gi-form-card .fluentform .ff-el-is-required.asterisk-left label::before { color: var(--gi-amarillo) !important; }
.gi-form-card .fluentform .ff-el-form-control {
  width: 100% !important;
  box-sizing: border-box;
  background: rgba(10, 13, 20, .6) !important;
  border: 1px solid var(--gi-borde) !important;
  border-radius: 9px !important;
  color: var(--gi-texto) !important;
  font-family: var(--gi-fuente);
  font-size: 1rem !important;
  padding: 12px 14px !important;
  min-height: 48px;
}
.gi-form-card .fluentform .ff-el-form-control::placeholder { color: var(--gi-texto-tenue) !important; }
.gi-form-card .fluentform .ff-el-form-control:focus {
  border-color: var(--gi-amarillo) !important;
  box-shadow: 0 0 0 3px rgba(255, 196, 0, .14) !important;
  outline: none;
}
.gi-form-card .fluentform select.ff-el-form-control option { background: var(--gi-superficie); }
.gi-form-card .fluentform .ff-el-tc label,
.gi-form-card .fluentform .ff_t_c,
.gi-form-card .fluentform .ff-el-form-check-label {
  color: var(--gi-texto-tenue) !important; font-size: .84rem !important; line-height: 1.5;
}
.gi-form-card .fluentform .ff-el-form-check-input { accent-color: var(--gi-amarillo); }
.gi-form-card .fluentform .ff-btn-submit {
  width: 100% !important;
  background: var(--gi-amarillo) !important;
  color: #0A0D14 !important;
  border: 0 !important;
  border-radius: 999px !important;
  padding: 17px 28px !important;
  font-family: var(--gi-fuente);
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  box-shadow: 0 8px 26px rgba(255, 196, 0, .28);
  transition: transform var(--gi-t), background var(--gi-t);
}
.gi-form-card .fluentform .ff-btn-submit:hover { background: var(--gi-amarillo-claro) !important; transform: translateY(-2px); }
.gi-form-card .fluentform .error.text-danger { color: #FF7A82 !important; font-size: .82rem; }

/* --- 6. Franja de confianza ------------------------------------------ */

.gi-confianza { padding-block: 28px !important; border-bottom: 1px solid var(--gi-borde); }
.gi-confianza__titulo {
  text-align: center; margin: 0 0 16px !important;
  font-size: .76rem !important; font-weight: 700; letter-spacing: .15em;
  text-transform: uppercase; color: var(--gi-texto-tenue) !important;
}
.gi-sec ul.gi-chips {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 9px;
  list-style: none; padding: 0; margin: 0 auto !important;
}
.gi-sec ul.gi-chips li {
  margin: 0; padding: 7px 15px;
  background: var(--gi-superficie); border: 1px solid var(--gi-borde); border-radius: 999px;
  font-size: .85rem; font-weight: 600; white-space: nowrap;
}

/* --- 7. Rejillas y tarjetas ------------------------------------------ */

.gi-sec .gi-grid { gap: 20px !important; }

.gi-card, .gi-tool, .gi-modulo, .gi-cifra, .gi-descarga {
  background: var(--gi-superficie);
  border: 1px solid var(--gi-borde);
  border-radius: var(--gi-radio);
  transition: transform var(--gi-t), border-color var(--gi-t);
}
.gi-card:hover, .gi-tool:hover, .gi-modulo:hover { transform: translateY(-3px); border-color: rgba(255, 196, 0, .35); }

.gi-card { padding: 26px 24px !important; }
.gi-card > * + * { margin-block-start: .5rem !important; }
.gi-card p { font-size: .96rem; margin: 0; }
.gi-card--dolor { border-left: 3px solid var(--gi-rojo); }
.gi-card--dolor:hover { border-color: var(--gi-borde); border-left-color: var(--gi-rojo); }

.gi-tool {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column;
  padding: 26px 24px 24px !important;
}
.gi-tool::after {
  content: ''; position: absolute; inset: 0 0 auto; height: 3px;
  background: linear-gradient(90deg, var(--gi-amarillo), var(--gi-azul));
  opacity: 0; transition: opacity var(--gi-t);
}
.gi-tool:hover::after { opacity: 1; }
.gi-tool > * { margin: 0 !important; }
.gi-tool > * + * { margin-top: .55rem !important; }
.gi-tool p { font-size: .94rem; }
.gi-kicker {
  font-size: .74rem !important; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; color: var(--gi-texto-tenue) !important;
}
.gi-pill {
  width: fit-content; margin-top: auto !important; padding: 4px 11px;
  background: rgba(43, 92, 184, .16); border: 1px solid rgba(76, 130, 232, .3); border-radius: 999px;
  font-size: .72rem !important; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--gi-azul-claro) !important;
}
.gi-tool > .gi-pill { margin-top: 14px !important; }
.gi-tool--cta {
  justify-content: center;
  background: linear-gradient(150deg, rgba(255, 196, 0, .1), var(--gi-superficie));
  border-color: rgba(255, 196, 0, .28);
}
.gi-tool--cta .wp-block-buttons { margin-top: 18px !important; }

/* Módulos del libro */
.gi-modulo {
  display: grid !important;
  grid-template-columns: 38px 1fr;
  column-gap: 16px; align-items: start;
  padding: 18px 20px !important;
}
.gi-modulo:hover { transform: translateX(3px); }
.gi-modulo > * { margin: 0 !important; }
.gi-modulo__num {
  grid-row: span 2;
  display: grid; place-items: center;
  width: 38px; height: 38px;
  background: linear-gradient(140deg, var(--gi-amarillo), #E5A800);
  border-radius: 10px;
  font-size: 1rem !important; font-weight: 800; color: #0A0D14 !important;
}
.gi-sec .gi-modulo h3 { font-size: 1.05rem; margin-bottom: 2px !important; }
.gi-modulo p:not(.gi-modulo__num) { font-size: .92rem; }

/* --- 8. Quiénes somos ------------------------------------------------ */

.gi-agencia {
  padding: 30px 26px !important;
  background: linear-gradient(150deg, rgba(43, 92, 184, .14), rgba(22, 27, 41, .9));
  border: 1px solid var(--gi-borde);
  border-radius: var(--gi-radio-lg);
}
.gi-agencia > * + * { margin-block-start: .9rem !important; }
.gi-sec .gi-cifras {
  margin-top: 26px !important; padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, .08);
}
.gi-cifra { background: none; border: 0; }
.gi-cifra > * { margin: 0 !important; }
.gi-cifra__valor {
  font-size: 2.1rem !important; font-weight: 800; line-height: 1 !important;
  color: var(--gi-amarillo) !important; margin-bottom: 6px !important;
}
.gi-cifra__texto { font-size: .88rem !important; line-height: 1.4; }

.gi-perfil {
  margin-top: 20px !important;
  padding: 26px 24px !important;
  background: var(--gi-superficie);
  border: 1px solid var(--gi-borde);
  border-radius: var(--gi-radio-lg);
}
.gi-perfil__cols { gap: 28px !important; margin: 0 !important; }
.gi-perfil__foto { margin: 0 !important; }
.gi-perfil__foto img {
  width: 100%; aspect-ratio: 3 / 4; object-fit: cover;
  border-radius: var(--gi-radio);
}
.gi-sec .gi-perfil__nombre { font-size: 1.4rem; margin-bottom: 2px !important; }
.gi-perfil__rol {
  margin-top: 0 !important;
  font-size: .8rem !important; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--gi-amarillo) !important;
}
@media (min-width: 782px) {
  .gi-perfil__cols > .wp-block-column:first-child { flex: 0 0 240px !important; }
}
@media (max-width: 781px) {
  .gi-perfil__foto img { aspect-ratio: 4 / 3; }
}

/* --- 9. Galería ------------------------------------------------------ */

.gi-sec .gi-galeria { gap: 14px !important; }
.gi-sec .gi-galeria figure.wp-block-image {
  aspect-ratio: 1;
  border-radius: var(--gi-radio);
  overflow: hidden;
  border: 1px solid var(--gi-borde);
}
.gi-sec .gi-galeria figure.wp-block-image img {
  width: 100% !important; height: 100% !important; object-fit: cover;
  transition: transform 420ms cubic-bezier(.4, 0, .2, 1);
}
.gi-sec .gi-galeria figure.wp-block-image:hover img { transform: scale(1.05); }
.gi-sec .gi-galeria figure.wp-block-image figcaption {
  padding: 26px 12px 10px !important;
  background: linear-gradient(to top, rgba(10, 13, 20, .96), transparent) !important;
  font-size: .78rem !important; font-weight: 600; line-height: 1.3;
  color: var(--gi-texto) !important; text-align: left;
  text-shadow: none;
}
@media (max-width: 781px) {
  .gi-sec .gi-galeria.columns-4 figure.wp-block-image:not(#individual-image) { width: calc(50% - 7px) !important; }
}

/* --- 10. Preguntas frecuentes --------------------------------------- */

.gi-faq { max-width: 720px; margin-left: auto !important; margin-right: auto !important; }
.gi-faq > * + * { margin-block-start: 11px !important; }
.gi-faq__item {
  background: var(--gi-superficie);
  border: 1px solid var(--gi-borde);
  border-radius: var(--gi-radio);
  padding: 0 !important;
  transition: border-color var(--gi-t);
}
.gi-faq__item[open] { border-color: rgba(255, 196, 0, .35); }
.gi-faq__item summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 19px 21px;
  list-style: none; cursor: pointer;
  font-size: 1.03rem; font-weight: 700; color: var(--gi-texto);
}
.gi-faq__item summary::-webkit-details-marker { display: none; }
.gi-faq__item summary::after {
  content: ''; flex-shrink: 0; width: 10px; height: 10px;
  border-right: 2px solid var(--gi-amarillo); border-bottom: 2px solid var(--gi-amarillo);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform var(--gi-t);
}
.gi-faq__item[open] summary::after { transform: rotate(-135deg) translate(-3px, -3px); }
.gi-faq__item summary:hover { color: var(--gi-amarillo); }
.gi-faq__item > p { padding: 0 21px 20px; margin: 0 !important; font-size: .97rem; }

/* --- 11. Cierre ------------------------------------------------------ */

.gi-cta {
  border-top: 1px solid var(--gi-borde);
  background:
    radial-gradient(70% 90% at 50% 0%, rgba(255, 196, 0, .13), transparent 60%),
    radial-gradient(60% 80% at 8% 100%, rgba(43, 92, 184, .18), transparent 62%),
    var(--gi-fondo-alt) !important;
}
.gi-cta__cols { gap: clamp(40px, 5vw, 56px) !important; align-items: center !important; }
.gi-cta__cols .wp-block-column:first-child > * + * { margin-block-start: .9rem !important; }

/* --- 12. Página de gracias ------------------------------------------ */

.gi-gracias__marca {
  display: grid !important; place-items: center;
  width: 78px; height: 78px; margin-bottom: 18px !important;
  background: rgba(34, 160, 92, .12); border: 2px solid rgba(34, 160, 92, .45);
  border-radius: 50%;
  font-size: 2rem !important; font-weight: 800; color: #4ADE80 !important;
}
.gi-descarga .wp-block-buttons { margin-top: auto !important; padding-top: 16px; }
.gi-caja {
  margin-top: 48px !important;
  padding: 30px 26px !important;
  text-align: center;
  background: linear-gradient(150deg, rgba(255, 196, 0, .09), var(--gi-superficie));
  border: 1px solid rgba(255, 196, 0, .25);
  border-radius: var(--gi-radio-lg);
}
.gi-caja > * { margin-left: auto !important; margin-right: auto !important; max-width: 36em; }
.gi-caja .wp-block-buttons { justify-content: center; margin-top: 18px !important; }

/* --- 13. Páginas legales -------------------------------------------- */

.gi-legal h2 { font-size: 1.45rem !important; margin-top: 2em !important; }
.gi-legal p, .gi-legal li { font-size: 1rem; }
.gi-legal ul { padding-left: 1.2em; }

/* --- 14. Pie de página ---------------------------------------------- */

.gi-pie { padding-block: 48px 26px !important; border-top: 1px solid var(--gi-borde); }
.gi-pie__cols { gap: 34px !important; }
.gi-pie__marca { font-size: 1.3rem !important; font-weight: 800; color: #fff !important; }
.gi-pie__marca strong { color: var(--gi-amarillo) !important; }
.gi-pie__titulo {
  font-size: .78rem !important; font-weight: 700; letter-spacing: .13em;
  text-transform: uppercase; color: var(--gi-texto-tenue) !important;
}
.gi-sec ul.gi-pie__lista { list-style: none; padding: 0; margin-top: 10px !important; }
.gi-sec ul.gi-pie__lista li { margin-bottom: 9px; font-size: .93rem; }
.gi-sec ul.gi-pie__lista a { color: var(--gi-texto-medio); }
.gi-pie__legal {
  margin-top: 34px !important; padding-top: 22px;
  border-top: 1px solid var(--gi-borde);
  font-size: .84rem !important; color: var(--gi-texto-tenue) !important;
}
@media (min-width: 782px) {
  .gi-pie__cols > .wp-block-column:first-child { flex-grow: 2 !important; }
}

/* --- 15. Accesibilidad ---------------------------------------------- */

.gi-sec :focus-visible { outline: 3px solid var(--gi-amarillo); outline-offset: 3px; border-radius: 4px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .gi-sec *, .gi-sec *::before, .gi-sec *::after { transition-duration: .01ms !important; }
}

/* --- 16. Pie renderizado por el tema (equivalente a las columnas del paquete) --- */
.gi-pie__cols { display: flex; flex-wrap: wrap; gap: 34px; }
.gi-pie__cols > div { flex: 1 1 220px; min-width: 0; }
@media (min-width: 782px) {
  .gi-pie__cols > div:first-child { flex-grow: 2; }
}
.gi-pie .gi-pie__marca { margin-top: 0; }

/* --- 17. Ancho de contenido dentro de las secciones del paquete ---------
   Reemplaza el "constrained layout" que en temas de bloques viene de
   theme.json. Sin esto las secciones se irían a 100% de ancho. */
.gi-sec > :where(:not(.alignfull):not(.alignwide)) {
  max-width: 1160px;
  margin-left: auto;
  margin-right: auto;
}
.gi-sec > .alignwide { max-width: 1320px; margin-left: auto; margin-right: auto; }

/* --- 18. El contenedor del pie en GeneratePress es .site-info --- */
footer.site-info { background-color: var(--gi-fondo-alt); padding: 0; border-top: 0; }
.site-info .inside-site-info { padding: 0; }

/* --- 19. Ajustes finos --- */
.gi-intro--centro .gi-gracias__marca { margin-left: auto; margin-right: auto; }
.gi-sec .fluentform .ff-btn-submit { width: 100%; }

/* --- 20. Contenedores internos de los grupos de Gutenberg ---------------
   En tema clásico, cada grupo envuelve su contenido en
   .wp-block-group__inner-container. El diseño del paquete espera que los
   hijos sean directos (tarjetas en grid/flex), así que ese envoltorio se
   vuelve transparente salvo en la sección, donde marca el ancho. */
.gi-sec > .wp-block-group__inner-container {
  max-width: 1160px;
  margin-left: auto;
  margin-right: auto;
}
.gi-legal-sec > .wp-block-group__inner-container { max-width: 760px; }
.gi-sec .wp-block-group .wp-block-group > .wp-block-group__inner-container { display: contents; }

/* --- 21. Nombre del sitio junto al logo (GeneratePress usa .main-title) --- */
.site-header .main-title,
.site-header .main-title a,
.site-header .site-description { color: #fff; }
.site-header .main-title a:hover { color: var(--gi-amarillo); }

/* =====================================================================
   22. SISTEMA TIPOGRÁFICO — deportivo de estadio
   Titulares: Big Shoulders Display (condensada, con carácter)
   Texto:     Barlow (grotesca de trabajo, muy legible en oscuro)
   ===================================================================== */

:root {
  --gi-fuente: 'Barlow', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --gi-display: 'Big Shoulders Display', 'Barlow Condensed', 'Arial Narrow', sans-serif;
}

.gi-sec h1,
.gi-sec h2,
.gi-hero__titulo,
.entry-title,
.entry-title a,
.gi-perfil__nombre,
.gi-cifra__valor,
.gi-pie__marca,
.site-header .main-title,
.site-header .main-title a {
  font-family: var(--gi-display);
  font-weight: 800;
  letter-spacing: -0.005em;
  text-transform: none;
}

.gi-sec h1, .gi-hero__titulo, .entry-title {
  font-size: clamp(3rem, 8.2vw, 6rem);
  line-height: 0.9;
}
.gi-sec h2 {
  font-size: clamp(2.4rem, 6vw, 4.2rem);
  line-height: 0.93;
}
.gi-form-card__titulo {
  font-size: clamp(1.75rem, 3.2vw, 2.25rem) !important;
  line-height: 1;
}

.gi-sec h3,
.gi-sec h4,
.gi-faq__item summary,
.gi-tool h3,
.gi-modulo h3,
.gi-card h3 {
  font-family: var(--gi-fuente);
  font-weight: 600;
  font-size: clamp(1.05rem, 2.1vw, 1.22rem);
  line-height: 1.32;
  letter-spacing: -0.006em;
}

.gi-sec,
.gi-sec p,
.gi-sec li { font-family: var(--gi-fuente); }
.gi-sec { font-size: 1.0625rem; line-height: 1.62; }
.gi-sec p,
.gi-sec li { letter-spacing: 0.006em; font-weight: 400; }

.gi-intro > *,
.gi-intro__texto,
.gi-hero__entrada { max-width: 62ch; }
.gi-intro--centro > * { margin-left: auto; margin-right: auto; }

.gi-eyebrow,
.gi-kicker,
.gi-confianza__titulo,
.gi-pie__titulo,
.gi-perfil__rol,
.entry-meta {
  font-family: var(--gi-fuente);
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  line-height: 1.4;
}

.gi-cifra__valor {
  font-variant-numeric: tabular-nums lining-nums;
  font-size: clamp(2.8rem, 6.4vw, 4rem);
  line-height: 0.85;
}
.gi-modulo__num {
  font-family: var(--gi-display);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.main-navigation .main-nav ul li a {
  font-family: var(--gi-fuente);
  font-weight: 600;
  font-size: 0.97rem;
  letter-spacing: 0.005em;
}
.site-header .main-title,
.site-header .main-title a {
  font-size: 1.6rem;
  letter-spacing: 0.005em;
  line-height: 1;
}

.gi-sec .wp-block-button__link,
.gi-sec .ff-btn-submit,
.fluentform .ff-btn-submit {
  font-family: var(--gi-fuente);
  font-weight: 700;
  font-size: 0.92rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.fluentform,
.fluentform input,
.fluentform select,
.fluentform label,
.fluentform .ff-el-input--label label { font-family: var(--gi-fuente); }
.fluentform .ff-el-input--label label { font-weight: 600; letter-spacing: 0.01em; }

.single-post .entry-content {
  font-family: var(--gi-fuente);
  font-size: 1.125rem;
  line-height: 1.72;
}
.single-post .entry-content > p,
.single-post .entry-content > ul,
.single-post .entry-content > ol { max-width: 68ch; }
.single-post .entry-content h2 {
  font-family: var(--gi-display);
  font-weight: 800;
  font-size: clamp(2rem, 4.4vw, 2.9rem);
  line-height: 0.95;
  letter-spacing: -0.005em;
  margin-top: 2.2em;
}
.single-post .entry-content h3 {
  font-family: var(--gi-fuente);
  font-weight: 600;
  font-size: 1.28rem;
  line-height: 1.35;
}
.single-post .entry-title { margin-bottom: 0.25em; }

::selection { background: var(--gi-amarillo); color: var(--gi-fondo); }
:root { accent-color: var(--gi-amarillo); }
.gi-sec a:not(.wp-block-button__link) { text-underline-offset: 0.18em; text-decoration-thickness: 0.08em; }

@media (max-width: 600px) {
  .gi-sec h1, .gi-hero__titulo, .entry-title { line-height: 0.92; }
  .single-post .entry-content { font-size: 1.0625rem; }
}

/* --- 23. Ajuste de la escala al ancho real de cada columna -------------
   El h1 del hero vive en media columna: escala con esa caja, no con el
   viewport. Los h1 de páginas a ancho completo sí pueden crecer más. */
.gi-hero__titulo { font-size: clamp(2.5rem, 5vw, 4.4rem); }
.gi-sec h1:not(.gi-hero__titulo) { font-size: clamp(2.8rem, 6.4vw, 5rem); }
.gi-sec h2 { font-size: clamp(2.2rem, 5vw, 3.6rem); }