/* Theme Name: Acción Impro Theme URI: https://accionimpro.com.co Description: Child theme de Kadence con el sistema de diseño de Acción Impro. Amarillo #edb61d + negro + blanco, Nunito/Poppins/Caveat, estética de cartel impreso. Author: Acción Impro Template: kadence Version: 1.0.0 Text Domain: accion-impro */ /* ========================================================================== TOKENS — Sistema de diseño Acción Impro ========================================================================== */ :root { /* Color base — amarillo de marca #edb61d (jul 2026: se corrigió el ámbar heredado #FBB03B) */ --ai-yellow: #edb61d; --ai-yellow-deep: #C9971A; --ai-yellow-soft: #FFF3DE; --ai-black: #000000; --ai-ink: #141210; --ai-white: #FFFFFF; --ai-gray-900: #1B1815; --ai-gray-700: #3A3531; --ai-gray-500: #6B635B; --ai-gray-300: #C9C2B9; --ai-gray-150: #E9E4DC; --ai-gray-100: #F4F1EB; /* Semánticos */ --text-strong: var(--ai-black); --text-body: var(--ai-gray-900); --text-muted: var(--ai-gray-500); --text-on-dark: var(--ai-white); --text-on-yellow: var(--ai-black); --surface-page: var(--ai-white); --surface-paper: var(--ai-gray-100); --surface-dark: var(--ai-black); --surface-ink: var(--ai-ink); --surface-yellow: var(--ai-yellow); --accent: var(--ai-yellow); --accent-press: var(--ai-yellow-deep); --on-accent: var(--ai-black); --line-strong: var(--ai-black); --line: var(--ai-gray-150); --line-dark: rgba(255,255,255,0.16); --focus-ring: var(--ai-yellow); /* Tipografía */ --font-display: 'Nunito', 'Poppins', system-ui, sans-serif; --font-body: 'Poppins', system-ui, -apple-system, sans-serif; --font-hand: 'Caveat', 'Poppins', cursive; --lh-tight: 0.95; --lh-snug: 1.08; --lh-heading: 1.15; --lh-body: 1.6; --ls-eyebrow: 0.16em; /* jul 2026: alineado al valor real en uso del eyebrow */ /* Espaciado / radios / bordes */ --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --radius-pill: 999px; --border-heavy: 3px; --container: 1200px; /* Sombras y movimiento */ --shadow-hard: 6px 6px 0 var(--ai-black); --shadow-hard-sm: 3px 3px 0 var(--ai-black); --shadow-hard-yellow: 6px 6px 0 var(--ai-yellow); --shadow-soft: 0 2px 8px rgba(20,18,16,0.08); --shadow-soft-lg: 0 12px 32px rgba(20,18,16,0.14); --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1); --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1); --dur-fast: 120ms; --dur: 200ms; } /* ========================================================================== BASE — tipografía global ========================================================================== */ body { font-family: var(--font-body); color: var(--text-body); line-height: var(--lh-body); } h1, h2, h3, h4, h5, h6, .wp-block-heading { font-family: var(--font-display); font-weight: 900; color: var(--text-strong); line-height: var(--lh-heading); } h1 { line-height: var(--lh-snug); } /* Eyebrow — etiqueta de sección con resaltado amarillo (pill) */ .ai-eyebrow { display: inline-block; background: var(--ai-yellow); color: var(--ai-black); font-family: var(--font-body); font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: var(--ls-eyebrow); padding: 5px 12px; border-radius: 6px; margin: 0 0 14px; } /* Variante plana (hero): texto amarillo sin fondo */ .ai-eyebrow-plain { background: transparent; color: var(--ai-yellow); padding: 0; } /* Sobre fondo amarillo el pill amarillo no contrasta → pill negro */ .ai-section-yellow .ai-eyebrow { background: var(--ai-black); color: var(--ai-yellow); } /* El pill pinta su propio texto. Forzamos el color para ignorar el "color inline" viejo del seed (#FBB03B / #edb61d), que dejaba texto amarillo sobre pill amarillo —invisible— en las secciones oscuras. */ .ai-eyebrow.has-text-color { color: var(--ai-black) !important; } .ai-section-yellow .ai-eyebrow.has-text-color { color: var(--ai-yellow) !important; } .ai-eyebrow-plain.has-text-color { color: var(--ai-yellow) !important; } /* Envoltorio de bloque para que el eyebrow (pill inline) se alinee con la columna constreñida (1200px) igual que el título, y no se pegue al margen. */ .ai-eyebrow-line { display: block; margin: 0 0 14px; } .ai-eyebrow-line .ai-eyebrow { margin: 0; } /* Acento manuscrito */ .ai-hand { font-family: var(--font-hand); font-weight: 700; } /* ========================================================================== BOTONES — primario amarillo con sombra dura tipo serigrafía ========================================================================== */ .wp-block-button__link, .wp-element-button, button.kb-button, .kb-button, input[type="submit"], .single_add_to_cart_button, .wc-block-components-button, .woocommerce a.button, .woocommerce button.button { font-family: var(--font-display); font-weight: 800; border-radius: var(--radius-md); transition: transform var(--dur) var(--ease-bounce), box-shadow var(--dur) var(--ease-out), background var(--dur-fast) linear; } .wp-block-button:not(.is-style-outline):not(.is-style-ai-ghost) .wp-block-button__link, input[type="submit"], .single_add_to_cart_button, .woocommerce a.button.alt, .woocommerce button.button.alt { background: var(--accent); color: var(--on-accent); border: var(--border-heavy) solid var(--ai-black); } .wp-block-button:not(.is-style-outline) .wp-block-button__link:hover, input[type="submit"]:hover, .single_add_to_cart_button:hover, .woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover { background: var(--accent-press); color: var(--on-accent); transform: translate(-2px, -2px); box-shadow: var(--shadow-hard-sm); } .wp-block-button:not(.is-style-outline) .wp-block-button__link:active { transform: translate(0, 0); box-shadow: none; } /* Botón secundario (outline). !important: Kadence inyecta el color de paleta (amarillo) con alta especificidad y rompería la regla de marca "amarillo nunca es texto sobre blanco". */ .wp-block-button.is-style-outline .wp-block-button__link { border: var(--border-heavy) solid var(--ai-black) !important; color: var(--ai-black) !important; background: transparent; } .wp-block-button.is-style-outline .wp-block-button__link:hover { background: var(--ai-black) !important; color: var(--ai-white) !important; transform: translate(-2px, -2px); box-shadow: var(--shadow-hard-sm); } .wp-block-button.is-style-outline .wp-block-button__link:active { transform: translate(0, 0); box-shadow: none; } /* Outline sobre fondo oscuro */ .ai-section-dark .wp-block-button.is-style-outline .wp-block-button__link, .has-background-dark .wp-block-button.is-style-outline .wp-block-button__link, .ai-on-dark .wp-block-button.is-style-outline .wp-block-button__link { border-color: var(--ai-white) !important; color: var(--ai-white) !important; } .ai-section-dark .wp-block-button.is-style-outline .wp-block-button__link:hover, .has-background-dark .wp-block-button.is-style-outline .wp-block-button__link:hover, .ai-on-dark .wp-block-button.is-style-outline .wp-block-button__link:hover { background: var(--ai-white) !important; color: var(--ai-black) !important; } /* Focus visible siempre */ a:focus-visible, button:focus-visible, .wp-block-button__link:focus-visible, input:focus-visible, textarea:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; } /* ========================================================================== TARJETAS — recorte de cartel: borde negro + sombra dura al hover ========================================================================== */ .ai-card { background: var(--ai-white); border: var(--border-heavy) solid var(--ai-black); border-radius: var(--radius-lg); overflow: hidden; transition: transform var(--dur) var(--ease-bounce), box-shadow var(--dur) var(--ease-out); } .ai-card:hover { transform: translate(-3px, -3px); box-shadow: var(--shadow-hard); } .ai-card-dark { background: var(--surface-ink); color: var(--text-on-dark); border-color: var(--ai-black); } .ai-card-dark:hover { box-shadow: var(--shadow-hard-yellow); } .ai-card-dark h2, .ai-card-dark h3, .ai-card-dark h4 { color: var(--ai-white); } /* Tag / etiqueta de metadatos (fecha, sede) */ .ai-tag { display: inline-block; font-family: var(--font-body); font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; padding: 4px 12px; border-radius: var(--radius-pill); border: 2px solid var(--ai-black); background: var(--ai-white); color: var(--ai-black); } .ai-tag-yellow { background: var(--ai-yellow); } .ai-tag-dark { background: var(--ai-black); color: var(--ai-white); border-color: var(--ai-white); } /* Retratos circulares del elenco */ .ai-portrait img { border-radius: 50%; border: var(--border-heavy) solid var(--ai-black); aspect-ratio: 1; object-fit: cover; } /* Separador de sección con gesto de marca */ .ai-sep { border: none; border-top: var(--border-heavy) solid var(--ai-black); width: 96px; margin: 0; } /* ========================================================================== SECCIONES de color pleno (cartel) ========================================================================== */ .ai-section-yellow { background: var(--surface-yellow); color: var(--text-on-yellow); } .ai-section-yellow h1, .ai-section-yellow h2, .ai-section-yellow h3 { color: var(--ai-black); } .ai-section-dark { background: var(--surface-dark); color: var(--text-on-dark); } .ai-section-dark h1, .ai-section-dark h2, .ai-section-dark h3, .ai-section-dark h4 { color: var(--ai-white); } .ai-section-dark p { color: rgba(255,255,255,0.85); } .ai-section-paper { background: var(--surface-paper); } /* Sin "franja blanca" entre secciones: WP/Kadence mete un margen (32px) entre cada .wp-block-group full-width y el fondo blanco de la página asoma en ese hueco. Las secciones ya traen su propio padding, así que anulamos ese margen para que queden a tope. Afecta a todas las páginas (home, quiénes somos, academia, etc.). */ .entry-content > .wp-block-group.alignfull { margin-top: 0; margin-bottom: 0; } /* La distancia eyebrow → título la fija la NORMALIZACIÓN GLOBAL del final (8px). Hero de páginas internas (dark) más compacto y equilibrado. */ .ai-section-dark .ai-mega { font-size: clamp(2.5rem, 6vw, 4rem); margin-bottom: 14px; } /* ========================================================================== HEADER / FOOTER (Kadence overrides) ========================================================================== */ #masthead .kadence-header-row { font-family: var(--font-body); } /* El logo ya contiene el nombre: no duplicar con el título en texto */ .site-branding .site-title, .site-branding .site-description { display: none; } #masthead .main-navigation .primary-menu-container > ul > li > a { font-weight: 600; font-size: 0.9375rem; } /* ========================================================================== WOOCOMMERCE — tienda de talleres ========================================================================== */ .woocommerce span.onsale { background: var(--ai-yellow); color: var(--ai-black); font-family: var(--font-display); font-weight: 800; border: 2px solid var(--ai-black); } .woocommerce div.product p.price, .woocommerce ul.products li.product .price { color: var(--ai-black); font-family: var(--font-display); font-weight: 800; } /* Aviso de cupos: ver el bloque WOOCOMMERCE al final (definición vigente de .ai-cupos). */ /* ========================================================================== FUNCIÓN DESTACADA — banner grande (reemplaza al slider) ========================================================================== */ /* Imagen limpia arriba (banner ~2.7:1, completa) + tarjeta con la info debajo. */ .ai-destacada { display: flex; flex-direction: column; /* !important para ganarle al layout "constrained" de WP que fuerza 1200px al hijo directo. */ max-width: 900px !important; margin: 0 auto !important; border: var(--border-heavy) solid var(--ai-black); border-radius: var(--radius-lg); overflow: hidden; background: var(--ai-ink); box-shadow: var(--shadow-hard); } .ai-destacada-media { width: 100%; background: var(--ai-ink); display: block; } .ai-destacada-media img { width: 100%; height: auto; display: block; } .ai-destacada-body { padding: clamp(16px, 2.2vw, 26px); display: flex; flex-direction: column; gap: 7px; color: var(--ai-white); border-top: var(--border-heavy) solid var(--ai-yellow); } /* !important: el tema (Kadence) mete margin-top ~1.5em al h2 y margin al párrafo. */ .ai-destacada-body .ai-eyebrow, .ai-destacada-body .ai-funcion-tags { margin: 0 !important; } .ai-destacada-body h2 { color: var(--ai-white); font-size: clamp(1.6rem, 3.4vw, 2.6rem); line-height: 1.05; margin: 0 !important; } .ai-destacada-meta { color: var(--ai-yellow); font-weight: 600; font-size: 1.0625rem; margin: 2px 0 14px !important; } .ai-destacada-meta a { color: inherit; text-decoration: underline; text-underline-offset: 3px; } .ai-destacada-cta { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; } .ai-destacada-cta .wp-block-button__link { background: var(--ai-yellow); color: var(--ai-black); border: var(--border-heavy) solid var(--ai-black); border-radius: var(--radius-md); font-family: var(--font-display); font-weight: 800; padding: 14px 26px; text-decoration: none; transition: transform var(--dur) var(--ease-bounce), box-shadow var(--dur) var(--ease-out); } .ai-destacada-cta .wp-block-button__link:hover { transform: translate(-2px,-2px); box-shadow: var(--shadow-hard-sm); } .ai-destacada-link { color: var(--ai-white); font-weight: 600; text-decoration: underline; text-underline-offset: 4px; } .ai-destacada-link:hover { color: var(--ai-yellow); } /* ========================================================================== ÍCONOS ========================================================================== */ .ai-ico { display: inline-block; vertical-align: -0.18em; flex: none; } svg.ai-ico { fill: none; } /* Botones reutilizables */ .ai-btn-primary, .ai-btn-ghost, .ai-cont-btn, .ai-btn-dark { display: inline-flex; align-items: center; gap: 8px; padding: 15px 28px; border-radius: var(--radius-pill); font-family: var(--font-display); font-weight: 800; text-decoration: none; border: var(--border-heavy) solid var(--ai-black); transition: transform var(--dur) var(--ease-bounce), box-shadow var(--dur) var(--ease-out), background var(--dur-fast) linear; } .ai-cont-btn, .ai-btn-dark { box-shadow: var(--shadow-hard-sm); } .ai-cont-btn:hover, .ai-btn-dark:hover { transform: translate(-2px,-2px); box-shadow: var(--shadow-hard); } .ai-btn-primary { background: var(--ai-yellow); color: var(--ai-black); box-shadow: var(--shadow-hard-sm); } .ai-btn-primary:hover { color: var(--ai-black); transform: translate(-2px,-2px); box-shadow: var(--shadow-hard); } .ai-btn-ghost { background: transparent; color: var(--ai-white); border-color: var(--ai-white); } .ai-btn-ghost:hover { background: var(--ai-white); color: var(--ai-black); } /* ========================================================================== HOME — hero con el sello "SÍ" ========================================================================== */ .ai-hero { background: var(--ai-black); color: var(--ai-white); } .ai-hero-grid { display: grid; grid-template-columns: 1.35fr 0.9fr; gap: clamp(24px, 4vw, 48px); align-items: center; } .ai-hero-copy .ai-mega { color: var(--ai-white); margin: 14px 0 18px; } .ai-hero-copy .ai-mega em { font-style: normal; color: var(--ai-yellow); } .ai-hero-sub { font-size: 1.1875rem; line-height: 1.55; color: rgba(255,255,255,0.82); max-width: 44ch; margin: 0 0 28px; } .ai-hero-sub .ai-hand { color: var(--ai-yellow); font-size: 1.6rem; } .ai-hero-cta { display: flex; flex-wrap: wrap; gap: 14px; } /* El sello: círculo amarillo rotado con "SÍ" gigante */ .ai-hero-art { display: flex; align-items: center; justify-content: center; } .ai-hero-seal { width: clamp(220px, 30vw, 300px); aspect-ratio: 1; border-radius: 50%; background: var(--ai-yellow); color: var(--ai-black); display: flex; flex-direction: column; align-items: center; justify-content: center; transform: rotate(-6deg); box-shadow: var(--shadow-hard); border: var(--border-heavy) solid var(--ai-black); } .ai-hero-seal .si { font-family: var(--font-display); font-weight: 900; font-size: clamp(100px, 15vw, 150px); line-height: 0.8; } .ai-hero-seal .sub { font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; font-size: 0.8125rem; margin-top: 8px; } @media (max-width: 860px) { .ai-hero-grid { grid-template-columns: 1fr; } .ai-hero-art { order: -1; } .ai-hero-seal { width: 200px; } } /* ========================================================================== RACIMO DEL ELENCO (cluster) — hero con retratos circulares ========================================================================== */ .ai-cluster-wrap { display: flex; align-items: center; justify-content: center; width: 100%; } .ai-cluster { position: relative; width: min(480px, 100%); aspect-ratio: 420 / 380; margin: 0 auto; flex: none; } .ai-cl-circle { /* height va en línea (% de la altura del racimo) para que sea cuadrado sin `aspect-ratio`, que en Safari/iPad ovalaba los círculos con ancho en %. */ position: absolute; border-radius: 50%; overflow: hidden; box-sizing: border-box; border: 6px solid var(--ai-yellow); background: #3A3531; cursor: pointer; box-shadow: 0 6px 20px rgba(0,0,0,0.35); transition: transform 0.28s var(--ease-bounce), border-color 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out); } .ai-cl-circle.is-light { background: #6B635B; } .ai-cl-circle img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; transition: transform 0.4s var(--ease-out); } .ai-cl-circle:hover { transform: scale(1.14); z-index: 5; border-color: var(--ai-white); box-shadow: 0 12px 30px rgba(0,0,0,0.55); } .ai-cl-circle:hover img { transform: scale(1.08); } .ai-cl-mark { position: absolute; border-radius: 50%; overflow: hidden; background: var(--ai-yellow); z-index: 4; box-shadow: 0 6px 20px rgba(0,0,0,0.4); } .ai-cl-mark img { width: 100%; height: 100%; object-fit: cover; } .ai-cl-si { position: absolute; z-index: 6; left: 2%; top: -7%; background: var(--ai-black); color: var(--ai-yellow); border: 2px solid var(--ai-yellow); font-family: var(--font-hand); font-weight: 700; font-size: 1.6rem; line-height: 1; padding: 4px 18px; border-radius: var(--radius-pill); transform: rotate(-5deg); } @media (max-width: 860px) { .ai-cluster { margin: 0 auto; } } /* ========================================================================== MARQUESINA — frases conceptuales del "SÍ" ========================================================================== */ .ai-marquee { border-top: var(--border-heavy) solid var(--ai-yellow); border-bottom: var(--border-heavy) solid var(--ai-yellow); background: var(--ai-black); color: var(--ai-yellow); overflow: hidden; white-space: nowrap; } .ai-marquee-track { display: inline-block; padding: 14px 0; font-family: var(--font-display); font-weight: 800; font-size: 1.15rem; letter-spacing: 0.02em; animation: ai-marquee 28s linear infinite; } .ai-marquee-track span { padding: 0 26px; } .ai-marquee-track .dot { color: var(--ai-white); } @keyframes ai-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } @media (prefers-reduced-motion: reduce) { .ai-marquee-track { animation: none; } } /* ========================================================================== LÍNEAS DE NEGOCIO — "cuatro formas de decir sí" ========================================================================== */ .ai-u { box-shadow: inset 0 -0.28em 0 var(--ai-yellow); } .ai-lineas { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } .ai-linea { display: flex; flex-direction: column; gap: 12px; min-height: 240px; padding: 26px; background: var(--ai-white); color: var(--ai-black); border: var(--border-heavy) solid var(--ai-black); border-radius: var(--radius-lg); box-shadow: var(--shadow-hard-sm); text-decoration: none; transition: transform var(--dur) var(--ease-bounce), box-shadow var(--dur) var(--ease-out); } .ai-linea:hover { transform: translate(-3px,-3px); box-shadow: var(--shadow-hard); } .ai-linea.is-dark { background: var(--ai-black); color: var(--ai-white); } .ai-linea.is-yellow { background: var(--ai-yellow); color: var(--ai-black); } .ai-linea .ai-linea-ico { width: 56px; height: 56px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--ai-yellow); color: var(--ai-black); border: var(--border-heavy) solid var(--ai-black); } .ai-linea.is-yellow .ai-linea-ico { background: var(--ai-black); color: var(--ai-yellow); } .ai-lineas .ai-linea h3 { margin: 0; font-size: 1.4rem; color: inherit; } .ai-lineas .ai-linea p { margin: 0; font-size: 0.9375rem; line-height: 1.5; color: inherit; opacity: 0.82; } /* Contraste garantizado en la caja oscura (título/nº/texto claros sobre negro) */ .ai-lineas .ai-linea.is-dark h3, .ai-lineas .ai-linea.is-dark p { color: var(--ai-white); } .ai-linea .go { margin-top: auto; font-weight: 800; font-size: 0.9375rem; display: inline-flex; align-items: center; gap: 6px; color: inherit; } .ai-linea.is-dark .go { color: var(--ai-yellow); } @media (max-width: 900px) { .ai-lineas { grid-template-columns: 1fr 1fr; } } @media (max-width: 520px) { .ai-lineas { grid-template-columns: 1fr; } } /* ========================================================================== ACADEMIA / EMPRESAS teaser (home) — píldoras visuales con ícono ========================================================================== */ .ai-teaser { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 40px; align-items: center; } .ai-teaser-art { display: flex; flex-wrap: wrap; gap: 14px; } .ai-pill { display: flex; align-items: center; gap: 10px; padding: 14px 18px; background: var(--ai-white); border: var(--border-heavy) solid var(--ai-black); border-radius: var(--radius-pill); font-family: var(--font-display); font-weight: 800; font-size: 1rem; box-shadow: var(--shadow-hard-sm); } .ai-pill .ai-pill-ico { width: 38px; height: 38px; border-radius: 50%; background: var(--ai-yellow); color: var(--ai-black); display: flex; align-items: center; justify-content: center; flex: none; border: 2px solid var(--ai-black); } .ai-section-dark .ai-pill { background: var(--ai-ink); color: var(--ai-white); border-color: var(--ai-yellow); } /* Píldoras clickeables (academia → productos) */ a.ai-pill { text-decoration: none; color: inherit; transition: transform var(--dur) var(--ease-bounce), box-shadow var(--dur) var(--ease-out); } a.ai-pill:hover { color: inherit; transform: translate(-2px,-2px); box-shadow: var(--shadow-hard); } @media (max-width: 820px) { .ai-teaser { grid-template-columns: 1fr; } } /* ========================================================================== EMPRESAS — tarjetas de oferta (más visual que las píldoras) ========================================================================== */ .ai-emp-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 12px; } .ai-emp-card { display: flex; flex-direction: column; gap: 10px; padding: 24px; background: rgba(255,255,255,0.04); border: 2px solid rgba(255,255,255,0.16); border-radius: var(--radius-lg); text-decoration: none; color: inherit; transition: transform var(--dur) var(--ease-bounce), border-color var(--dur-fast), background var(--dur-fast); } .ai-emp-card:hover { transform: translateY(-4px); border-color: var(--ai-yellow); background: rgba(237,182,29,0.09); } /* Tarjeta con enlace-cubierta + botón de video encima (home empresas). */ .ai-emp-card { position: relative; } .ai-emp-cover { position: absolute; inset: 0; z-index: 1; } .ai-emp-card > .ai-emp-ico, .ai-emp-card > h3, .ai-emp-card > p { position: relative; z-index: 2; pointer-events: none; } /* margin-top:auto empuja el botón al fondo de la tarjeta: como las 4 tarjetas tienen igual alto (grid), así los botones «Ver en video» quedan alineados aunque las descripciones tengan distinto número de líneas. */ .ai-emp-card .ai-emp-video { position: relative; z-index: 3; align-self: flex-start; margin-top: auto; } .ai-emp-ico { width: 50px; height: 50px; border-radius: 50%; background: var(--ai-yellow); color: var(--ai-black); display: flex; align-items: center; justify-content: center; flex: none; } .ai-emp-card h3 { margin: 0; color: var(--ai-white); font-size: 1.15rem; } .ai-emp-card p { margin: 0; color: rgba(255,255,255,0.72); font-size: 0.875rem; line-height: 1.45; } @media (max-width: 820px) { .ai-emp-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 480px) { .ai-emp-grid { grid-template-columns: 1fr; } } /* ========================================================================== YOUTUBE — sección con el capítulo embebido (Los Impredecibles) ========================================================================== */ .ai-yt-embed { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 44px; align-items: center; } .ai-yt-embed h2 { color: var(--ai-white); font-size: clamp(2rem, 4vw, 2.75rem); margin: 8px 0 12px; line-height: 1.05; } .ai-yt-embed p { color: rgba(255,255,255,0.82); font-size: 1.125rem; } .ai-yt-frame { position: relative; aspect-ratio: 16/9; border: var(--border-heavy) solid var(--ai-yellow); border-radius: 12px; overflow: hidden; box-shadow: var(--shadow-hard); } .ai-yt-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } @media (max-width: 820px) { .ai-yt-embed { grid-template-columns: 1fr; } } /* Transcripción del reel (texto indexable para SEO/IA, plegado para no recargar). */ .ai-yt-transcript { max-width: 1000px; margin: 26px auto 0; border-top: 1px solid rgba(255,255,255,0.16); padding-top: 16px; } .ai-yt-transcript summary { cursor: pointer; font-weight: 700; color: var(--ai-yellow); font-size: 0.9rem; list-style: none; } .ai-yt-transcript summary::-webkit-details-marker { display: none; } .ai-yt-transcript summary::before { content: "+ "; } .ai-yt-transcript[open] summary::before { content: "– "; } .ai-yt-transcript > div { margin-top: 12px; } .ai-yt-transcript p { color: rgba(255,255,255,0.78); line-height: 1.75; font-size: 0.95rem; margin: 0; } /* ========================================================================== FRANJA YOUTUBE (pre-footer) ========================================================================== */ .ai-yt-strip { background: var(--ai-black); color: var(--ai-white); border-top: var(--border-heavy) solid var(--ai-yellow); padding: 40px 24px; } .ai-yt-inner { max-width: var(--container); margin: 0 auto; display: flex; flex-wrap: wrap; gap: 24px; align-items: center; justify-content: space-between; } .ai-yt-copy { display: flex; align-items: center; gap: 16px; } .ai-yt-copy > .ai-ico { color: var(--ai-yellow); } .ai-yt-copy h2 { color: var(--ai-white); margin: 2px 0 0; font-size: 1.6rem; } /* ========================================================================== PANEL SOCIAL (home) — banda amarilla con botones de redes ========================================================================== */ .ai-social-panel { background: var(--ai-yellow); color: var(--ai-black); padding: 40px 24px; text-align: center; border-top: var(--border-heavy) solid var(--ai-black); } .ai-social-panel-in { max-width: 960px; margin: 0 auto; } .ai-social-panel .ai-eyebrow { background: var(--ai-black); color: var(--ai-yellow); } .ai-social-panel h2 { font-size: clamp(2rem, 4vw, 2.75rem); margin: 8px 0 4px; } /* Home: iguala el tamaño de los títulos de sección (antes 48/44/40/35 dispares → todos ~2.75rem). */ .home .ai-section-paper > .wp-block-heading { font-size: clamp(2rem, 4vw, 2.75rem) !important; } .ai-social-panel .ai-social-sub { font-size: 1rem; margin: 0 0 22px; color: var(--ai-gray-900); } .ai-social-btns { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: 18px; } .ai-social-btn { display: inline-flex; align-items: center; gap: 10px; padding: 14px 24px; background: var(--ai-black); color: var(--ai-white); border: var(--border-heavy) solid var(--ai-black); border-radius: var(--radius-pill); font-family: var(--font-display); font-weight: 800; font-size: 0.95rem; text-decoration: none; box-shadow: var(--shadow-hard-sm); transition: transform var(--dur) var(--ease-bounce), box-shadow var(--dur) var(--ease-out); } .ai-social-btn:hover { color: var(--ai-white); transform: translate(-2px,-2px); box-shadow: var(--shadow-hard); } .ai-social-btn .ai-ico { color: var(--ai-yellow); } /* ========================================================================== FOOTER rico ========================================================================== */ body.ai-custom-footer #colophon { display: none; } .ai-footer { background: var(--ai-black); color: var(--ai-white); padding: 64px 24px 32px; } .ai-footer-in { max-width: var(--container); margin: 0 auto; display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: 36px; } .ai-footer-logo { height: 52px; width: auto; margin-bottom: 14px; } .ai-footer-brand .ai-hand { color: var(--ai-yellow); font-size: 1.5rem; margin: 0 0 8px; } .ai-footer-mini { font-size: 0.875rem; color: var(--ai-gray-300); line-height: 1.6; margin: 0 0 18px; max-width: 34ch; } .ai-footer-social { display: flex; gap: 12px; } .ai-footer-social a { width: 42px; height: 42px; border-radius: 50%; border: 2px solid var(--ai-white); display: flex; align-items: center; justify-content: center; color: var(--ai-white); transition: background var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast); } .ai-footer-social a:hover { background: var(--ai-yellow); border-color: var(--ai-yellow); color: var(--ai-black); } .ai-footer-col h4 { font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ai-yellow); margin: 0 0 14px; display: flex; align-items: center; gap: 6px; } .ai-footer-col p { font-size: 0.875rem; color: var(--ai-gray-300); line-height: 1.55; margin: 0 0 12px; } .ai-footer-col p strong { color: var(--ai-white); } .ai-footer-maps { color: var(--ai-gray-300); text-decoration: none; transition: color 0.15s; } .ai-footer-maps:hover, .ai-footer-maps:focus { color: var(--ai-yellow); text-decoration: underline; } .ai-footer-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 9px; } .ai-footer-col ul a { color: var(--ai-gray-300); text-decoration: none; font-size: 0.9375rem; } .ai-footer-col ul a:hover { color: var(--ai-yellow); } .ai-footer-contact li { display: flex; gap: 9px; align-items: flex-start; } .ai-footer-contact .ai-ico { color: var(--ai-yellow); margin-top: 2px; } .ai-footer-contact a span { color: var(--ai-gray-500); font-size: 0.8125rem; } .ai-footer-bottom { max-width: var(--container); margin: 40px auto 0; padding-top: 22px; border-top: 1px solid rgba(255,255,255,0.15); display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; font-size: 0.8125rem; color: var(--ai-gray-500); } @media (max-width: 860px) { .ai-footer-in { grid-template-columns: 1fr 1fr; } } @media (max-width: 520px) { .ai-footer-in { grid-template-columns: 1fr; } } /* ========================================================================== CARTELERA v2 — tarjeta de función + vista agenda (toggle) ========================================================================== */ .ai-cartelera-toggle { display: inline-flex; gap: 0; border: var(--border-heavy) solid var(--ai-black); border-radius: var(--radius-pill); overflow: hidden; margin: 0 0 24px; } .ai-cartelera-toggle button { display: inline-flex; align-items: center; gap: 7px; padding: 9px 18px; border: 0; cursor: pointer; background: var(--ai-white); color: var(--ai-black); font-family: var(--font-display); font-weight: 800; font-size: 0.9rem; } .ai-cartelera-toggle button.is-active { background: var(--ai-yellow); } .ai-cartelera-toggle button + button { border-left: 2px solid var(--ai-black); } .ai-cartelera { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 24px; align-items: start; } /* Tarjetas de igual alto por fila (independiente de cuánta info tenga cada una): el cuerpo con flex:1 estira y el pie (.ai-funcion-foot con margin-top:auto) queda abajo. La vista Agenda usa flex y no se ve afectada. */ .ai-cartelera:not(.is-agenda) { align-items: stretch; } /* Ocultar de verdad la vista inactiva: el atributo [hidden] debe ganar a display:grid/flex. */ .ai-cartelera[hidden], .ai-cal[hidden] { display: none !important; } /* Teaser del home: 3 columnas con filas completas (sin tarjetas huérfanas). */ .ai-cartelera--3:not(.is-agenda) { grid-template-columns: repeat(3, 1fr); } @media (max-width: 960px) { .ai-cartelera--3:not(.is-agenda) { grid-template-columns: repeat(2, 1fr); } .ai-cartelera--3 .ai-funcion:nth-child(n+5) { display: none; } /* 2 columnas → 4 eventos */ } @media (max-width: 600px) { .ai-cartelera--3:not(.is-agenda) { grid-template-columns: 1fr; } .ai-cartelera--3 .ai-funcion:nth-child(n+4) { display: none; } /* 1 columna → 3 eventos */ } .ai-funcion { display: flex; flex-direction: column; background: var(--ai-white); border: var(--border-heavy) solid var(--ai-black); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-hard-sm); transition: transform var(--dur) var(--ease-bounce), box-shadow var(--dur) var(--ease-out); } .ai-funcion:hover { transform: translate(-3px,-3px); box-shadow: var(--shadow-hard); } .ai-funcion-media { position: relative; background: #141210; border-bottom: 3px solid var(--ai-black); } /* «Pocas boletas» — cinta de urgencia (esquina superior de la tarjeta). */ .ai-pocas-ribbon { position: absolute; top: 10px; right: 10px; z-index: 3; display: inline-flex; align-items: center; gap: 5px; background: var(--ai-yellow); color: var(--ai-black); border: 2px solid var(--ai-black); border-radius: var(--radius-pill); font-family: var(--font-display); font-weight: 800; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; padding: 4px 11px; box-shadow: var(--shadow-hard-sm); } .ai-pocas-ribbon .ai-ico { color: var(--ai-black); } @keyframes ai-pocas-pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.06); } } .ai-pocas-ribbon { animation: ai-pocas-pulse 1.8s var(--ease-out) infinite; } /* Variante inline (ficha de evento / destacado). */ .ai-pocas-inline { display: inline-flex; align-items: center; gap: 6px; background: var(--ai-yellow); color: var(--ai-black); border: 2px solid var(--ai-black); border-radius: var(--radius-pill); font-family: var(--font-display); font-weight: 800; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.04em; padding: 5px 13px; } @media (prefers-reduced-motion: reduce) { .ai-pocas-ribbon { animation: none; } } .ai-funcion-media img { width: 100%; height: auto; display: block; } .ai-funcion-datechip { display: none; } /* Tarjeta sin foto (vista Tarjetas): banda con el color del género y la fecha grande. */ .ai-funcion-media.is-noimg { min-height: 116px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--gc, #3A3531), var(--ai-ink)); } .ai-funcion-media.is-noimg .ai-funcion-datechip { display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--ai-white); font-family: var(--font-display); font-weight: 800; line-height: 1; text-transform: uppercase; font-size: 0.8rem; letter-spacing: 0.05em; } .ai-funcion-media.is-noimg .ai-funcion-datechip b { font-size: 2.2rem; line-height: 0.9; } .ai-funcion-body { padding: 18px 20px 22px; display: flex; flex-direction: column; gap: 10px; flex: 1; } .ai-funcion-body h3 { margin: 0; font-size: 1.4rem; line-height: 1.05; } .ai-funcion-body h3 a { color: inherit; text-decoration: none; } .ai-funcion-body h3 a:hover { color: var(--ai-yellow-deep); } .ai-when-grid { align-self: flex-start; } .ai-when-agenda { display: none; } .ai-funcion-meta { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 0.875rem; color: var(--ai-gray-700); } .ai-funcion-meta .ai-meta-item { display: inline-flex; align-items: center; gap: 6px; } .ai-funcion-meta .ai-ico { color: var(--ai-yellow-deep); } .ai-funcion-meta a { color: inherit; text-decoration: underline; text-underline-offset: 2px; } .ai-funcion-meta a:hover { color: var(--ai-yellow-deep); } .ai-funcion-foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 4px; } .ai-price { font-family: var(--font-display); font-weight: 800; font-size: 1.1rem; display: inline-flex; align-items: center; gap: 7px; } .ai-price .ai-ico { color: var(--ai-yellow-deep); } .ai-btn-sm { display: inline-flex; align-items: center; gap: 6px; padding: 9px 18px; background: var(--ai-yellow); color: var(--ai-black); border: var(--border-heavy) solid var(--ai-black); border-radius: var(--radius-pill); font-family: var(--font-display); font-weight: 800; font-size: 0.85rem; text-decoration: none; box-shadow: var(--shadow-hard-sm); transition: transform var(--dur) var(--ease-bounce); } .ai-btn-sm:hover { color: var(--ai-black); transform: translate(-2px,-2px); } /* Vista AGENDA: filas compactas con bloque de fecha (ancho completo, sin cortes) */ .ai-cartelera.is-agenda { display: flex; flex-direction: column; gap: 12px; width: 100%; } .ai-cartelera.is-agenda .ai-funcion { flex-direction: row; align-items: stretch; width: 100%; max-width: 100%; } .ai-cartelera.is-agenda .ai-funcion-media { width: 88px; min-width: 88px; flex: 0 0 88px; border-bottom: 0; border-right: 3px solid var(--ai-black); background: var(--ai-yellow); display: flex; align-items: center; justify-content: center; padding: 0; } .ai-cartelera.is-agenda .ai-funcion-media img { display: none !important; } .ai-cartelera.is-agenda .ai-funcion-datechip { display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--ai-black); font-family: var(--font-display); font-weight: 700; line-height: 1; text-transform: uppercase; font-size: 0.72rem; letter-spacing: 0.05em; white-space: nowrap; } .ai-cartelera.is-agenda .ai-funcion-datechip b { font-size: 1.6rem; line-height: 0.9; } .ai-cartelera.is-agenda .ai-funcion-body { flex: 1 1 auto; min-width: 0; flex-direction: row; align-items: center; flex-wrap: wrap; gap: 6px 16px; padding: 12px 18px; } /* Título prominente en su propia línea (izquierda); etiquetas y meta debajo. */ .ai-cartelera.is-agenda .ai-funcion-body h3 { order: -1; flex: 1 1 100%; min-width: 0; font-size: 1.3rem; } .ai-cartelera.is-agenda .ai-funcion-tags { order: 1; align-self: center; } .ai-cartelera.is-agenda .ai-funcion-meta { order: 2; flex: 0 1 auto; } .ai-cartelera.is-agenda .ai-funcion-foot { order: 3; margin-left: auto; } .ai-cartelera.is-agenda .ai-when-grid { display: none; } .ai-cartelera.is-agenda .ai-when-agenda { display: inline-flex; } .ai-cartelera.is-agenda .ai-funcion-foot { margin-top: 0; flex: 0 0 auto; padding-top: 0; } @media (max-width: 640px) { .ai-cartelera.is-agenda .ai-funcion-body { padding: 12px 14px; gap: 8px 14px; } .ai-cartelera.is-agenda .ai-funcion-body h3 { flex: 1 1 100%; } .ai-cartelera.is-agenda .ai-funcion-foot { width: 100%; justify-content: space-between; } } /* ---- Etiquetas: género (color por tipo de show) y grupo / artista invitado ---- */ .ai-funcion-tags { display: flex; flex-wrap: wrap; gap: 6px; align-self: flex-start; } .ai-genero, .ai-tag-tipo { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-body); font-weight: 700; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.06em; padding: 3px 9px; border-radius: var(--radius-pill); white-space: nowrap; line-height: 1.3; } /* Género: pastilla blanca con borde y punto del color del género (legible con cualquier color). */ .ai-genero { background: var(--ai-white); color: var(--ai-ink); border: 2px solid var(--gc, var(--ai-gray-300)); } .ai-genero::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--gc, var(--ai-gray-500)); flex: none; } /* Grupo Acción Impro: distintivo discreto. */ .ai-tag-tipo--grupo { background: transparent; color: var(--ai-gray-700); border: 2px solid var(--ai-gray-300); } .ai-tag-tipo--grupo .ai-ico { color: var(--ai-gray-500); } /* Artista invitado: distintivo llamativo (negro + amarillo) para diferenciarlo. */ .ai-tag-tipo--invitado { background: var(--ai-black); color: var(--ai-yellow); border: 2px solid var(--ai-black); } .ai-tag-tipo--invitado .ai-ico { color: var(--ai-yellow); } /* Estudiantes Academia Creativa: pastilla cálida (amarillo suave + borde negro), tono académico y amable. */ .ai-tag-tipo--estudiantes { background: var(--ai-yellow-soft); color: var(--ai-black); border: 2px solid var(--ai-black); } .ai-tag-tipo--estudiantes .ai-ico { color: var(--ai-yellow-deep); } /* Acción Impro sobre fondo oscuro (destacado + ficha de evento): texto blanco y borde visible para que no se pierda (el gris se confundía con el negro). */ .ai-destacada .ai-tag-tipo--grupo, .ai-section-dark .ai-tag-tipo--grupo { color: var(--ai-white); border-color: rgba(255,255,255,0.55); } .ai-destacada .ai-tag-tipo--grupo .ai-ico, .ai-section-dark .ai-tag-tipo--grupo .ai-ico { color: var(--ai-white); } .ai-destacada .ai-genero { background: transparent; color: var(--ai-white); } /* Botón "Ver info" (eventos sin boletería). */ .ai-btn-sm--ghost { background: var(--ai-white); color: var(--ai-black); } /* En agenda, el chip de temporada usa letra más pequeña por el texto "Temp.". */ .ai-cartelera.is-agenda .ai-funcion.is-temporada .ai-funcion-datechip b { font-size: 0.95rem; } /* ========================================================================== VISTA CALENDARIO — grilla mensual (lunes a domingo) ========================================================================== */ .ai-cal { width: 100%; } .ai-cal-head { display: flex; align-items: center; justify-content: center; gap: 20px; margin: 0 0 16px; } .ai-cal-head strong { font-family: var(--font-display); font-weight: 800; font-size: 1.4rem; text-transform: capitalize; min-width: 200px; text-align: center; } .ai-cal-nav { width: 40px; height: 40px; border-radius: 50%; cursor: pointer; border: var(--border-heavy) solid var(--ai-black); background: var(--ai-white); color: var(--ai-black); font-size: 1.4rem; line-height: 1; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; transition: transform var(--dur) var(--ease-bounce), background var(--dur-fast); } .ai-cal-nav:hover { background: var(--ai-yellow); transform: translateY(-2px); } .ai-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; } .ai-cal-dow { text-align: center; font-family: var(--font-body); font-weight: 800; font-size: 0.75rem; letter-spacing: 0.08em; color: var(--ai-gray-500); padding: 4px 0 8px; text-transform: uppercase; } .ai-cal-cell { min-height: 92px; border: 2px solid var(--ai-gray-150); border-radius: 10px; padding: 6px; display: flex; flex-direction: column; gap: 4px; background: var(--ai-white); overflow: hidden; } .ai-cal-cell.is-empty { border: 0; background: transparent; } .ai-cal-cell.has-ev { border-color: var(--ai-black); box-shadow: var(--shadow-hard-sm); } .ai-cal-cell.is-today { border-color: var(--ai-yellow-deep); background: var(--ai-yellow-soft); } .ai-cal-num { font-family: var(--font-display); font-weight: 700; font-size: 0.9rem; color: var(--ai-gray-700); } .ai-cal-cell.is-today .ai-cal-num { color: var(--ai-yellow-deep); } .ai-cal-ev { display: flex; align-items: center; gap: 5px; text-decoration: none; font-size: 0.72rem; font-weight: 700; line-height: 1.15; color: var(--ai-ink); background: var(--ai-gray-100); border-left: 4px solid var(--gc, var(--ai-yellow)); border-radius: 4px; padding: 3px 5px; overflow: hidden; } .ai-cal-ev:hover { background: var(--ai-yellow); color: var(--ai-black); } .ai-cal-ev { white-space: nowrap; text-overflow: ellipsis; } .ai-cal-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--gc, var(--ai-yellow)); flex: none; } @media (max-width: 720px) { .ai-cal-grid { gap: 3px; } .ai-cal-cell { min-height: 62px; padding: 3px; border-radius: 7px; } .ai-cal-num { font-size: 0.75rem; } /* En móvil el chip se reduce a un punto de color; el título va en el title/tap. */ .ai-cal-ev { padding: 2px; font-size: 0; gap: 0; border-left-width: 0; background: transparent; justify-content: center; } .ai-cal-dot { width: 10px; height: 10px; } .ai-cal-head strong { font-size: 1.1rem; min-width: 140px; } } /* ========================================================================== PÁGINA INDIVIDUAL DE EVENTO (single funcion) — ficha de info ========================================================================== */ /* Imagen limpia arriba (banner completo) + info debajo, tipo tarjeta. */ .ai-evento-hero { padding: 48px 24px; } .ai-evento-hero-in { max-width: 920px; margin: 0 auto; display: flex; flex-direction: column; gap: 26px; } .ai-evento-hero-media { border: var(--border-heavy) solid var(--ai-yellow); border-radius: 14px; overflow: hidden; box-shadow: var(--shadow-hard); background: var(--ai-ink); } .ai-evento-hero-media img { width: 100%; height: auto; object-fit: contain; display: block; } .ai-evento-title { color: var(--ai-white); font-size: clamp(1.8rem, 4vw, 3rem); line-height: 1.05; margin: 8px 0 4px; } .ai-evento-datos { list-style: none; margin: 14px 0 26px; padding: 0; display: flex; flex-wrap: wrap; gap: 12px 28px; } .ai-evento-datos li { display: flex; align-items: center; gap: 10px; color: var(--ai-white); font-size: 1.1rem; } .ai-evento-datos .ai-ico { color: var(--ai-yellow); flex: none; } .ai-evento-datos a { color: var(--ai-yellow); text-decoration: underline; text-underline-offset: 3px; } .ai-evento-cta { display: flex; flex-wrap: wrap; gap: 14px; } .ai-evento-cuerpo { padding: 56px 24px; } .ai-evento-cuerpo-in { max-width: 760px; margin: 0 auto; font-size: 1.0625rem; line-height: 1.7; } .ai-evento-cuerpo-in > * { margin-bottom: 1em; } .ai-evento-volver { max-width: 760px; margin: 0 auto 64px; padding: 0 24px; } .ai-evento-volver a { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; text-decoration: none; color: var(--ai-black); } .ai-evento-volver a:hover { color: var(--ai-yellow-deep); } .ai-evento-volver .ai-ico { transform: rotate(180deg); } /* ========================================================================== ACADEMIA CREATIVA — micrositio (beneficios, cifras, ruta de niveles) ========================================================================== */ /* Cifras */ .ai-cifras { display: flex; flex-wrap: wrap; gap: 20px 52px; justify-content: center; } .ai-cifras > div { text-align: center; min-width: 120px; } .ai-cifras strong { display: block; font-family: var(--font-display); font-weight: 800; font-size: clamp(2.2rem, 4vw, 3rem); line-height: 1; color: var(--ai-yellow-deep); } .ai-cifras span { font-size: 0.95rem; color: var(--ai-gray-700); } .ai-section-dark .ai-cifras strong { color: var(--ai-yellow); } .ai-section-dark .ai-cifras span { color: var(--ai-gray-300); } /* Beneficios de la impro — tarjetas con ícono */ .ai-benef-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } @media (max-width: 820px) { .ai-benef-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 520px) { .ai-benef-grid { grid-template-columns: 1fr; } } .ai-benef { background: var(--ai-white); border: var(--border-heavy) solid var(--ai-black); border-radius: var(--radius-lg); padding: 22px 24px; box-shadow: var(--shadow-hard-sm); transition: transform var(--dur) var(--ease-bounce), box-shadow var(--dur) var(--ease-out); } .ai-benef:hover { transform: translate(-3px,-3px); box-shadow: var(--shadow-hard); } .ai-benef-ico { width: 52px; height: 52px; border-radius: 50%; background: var(--ai-yellow); color: var(--ai-black); display: flex; align-items: center; justify-content: center; border: var(--border-heavy) solid var(--ai-black); margin-bottom: 14px; } /* !important: el tema mete margin-top a los encabezados; aquí los queremos pegados. */ .ai-benef h3 { margin: 0 0 6px !important; font-size: 1.15rem; } .ai-benef p { margin: 0 !important; font-size: 0.95rem; color: var(--ai-gray-700); line-height: 1.55; } /* Ruta de aprendizaje por niveles */ .ai-ruta { display: grid; gap: 16px; } .ai-ruta-nivel { display: flex; gap: 20px; align-items: flex-start; background: var(--ai-white); border: var(--border-heavy) solid var(--ai-black); border-radius: var(--radius-lg); padding: 20px 24px; box-shadow: var(--shadow-hard-sm); transition: transform var(--dur) var(--ease-bounce), box-shadow var(--dur) var(--ease-out); } /* Hover de las tarjetas de proceso (Cómo trabajamos / ruta de Academia); no en la línea de tiempo histórica. */ .ai-ruta:not(.ai-ruta--hist) .ai-ruta-nivel:hover { transform: translate(-3px,-3px); box-shadow: var(--shadow-hard); } .ai-ruta-num { font-family: var(--font-display); font-weight: 800; font-size: 2.2rem; color: var(--ai-yellow-deep); line-height: 1; flex: none; min-width: 42px; } .ai-ruta-cuerpo h3 { margin: 0 0 4px !important; font-size: 1.25rem; } .ai-ruta-cuerpo p { margin: 0 0 8px !important; color: var(--ai-gray-700); } .ai-ruta-talleres { display: flex; flex-wrap: wrap; gap: 8px; } .ai-ruta-talleres a, .ai-ruta-talleres span { display: inline-block; background: var(--ai-yellow-soft); border: 2px solid var(--ai-black); border-radius: var(--radius-pill); padding: 4px 12px; font-size: 0.85rem; font-weight: 700; text-decoration: none; color: var(--ai-black); } /* !important en color: Kadence pinta el hover de enlaces con su amarillo de paleta (naranja) y con más especificidad; forzamos negro para no perder legibilidad. */ .ai-ruta-talleres a:hover, .ai-ruta-talleres a:focus { background: var(--ai-yellow); color: var(--ai-black) !important; text-decoration: none; } @media (max-width: 560px) { .ai-ruta-nivel { flex-direction: column; gap: 8px; } } /* Entrenadores creativos — fotos redondas enlazadas a Instagram (filas parejas) */ .ai-entrenadores { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px 18px; max-width: 720px; margin-left: auto; margin-right: auto; } @media (max-width: 700px) { .ai-entrenadores { grid-template-columns: repeat(2, 1fr); } } .ai-entrenador { text-align: center; } .ai-entrenador a { text-decoration: none; color: inherit; display: inline-block; } /* Foto como imagen de fondo (evita el lazy-load de LiteSpeed que dejaba el en placeholder). */ .ai-entrenador-foto { width: 128px; height: 128px; border-radius: 50%; overflow: hidden; display: block; margin: 0 auto 12px; border: var(--border-heavy) solid var(--ai-black); background-color: var(--ai-yellow); background-size: cover; background-position: center top; transition: transform var(--dur) var(--ease-bounce), border-color var(--dur-fast); } .ai-entrenador-foto img { width: 100%; height: 100%; object-fit: cover; display: block; } .ai-entrenador a:hover .ai-entrenador-foto { transform: translateY(-4px); border-color: var(--ai-yellow-deep); box-shadow: var(--shadow-hard-sm); } .ai-entrenador h4 { margin: 0 0 2px !important; font-size: 1rem; color: var(--ai-gray-900); } .ai-entrenador-ig { font-size: 0.82rem; color: var(--ai-gray-500); display: inline-flex; align-items: center; gap: 4px; } .ai-entrenador-ig .ai-ico { color: var(--ai-yellow-deep); } .ai-entrenador a:hover .ai-entrenador-ig { color: var(--ai-yellow-deep); } /* Avatar sin foto todavía: círculo amarillo con la inicial */ .ai-entrenador-foto--vacia { display: flex; align-items: center; justify-content: center; background-color: var(--ai-yellow-soft); } .ai-ent-inicial { font-family: var(--font-display); font-weight: 800; font-size: 2.4rem; color: var(--ai-yellow-deep); line-height: 1; } /* ========================================================================== WHATSAPP FLOTANTE — servicio al cliente (boletería y talleres) ========================================================================== */ .ai-whatsapp-fab { position: fixed; right: 20px; bottom: 20px; z-index: 9999; display: inline-flex; align-items: center; gap: 10px; padding: 12px 18px; background: var(--ai-yellow); color: var(--ai-black); border: var(--border-heavy) solid var(--ai-black); border-radius: var(--radius-pill); font-family: var(--font-display); font-weight: 800; font-size: 0.9375rem; text-decoration: none; box-shadow: var(--shadow-hard-sm); transition: transform var(--dur) var(--ease-bounce), box-shadow var(--dur) var(--ease-out); } .ai-whatsapp-fab:hover { color: var(--ai-black); transform: translate(-2px, -2px); box-shadow: var(--shadow-hard); } @media (max-width: 767px) { .ai-whatsapp-fab span { display: none; } /* solo el ícono en móvil */ .ai-whatsapp-fab { padding: 14px; } } /* ========================================================================== BANDA SOCIAL pre-footer ========================================================================== */ .ai-social-band { background: var(--ai-black); color: var(--ai-white); padding: 56px 24px; border-top: var(--border-heavy) solid var(--ai-yellow); } .ai-social-band-inner { max-width: var(--container); margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 32px; } .ai-social-band .ai-eyebrow { color: var(--ai-yellow); margin: 0 0 8px; } .ai-social-band h2 { color: var(--ai-white); margin: 0 0 8px; font-size: 2rem; } .ai-social-band .ai-social-sub { margin: 0; color: rgba(255,255,255,0.85); } .ai-social-links { display: flex; flex-wrap: wrap; gap: 12px; } .ai-social-links a { display: inline-block; padding: 12px 22px; border: var(--border-heavy) solid var(--ai-white); border-radius: var(--radius-pill); color: var(--ai-white); font-family: var(--font-display); font-weight: 800; text-decoration: none; transition: transform var(--dur) var(--ease-bounce), background var(--dur-fast) linear, color var(--dur-fast) linear; } .ai-social-links a:hover { background: var(--ai-yellow); border-color: var(--ai-yellow); color: var(--ai-black); transform: translateY(-2px); } /* ========================================================================== LANDING /enlaces — clon de Linktree para tráfico social ========================================================================== */ body.ai-enlaces-page #masthead, body.ai-enlaces-page .ai-header, body.ai-enlaces-page .ai-mnav, body.ai-enlaces-page .ai-skip, body.ai-enlaces-page #colophon, body.ai-enlaces-page .ai-social-band, body.ai-enlaces-page .ai-whatsapp-fab { display: none; } body.ai-enlaces-page { background: var(--ai-black); } body.ai-enlaces-page #inner-wrap, body.ai-enlaces-page .site { background: var(--ai-black); } .ai-enlaces { min-height: 100vh; max-width: 500px; margin: 0 auto; padding: 52px 22px 64px; text-align: center; color: var(--ai-white); } /* Hero: logo horizontal grande (protagonista), no dentro de un círculo. */ .ai-enlaces-hero { margin-bottom: 36px; } .ai-enlaces-logo { margin: 0 0 14px; line-height: 0; color: var(--ai-white); font-size: 2rem; } .ai-enlaces-logo img { width: clamp(210px, 72%, 300px); height: auto; display: block; margin: 0 auto; } .ai-enlaces .ai-enlaces-tag { color: var(--ai-yellow); font-family: var(--font-hand); font-size: 1.7rem; line-height: 1.1; margin: 0 0 10px; } .ai-enlaces p.ai-enlaces-bio { color: rgba(255,255,255,0.72); font-size: 0.95rem; line-height: 1.55; max-width: 32ch; margin: 0 auto !important; } .ai-enlaces-lista { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; } /* Kadence carga su CSS de contenido DESPUÉS del hijo y le mete padding-left al