/*
Theme Name: Shark Alliance
Theme URI: https://www.sharkaliance.com/
Author: JM Soluciones Grupales e Inmobiliarias
Author URI: https://www.sharkaliance.com/quienes-somos
Description: Tema WordPress personalizado para el programa empresarial Shark Alliance — Feria de Emprendedores, Capacitaciones y Programa Embajador. Integración WooCommerce + Pasarela Wompi + CTAs WhatsApp corporativo. Enfoque: seguridad nivel B/M/A implementado en functions.php, sin dependencias de frameworks pesados.
Version: 1.0.0
Requires at least: 6.4
Tested up to: 6.6
Requires PHP: 8.1
Tags: one-column, two-columns, right-sidebar, accessibility-ready, custom-colors, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, threaded-comments, translation-ready, e-commerce, woocommerce, business
Text Domain: shark-alliance
Domain Path: /languages
License: GNU General Public License v3.0
License URI: http://www.gnu.org/licenses/gpl-3.0.txt
*/
/* ==========================================================================
🚧 PROYECTO EN CONSTRUCCIÓN — ESTILOS BASE AÚN NO DISEÑADOS 🚧
--------------------------------------------------------------------------
Este archivo contiene ÚNICAMENTE la cabecera obligatoria que WordPress lee
para reconocer al tema. Los estilos reales (colores corporativos azul marino,
fuentes, layout, menú navegación, página feria, producto Savigel, CTAs WA)
se implementan en la siguiente fase después del visto bueno del cliente.
========================================================================== */
/* ==========================================================================
🎨 DISEÑO BASE — Tema Shark Alliance v1.0.0
--------------------------------------------------------------------------
Paleta colores corporativa extraída de la marca JM Soluciones:
· Azul marino #0f4c81 (principal)
· Azul medio #14548c (secundario)
· Turquesa #1fa4c5 (CTAs de oferta)
· Verde WA #25d366 (CTAs WhatsApp oficial)
· Verde 700 #15803d (hover WA)
· Texto base #1f2937
· Fondo gris #f7fafc
· Borde gris #e5e7eb
Tipografía: Inter (Google Fonts) · fallback system-ui (sin dependencias externas).
Layout máximo: 1200 px (margen izq/derecho automático, centrado).
========================================================================== */
/* ============================================
1. Variables CSS (paleta + layout + breakpoints)
============================================ */
:root {
--shark-c-primary: #0f4c81;
--shark-c-primary-600: #14548c;
--shark-c-primary-700: #0c3558;
--shark-c-accent: #1fa4c5;
--shark-c-accent-700: #38bdf8;
--shark-c-whatsapp: #25d366;
--shark-c-whatsapp-700: #15803d;
--shark-c-success: #0f766e;
--shark-c-text: #e2e8f0;
--shark-c-muted: #94a3b8;
--shark-c-subtle: #64748b;
--shark-c-bg: #071a2e;
--shark-c-bg-alt: #0a2540;
--shark-c-bg-muted: #0e2e4d;
--shark-c-border: rgba(245, 197, 24, 0.12);
--shark-c-white: #ffffff;
--shark-c-gold: #f5c518;
--shark-c-gold-600: #d4a90b;
--shark-c-gold-700: #a88206;
--shark-c-dark-bg: #071a2e;
--shark-c-dark-bg-2: #0a2540;
--shark-c-dark-border: rgba(245, 197, 24, 0.18);
--shark-c-nav-text: #cbd5e1;
--shark-c-nav-hover: var(--shark-c-gold);
--shark-rw: 1200px; /* Layout máximo */
--shark-px: 1.25rem; /* Padding horizontal móvil */
--shark-py: 4.5rem; /* Padding vertical secciones */
--shark-shadow-sm: 0 1px 2px rgba(3, 7, 18, .45), 0 1px 3px rgba(3, 7, 18, .55);
--shark-shadow-md: 0 14px 40px -16px rgba(3, 7, 18, .85);
--shark-shadow-dark: 0 12px 40px -12px rgba(7, 26, 46, .65), 0 2px 6px rgba(7, 26, 46, .4);
--shark-radius-sm: 6px;
--shark-radius-md: 12px;
--shark-radius-lg: 18px;
--shark-font: 'Inter', system-ui, -apple-system, BlinkMacSystemFont,
"Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
/* ============================================
2. Reset / base tipografía
============================================ */
html {
scroll-behavior: smooth;
scroll-padding-top: 110px;
}
@media (max-width: 639px) {
html {
scroll-padding-top: 80px;
}
}
html,
body {
font-family: var(--shark-font);
color: var(--shark-c-text);
background-color: var(--shark-c-bg);
line-height: 1.65;
font-size: 16px;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, h5, h6 {
font-family: var(--shark-font);
font-weight: 800;
line-height: 1.2;
color: var(--shark-c-primary-700);
margin: 0 0 1rem;
letter-spacing: -0.02em;
text-shadow: 0 2px 12px rgba(3, 7, 18, 0.55);
}
p { margin: 0 0 1.1rem; }
a {
color: var(--shark-c-accent);
font-weight: 600;
text-decoration: none;
transition: color .2s ease;
}
a:hover, a:focus {
color: var(--shark-c-gold);
text-decoration: underline;
}
/* Accesibilidad: lector pantalla solo textos */
.screen-reader-text {
border: 0;
clip: rect(1px, 1px, 1px, 1px);
clip-path: inset(50%);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
word-wrap: normal !important;
}
/* ============================================
3. Layout estructural del sitio
============================================ */
.shark-site {
width: 100%;
min-height: 100vh;
display: flex;
flex-direction: column;
background: var(--shark-c-bg);
}
.shark-site > main {
flex: 1 1 auto;
padding: 0;
}
.shark-home {
display: block;
width: 100%;
}
/* ============================================
3b. HEADER — Menú principal (FIXED, COLOR SÓLIDO NAVY siempre)
============================================ */
.shark-site-header {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 100;
width: 100%;
background: var(--shark-c-dark-bg);
border-bottom: 1px solid var(--shark-c-dark-border);
box-shadow: var(--shark-shadow-dark);
transition: box-shadow .25s ease, padding .25s ease, background-color .25s ease, border-bottom-color .25s ease;
}
.shark-site-header.is-scrolled {
background: var(--shark-c-dark-bg);
border-bottom: 1px solid var(--shark-c-dark-border);
box-shadow:
0 16px 50px -14px rgba(7, 26, 46, .9),
0 3px 10px rgba(7, 26, 46, .55);
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
.shark-header__inner {
max-width: var(--shark-rw);
margin: 0 auto;
padding: 0.95rem var(--shark-px);
display: flex;
align-items: center;
justify-content: space-between;
gap: 1.5rem;
}
.shark-site-header.is-scrolled .shark-header__inner {
padding-top: 0.65rem;
padding-bottom: 0.65rem;
}
/* ---------- Branding / Logo ---------- */
.shark-site-branding {
display: flex;
align-items: center;
flex: 0 0 auto;
min-width: 0;
}
.shark-site-branding a {
display: inline-flex;
align-items: center;
text-decoration: none;
}
.shark-site-branding .custom-logo,
.shark-site-branding__logo-img {
height: 52px;
width: auto;
max-width: 240px;
object-fit: contain;
transition: height .25s ease, transform .25s ease, filter .25s ease;
display: block;
}
.shark-site-header.is-scrolled .shark-site-branding .custom-logo,
.shark-site-header.is-scrolled .shark-site-branding__logo-img {
height: 44px;
}
.shark-site-branding__logo-link:hover .shark-site-branding__logo-img,
.shark-site-branding__logo-link:focus-visible .shark-site-branding__logo-img {
transform: translateY(-1px);
filter: drop-shadow(0 6px 12px rgba(245,197,24,.25));
}
@media (max-width: 768px) {
.shark-site-branding .custom-logo,
.shark-site-branding__logo-img {
height: 44px;
max-width: 190px;
}
.shark-site-header.is-scrolled .shark-site-branding .custom-logo,
.shark-site-header.is-scrolled .shark-site-branding__logo-img {
height: 40px;
}
}
.shark-site-title {
margin: 0;
font-size: 1.35rem;
font-weight: 900;
line-height: 1.1;
letter-spacing: -0.02em;
}
.shark-site-title a {
color: var(--shark-c-white);
text-decoration: none;
background: linear-gradient(90deg, var(--shark-c-white) 0%, var(--shark-c-gold) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.shark-site-description {
display: none;
}
/* ---------- Contenedor Navegación + CTA ---------- */
.shark-header__nav-wrap {
display: flex;
align-items: center;
gap: 1.25rem;
flex: 1 1 auto;
justify-content: flex-end;
}
.shark-nav--primary {
display: flex;
align-items: center;
}
.shark-menu--primary {
display: flex;
align-items: center;
gap: 0.25rem;
list-style: none;
margin: 0;
padding: 0;
}
.shark-menu-item {
position: relative;
}
/* Items padre de NIVEL 0 (barra superior desktop): link + botón caret MISMA FILA. No aplicar a submenús internos! */
.shark-menu-item--depth-0.shark-menu-item--has-children {
display: inline-flex;
align-items: center;
justify-content: flex-start;
flex-wrap: nowrap;
}
.shark-menu-item--depth-0.shark-menu-item--has-children > .shark-menu-caret-btn {
align-self: center;
}
/* Items padre DENTRO DE UN SUBMENÚ (1er nivel dropdown y siguientes):
1ª FILA = link + botón caret (NO wrap, misma fila)
2ª FILA = su SUB-SUBMENÚ HACIA ABAJO (wrap con 100%) */
.shark-submenu .shark-menu-item--has-children {
display: flex;
flex-direction: row;
align-items: stretch;
justify-content: flex-start;
flex-wrap: wrap;
width: 100%;
}
/* Link del item padre: sobrescribe width:100% heredado de .shark-submenu .shark-menu-link
para compartir fila con el botón caret. */
.shark-submenu .shark-menu-item--has-children > .shark-menu-link {
width: auto;
flex: 1 1 0;
min-width: 0;
align-self: center;
padding-right: 0.35rem;
}
/* Botón flecha dentro del dropdown: alineado BORDE DERECHO, CENTRADO VERTICAL. */
.shark-submenu .shark-menu-item--has-children > .shark-menu-caret-btn {
flex: 0 0 28px;
align-self: center;
justify-self: flex-end;
margin-right: 0.55rem;
margin-left: 0;
}
/* Sub-submenú: segunda fila HACIA ABAJO, 100% ancho. */
.shark-submenu .shark-menu-item--has-children > .shark-submenu {
flex: 0 0 100%;
width: 100%;
}
.shark-menu-link {
position: relative;
display: inline-flex;
align-items: center;
gap: 0.4rem;
padding: 0.6rem 0.95rem;
font-weight: 600;
font-size: 0.95rem;
color: var(--shark-c-nav-text);
text-decoration: none;
border-radius: var(--shark-radius-sm);
transition: color .2s ease, background-color .2s ease;
white-space: nowrap;
}
.shark-menu-link:hover,
.shark-menu-link:focus {
color: var(--shark-c-nav-hover);
background: rgba(245, 197, 24, 0.06);
text-decoration: none;
}
/* Item activo: subrayado dorado + color */
.shark-menu-item.is-active > .shark-menu-link {
color: var(--shark-c-gold);
}
.shark-menu-item.is-active > .shark-menu-link::after {
content: "";
position: absolute;
left: 0.95rem;
right: 0.95rem;
bottom: 0.35rem;
height: 2px;
background: linear-gradient(90deg, var(--shark-c-gold), var(--shark-c-gold-600));
border-radius: 2px;
}
/* Caret / flecha submenú */
.shark-menu-caret {
display: inline-block;
width: 0;
height: 0;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-top: 5px solid currentColor;
opacity: 0.75;
transform: translateY(1px);
transition: transform .2s ease;
}
/* Botón clickable amplio invisible (28x28) para abrir/cerrar submenús por CLICK (JM-style). */
.shark-menu-caret-btn {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
width: 28px;
height: 28px;
padding: 0;
margin: 0;
margin-right: -0.25rem;
margin-left: 0.15rem;
z-index: 2;
background: transparent;
border: 0;
color: currentColor;
cursor: pointer;
opacity: 0.75;
-webkit-tap-highlight-color: transparent;
box-sizing: border-box;
border-radius: var(--shark-radius-sm);
transition:
transform .2s ease,
opacity .2s ease,
color .2s ease,
background-color .2s ease;
}
.shark-menu-caret-btn:hover,
.shark-menu-caret-btn:focus {
color: var(--shark-c-gold);
opacity: 1;
background: rgba(245, 197, 24, 0.06);
outline: none;
}
.shark-menu-caret-btn .shark-menu-caret {
pointer-events: none;
}
.shark-menu-item--has-children:focus-within > .shark-menu-link + .shark-menu-caret-btn .shark-menu-caret,
.shark-menu-item--has-children.is-open > .shark-menu-caret-btn .shark-menu-caret {
transform: translateY(1px) rotate(180deg);
opacity: 1;
}
.shark-menu-item--has-children.is-open > .shark-menu-caret-btn {
color: var(--shark-c-gold);
opacity: 1;
background: rgba(245, 197, 24, 0.06);
}
/* ---------- Submenús (dropdown) ---------- */
.shark-submenu {
position: absolute;
top: 100%;
left: 0;
min-width: 240px;
list-style: none;
margin: 0.35rem 0 0;
padding: 0.5rem;
background: var(--shark-c-dark-bg-2);
border: 1px solid var(--shark-c-dark-border);
border-radius: var(--shark-radius-md);
box-shadow: var(--shark-shadow-dark);
opacity: 0;
visibility: hidden;
transform: translateY(8px);
transition: opacity .2s ease, transform .2s ease, visibility .2s ease;
z-index: 110;
}
/* Submenús SOLO POR CLICK (regla JM 23-sep). El trigger :hover queda DESACTIVADO. */
.shark-menu-item--has-children.is-open > .shark-submenu,
.shark-menu-item--has-children:focus-within > .shark-submenu {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.shark-submenu .shark-menu-link {
display: flex;
width: 100%;
padding: 0.55rem 0.75rem;
font-size: 0.9rem;
color: var(--shark-c-nav-text);
border-radius: var(--shark-radius-sm);
}
.shark-submenu .shark-menu-link:hover,
.shark-submenu .shark-menu-link:focus {
color: var(--shark-c-gold);
background: rgba(245, 197, 24, 0.08);
}
.shark-submenu .shark-menu-item.is-active > .shark-menu-link {
color: var(--shark-c-gold);
background: rgba(245, 197, 24, 0.10);
}
.shark-submenu .shark-menu-item.is-active > .shark-menu-link::after {
display: none;
}
/* Submenús anidados (2do, 3er, 4to nivel): ACORDEÓN VERTICAL EXPANDIDO */
.shark-submenu .shark-submenu {
position: static;
min-width: 0;
width: auto;
margin: 0;
padding: 0;
border-left: 0 solid transparent;
border-top: none;
border-right: none;
border-bottom: none;
border-radius: 0;
background: transparent;
box-shadow: none;
opacity: 0;
visibility: hidden;
transform: translateY(-6px);
max-height: 0;
overflow: hidden;
display: block;
transition: opacity .2s ease, transform .2s ease, visibility .2s ease, max-height .25s ease, margin .25s ease, padding .25s ease, border-width .25s ease;
z-index: 1;
}
.shark-submenu .shark-submenu .shark-submenu {
/* Se hereda margin/padding solo cuando está ABIERTO */
}
/* Submenús internos anidados (2º+ nivel): SOLO POR CLICK · .is-open */
.shark-submenu .shark-menu-item--has-children.is-open > .shark-submenu,
.shark-submenu .shark-menu-item--has-children:focus-within > .shark-submenu {
opacity: 1;
visibility: visible;
transform: translateY(0);
max-height: 1200px;
overflow: visible;
margin: 0.35rem 0 0.5rem 0.75rem;
padding: 0.35rem 0.35rem 0.35rem 0.75rem;
border-left: 2px solid var(--shark-c-dark-border);
background: rgba(255, 255, 255, 0.02);
}
.shark-submenu .shark-submenu .shark-menu-item--has-children.is-open > .shark-submenu,
.shark-submenu .shark-submenu .shark-menu-item--has-children:focus-within > .shark-submenu {
border-left-color: rgba(245, 197, 24, 0.35);
margin-left: 0.75rem;
}
/* (Rotación flecha caret en submenús internos abiertos) */
.shark-submenu .shark-menu-item--has-children.is-open > .shark-menu-caret-btn,
.shark-submenu .shark-menu-item--has-children:focus-within > .shark-menu-caret-btn {
opacity: 1;
}
.shark-submenu .shark-menu-item--has-children.is-open > .shark-menu-caret-btn .shark-menu-caret,
.shark-submenu .shark-menu-item--has-children:focus-within > .shark-menu-caret-btn .shark-menu-caret {
transform: translateY(1px) rotate(180deg);
opacity: 1;
}
.shark-menu-item--depth-1.is-active > .shark-menu-link::after {
display: none;
}
.shark-submenu {
max-height: none;
overflow: visible;
overflow-x: clip;
overflow-y: visible;
}
@media (min-width: 992px) {
.shark-submenu {
max-width: 320px;
}
}
/* ---------- Botón CTA (dorado) ---------- */
.shark-header__cta {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
}
.shark-btn--gold {
background: linear-gradient(135deg, var(--shark-c-gold) 0%, var(--shark-c-gold-600) 100%);
color: #0a2540;
border-color: var(--shark-c-gold);
padding: 0.65rem 1.2rem;
font-size: 0.9rem;
font-weight: 800;
border-radius: var(--shark-radius-md);
box-shadow: 0 6px 16px -6px rgba(245, 197, 24, 0.55);
}
.shark-btn--gold:hover {
background: linear-gradient(135deg, var(--shark-c-gold-600) 0%, var(--shark-c-gold-700) 100%);
border-color: var(--shark-c-gold-600);
color: #071a2e;
transform: translateY(-1px);
box-shadow: 0 10px 24px -8px rgba(245, 197, 24, 0.65);
}
/* ---------- Botón hamburguesa (oculto desktop) ---------- */
.shark-header__toggle {
display: none;
flex: 0 0 auto;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
padding: 0;
background: transparent;
border: 1px solid var(--shark-c-dark-border);
border-radius: var(--shark-radius-sm);
color: var(--shark-c-white);
cursor: pointer;
transition: background-color .2s ease, color .2s ease;
}
.shark-header__toggle:hover,
.shark-header__toggle:focus {
background: rgba(245, 197, 24, 0.08);
color: var(--shark-c-gold);
outline: none;
}
.shark-header__toggle[aria-expanded="true"] {
background: rgba(245, 197, 24, 0.12);
color: var(--shark-c-gold);
}
.shark-toggle-icon {
position: relative;
display: block;
width: 20px;
height: 2px;
background: currentColor;
border-radius: 2px;
transition: background-color .2s ease;
}
.shark-toggle-icon::before,
.shark-toggle-icon::after {
content: "";
position: absolute;
left: 0;
right: 0;
height: 2px;
background: currentColor;
border-radius: 2px;
transition: transform .25s ease, top .25s ease, opacity .2s ease;
}
.shark-toggle-icon::before { top: -6px; }
.shark-toggle-icon::after { top: 6px; }
.shark-header__toggle[aria-expanded="true"] .shark-toggle-icon {
background: transparent;
}
.shark-header__toggle[aria-expanded="true"] .shark-toggle-icon::before {
top: 0;
transform: rotate(45deg);
}
.shark-header__toggle[aria-expanded="true"] .shark-toggle-icon::after {
top: 0;
transform: rotate(-45deg);
}
/* ============================================
4. Botones reutilizables (CTAs)
============================================ */
.shark-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: .6rem;
padding: .85rem 1.4rem;
font-weight: 700;
font-size: 1rem;
line-height: 1.1;
border-radius: var(--shark-radius-md);
border: 2px solid transparent;
cursor: pointer;
text-align: center;
text-decoration: none !important;
transition: transform .18s ease, box-shadow .18s ease,
background-color .18s ease, color .18s ease, border-color .18s ease;
white-space: normal;
}
.shark-btn:focus-visible {
outline: 3px solid var(--shark-c-accent);
outline-offset: 2px;
}
.shark-btn:hover { transform: translateY(-1px); box-shadow: var(--shark-shadow-md); }
.shark-btn--primary {
background: var(--shark-c-primary);
color: var(--shark-c-white);
border-color: var(--shark-c-primary);
}
.shark-btn--primary:hover { background: var(--shark-c-primary-700); border-color: var(--shark-c-primary-700); color: var(--shark-c-white); }
.shark-btn--accent {
background: var(--shark-c-accent);
color: var(--shark-c-white);
border-color: var(--shark-c-accent);
}
.shark-btn--accent:hover { background: var(--shark-c-accent-700); border-color: var(--shark-c-accent-700); color: var(--shark-c-white); }
.shark-btn--ghost {
background: rgba(31, 164, 197, 0.08);
color: var(--shark-c-accent);
border-color: rgba(31, 164, 197, 0.55);
}
.shark-btn--ghost:hover {
background: var(--shark-c-accent);
color: var(--shark-c-white);
border-color: var(--shark-c-accent);
text-decoration: none;
}
.shark-btn--whatsapp {
background: var(--shark-c-whatsapp);
color: var(--shark-c-white);
border-color: var(--shark-c-whatsapp);
font-weight: 800;
}
.shark-btn--whatsapp:hover { background: var(--shark-c-whatsapp-700); border-color: var(--shark-c-whatsapp-700); color: var(--shark-c-white); }
.shark-btn--lg { padding: 1.2rem 2rem; font-size: 1.1rem; border-radius: var(--shark-radius-lg); }
/* ============================================
5. Secciones (wrapper interno común)
============================================ */
.shark-section__inner {
max-width: var(--shark-rw);
margin: 0 auto;
padding: var(--shark-py) var(--shark-px);
}
.shark-section__title {
font-size: clamp(1.9rem, 2.4vw + 1rem, 2.7rem);
text-align: center;
margin-bottom: 1rem;
}
.shark-section__lede {
text-align: center;
font-size: 1.05rem;
color: var(--shark-c-muted);
max-width: 780px;
margin: 0 auto 3rem;
}
/* ============================================
6. SECCIÓN · HERO PRINCIPAL (SOLO IMAGEN DE FONDO · 100% PANTALLA + MENÚ FLOTANTE)
============================================ */
.shark-hero {
position: relative;
background-color: var(--shark-c-dark-bg-2);
background-image: url('assets/images/hero-home-bg.png');
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
background-attachment: scroll;
color: var(--shark-c-white);
overflow: hidden;
isolation: isolate;
width: 100%;
min-height: 100vh;
min-height: 100dvh;
}
.shark-hero::before {
content: none;
display: none;
background: none;
background-image: none;
}
.shark-hero__inner {
position: relative;
z-index: 1;
max-width: var(--shark-rw);
margin: 0 auto;
padding: 0;
text-align: center;
width: 0;
height: 0;
overflow: hidden;
visibility: hidden;
}
/* Responsive Hero: 100% pantalla (incluye menú fixed flotante) · Centrado móvil */
@media (max-width: 1199px) {
.shark-hero {
min-height: 100vh;
min-height: 100dvh;
}
}
@media (max-width: 991px) {
.shark-hero {
min-height: 100vh;
min-height: 100dvh;
background-position: center center;
}
}
@media (max-width: 767px) {
.shark-hero {
min-height: 100vh;
min-height: 100dvh;
background-position: center center;
}
}
@media (max-width: 480px) {
.shark-hero {
min-height: 100vh;
min-height: 100dvh;
background-position: center center;
}
}
/* ============================================
6a.2 SECCIÓN NUEVA · FERIA DE EMPRENDEDORES DESPUÉS DEL HERO
(Título placa + Imagen grande + Botón "Inscríbete")
============================================ */
.shark-heroferia {
position: relative;
background-color: #030c1a;
background-image:
radial-gradient(1400px 520px at 50% -10%, rgba(245, 197, 24, 0.12), transparent 58%),
radial-gradient(1100px 460px at 50% 120%, rgba(15, 76, 129, 0.55), transparent 65%);
overflow: hidden;
}
.shark-heroferia::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background:
linear-gradient(180deg, rgba(3,12,26,0.55) 0%, rgba(3,12,26,0.10) 20%, rgba(3,12,26,0.10) 80%, rgba(3,12,26,0.65) 100%);
}
.shark-heroferia__inner {
position: relative;
z-index: 1;
max-width: 1160px;
margin: 0 auto;
padding: 4.5rem var(--shark-px) 5rem;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 2.25rem;
text-align: center;
}
/* Link wrapper (todo el bloque clickeable a /feria-de-emprendedores) */
.shark-heroferia__link {
position: relative;
width: 100%;
max-width: 1080px;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 2rem;
text-decoration: none !important;
color: inherit;
border: 0;
outline: none;
cursor: pointer;
transition: transform .28s ease;
}
.shark-heroferia__link:focus-visible {
outline: 2px solid rgba(245,197,24,.8);
outline-offset: 8px;
border-radius: 10px;
}
/* Título placa dorada "Feria de Emprendedores" */
.shark-heroferia__title {
margin: 0 auto;
}
/* Poster imagen grande con borde gradiente dorado-azul (igual que shark-feria) */
.shark-heroferia__poster {
margin: 0;
width: 100%;
max-width: 1040px;
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
.shark-heroferia__poster::before {
content: "";
position: absolute;
inset: -2px;
border-radius: 10px;
padding: 2px;
background: linear-gradient(135deg,
rgba(245, 197, 24, 0.95) 0%,
rgba(15, 76, 129, 0.78) 52%,
rgba(31, 164, 197, 0.72) 100%);
-webkit-mask:
linear-gradient(#000 0 0) content-box,
linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
z-index: 1;
pointer-events: none;
opacity: 0.96;
}
.shark-heroferia__img {
width: 100%;
height: auto;
display: block;
border-radius: 8px;
position: relative;
z-index: 0;
box-shadow:
0 0 70px -12px rgba(245, 197, 24, 0.16),
0 26px 72px -20px rgba(3, 7, 18, 0.97);
transition: transform .3s ease, box-shadow .3s ease, filter .3s ease;
will-change: transform;
}
/* =========================================================
HOVER / FOCUS · EFECTO ZOOM SUTIL (igual al resto del sitio)
=========================================================
Escalas super reducidas:
• Imagen → 1.8% scale (1.018) sutil, no pixelante
• Poster → 0.4% scale (1.004) borde gradiente siga alineado
• Botón → 2.5% scale (1.025) CTA más perceptible pero no exagerado
Combinado con el translateY(-3px / -1.5px) existente.
:focus-visible replica el hover para navegación teclado.
--------------------------------------------------------- */
.shark-heroferia__link:hover .shark-heroferia__poster,
.shark-heroferia__link:focus-visible .shark-heroferia__poster {
transform: scale(1.004);
}
.shark-heroferia__link:hover .shark-heroferia__img,
.shark-heroferia__link:focus-visible .shark-heroferia__img {
transform: translateY(-3px) scale(1.018);
filter: saturate(1.08) brightness(1.03);
box-shadow:
0 0 95px -10px rgba(245, 197, 24, 0.28),
0 34px 86px -22px rgba(3, 7, 18, 0.98);
}
.shark-heroferia__link:hover .shark-heroferia__btn,
.shark-heroferia__link:focus-visible .shark-heroferia__btn {
transform: translateY(-1.5px) scale(1.025);
filter: saturate(1.1);
box-shadow:
0 16px 34px -10px rgba(226, 183, 17, 0.65),
inset 0 1px 0 rgba(255, 255, 255, 0.34);
}
/* Base transforms para animar (inicializa la escala) */
.shark-heroferia__poster {
transition: transform .3s cubic-bezier(.22,.61,.36,1);
will-change: transform;
transform-origin: center center;
}
.shark-heroferia__btn {
transition:
transform .26s cubic-bezier(.22,.61,.36,1),
box-shadow .26s cubic-bezier(.22,.61,.36,1),
filter .26s ease,
background .26s ease !important;
will-change: transform;
transform-origin: center center;
}
/* Botón Inscríbete (usa base .shark-btn--gold-2xl pero más ancho) */
.shark-heroferia__btn {
width: min(980px, 100%) !important;
padding: 0.95rem 2.5rem !important;
font-size: clamp(0.96rem, 0.8vw + 0.86rem, 1.14rem) !important;
letter-spacing: 0.09em !important;
line-height: 1.1 !important;
}
/* Responsive NUEVA SECCIÓN post-hero */
@media (max-width: 991px) {
.shark-heroferia__inner {
max-width: 900px;
padding: 3.75rem var(--shark-px) 4.25rem;
gap: 2rem;
}
.shark-heroferia__link {
max-width: 880px;
gap: 1.8rem;
}
.shark-heroferia__poster,
.shark-heroferia__btn {
max-width: 860px;
}
}
@media (max-width: 767px) {
.shark-heroferia__inner {
max-width: 680px;
padding: 3rem var(--shark-px) 3.5rem;
gap: 1.75rem;
}
.shark-heroferia__link {
max-width: 100%;
gap: 1.6rem;
}
.shark-heroferia__poster,
.shark-heroferia__btn {
max-width: 100%;
}
.shark-heroferia__btn {
padding: 0.9rem 2rem !important;
font-size: 1.02rem !important;
}
}
@media (max-width: 480px) {
.shark-heroferia__inner {
padding: 2.4rem var(--shark-px) 2.9rem;
gap: 1.5rem;
}
.shark-heroferia__link {
gap: 1.4rem;
}
.shark-heroferia__btn {
padding: 0.85rem 1.6rem !important;
font-size: 0.96rem !important;
letter-spacing: 0.07em !important;
}
}
/* ============================================
6b. SECCIÓN · SUB-CTA "SUBE TU EMPRENDIMIENTO"
(Refuerzo visual debajo del Hero + Nueva Feria)
FIX 30-sep · color background #000000 (negro puro)
FIX 30-sep · SEPARADORES SUPERIOR + INFERIOR 1px gradiente
::before = separador SUPERIOR (igual al que le gustó al user)
::after = separador INFERIOR (el mismo gradiente invertido)
El overlay de opacidad que antes estaba en ::before ahora
vive en .shark-subcta__inner::before para no colisionar.
============================================ */
.shark-subcta {
position: relative;
background-color: #000000; /* ← negro puro (arriba es azul #030c1a) */
background-image:
radial-gradient(1500px 560px at 110% -30%, rgba(245, 197, 24, 0.14), transparent 62%),
radial-gradient(1300px 620px at -10% 130%, rgba(31, 164, 197, 0.32), transparent 68%),
linear-gradient(180deg, #000000 0%, #050910 55%, #000000 100%);
overflow: hidden;
}
/* SEPARADOR SUPERIOR 1px gradiente (dorado → blanco → azul)
El que le gustó al user en la captura. */
.shark-subcta::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(90deg,
transparent 0%,
rgba(245,197,24,0.70) 18%,
rgba(255,255,255,0.35) 50%,
rgba(31,164,197,0.72) 82%,
transparent 100%);
z-index: 3;
pointer-events: none;
}
/* SEPARADOR INFERIOR 1px gradiente · Mismo patrón.
(invertido de opcional, aquí se mantiene el mismo orden para consistencia) */
.shark-subcta::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(90deg,
transparent 0%,
rgba(245,197,24,0.70) 18%,
rgba(255,255,255,0.35) 50%,
rgba(31,164,197,0.72) 82%,
transparent 100%);
z-index: 3;
pointer-events: none;
}
/* Overlay de opacidad (antes ::before, ahora en inner::before
para no colisionar con los separadores). */
.shark-subcta__inner::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background: linear-gradient(180deg,
rgba(0, 0, 0, 0.55) 0%,
rgba(0, 0, 0, 0.12) 22%,
rgba(0, 0, 0, 0.12) 78%,
rgba(0, 0, 0, 0.62) 100%);
z-index: 0;
}
.shark-subcta__inner {
position: relative;
z-index: 1;
max-width: var(--shark-rw);
margin: 0 auto;
padding: 2rem var(--shark-px);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
gap: 1.15rem;
}
.shark-subcta__title {
font-size: clamp(1.45rem, 2.6vw + 0.4rem, 2.6rem);
font-weight: 900;
line-height: 1.05;
letter-spacing: -0.005em;
text-transform: uppercase;
color: #ffffff;
margin: 0;
text-shadow:
0 8px 24px rgba(3, 7, 18, 0.85),
0 2px 6px rgba(3, 7, 18, 0.75),
0 0 1px rgba(255, 255, 255, 0.18);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.shark-btn--gold-2xl {
display: inline-flex;
align-items: center;
justify-content: center;
width: min(620px, 100%);
padding: 0.75rem 2rem;
font-size: clamp(0.85rem, 0.5vw + 0.78rem, 0.98rem);
font-weight: 900;
letter-spacing: 0.06em;
text-transform: uppercase;
color: #030712;
background: linear-gradient(180deg, #d4a90c 0%, #b8890f 100%);
border: 1px solid #a88206;
border-radius: 6px;
box-shadow:
0 10px 24px -10px rgba(212, 169, 12, 0.48),
inset 0 1px 0 rgba(255, 255, 255, 0.28);
text-decoration: none;
cursor: pointer;
transition: transform .22s ease, box-shadow .22s ease, filter .22s ease, background .22s ease;
font-family: var(--shark-font);
line-height: 1;
}
.shark-btn--gold-2xl:hover,
.shark-btn--gold-2xl:focus {
background: linear-gradient(180deg, #e2b711 0%, #c49a1c 100%);
transform: translateY(-1px);
filter: saturate(1.1);
box-shadow:
0 14px 28px -10px rgba(226, 183, 17, 0.6),
inset 0 1px 0 rgba(255, 255, 255, 0.32);
text-decoration: none;
outline: none;
color: #030712;
}
.shark-btn--gold-2xl:active {
transform: translateY(0);
box-shadow:
0 5px 12px -4px rgba(184, 137, 15, 0.45),
inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
@media (max-width: 639px) {
.shark-subcta__inner {
padding: 1.5rem var(--shark-px);
gap: 0.95rem;
}
.shark-subcta__title {
font-size: clamp(1.3rem, 4.8vw + 0.1rem, 1.85rem);
}
.shark-btn--gold-2xl {
padding: 0.68rem 1.5rem;
font-size: 0.85rem;
letter-spacing: 0.05em;
}
}
/* ============================================
6c. SECCIÓN · QUIENES SOMOS (Logo + Texto dorado)
============================================ */
.shark-quienes {
background-color: #000000;
position: relative;
overflow: hidden;
}
.shark-quienes::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background:
radial-gradient(700px 400px at 12% 50%, rgba(15, 76, 129, 0.28), transparent 65%),
radial-gradient(800px 500px at 88% 50%, rgba(31, 164, 197, 0.15), transparent 65%);
}
.shark-quienes__inner {
position: relative;
z-index: 1;
max-width: 1040px;
margin: 0 auto;
padding: 5rem var(--shark-px);
display: grid;
grid-template-columns: 380px 1fr;
gap: 3.5rem 4rem;
align-items: center;
}
.shark-quienes__media {
margin: 0;
width: 100%;
max-width: 380px;
aspect-ratio: 1 / 1;
justify-self: center;
position: relative;
}
.shark-quienes__media::before {
content: "";
position: absolute;
inset: 0;
border-radius: 50%;
padding: 3px;
background:
conic-gradient(from 180deg at 50% 50%,
rgba(245, 197, 24, 0.95) 0deg,
rgba(184, 137, 15, 0.6) 120deg,
rgba(255, 255, 255, 0.25) 200deg,
rgba(212, 169, 12, 0.95) 360deg);
-webkit-mask:
linear-gradient(#000 0 0) content-box,
linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
box-shadow:
0 0 50px 0 rgba(245, 197, 24, 0.22),
0 0 100px -10px rgba(245, 197, 24, 0.35),
0 18px 50px -12px rgba(3, 7, 18, 0.9);
pointer-events: none;
z-index: 1;
}
.shark-quienes__img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
border-radius: 50%;
display: block;
filter: drop-shadow(0 10px 30px rgba(3, 7, 18, 0.85));
position: relative;
z-index: 0;
}
.shark-quienes__content {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
gap: 1.75rem;
max-width: 620px;
}
.shark-quienes__title-wrap {
width: 100%;
display: flex;
justify-content: flex-start;
}
.shark-btn--gold-section {
display: inline-flex;
align-items: center;
justify-content: center;
width: min(520px, 100%);
padding: 0.7rem 2.2rem;
font-size: 0.98rem;
font-weight: 900;
letter-spacing: 0.03em;
text-transform: none;
color: #030712;
background: linear-gradient(180deg, #d4a90c 0%, #b8890f 100%);
border: 1px solid #a88206;
border-radius: 6px;
box-shadow:
0 10px 26px -10px rgba(212, 169, 12, 0.55),
inset 0 1px 0 rgba(255, 255, 255, 0.3);
text-decoration: none;
cursor: default;
pointer-events: none;
transition: none;
line-height: 1;
margin: 0;
}
.shark-btn--gold-section:hover {
text-decoration: none;
color: #030712;
}
.shark-quienes__desc {
margin: 0;
padding: 0;
color: #f5c518;
font-size: clamp(1.15rem, 1.05vw + 0.95rem, 1.5rem);
line-height: 1.85;
font-weight: 500;
letter-spacing: 0.01em;
text-align: left;
text-shadow: 0 4px 18px rgba(3, 7, 18, 0.78);
}
/* Responsive QUIENES SOMOS */
@media (max-width: 991px) {
.shark-quienes__inner {
grid-template-columns: 320px 1fr;
max-width: 880px;
padding: 4rem var(--shark-px);
gap: 3rem 3rem;
}
.shark-quienes__media {
max-width: 320px;
}
.shark-quienes__content {
gap: 1.5rem;
}
.shark-btn--gold-section {
width: min(460px, 100%);
font-size: 0.92rem;
}
}
@media (max-width: 767px) {
.shark-quienes__inner {
grid-template-columns: 1fr;
max-width: 640px;
padding: 3.25rem var(--shark-px);
gap: 2rem;
text-align: center;
}
.shark-quienes__media {
max-width: 280px;
}
.shark-quienes__content {
align-items: center;
justify-content: center;
gap: 1.5rem;
max-width: 100%;
}
.shark-quienes__title-wrap {
justify-content: center;
}
.shark-btn--gold-section {
width: min(420px, 100%);
padding: 0.65rem 1.75rem;
font-size: 0.88rem;
}
.shark-quienes__desc {
text-align: center;
font-size: clamp(1.02rem, 1.5vw + 0.85rem, 1.2rem);
line-height: 1.75;
}
}
@media (max-width: 480px) {
.shark-quienes__inner {
padding: 2.5rem var(--shark-px);
gap: 1.75rem;
}
.shark-quienes__media {
max-width: 240px;
}
.shark-quienes__content {
gap: 1.25rem;
}
.shark-btn--gold-section {
width: 100%;
font-size: 0.85rem;
padding: 0.6rem 1.5rem;
}
.shark-quienes__desc {
font-size: 1rem;
line-height: 1.7;
}
}
/* ============================================
6d. SECCIÓN · PROMO POSTER Gran Empresa + Botón oferta
============================================ */
.shark-promo {
background-color: #000000;
position: relative;
overflow: hidden;
}
.shark-promo::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background:
radial-gradient(900px 500px at 50% 0%, rgba(15, 76, 129, 0.22), transparent 65%),
radial-gradient(900px 500px at 50% 100%, rgba(31, 164, 197, 0.12), transparent 65%);
}
.shark-promo__inner {
position: relative;
z-index: 1;
max-width: 1040px;
margin: 0 auto;
padding: 4.5rem var(--shark-px) 5rem;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 2.25rem;
}
.shark-promo__poster {
margin: 0;
width: 100%;
max-width: 546px;
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.shark-promo__poster::before {
content: "";
position: absolute;
inset: -4px;
border-radius: 14px;
padding: 2px;
background: linear-gradient(135deg,
rgba(245, 197, 24, 0.95) 0%,
rgba(15, 76, 129, 0.8) 45%,
rgba(31, 164, 197, 0.75) 100%);
-webkit-mask:
linear-gradient(#000 0 0) content-box,
linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
z-index: 1;
pointer-events: none;
opacity: 0.95;
}
.shark-promo__img {
width: 100%;
height: auto;
display: block;
border-radius: 12px;
position: relative;
z-index: 0;
box-shadow:
0 0 60px -10px rgba(245, 197, 24, 0.18),
0 20px 60px -12px rgba(3, 7, 18, 0.95);
}
.shark-promo__cta-wrap {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.shark-btn--gold-offer {
display: inline-flex;
align-items: center;
justify-content: center;
width: min(820px, 100%);
padding: 0.85rem 2.5rem;
font-size: clamp(0.9rem, 0.6vw + 0.8rem, 1.08rem);
font-weight: 900;
letter-spacing: 0.025em;
text-transform: none;
color: #030712;
background: linear-gradient(180deg, #d4a90c 0%, #b8890f 100%);
border: 1px solid #a88206;
border-radius: 6px;
box-shadow:
0 12px 28px -10px rgba(212, 169, 12, 0.55),
inset 0 1px 0 rgba(255, 255, 255, 0.3);
text-decoration: none;
cursor: pointer;
transition: transform .2s ease, box-shadow .2s ease, filter .2s ease, background .2s ease;
line-height: 1.2;
text-align: center;
font-family: var(--shark-font);
}
.shark-btn--gold-offer:hover,
.shark-btn--gold-offer:focus {
background: linear-gradient(180deg, #e2b711 0%, #c49a1c 100%);
transform: translateY(-1.5px);
filter: saturate(1.12);
box-shadow:
0 16px 36px -10px rgba(226, 183, 17, 0.7),
inset 0 1px 0 rgba(255, 255, 255, 0.35);
color: #030712;
text-decoration: none;
outline: none;
}
.shark-btn--gold-offer:active {
transform: translateY(0);
box-shadow:
0 6px 16px -4px rgba(184, 137, 15, 0.5),
inset 0 1px 0 rgba(255, 255, 255, 0.22);
}
/* Responsive PROMO POSTER */
@media (max-width: 991px) {
.shark-promo__inner {
max-width: 880px;
padding: 3.75rem var(--shark-px) 4.25rem;
gap: 2rem;
}
.shark-promo__poster {
max-width: 448px;
}
}
@media (max-width: 767px) {
.shark-promo__inner {
max-width: 640px;
padding: 3rem var(--shark-px) 3.5rem;
gap: 1.75rem;
}
.shark-promo__poster {
max-width: 364px;
}
.shark-btn--gold-offer {
padding: 0.78rem 2rem;
font-size: 0.95rem;
}
}
@media (max-width: 480px) {
.shark-promo__inner {
padding: 2.25rem var(--shark-px) 2.75rem;
gap: 1.5rem;
}
.shark-promo__poster {
max-width: 92%;
}
.shark-btn--gold-offer {
width: 100%;
padding: 0.72rem 1.5rem;
font-size: 0.88rem;
line-height: 1.3;
letter-spacing: 0.015em;
}
}
/* ============================================
6e. SECCIÓN · GALERÍA 3 IMÁGENES (vertical)
============================================ */
.shark-gallery3 {
background-color: #000000;
position: relative;
overflow: hidden;
}
.shark-gallery3::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background:
radial-gradient(1000px 600px at 50% 0%, rgba(15, 76, 129, 0.2), transparent 65%),
radial-gradient(1000px 600px at 50% 100%, rgba(31, 164, 197, 0.1), transparent 65%);
}
.shark-gallery3__inner {
position: relative;
z-index: 1;
max-width: 1000px;
margin: 0 auto;
padding: 4.5rem var(--shark-px) 5rem;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 2.75rem;
}
.shark-gallery3__item {
margin: 0;
width: 100%;
max-width: 900px;
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
.shark-gallery3__item::before {
content: "";
position: absolute;
inset: -3px;
border-radius: 16px;
padding: 2px;
background: linear-gradient(135deg,
rgba(245, 197, 24, 0.95) 0%,
rgba(15, 76, 129, 0.75) 50%,
rgba(31, 164, 197, 0.7) 100%);
-webkit-mask:
linear-gradient(#000 0 0) content-box,
linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
z-index: 1;
pointer-events: none;
opacity: 0.92;
}
.shark-gallery3__img {
width: 100%;
height: auto;
display: block;
border-radius: 14px;
position: relative;
z-index: 0;
box-shadow:
0 0 55px -10px rgba(245, 197, 24, 0.14),
0 22px 60px -14px rgba(3, 7, 18, 0.95);
transition: transform .28s ease, box-shadow .28s ease, filter .28s ease;
will-change: transform;
}
.shark-gallery3__item:hover .shark-gallery3__img {
transform: translateY(-4px);
filter: saturate(1.08) brightness(1.02);
box-shadow:
0 0 70px -8px rgba(245, 197, 24, 0.26),
0 28px 70px -16px rgba(3, 7, 18, 0.98);
}
/* Responsive GALERÍA 3 */
@media (max-width: 991px) {
.shark-gallery3__inner {
max-width: 860px;
padding: 3.75rem var(--shark-px) 4.25rem;
gap: 2.25rem;
}
.shark-gallery3__item {
max-width: 780px;
}
}
@media (max-width: 767px) {
.shark-gallery3__inner {
max-width: 640px;
padding: 3rem var(--shark-px) 3.5rem;
gap: 1.75rem;
}
.shark-gallery3__item {
max-width: 100%;
}
.shark-gallery3__img {
border-radius: 12px;
}
}
@media (max-width: 480px) {
.shark-gallery3__inner {
padding: 2.25rem var(--shark-px) 2.75rem;
gap: 1.25rem;
}
.shark-gallery3__item::before {
inset: -2px;
border-radius: 12px;
}
.shark-gallery3__img {
border-radius: 10px;
}
}
/* ============================================
6f. SECCIÓN · FERIA DE EMPRENDEDORES
(Botón superior + 2 imágenes + Botón dorado)
============================================ */
.shark-feria {
background-color: #000000;
position: relative;
overflow: hidden;
}
.shark-feria::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background:
radial-gradient(1000px 600px at 50% 0%, rgba(15, 76, 129, 0.18), transparent 65%),
radial-gradient(1000px 600px at 50% 100%, rgba(31, 164, 197, 0.1), transparent 65%);
}
.shark-feria__inner {
position: relative;
z-index: 1;
max-width: 1040px;
margin: 0 auto;
/* 5rem bottom + 4.25rem extra para el botón "CLICK AQUI!" absolute bottom */
padding: 4.5rem var(--shark-px) calc(5rem + 4.25rem);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 2.5rem;
}
/* ---------- Link wrapper que cubre TODA la sección ----------
Click en CUALQUIER parte (placa título / 2 imgs) → /feria-de-emprendedores
El botón "CLICK AQUI!" (WhatsApp) vive fuera como hermano absolute,
así NO hay anidamiento dentro de (HTML válido siempre). */
.shark-feria__link {
position: relative;
z-index: 2;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 2.5rem;
width: 100%;
max-width: 1040px;
margin: 0;
padding: 0;
color: inherit;
text-decoration: none !important;
border: 0;
outline: none;
cursor: pointer;
transition: transform .28s ease;
background: transparent;
}
.shark-feria__link:focus-visible {
outline: 2px solid rgba(245,197,24,.75);
outline-offset: 6px;
border-radius: 8px;
}
.shark-feria__link:hover .shark-feria__img {
transform: translateY(-3px);
filter: saturate(1.08) brightness(1.03);
box-shadow:
0 0 70px -8px rgba(245, 197, 24, 0.24),
0 28px 70px -16px rgba(3, 7, 18, 0.98);
}
/* ---------- Botones placa superior / inferior ---------- */
.shark-feria__btn-wrap {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
/* ---------- Botón CTA inferior "CLICK AQUI!" (WhatsApp)
Vive FUERA del link grande, absolute bottom → click solo aquí = WA.
z-index 4 → se renderiza encima del link-wrapper. ---------------- */
.shark-feria__btn-wrap--cta {
position: absolute;
bottom: 2.75rem;
left: 50%;
transform: translateX(-50%);
width: calc(100% - (var(--shark-px) * 2));
max-width: 1040px;
z-index: 4;
pointer-events: auto;
}
/* Placa superior estática (no clickeable) */
.shark-btn--gold-plate {
display: inline-flex;
align-items: center;
justify-content: center;
width: min(980px, 100%);
padding: 0.75rem 2.5rem;
font-size: clamp(0.9rem, 0.7vw + 0.8rem, 1.08rem);
font-weight: 900;
letter-spacing: 0.035em;
text-transform: none;
color: #030712;
background: linear-gradient(180deg, #d4a90c 0%, #b8890f 100%);
border: 1px solid #a88206;
border-radius: 6px;
box-shadow:
0 10px 26px -10px rgba(212, 169, 12, 0.55),
inset 0 1px 0 rgba(255, 255, 255, 0.3);
text-decoration: none;
cursor: default;
pointer-events: none;
line-height: 1.15;
text-align: center;
font-family: var(--shark-font);
margin: 0;
}
.shark-btn--gold-plate:hover {
text-decoration: none;
color: #030712;
}
/* ---------- Botón inferior CLICK AQUI! (clickeable → WhatsApp) ---------- */
.shark-btn--gold-cta-click {
display: inline-flex;
align-items: center;
justify-content: center;
width: min(980px, 100%);
padding: 0.85rem 2.5rem;
font-size: clamp(0.92rem, 0.75vw + 0.82rem, 1.1rem);
font-weight: 900;
letter-spacing: 0.07em;
text-transform: uppercase;
color: #030712;
background: linear-gradient(180deg, #d4a90c 0%, #b8890f 100%);
border: 1px solid #a88206;
border-radius: 6px;
box-shadow:
0 12px 28px -10px rgba(212, 169, 12, 0.6),
inset 0 1px 0 rgba(255, 255, 255, 0.3);
text-decoration: none;
cursor: pointer;
transition: transform .2s ease, box-shadow .2s ease, filter .2s ease, background .2s ease;
line-height: 1.15;
text-align: center;
font-family: var(--shark-font);
position: relative;
z-index: 1;
}
.shark-btn--gold-cta-click:hover,
.shark-btn--gold-cta-click:focus {
background: linear-gradient(180deg, #e2b711 0%, #c49a1c 100%);
transform: translateY(-1.5px);
filter: saturate(1.12);
box-shadow:
0 16px 36px -10px rgba(226, 183, 17, 0.72),
inset 0 1px 0 rgba(255, 255, 255, 0.35);
color: #030712;
text-decoration: none;
outline: none;
}
.shark-btn--gold-cta-click:active {
transform: translateY(0);
box-shadow:
0 6px 16px -4px rgba(184, 137, 15, 0.5),
inset 0 1px 0 rgba(255, 255, 255, 0.22);
}
/* ---------- Imágenes ---------- */
.shark-feria__item {
margin: 0;
width: 100%;
max-width: 980px;
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
.shark-feria__item::before {
content: "";
position: absolute;
inset: -2px;
border-radius: 8px;
padding: 2px;
background: linear-gradient(135deg,
rgba(245, 197, 24, 0.95) 0%,
rgba(15, 76, 129, 0.75) 50%,
rgba(31, 164, 197, 0.7) 100%);
-webkit-mask:
linear-gradient(#000 0 0) content-box,
linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
z-index: 1;
pointer-events: none;
opacity: 0.95;
}
.shark-feria__img {
width: 100%;
height: auto;
display: block;
border-radius: 6px;
position: relative;
z-index: 0;
box-shadow:
0 0 55px -10px rgba(245, 197, 24, 0.12),
0 22px 60px -14px rgba(3, 7, 18, 0.95);
transition: transform .28s ease, box-shadow .28s ease, filter .28s ease;
will-change: transform;
}
.shark-feria__item:hover .shark-feria__img,
.shark-feria__link:hover .shark-feria__img {
transform: translateY(-3px);
filter: saturate(1.06) brightness(1.02);
box-shadow:
0 0 70px -8px rgba(245, 197, 24, 0.22),
0 28px 70px -16px rgba(3, 7, 18, 0.98);
}
/* Responsive FERIA */
@media (max-width: 991px) {
.shark-feria__inner {
max-width: 880px;
/* 4.25 bottom + 4.25 espacio botón absolute */
padding: 3.75rem var(--shark-px) calc(4.25rem + 4.25rem);
gap: 2rem;
}
.shark-feria__link {
max-width: 880px;
gap: 2rem;
}
.shark-feria__btn-wrap--cta {
bottom: 2.25rem;
max-width: 880px;
}
.shark-btn--gold-plate,
.shark-btn--gold-cta-click,
.shark-feria__item {
max-width: 860px;
}
}
@media (max-width: 767px) {
.shark-feria__inner {
max-width: 640px;
/* 3.5 bottom + 3.75 espacio botón absolute */
padding: 3rem var(--shark-px) calc(3.5rem + 3.75rem);
gap: 1.75rem;
}
.shark-feria__link {
max-width: 640px;
gap: 1.75rem;
}
.shark-feria__btn-wrap--cta {
bottom: 2rem;
max-width: 640px;
}
.shark-btn--gold-plate,
.shark-btn--gold-cta-click,
.shark-feria__item {
max-width: 100%;
}
.shark-btn--gold-plate {
padding: 0.7rem 1.75rem;
font-size: 0.92rem;
}
.shark-btn--gold-cta-click {
padding: 0.8rem 1.75rem;
font-size: 0.98rem;
}
}
@media (max-width: 480px) {
.shark-feria__inner {
/* 2.75 bottom + 3.5 extra botón absolute */
padding: 2.25rem var(--shark-px) calc(2.75rem + 3.5rem);
gap: 1.5rem;
}
.shark-feria__link {
gap: 1.5rem;
}
.shark-feria__btn-wrap--cta {
bottom: 1.65rem;
}
.shark-btn--gold-plate {
padding: 0.65rem 1.5rem;
font-size: 0.85rem;
letter-spacing: 0.025em;
}
.shark-btn--gold-cta-click {
padding: 0.72rem 1.5rem;
font-size: 0.92rem;
letter-spacing: 0.05em;
}
.shark-feria__item::before {
inset: -1.5px;
}
}
/* ============================================
6g. SECCIÓN · SISTEMA INSTITUCIONAL DE EVALUACIÓN ESTRATÉGICA
(METODOLOGÍA SOL® y CREANDO EMPRESA SOL®)
============================================ */
.shark-soltext {
background-color: #000000;
position: relative;
overflow: hidden;
}
.shark-soltext::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background:
radial-gradient(1000px 600px at 50% 0%, rgba(15, 76, 129, 0.2), transparent 65%),
radial-gradient(1000px 600px at 50% 100%, rgba(31, 164, 197, 0.1), transparent 65%);
}
.shark-soltext__inner {
position: relative;
z-index: 1;
max-width: 1040px;
margin: 0 auto;
padding: 5rem var(--shark-px) 5.5rem;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: flex-start;
gap: 1.5rem;
color: var(--shark-c-text);
font-family: var(--shark-font);
}
/* Título principal */
.shark-soltext__title {
margin: 0 0 0.5rem;
width: 100%;
font-size: clamp(1.75rem, 2.4vw + 0.6rem, 2.8rem);
font-weight: 800;
line-height: 1.15;
letter-spacing: -0.005em;
color: #ffffff;
text-shadow:
0 6px 20px rgba(3, 7, 18, 0.85),
0 1px 3px rgba(3, 7, 18, 0.7);
position: relative;
padding-bottom: 1.15rem;
}
.shark-soltext__title::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: min(260px, 45%);
height: 3px;
background: linear-gradient(90deg,
var(--shark-c-gold) 0%,
rgba(245, 197, 24, 0) 100%);
border-radius: 3px;
}
/* Texto intro / párrafos base */
.shark-soltext__intro,
.shark-soltext__paragraph {
margin: 0;
padding: 0;
font-size: clamp(1rem, 0.7vw + 0.9rem, 1.18rem);
line-height: 1.85;
color: #cbd5e1;
letter-spacing: 0.005em;
text-align: left;
}
.shark-soltext__paragraph {
margin-top: 0.15rem;
}
/* Bullet list (METODOLOGÍAS) */
.shark-soltext__bullets {
list-style: none;
padding: 0;
margin: 0.75rem 0 0.35rem;
display: flex;
flex-direction: column;
gap: 0.9rem;
width: 100%;
}
.shark-soltext__bullet {
position: relative;
padding: 1.1rem 1.25rem 1.1rem 3rem;
background: linear-gradient(90deg,
rgba(10, 37, 64, 0.88) 0%,
rgba(14, 46, 77, 0.7) 100%);
border-left: 4px solid var(--shark-c-gold);
border-radius: var(--shark-radius-md);
box-shadow: var(--shark-shadow-sm);
font-size: clamp(1rem, 0.75vw + 0.9rem, 1.2rem);
line-height: 1.7;
color: #e2e8f0;
font-weight: 500;
}
.shark-soltext__bullet::before {
content: "";
position: absolute;
left: 1.1rem;
top: 50%;
width: 0.8rem;
height: 0.8rem;
transform: translateY(-50%) rotate(45deg);
background: var(--shark-c-gold);
border-radius: 2px;
box-shadow: 0 0 10px rgba(245, 197, 24, 0.6);
}
.shark-soltext__bullet strong,
.shark-soltext__intro strong,
.shark-soltext__paragraph strong {
color: var(--shark-c-gold);
font-weight: 700;
}
/* Firma + cita institucional */
.shark-soltext__sign {
width: 100%;
margin-top: 1rem;
padding-top: 2rem;
border-top: 1px solid rgba(245, 197, 24, 0.18);
display: flex;
flex-direction: column;
gap: 1.15rem;
}
.shark-soltext__firm {
margin: 0;
padding: 0;
font-size: clamp(1.05rem, 0.75vw + 0.95rem, 1.28rem);
line-height: 1.35;
font-weight: 800;
letter-spacing: 0.01em;
color: var(--shark-c-gold);
text-shadow: 0 4px 14px rgba(3, 7, 18, 0.8);
}
.shark-soltext__quote {
margin: 0;
padding: 1.25rem 1.5rem 1.25rem 1.75rem;
background: linear-gradient(135deg,
rgba(10, 37, 64, 0.9) 0%,
rgba(7, 26, 46, 0.88) 100%);
border-left: 5px solid var(--shark-c-gold);
border-radius: var(--shark-radius-md);
box-shadow:
0 0 40px -10px rgba(245, 197, 24, 0.16),
0 12px 30px -12px rgba(3, 7, 18, 0.9);
}
.shark-soltext__quote p {
margin: 0;
padding: 0;
font-size: clamp(1rem, 0.7vw + 0.9rem, 1.18rem);
line-height: 1.85;
color: #e2e8f0;
font-style: italic;
letter-spacing: 0.005em;
text-shadow: 0 2px 8px rgba(3, 7, 18, 0.7);
}
/* Responsive SOLTEXT */
@media (max-width: 991px) {
.shark-soltext__inner {
max-width: 880px;
padding: 4rem var(--shark-px) 4.5rem;
gap: 1.35rem;
}
}
@media (max-width: 767px) {
.shark-soltext__inner {
max-width: 640px;
padding: 3.25rem var(--shark-px) 3.75rem;
gap: 1.2rem;
}
.shark-soltext__title {
padding-bottom: 1rem;
}
.shark-soltext__bullets {
gap: 0.75rem;
}
.shark-soltext__bullet {
padding: 1rem 1rem 1rem 2.5rem;
}
.shark-soltext__bullet::before {
left: 0.9rem;
width: 0.7rem;
height: 0.7rem;
}
.shark-soltext__sign {
margin-top: 0.85rem;
padding-top: 1.75rem;
gap: 1rem;
}
.shark-soltext__quote {
padding: 1.05rem 1.1rem 1.05rem 1.25rem;
border-left-width: 4px;
}
}
@media (max-width: 480px) {
.shark-soltext__inner {
padding: 2.5rem var(--shark-px) 3rem;
gap: 1.1rem;
}
.shark-soltext__title::after {
width: 65%;
}
.shark-soltext__bullet {
padding: 0.95rem 0.95rem 0.95rem 2.25rem;
font-size: 0.98rem;
}
.shark-soltext__bullet::before {
left: 0.8rem;
width: 0.65rem;
height: 0.65rem;
}
.shark-soltext__quote {
padding: 0.95rem 0.9rem 0.95rem 1rem;
}
}
/* ============================================
7. SECCIÓN · ¿Qué es Shark Alliance? (about)
============================================ */
.shark-about { background: var(--shark-c-bg); }
.shark-about__body {
max-width: 820px;
margin: 0 auto;
text-align: center;
color: var(--shark-c-muted);
font-size: 1.05rem;
}
.shark-link {
font-weight: 700;
color: var(--shark-c-accent);
display: inline-block;
padding: 0.3rem 0;
border-bottom: 1px solid transparent;
transition: color .2s ease, border-color .2s ease;
}
.shark-link:hover {
color: var(--shark-c-gold);
border-bottom-color: var(--shark-c-gold);
text-decoration: none;
}
/* ============================================
8. SECCIÓN · GALERÍA 9 BANNERS (grilla responsive)
============================================ */
.shark-banners { background: var(--shark-c-bg-alt); }
.shark-banners__grid {
display: grid;
gap: 1.5rem;
grid-template-columns: repeat(12, 1fr);
grid-auto-rows: minmax(180px, auto);
}
.shark-banner {
margin: 0;
border-radius: var(--shark-radius-md);
overflow: hidden;
box-shadow: var(--shark-shadow-sm);
background: var(--shark-c-bg-muted);
border: 1px solid var(--shark-c-border);
transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
display: block;
position: relative;
}
.shark-banner:hover {
transform: translateY(-3px);
box-shadow: var(--shark-shadow-md);
border-color: var(--shark-c-dark-border);
}
.shark-banner__svg {
width: 100%;
height: 100%;
display: block;
filter: saturate(1.1) contrast(1.02);
}
/* Distribución asimétrica desktop (9 banners combinados tamaños como Google Sites real) */
.shark-banners__grid > .shark-banner:nth-child(1) { grid-column: span 12; grid-row: span 1; min-height: 280px; } /* ancho 1280x602 */
.shark-banners__grid > .shark-banner:nth-child(2) { grid-column: span 7; grid-row: span 2; } /* 1280x853 portrait */
.shark-banners__grid > .shark-banner:nth-child(3) { grid-column: span 5; grid-row: span 2; } /* 853x1280 vertical */
.shark-banners__grid > .shark-banner:nth-child(4) { grid-column: span 6; grid-row: span 2; aspect-ratio: 1 / 1; } /* 1254x1254 cuadrado */
.shark-banners__grid > .shark-banner:nth-child(5) { grid-column: span 6; grid-row: span 1; } /* ancho corto 1280x439 */
.shark-banners__grid > .shark-banner:nth-child(6) { grid-column: span 6; grid-row: span 2; } /* 1280x853 */
.shark-banners__grid > .shark-banner:nth-child(7) { grid-column: span 12; grid-row: span 1; } /* ancho 1280x602 */
.shark-banners__grid > .shark-banner:nth-child(8) { grid-column: span 5; grid-row: span 2; } /* 853x1280 vertical */
.shark-banners__grid > .shark-banner:nth-child(9) { grid-column: span 7; grid-row: span 2; } /* ancho 1280x439 combinado */
/* Tablet: 2 columnas equitativas (1023 → 769) */
@media (max-width: 1023px) {
.shark-banners__grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: auto; }
.shark-banners__grid > .shark-banner { grid-column: span 2 !important; grid-row: span 1 !important; min-height: 240px; aspect-ratio: 16 / 10; }
.shark-banners__grid > .shark-banner:nth-child(4) { aspect-ratio: 4 / 5; grid-column: span 2; }
}
/* Móvil: 1 sola columna */
@media (max-width: 639px) {
.shark-banners__grid { grid-template-columns: 1fr; }
.shark-banners__grid > .shark-banner { grid-column: span 1 !important; aspect-ratio: 16 / 9; min-height: 200px; }
.shark-banners__grid > .shark-banner:nth-child(4) { aspect-ratio: 1 / 1; }
}
/* ============================================
9. SECCIÓN · METODOLOGÍAS SOL® (8 cards)
============================================ */
.shark-sol {
background:
radial-gradient(1100px 520px at 0% -10%, rgba(31, 164, 197, .12), transparent 60%),
linear-gradient(180deg, var(--shark-c-bg) 0%, var(--shark-c-bg-alt) 100%);
}
.shark-sol__eyebrow {
display: block;
text-align: center;
text-transform: uppercase;
letter-spacing: .10em;
font-weight: 700;
font-size: .85rem;
color: var(--shark-c-gold);
margin: 0 0 .75rem;
text-shadow: 0 2px 12px rgba(245, 197, 24, 0.25);
}
.shark-sol__cards {
display: grid;
gap: 1.5rem;
grid-template-columns: repeat(3, minmax(0, 1fr));
align-items: stretch;
}
.shark-sol-card {
background: var(--shark-c-bg-alt);
border: 1px solid var(--shark-c-border);
border-top: 5px solid var(--shark-c-accent);
border-radius: var(--shark-radius-lg);
padding: 1.8rem 1.6rem;
box-shadow: var(--shark-shadow-sm);
transition: transform .25s ease, box-shadow .25s ease, border-top-color .25s ease, background-color .25s ease;
height: 100%;
}
.shark-sol-card:hover {
transform: translateY(-4px);
box-shadow: var(--shark-shadow-md);
border-top-color: var(--shark-c-gold);
background: var(--shark-c-bg-muted);
}
.shark-sol-card__title {
font-size: 1.2rem;
color: var(--shark-c-white);
margin: 0 0 .8rem;
}
.shark-sol-card__desc {
color: var(--shark-c-muted);
font-size: 1rem;
margin: 0;
}
.shark-sol-card--quote {
grid-column: span 3;
border-top-color: var(--shark-c-gold);
background:
linear-gradient(135deg, rgba(31, 164, 197, .06), rgba(245, 197, 24, .08));
text-align: center;
}
.shark-sol-card__quote {
margin: 0;
padding: 1.2rem 1.5rem;
border-left: 6px solid var(--shark-c-gold);
border-radius: var(--shark-radius-md);
background: var(--shark-c-bg);
color: var(--shark-c-text);
font-size: 1.12rem;
font-weight: 500;
line-height: 1.75;
text-align: left;
max-width: 900px;
margin: 0 auto;
border: 1px solid var(--shark-c-border);
border-left: 6px solid var(--shark-c-gold);
}
.shark-sol-card__quote p { margin-bottom: .6rem; }
.shark-sol-card__quote cite {
display: block;
font-style: normal;
font-weight: 700;
color: var(--shark-c-gold);
text-align: right;
margin-top: .8rem;
font-size: .95rem;
}
/* Responsive cards SOL */
@media (max-width: 991px) {
.shark-sol__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.shark-sol-card--quote { grid-column: span 2; }
}
@media (max-width: 639px) {
.shark-sol__cards { grid-template-columns: 1fr; }
.shark-sol-card--quote { grid-column: span 1; }
}
/* ============================================
10. SECCIÓN · CTA GENERAL WHATSAPP
============================================ */
.shark-cta {
background: linear-gradient(135deg, var(--shark-c-whatsapp-700) 0%, var(--shark-c-success) 100%);
color: var(--shark-c-white);
border-radius: var(--shark-radius-lg);
margin: 5rem var(--shark-px) 0;
max-width: var(--shark-rw);
margin-left: auto;
margin-right: auto;
box-shadow: var(--shark-shadow-md);
overflow: hidden;
}
.shark-cta__inner {
padding: 4rem var(--shark-px);
text-align: center;
max-width: 900px;
margin: 0 auto;
}
.shark-cta__title {
color: var(--shark-c-white);
font-size: clamp(1.8rem, 3vw, 2.6rem);
margin: 0 0 1rem;
}
.shark-cta__lede {
color: #dcfce7;
font-size: 1.05rem;
margin: 0 auto 2rem;
max-width: 720px;
}
.shark-cta .shark-btn--whatsapp {
background: var(--shark-c-white);
color: var(--shark-c-whatsapp-700);
border-color: var(--shark-c-white);
font-weight: 800;
}
.shark-cta .shark-btn--whatsapp:hover {
background: #dcfce7;
color: var(--shark-c-whatsapp-700);
border-color: #dcfce7;
}
/* ============================================
11. RESPONSIVE — HEADER / MENÚ
============================================ */
/* Tablet / Móvil grande: mostrar hamburguesa y colapsar nav */
@media (max-width: 991px) {
.shark-header__toggle {
display: inline-flex;
}
.shark-header__nav-wrap {
position: fixed;
top: 0;
right: 0;
height: 100vh;
height: 100dvh;
width: min(320px, 88vw);
padding: 5.5rem 1.25rem 1.5rem;
flex-direction: column;
align-items: stretch;
justify-content: flex-start;
gap: 1rem;
background:
linear-gradient(180deg, var(--shark-c-dark-bg) 0%, var(--shark-c-dark-bg-2) 100%);
border-left: 1px solid var(--shark-c-dark-border);
box-shadow: -20px 0 60px -20px rgba(7, 26, 46, 0.9);
transform: translateX(105%);
transition: transform .3s cubic-bezier(.2,.8,.2,1);
z-index: 99;
overflow-y: auto;
}
.shark-header__nav-wrap.is-open {
transform: translateX(0);
}
.shark-nav--primary {
display: block;
width: 100%;
}
.shark-menu--primary {
flex-direction: column;
align-items: stretch;
gap: 0.25rem;
}
.shark-menu-link {
width: 100%;
padding: 0.8rem 1rem;
font-size: 1rem;
border-radius: var(--shark-radius-md);
}
.shark-menu-item.is-active > .shark-menu-link::after {
left: 1rem;
right: auto;
bottom: 0.5rem;
width: 32px;
}
/* ===============================================================
Layout MÓVIL: 1 FILA padre link + caret, 2 FILA submenú HACIA ABAJO.
Solución con CSS GRID FILAS EXPLÍCITAS + selector padre
.shark-header__nav-wrap (especificidad MÁS ALTA que reglas desktop).
Imposible que el submenú aparezca a la derecha! =============================================================== */
.shark-header__nav-wrap .shark-menu-item--has-children {
display: grid !important;
grid-template-columns: 1fr auto; /* col1 = link todo ancho · col2 = caret 28px */
grid-template-rows: auto auto; /* fila1 = link + caret · fila2 = submenu ABAJO */
grid-auto-flow: row;
align-items: center;
justify-content: stretch;
column-gap: 0.25rem;
row-gap: 0;
width: 100% !important;
position: relative;
}
/* FILA 1 COL 1 = link del item padre */
.shark-header__nav-wrap .shark-menu-item--has-children > .shark-menu-link {
grid-column: 1;
grid-row: 1;
width: 100% !important;
flex: 1 1 auto !important;
max-width: 100% !important;
min-width: 0 !important;
padding-right: 0.25rem !important;
align-self: center;
justify-self: stretch;
cursor: pointer;
}
/* FILA 1 COL 2 = botón flecha caret (ALINEADO DERECHA EXACTO) */
.shark-header__nav-wrap .shark-menu-item--has-children > .shark-menu-caret-btn {
grid-column: 2;
grid-row: 1;
flex: 0 0 28px !important;
width: 28px !important;
height: 28px !important;
align-self: center;
justify-self: end;
margin-left: 0 !important;
margin-right: 0.55rem !important;
}
/* FILA 2 TODAS COLUMNAS = SUBMENÚ HACIA ABAJO (100% ancho del item padre) */
.shark-header__nav-wrap .shark-menu-item--has-children > .shark-submenu {
grid-column: 1 / -1 !important;
grid-row: 2 !important;
position: static !important;
top: auto !important;
left: auto !important;
right: auto !important;
min-width: 0 !important;
max-width: 100% !important;
width: 100% !important;
margin: 0.25rem 0 0.5rem 0.75rem !important;
padding: 0.25rem 0.25rem 0.25rem 0.5rem !important;
border-left: 2px solid var(--shark-c-dark-border) !important;
border-top: none !important;
border-right: none !important;
border-bottom: none !important;
border-radius: 0 !important;
background: rgba(255, 255, 255, 0.02) !important;
box-shadow: none !important;
opacity: 1 !important;
visibility: visible !important;
transform: none !important;
max-height: none !important;
overflow: visible !important;
display: none;
z-index: 1;
order: 99;
}
/* Submenús internos anidados (2+ niveles): misma lógica, siempre ABAJO. */
.shark-header__nav-wrap .shark-submenu .shark-menu-item--has-children {
display: grid !important;
grid-template-columns: 1fr auto;
grid-template-rows: auto auto;
width: 100% !important;
}
.shark-header__nav-wrap .shark-submenu .shark-menu-item--has-children > .shark-submenu {
grid-column: 1 / -1 !important;
grid-row: 2 !important;
position: static !important;
width: 100% !important;
margin: 0.25rem 0 0.5rem 0.75rem !important;
padding: 0.25rem 0.25rem 0.25rem 0.5rem !important;
display: none;
opacity: 1 !important;
visibility: visible !important;
transform: none !important;
max-height: none !important;
}
/* Estado ABIERTO: mostrar siempre ABAJO. */
.shark-header__nav-wrap .shark-menu-item--has-children.is-open > .shark-submenu,
.shark-header__nav-wrap .shark-submenu .shark-menu-item--has-children.is-open > .shark-submenu {
display: block !important;
/* Borde gold leve más intenso en submenús expandidos anidados. */
border-left-color: rgba(245, 197, 24, 0.35) !important;
}
/* Rotación flecha caret al abrir. */
.shark-header__nav-wrap .shark-menu-item--has-children > .shark-menu-caret-btn .shark-menu-caret {
transition: transform .2s ease;
}
.shark-header__nav-wrap .shark-menu-item--has-children.is-open > .shark-menu-caret-btn .shark-menu-caret {
transform: translateY(1px) rotate(180deg);
opacity: 1;
}
.shark-header__cta {
width: 100%;
margin-top: 0.5rem;
padding-top: 1rem;
border-top: 1px solid var(--shark-c-dark-border);
}
.shark-header__cta .shark-btn--gold {
width: 100%;
justify-content: center;
padding: 0.9rem 1.25rem;
}
/* Backdrop móvil */
.shark-header__backdrop {
position: fixed;
inset: 0;
background: rgba(3, 7, 18, 0.6);
opacity: 0;
visibility: hidden;
transition: opacity .25s ease, visibility .25s ease;
z-index: 98;
}
.shark-header__backdrop.is-visible {
opacity: 1;
visibility: visible;
}
}
/* Móvil pequeño */
@media (max-width: 480px) {
.shark-site-branding .custom-logo {
max-width: 170px;
height: 40px;
}
.shark-site-header.is-scrolled .shark-site-branding .custom-logo {
height: 36px;
}
.shark-header__inner {
padding: 0.8rem var(--shark-px);
gap: 0.75rem;
}
.shark-header__nav-wrap {
padding-top: 4.75rem;
}
}
/* ============================================
12. RESPONSIVE — Breakpoints generales + reset
============================================ */
@media (max-width: 768px) {
:root { --shark-py: 3rem; }
.shark-hero__inner { padding: 4rem var(--shark-px) 3.5rem; }
.shark-hero__cta-row .shark-btn { width: 100%; flex: 1 1 100%; }
.shark-cta { margin-top: 3.5rem; }
.shark-cta__inner { padding: 2.8rem 1rem; }
}
*,
*::before,
*::after {
box-sizing: border-box;
}
img {
max-width: 100%;
height: auto;
}
body {
margin: 0;
overflow-x: hidden;
}
.shark-mensaje-en-construccion {
max-width: var(--shark-rw);
margin: 3rem auto;
padding: 2rem;
border-left: 6px solid var(--shark-c-gold);
background-color: var(--shark-c-bg-alt);
border: 1px solid var(--shark-c-border);
border-left: 6px solid var(--shark-c-gold);
border-radius: var(--shark-radius-md);
color: var(--shark-c-text);
box-shadow: var(--shark-shadow-md);
}
.shark-mensaje-en-construccion h1 {
margin-top: 0;
color: var(--shark-c-gold);
}
/* ============================================
8. SECCIÓN GLOBAL · CONTACTO (Mapa + Datos + CTA WhatsApp)
Se carga desde footer.php → APARECE EN TODAS LAS PÁGINAS
============================================ */
.shark-contactglobal {
background-color: #000000;
position: relative;
overflow: hidden;
}
.shark-contactglobal::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background:
radial-gradient(1000px 600px at 10% 50%, rgba(15, 76, 129, 0.22), transparent 65%),
radial-gradient(1000px 600px at 90% 50%, rgba(31, 164, 197, 0.15), transparent 65%);
}
.shark-contactglobal__inner {
position: relative;
z-index: 1;
max-width: 1320px;
margin: 0 auto;
padding: 5rem var(--shark-px) 5.5rem;
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
gap: 4rem 4.5rem;
align-items: stretch;
}
/* ----- Columna IZQUIERDA: Mapa ----- */
.shark-contactglobal__mapwrap {
position: relative;
width: 100%;
max-width: 640px;
aspect-ratio: 4 / 3;
border-radius: var(--shark-radius-lg);
overflow: hidden;
background: var(--shark-c-bg-alt);
padding: 3px;
box-shadow:
0 0 70px -15px rgba(245, 197, 24, 0.18),
0 22px 60px -16px rgba(3, 7, 18, 0.95);
}
.shark-contactglobal__mapwrap::before {
content: "";
position: absolute;
inset: 0;
padding: 3px;
background: linear-gradient(135deg,
rgba(245, 197, 24, 0.95) 0%,
rgba(15, 76, 129, 0.8) 50%,
rgba(31, 164, 197, 0.75) 100%);
-webkit-mask:
linear-gradient(#000 0 0) content-box,
linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
z-index: 1;
pointer-events: none;
border-radius: var(--shark-radius-lg);
opacity: 0.95;
}
.shark-contactglobal__iframe {
width: 100% !important;
height: 100% !important;
display: block;
border: 0;
border-radius: calc(var(--shark-radius-lg) - 3px);
background: #e9ecef;
position: relative;
z-index: 0;
}
/* ----- Columna DERECHA: Datos contacto ----- */
.shark-contactglobal__data {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
gap: 1.75rem;
padding-top: 0.5rem;
}
.shark-contactglobal__title.visually-hidden {
position: absolute !important;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.shark-contactglobal__group {
width: 100%;
max-width: 760px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
gap: 0.75rem;
}
.shark-contactglobal__label {
margin: 0;
padding: 0;
width: 100%;
text-align: center;
font-size: clamp(0.98rem, 0.5vw + 0.9rem, 1.18rem);
line-height: 1.5;
font-weight: 700;
letter-spacing: 0.04em;
color: #f1f5f9;
text-shadow: 0 3px 10px rgba(3, 7, 18, 0.8);
}
.shark-contactglobal__label--alt {
margin-top: 0.75rem;
}
/* Email principal (resaltado) */
.shark-contactglobal__email {
display: inline-block;
margin: 0;
padding: 0;
font-size: clamp(1rem, 0.75vw + 0.9rem, 1.2rem);
line-height: 1.55;
color: #ffffff; /* ← correos alternos: BLANCO por defecto */
text-decoration: underline;
text-decoration-thickness: 1px;
text-decoration-color: rgba(255, 255, 255, 0.35);
text-underline-offset: 3px;
font-weight: 500;
transition: color .18s ease, filter .18s ease, transform .18s ease, text-decoration-color .18s ease;
}
.shark-contactglobal__email:hover,
.shark-contactglobal__email:focus {
color: var(--shark-c-gold); /* ← MANTENIDO: hover dorado */
filter: saturate(1.1);
text-decoration-color: var(--shark-c-gold);
}
.shark-contactglobal__email--primary {
font-size: clamp(1.12rem, 0.8vw + 1rem, 1.45rem);
font-weight: 700;
line-height: 1.4;
letter-spacing: 0.005em;
padding: 0.85rem 1.75rem;
border-radius: var(--shark-radius-md);
background: linear-gradient(180deg,
rgba(250, 215, 79, 0.20) 0%,
rgba(245, 197, 24, 0.12) 45%,
rgba(225, 176, 18, 0.18) 100%);
border: 1px solid rgba(245, 197, 24, 0.60);
text-decoration: none;
box-shadow:
0 0 44px -10px rgba(245, 197, 24, 0.38),
0 1px 0 rgba(255, 255, 255, 0.22) inset,
0 -1px 0 rgba(176, 123, 4, 0.45) inset,
0 12px 30px -12px rgba(3, 7, 18, 0.9);
color: #f9cd33; /* ← TEXTO DORADO por defecto para resaltar */
text-shadow:
0 0 10px rgba(245, 197, 24, 0.35),
0 2px 6px rgba(0, 0, 0, 0.45);
transition: color .18s ease, background .18s ease, border-color .18s ease,
transform .18s ease, box-shadow .18s ease, text-shadow .18s ease;
}
.shark-contactglobal__email--primary:hover,
.shark-contactglobal__email--primary:focus {
color: #ffe36b; /* ← HOVER: dorado MÁS CLARO (más brillo + halo) */
background: linear-gradient(180deg,
rgba(255, 226, 103, 0.32) 0%,
rgba(249, 205, 51, 0.18) 50%,
rgba(238, 189, 26, 0.26) 100%);
border-color: rgba(253, 224, 71, 0.80);
transform: translateY(-1.5px);
text-shadow:
0 0 18px rgba(255, 216, 88, 0.55),
0 0 8px rgba(255, 231, 148, 0.45),
0 2px 6px rgba(0, 0, 0, 0.35);
box-shadow:
0 0 68px -8px rgba(245, 197, 24, 0.55),
0 0 24px -4px rgba(255, 226, 103, 0.45),
0 1px 0 rgba(255, 255, 255, 0.32) inset,
0 -1px 0 rgba(176, 123, 4, 0.45) inset,
0 16px 36px -12px rgba(3, 7, 18, 0.95);
text-decoration: none;
outline: none;
}
/* Lista de correos alternos */
.shark-contactglobal__emaillist {
list-style: none;
margin: 0;
padding: 0;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
gap: 0.55rem;
}
.shark-contactglobal__emaillist li {
margin: 0;
padding: 0;
width: 100%;
text-align: center;
}
/* Grupo CTA (texto + botón ESCRIBENOS!) */
.shark-contactglobal__group--cta {
gap: 1.35rem;
margin-top: 0.25rem;
}
.shark-contactglobal__cta-text {
margin: 0;
padding: 0;
width: 100%;
max-width: 760px;
text-align: center;
font-size: clamp(1rem, 0.7vw + 0.9rem, 1.25rem);
line-height: 1.75;
font-weight: 700;
letter-spacing: 0.025em;
color: #e2e8f0;
text-shadow: 0 4px 14px rgba(3, 7, 18, 0.85);
}
.shark-contactglobal__cta-text .shark-contactglobal__br {
display: block;
}
/* Botón ESCRIBENOS! dorado */
.shark-btn--gold-contact {
display: inline-flex;
align-items: center;
justify-content: center;
width: min(880px, 100%);
padding: 0.95rem 2.75rem;
font-size: clamp(0.98rem, 0.75vw + 0.85rem, 1.18rem);
font-weight: 900;
letter-spacing: 0.07em;
text-transform: uppercase;
color: #030712;
background: linear-gradient(180deg, #d4a90c 0%, #b8890f 100%);
border: 1px solid #a88206;
border-radius: 8px;
box-shadow:
0 14px 36px -12px rgba(212, 169, 12, 0.65),
inset 0 1px 0 rgba(255, 255, 255, 0.32);
text-decoration: none;
cursor: pointer;
transition: transform .2s ease, box-shadow .2s ease, filter .2s ease, background .2s ease;
line-height: 1.2;
text-align: center;
font-family: var(--shark-font);
}
.shark-btn--gold-contact:hover,
.shark-btn--gold-contact:focus {
background: linear-gradient(180deg, #e2b711 0%, #c49a1c 100%);
transform: translateY(-1.8px);
filter: saturate(1.15);
box-shadow:
0 20px 46px -12px rgba(226, 183, 17, 0.78),
inset 0 1px 0 rgba(255, 255, 255, 0.38);
color: #030712;
text-decoration: none;
outline: none;
}
.shark-btn--gold-contact:active {
transform: translateY(0);
box-shadow:
0 8px 20px -6px rgba(184, 137, 15, 0.55),
inset 0 1px 0 rgba(255, 255, 255, 0.22);
}
/* Responsive CONTACTO GLOBAL */
@media (max-width: 1199px) {
.shark-contactglobal__inner {
max-width: 1120px;
grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
gap: 3rem 3.5rem;
padding: 4.5rem var(--shark-px) 5rem;
}
.shark-contactglobal__mapwrap {
max-width: 100%;
}
}
@media (max-width: 991px) {
.shark-contactglobal__inner {
max-width: 880px;
grid-template-columns: 1fr;
gap: 3rem;
padding: 4rem var(--shark-px) 4.5rem;
}
.shark-contactglobal__mapwrap {
max-width: 720px;
margin: 0 auto;
}
.shark-contactglobal__data {
gap: 1.5rem;
padding-top: 0;
}
}
@media (max-width: 767px) {
.shark-contactglobal__inner {
max-width: 640px;
padding: 3.25rem var(--shark-px) 3.75rem;
gap: 2.5rem;
}
.shark-contactglobal__mapwrap {
max-width: 100%;
aspect-ratio: 16 / 10;
}
.shark-contactglobal__group {
gap: 0.65rem;
}
.shark-contactglobal__group--cta {
gap: 1.2rem;
}
.shark-contactglobal__email--primary {
padding: 0.75rem 1.25rem;
width: 100%;
text-align: center;
font-size: 1.08rem;
}
.shark-btn--gold-contact {
width: 100%;
padding: 0.88rem 1.75rem;
}
}
@media (max-width: 480px) {
.shark-contactglobal__inner {
padding: 2.5rem var(--shark-px) 3rem;
gap: 2rem;
}
.shark-contactglobal__mapwrap {
aspect-ratio: 4 / 3;
border-radius: var(--shark-radius-md);
}
.shark-contactglobal__data {
gap: 1.25rem;
}
.shark-contactglobal__label {
font-size: 0.95rem;
letter-spacing: 0.03em;
}
.shark-contactglobal__email {
font-size: 0.98rem;
word-break: break-word;
}
.shark-contactglobal__email--primary {
padding: 0.7rem 1rem;
font-size: 1rem;
}
.shark-contactglobal__cta-text {
font-size: 1rem;
line-height: 1.6;
}
.shark-btn--gold-contact {
padding: 0.82rem 1.25rem;
font-size: 1rem;
letter-spacing: 0.05em;
}
}
/* ==========================================================
15. PÁGINA INTERNA · FERIA DE EMPRENDEDORES
[1] Hero 100vh parallax scroll + [2] Grid 6 cards
========================================================== */
.shark-internal {
width: 100%;
overflow: hidden;
background: var(--shark-c-bg);
}
/* ---------- [1] Hero interno 100vh (Parallax) ---------- */
.shark-page-hero {
position: relative;
width: 100%;
min-height: 100vh;
min-height: 100dvh;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
isolation: isolate;
color: var(--shark-c-white);
text-align: center;
background-color: var(--shark-c-dark-bg-2);
}
.shark-page-hero__bg {
position: absolute;
top: -8%;
left: 0;
right: 0;
height: 116%;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
will-change: transform;
z-index: -1;
}
.shark-page-hero[data-shark-parallax-image] .shark-page-hero__bg {
background-image: attr(data-shark-parallax-image url);
}
/* ---------- Variante: HERO SOLO IMAGEN (sin overlay, sin textos, SIN parallax) ---------- */
.shark-page-hero--imageonly {
position: relative;
background-color: #04101f;
min-height: 100vh;
min-height: 100dvh;
padding: 0 !important;
width: 100%;
background-repeat: no-repeat;
background-size: cover;
background-position: center center; /* ← Centrado EXACTO vertical y horizontal */
background-position-x: 50%;
background-position-y: 50%;
background-attachment: scroll;
overflow: hidden;
}
.shark-page-hero--imageonly .shark-page-hero__bg {
display: none;
}
.shark-page-hero--imageonly + * {
position: relative;
z-index: 1;
isolation: isolate;
background: var(--shark-c-bg);
}
/* ---------- Variante ESPECIAL solo página CAPACITACIONES: Hero 75% alto pantalla ---------- */
.shark-page-hero--capacitaciones-75 {
min-height: 75vh;
min-height: 75dvh;
}
.shark-page-hero__overlay { display: none; }
.shark-page-hero__inner { display: none; }
.shark-page-hero__scrolldown { display: none; }
/* ---------- [2] Grid 6 Cards Feria ---------- */
.shark-feria-cards {
position: relative;
padding: clamp(4rem, 8vw, 6.5rem) 0;
background:
radial-gradient(900px 420px at 10% 10%, rgba(31, 164, 197, 0.10), transparent 60%),
radial-gradient(800px 420px at 90% 80%, rgba(12, 53, 88, 0.45), transparent 60%),
var(--shark-c-bg);
overflow: hidden;
}
/* Variante Feria: Fondo NEGRO PURO y SIN título de sección */
.shark-feria-cards--nobg {
background: #000000;
padding-top: clamp(3.5rem, 7vw, 5.5rem);
padding-bottom: clamp(3.5rem, 7vw, 5.5rem);
}
.shark-feria-cards--nobg .shark-feria-cards__header { display: none; }
/* Todo el main interno de feria también negro para quede uniforme de punta a punta */
.shark-internal--feria {
background: #000000;
}
/* --------------- Variante Categorías internas (Salud y Belleza, Moda...) --------------- */
.shark-internal--categoria {
background: #000000;
}
/* Grid con 1 SOLA columna centrada (no afecta a feria 3 cols) */
.shark-categoria-cards--1cols .shark-feria-cards__grid {
display: grid;
grid-template-columns: minmax(0, 1fr);
max-width: 30rem;
margin-left: auto;
margin-right: auto;
gap: 1.25rem;
}
/* Grid con 2 COLUMNAS (Inscríbete / Plan Embajador / Capacitaciones) */
.shark-categoria-cards--2cols .shark-feria-cards__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
max-width: 62rem;
margin-left: auto;
margin-right: auto;
gap: 1.75rem;
}
@media (max-width: 991px) {
.shark-categoria-cards--2cols .shark-feria-cards__grid {
gap: 1.25rem;
}
}
@media (max-width: 560px) {
.shark-categoria-cards--2cols .shark-feria-cards__grid {
grid-template-columns: 1fr;
}
}
/* ---------- Variante ESPECIAL solo página INSCRIBETE: Cards más ANCHAS y BAJAS (rectangulares) ---------- */
.shark-inscribete-cards .shark-feria-cards__grid {
max-width: 86rem;
margin-left: auto;
margin-right: auto;
gap: 2rem;
}
@media (max-width: 1199px) {
.shark-inscribete-cards .shark-feria-cards__grid {
max-width: 78rem;
gap: 1.75rem;
}
}
@media (max-width: 991px) {
.shark-inscribete-cards .shark-feria-cards__grid {
max-width: 62rem;
gap: 1.5rem;
}
}
@media (max-width: 560px) {
.shark-inscribete-cards .shark-feria-cards__grid {
max-width: 100%;
gap: 1.25rem;
}
}
/* ---------- Variante INSCRIBETE CTA ajustada: menos padding inferior + cards padding superior reducido ---------- */
.shark-cta-solo--inscribete-tight {
padding-top: clamp(1.75rem, 3.5vw, 3rem);
padding-bottom: clamp(0.5rem, 1.25vw, 1.25rem);
}
.shark-inscribete-cards {
padding-top: clamp(1rem, 2vw, 2rem) !important;
scroll-margin-top: 110px;
}
@media (max-width: 639px) {
.shark-inscribete-cards {
scroll-margin-top: 80px;
}
}
/* ---------- Variante CAPACITACIONES CTA ajustada: MENOS SEPARACIÓN entre botón y footer (mismo fondo) ---------- */
.shark-cta-solo--capacitaciones-tight {
padding-top: clamp(1.75rem, 3.5vw, 3rem);
padding-bottom: clamp(0.25rem, 0.75vw, 0.75rem);
}
/* ---------- Variante PROGRAMA EMBAJADOR: SEPARACIÓN MÁXIMA 30px entre botones ↔ cards ---------- */
.shark-programaembajador-cta {
padding-top: 0.9375rem;
padding-bottom: 0.0625rem;
}
.shark-programaembajador-cards {
padding-top: 0.9375rem !important;
padding-bottom: 0.0625rem !important;
}
/* ---------- Página QUIENES SOMOS: texto institucional + galería + banner ---------- */
.shark-quienes-text {
position: relative;
width: 100%;
background: #000000;
padding: clamp(2.25rem, 6vw, 4rem) 0 clamp(1rem, 2vw, 1.75rem);
isolation: isolate;
z-index: 1;
}
.shark-quienes-text__inner {
width: 100%;
max-width: 66rem;
margin: 0 auto;
padding: 0 var(--shark-px);
display: flex;
flex-direction: column;
gap: clamp(1.5rem, 3.5vw, 2.5rem);
}
.shark-quienes-text__lead {
margin: 0;
font-size: clamp(1rem, 1.35vw, 1.2rem);
line-height: 1.8;
color: rgba(230, 240, 252, 0.92);
font-weight: 400;
letter-spacing: 0.01em;
text-align: justify;
hyphens: auto;
}
.shark-quienes-text__quote {
margin: 0;
padding: 1.5rem 2rem;
font-size: clamp(1.15rem, 1.9vw, 1.65rem);
line-height: 1.5;
font-weight: 800;
text-align: center;
color: var(--shark-c-gold, #f9cd33);
text-shadow: 0 1px 0 rgba(0,0,0,.6), 0 0 18px rgba(245,197,24,.2);
border-top: 1px solid rgba(245,197,24,.25);
border-bottom: 1px solid rgba(245,197,24,.25);
background:
radial-gradient(400px 180px at 50% 50%, rgba(245,197,24,.08), transparent 70%);
border-radius: var(--shark-radius-md);
position: relative;
}
.shark-quienes-text__quote-mark {
opacity: .55;
font-size: 1.25em;
padding: 0 0.25em;
vertical-align: -0.08em;
}
/* 2 columnas imágenes */
.shark-quienes-gallery {
position: relative;
width: 100%;
background: #000000;
padding: clamp(1.75rem, 5vw, 3.25rem) 0 clamp(0.5rem, 1.25vw, 1rem);
}
.shark-quienes-gallery__inner {
width: 100%;
max-width: 86rem;
margin: 0 auto;
padding: 0 var(--shark-px);
}
.shark-quienes-gallery__grid {
list-style: none;
padding: 0;
margin: 0;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: clamp(1.25rem, 3vw, 2.25rem);
}
.shark-quienes-gallery__item {
background-color: #04101f;
border: 1px solid rgba(245,197,24,.18);
border-radius: var(--shark-radius-lg);
box-shadow: 0 18px 44px -22px rgba(3,7,18,.85), 0 0 0 1px rgba(255,255,255,.02) inset;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
aspect-ratio: 4 / 3;
transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.shark-quienes-gallery__item:hover,
.shark-quienes-gallery__item:focus-within {
transform: translateY(-4px);
border-color: rgba(245,197,24,.45);
box-shadow:
0 28px 60px -26px rgba(3,7,18,.9),
0 0 0 1px rgba(245,197,24,.35),
0 0 30px -6px rgba(245,197,24,.25);
}
.shark-quienes-gallery__item img {
width: 100%;
height: 100%;
object-fit: contain;
object-position: center center;
display: block;
background-color: #04101f;
}
@media (max-width: 768px) {
.shark-quienes-gallery__grid {
grid-template-columns: 1fr;
gap: 1.25rem;
}
.shark-quienes-text__lead {
text-align: left;
}
}
/* Imagen GRANDE banner */
.shark-quienes-bigimg {
position: relative;
width: 100%;
background: #000000;
padding: clamp(1.75rem, 5vw, 3.25rem) 0 clamp(0.5rem, 1.25vw, 1rem);
}
.shark-quienes-bigimg__inner {
width: 100%;
max-width: 92rem;
margin: 0 auto;
padding: 0 var(--shark-px);
}
.shark-quienes-bigimg__inner img {
display: block;
width: 100%;
height: auto;
max-height: 80vh;
object-fit: contain;
background: #04101f;
border: 1px solid rgba(245,197,24,.2);
border-radius: var(--shark-radius-lg);
box-shadow: 0 28px 64px -26px rgba(3,7,18,.95);
}
/* ---------- Página SAVIGEL: 4 cards producto horizontal con fondo ---------- */
.shark-savigel-products {
position: relative;
width: 100%;
background-color: #000000;
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
background-attachment: fixed;
padding: clamp(2.25rem, 6vw, 4.25rem) 0;
isolation: isolate;
}
.shark-savigel-products__overlay {
position: absolute;
inset: 0;
pointer-events: none;
background:
linear-gradient(
180deg,
rgba(9, 31, 64, 0.74) 0%,
rgba(20, 66, 128, 0.58) 35%,
rgba(17, 56, 110, 0.64) 65%,
rgba(9, 31, 64, 0.78) 100%
),
radial-gradient(
1400px 800px at 50% 0%,
rgba(90, 170, 248, 0.22) 0%,
rgba(40, 110, 200, 0.10) 45%,
transparent 78%
);
z-index: 1;
}
.shark-savigel-products__inner {
position: relative;
z-index: 2;
width: 100%;
max-width: 96rem;
margin: 0 auto;
padding: 0 var(--shark-px);
display: flex;
flex-direction: column;
gap: clamp(1.75rem, 4vw, 3.5rem);
}
/* 1 card: 2 columnas horizontales (media | content) */
.shark-savigel-card {
background: rgba(12, 40, 82, 0.88);
border: 1px solid rgba(130, 196, 255, 0.26);
border-radius: var(--shark-radius-2xl);
box-shadow:
0 36px 70px -40px rgba(0, 18, 55, 0.92),
0 0 0 1px rgba(190, 226, 255, 0.045) inset,
0 1px 0 rgba(220, 240, 255, 0.11) inset,
0 -1px 0 rgba(5, 16, 38, 0.72) inset,
0 0 70px -26px rgba(90, 170, 248, 0.22);
padding: clamp(1rem, 2.5vw, 2rem);
display: grid;
grid-template-columns: minmax(0, 30rem) minmax(0, 1fr);
gap: clamp(1.5rem, 3.5vw, 3rem);
align-items: start;
transition: transform .35s ease, border-color .35s ease, box-shadow .35s ease, background-color .35s ease;
}
.shark-savigel-card:hover {
transform: translateY(-3px);
background-color: rgba(20, 62, 122, 0.92);
border-color: rgba(160, 215, 255, 0.52);
box-shadow:
0 48px 80px -40px rgba(0, 14, 46, 0.97),
0 0 0 1px rgba(160, 215, 255, 0.44),
0 0 90px -16px rgba(90, 180, 255, 0.32);
}
/* Columna IZQ: foto + botón debajo */
.shark-savigel-card__media {
display: flex;
flex-direction: column;
gap: 1rem;
align-items: center;
justify-content: flex-start;
}
.shark-savigel-card__media img {
width: 100%;
aspect-ratio: 1 / 1;
object-fit: contain;
object-position: center center;
background-color: rgba(8, 24, 52, 0.92);
border: 1px solid rgba(130, 196, 255, 0.26);
border-radius: var(--shark-radius-xl);
box-shadow: 0 24px 50px -30px rgba(0, 14, 40, 0.94);
display: block;
}
.shark-savigel-card__btn {
width: 100%;
}
/* Columna DER: texto / títulos / bullets */
.shark-savigel-card__content {
display: flex;
flex-direction: column;
gap: 1rem;
color: rgba(236, 246, 255, 0.95);
}
.shark-savigel-card__title {
margin: 0;
font-size: clamp(1.1rem, 1.9vw, 1.6rem);
line-height: 1.3;
font-weight: 800;
color: var(--shark-c-gold, #f9cd33);
letter-spacing: -0.01em;
text-shadow: 0 1px 0 rgba(0,0,0,.6);
}
.shark-savigel-card__lead {
margin: 0;
font-size: clamp(0.95rem, 1.1vw, 1.05rem);
line-height: 1.75;
color: rgba(240, 249, 255, 0.90);
text-align: justify;
hyphens: auto;
}
.shark-savigel-card__subblock {
margin-top: 0.25rem;
display: flex;
flex-direction: column;
gap: 0.6rem;
}
.shark-savigel-card__subtitle {
margin: 0;
font-size: clamp(0.95rem, 1.2vw, 1.1rem);
font-weight: 700;
color: rgba(255, 244, 200, 0.97);
letter-spacing: 0.005em;
}
.shark-savigel-card__list {
margin: 0;
padding: 0;
list-style: none;
display: flex;
flex-direction: column;
gap: 0.4rem;
}
.shark-savigel-card__list li {
font-size: clamp(0.9rem, 1.05vw, 1rem);
line-height: 1.6;
padding: 0.55rem 0.95rem;
background: rgba(90, 170, 248, 0.11);
border-left: 3px solid rgba(140, 200, 255, 0.70);
border-radius: 0 var(--shark-radius-md) var(--shark-radius-md) 0;
color: rgba(242, 250, 255, 0.94);
}
.shark-savigel-card__note {
margin: 0;
font-size: clamp(0.9rem, 1.05vw, 1rem);
line-height: 1.6;
color: rgba(228, 242, 255, 0.89);
font-style: italic;
padding-left: 0.25rem;
}
.shark-savigel-card__price {
margin-top: 0.5rem;
align-self: flex-start;
padding: 1.1rem 1.75rem;
font-size: clamp(1.15rem, 1.65vw, 1.5rem);
font-weight: 900;
letter-spacing: 0.01em;
color: var(--shark-c-gold, #f9cd33);
text-shadow:
0 1px 0 rgba(0,0,0,.65),
0 0 22px rgba(245,197,24,.35),
0 0 4px rgba(255,230,120,.55);
background-color: rgba(8, 26, 58, 0.78);
background-image:
radial-gradient(420px 140px at 50% 50%, rgba(90, 170, 248, 0.18), transparent 70%);
border-top: 1px solid rgba(140, 200, 255, 0.34);
border-bottom: 1px solid rgba(140, 200, 255, 0.34);
border-left: 3px solid rgba(180, 222, 255, 0.62);
border-right: 0;
border-radius: 0 var(--shark-radius-lg) var(--shark-radius-lg) 0;
box-shadow:
0 12px 26px -14px rgba(0, 10, 30, 0.9),
0 1px 0 rgba(206, 234, 255, 0.07) inset;
}
/* RESPONSIVE: móvil + tablet <991px → apilar verticalmente */
@media (max-width: 991px) {
.shark-savigel-products {
background-attachment: scroll;
}
.shark-savigel-card {
grid-template-columns: 1fr;
gap: 1.75rem;
padding: 1.25rem;
}
.shark-savigel-card__media {
max-width: 32rem;
margin: 0 auto;
width: 100%;
}
.shark-savigel-card__lead {
text-align: left;
}
}
@media (prefers-reduced-motion: reduce) {
.shark-savigel-card,
.shark-savigel-card:hover {
transform: none;
transition: none;
}
.shark-savigel-products {
background-attachment: scroll;
}
}
/* ---------- Variante ESPECIAL solo página PLAN EMBAJADOR: cards VERTICALES 3:4 + imagen COMPLETA sin recorte ---------- */
.shark-programaembajador-cards .shark-feria-card__media {
aspect-ratio: 3 / 4;
background-color: #04101f;
}
.shark-programaembajador-cards .shark-feria-card__media img {
object-fit: contain;
object-position: center center;
background-color: #04101f;
}
.shark-programaembajador-cards .shark-feria-card__wrap:hover .shark-feria-card__media img,
.shark-programaembajador-cards .shark-feria-card__wrap:focus-within .shark-feria-card__media img {
transform: scale(1.025);
}
.shark-feria-card__wrap--nocta {
gap: 0 !important;
padding-bottom: 1rem;
}
.shark-feria-card__wrap--nocta .shark-feria-card__cta {
display: none;
}
.shark-inscribete-cards .shark-feria-card__media {
aspect-ratio: 16 / 9;
}
@media (max-width: 991px) {
.shark-inscribete-cards .shark-feria-card__media {
aspect-ratio: 4 / 3;
}
}
@media (max-width: 560px) {
.shark-inscribete-cards .shark-feria-card__media {
aspect-ratio: 16 / 9;
}
}
/* --------------- Variante Landing simple (Gastronomia): HERO + SECCIÓN APARTE CTA --------------- */
.shark-internal--landing {
background: #000000;
}
/* Hero SOLO IMAGEN de la variante Gastronomía usa ya .shark-page-hero--imageonly */
/* Sección aparte: botón solo, debajo del hero, antes del footer */
.shark-cta-solo {
position: relative;
width: 100%;
background: #000000;
padding: clamp(2.5rem, 6vw, 4.5rem) 0 clamp(3.5rem, 7vw, 6rem);
isolation: isolate;
z-index: 1;
}
.shark-cta-solo__inner {
width: 100%;
max-width: var(--shark-rw);
margin: 0 auto;
padding: 0 var(--shark-px);
display: flex;
align-items: center;
justify-content: center;
gap: 1rem;
}
.shark-btn--hero-gold,
.shark-btn--hero-gold:link,
.shark-btn--hero-gold:visited,
.shark-btn--hero-gold:hover,
.shark-btn--hero-gold:focus,
.shark-btn--hero-gold:focus-visible,
.shark-btn--hero-gold:active,
.shark-btn--hero-gold .shark-btn__label {
color: #041020 !important;
}
.shark-btn--hero-gold {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: min(40rem, 92%);
max-width: 100%;
min-height: 68px;
padding: 1rem 2.5rem;
font-size: clamp(0.95rem, 1.4vw, 1.1rem);
font-weight: 900;
letter-spacing: 0.22em;
text-transform: uppercase;
text-align: center;
line-height: 1.15;
white-space: normal;
word-break: break-word;
hyphens: auto;
color: #041020;
background: linear-gradient(180deg,
#fad74f 0%,
#f5c518 42%,
#e1b012 100%);
border: 1px solid rgba(176, 123, 4, 0.50);
border-radius: 999px;
box-shadow:
0 22px 50px -22px rgba(245, 197, 24, 0.95),
0 18px 44px -28px rgba(255, 199, 0, 0.85),
0 1px 0 rgba(255, 255, 255, 0.65) inset,
0 -2px 0 rgba(128, 85, 0, 0.32) inset;
text-decoration: none;
cursor: pointer;
transition:
transform .3s cubic-bezier(.2,.8,.2,1),
box-shadow .3s ease,
background .3s ease,
filter .3s ease;
font-family: inherit;
}
/* Hover: sube 4px, se vuelve más claro y con + halo (mismo sistema de contraste AAA) */
.shark-btn--hero-gold:hover,
.shark-btn--hero-gold:focus-visible {
transform: translateY(-4px);
background: linear-gradient(180deg,
#ffe267 0%,
#f9cd33 42%,
#eebd1a 100%);
box-shadow:
0 32px 64px -24px rgba(245, 197, 24, 0.98),
0 26px 58px -36px rgba(255, 216, 88, 0.92),
0 1px 0 rgba(255, 255, 255, 0.70) inset,
0 -2px 0 rgba(128, 85, 0, 0.32) inset;
outline: none;
}
.shark-btn--hero-gold:focus-visible {
outline: 2px solid #f5c518;
outline-offset: 5px;
}
.shark-btn--hero-gold:active {
transform: translateY(0) scale(0.995);
background: linear-gradient(180deg,
#e7bf19 0%,
#d4a910 50%,
#b9920a 100%);
filter: saturate(0.98);
box-shadow:
0 12px 28px -18px rgba(245, 197, 24, 0.60),
0 1px 0 rgba(255, 255, 255, 0.40) inset,
0 -1px 0 rgba(128, 85, 0, 0.32) inset;
}
/* Estado botón placeholder disabled (sin URL) */
.shark-btn--hero-gold[disabled],
.shark-btn--hero-gold[aria-disabled="true"] {
opacity: 1;
cursor: not-allowed;
background: linear-gradient(180deg,
#fad74f 0%,
#f5c518 42%,
#e1b012 100%);
box-shadow:
0 20px 44px -22px rgba(245, 197, 24, 0.85),
0 1px 0 rgba(255, 255, 255, 0.65) inset,
0 -2px 0 rgba(128, 85, 0, 0.32) inset;
}
.shark-btn--hero-gold[disabled]:hover,
.shark-btn--hero-gold[aria-disabled="true"]:hover,
.shark-btn--hero-gold[disabled]:active,
.shark-btn--hero-gold[aria-disabled="true"]:active {
transform: none;
filter: none;
background: linear-gradient(180deg,
#fad74f 0%,
#f5c518 42%,
#e1b012 100%);
box-shadow:
0 20px 44px -22px rgba(245, 197, 24, 0.85),
0 1px 0 rgba(255, 255, 255, 0.65) inset,
0 -2px 0 rgba(128, 85, 0, 0.32) inset;
}
/* Responsive botón Gastronomía */
@media (max-width: 991px) {
.shark-btn--hero-gold {
font-size: 0.95rem;
letter-spacing: 0.20em;
min-height: 62px;
padding: 0.9rem 2rem;
}
}
@media (max-width: 560px) {
.shark-btn--hero-gold {
font-size: 0.9rem;
letter-spacing: 0.18em;
min-width: 94%;
min-height: 64px;
padding: 0.95rem 1.5rem;
}
}
@media (prefers-reduced-motion: reduce) {
.shark-btn--hero-gold { transition: none; }
.shark-btn--hero-gold:hover { transform: none; }
}
/* Compensación admin-bar para hero imageonly es la que ya está definida arriba,
no necesita ajuste extra para la sección .shark-cta-solo. */
/* Estado DISABLED del botón cuando no hay URL (placeholder) */
.shark-btn--feria-card[disabled],
.shark-btn--feria-card[aria-disabled="true"] {
opacity: 1;
cursor: not-allowed;
background: linear-gradient(180deg,
#f9cd33 0%,
#f0be1b 50%,
#dcae10 100%);
box-shadow:
0 12px 26px -14px rgba(245, 197, 24, 0.75),
0 1px 0 rgba(255, 255, 255, 0.55) inset,
0 -2px 0 rgba(128, 85, 0, 0.30) inset;
}
.shark-btn--feria-card[disabled]:hover,
.shark-btn--feria-card[aria-disabled="true"]:hover,
.shark-btn--feria-card[disabled]:active,
.shark-btn--feria-card[aria-disabled="true"]:active {
transform: none;
background: linear-gradient(180deg,
#f9cd33 0%,
#f0be1b 50%,
#dcae10 100%);
box-shadow:
0 12px 26px -14px rgba(245, 197, 24, 0.75),
0 1px 0 rgba(255, 255, 255, 0.55) inset,
0 -2px 0 rgba(128, 85, 0, 0.30) inset;
filter: none;
}
.shark-feria-cards__inner {
width: min(var(--shark-rw), 100%);
margin: 0 auto;
padding: 0 var(--shark-px);
}
.shark-feria-cards__header {
text-align: center;
margin: 0 auto 3.5rem;
max-width: 72ch;
display: flex;
flex-direction: column;
gap: 0.75rem;
align-items: center;
}
.shark-feria-cards__kicker {
margin: 0;
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.24em;
text-transform: uppercase;
color: var(--shark-c-gold);
}
.shark-feria-cards__title {
margin: 0;
font-size: clamp(2rem, 4.5vw, 3.2rem);
font-weight: 900;
letter-spacing: -0.01em;
line-height: 1.1;
color: var(--shark-c-white);
background: linear-gradient(90deg, var(--shark-c-white) 0%, var(--shark-c-gold) 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.shark-feria-cards__intro {
margin: 0.25rem 0 0;
font-size: 1rem;
line-height: 1.65;
color: rgba(215, 230, 248, 0.85);
}
.shark-feria-cards__grid {
list-style: none;
padding: 0;
margin: 0;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 1.75rem;
}
.shark-feria-card {
animation: shark-feria-card-in 0.65s cubic-bezier(.2,.8,.2,1) both;
animation-delay: var(--shark-feria-card-delay, 0s);
}
@keyframes shark-feria-card-in {
from { opacity: 0; transform: translateY(22px); }
to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
.shark-feria-card { animation: none; }
.shark-page-hero__scrolldown-wheel { animation: none; }
.shark-page-hero__bg { will-change: auto; }
}
.shark-feria-card__wrap {
position: relative;
background: var(--shark-c-dark-bg-2);
border: 1px solid var(--shark-c-dark-border);
border-radius: var(--shark-radius-lg);
overflow: hidden;
box-shadow: var(--shark-shadow-dark);
transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease, border-color .35s ease;
display: flex;
flex-direction: column;
height: 100%;
}
.shark-feria-card__wrap:hover,
.shark-feria-card__wrap:focus-within {
transform: translateY(-6px);
box-shadow:
0 24px 56px -20px rgba(3, 7, 18, 0.70),
0 0 0 1px rgba(245, 197, 24, 0.35),
0 14px 34px -18px rgba(245, 197, 24, 0.35);
border-color: rgba(245, 197, 24, 0.35);
}
.shark-feria-card__media {
position: relative;
width: 100%;
aspect-ratio: 3 / 2;
overflow: hidden;
background: #04101f;
}
.shark-feria-card__media::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, transparent 55%, rgba(3, 12, 26, 0.45) 100%);
pointer-events: none;
}
.shark-feria-card__media img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform .65s cubic-bezier(.2,.8,.2,1), filter .35s ease;
filter: saturate(1.05);
}
.shark-feria-card__wrap:hover .shark-feria-card__media img,
.shark-feria-card__wrap:focus-within .shark-feria-card__media img {
transform: scale(1.06);
filter: saturate(1.15);
}
/* ---------- Variante Card: SOLO IMAGEN + BOTÓN (estilo referencia) ---------- */
.shark-feria-card__wrap--imagebtn {
display: flex;
flex-direction: column;
gap: 1rem;
padding: 1rem;
background: linear-gradient(180deg,
#071931 0%,
#05142a 55%,
#041020 100%);
border: 1px solid rgba(245, 197, 24, 0.22);
border-radius: 32px;
box-shadow:
0 28px 60px -28px rgba(0, 0, 0, 0.78),
0 0 0 1px rgba(255, 255, 255, 0.02) inset;
transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease, border-color .35s ease;
}
.shark-feria-card__wrap--imagebtn:hover,
.shark-feria-card__wrap--imagebtn:focus-within {
transform: translateY(-6px);
border-color: rgba(245, 197, 24, 0.55);
box-shadow:
0 34px 80px -26px rgba(2, 6, 16, 0.82),
0 20px 44px -24px rgba(245, 197, 24, 0.35),
0 0 0 1px rgba(245, 197, 24, 0.22) inset;
}
.shark-feria-card__media--full {
aspect-ratio: 1 / 1.12;
width: 100%;
border-radius: 24px;
overflow: hidden;
position: relative;
background: #030c1a;
border: 1px solid rgba(245, 197, 24, 0.14);
box-shadow: 0 10px 24px -14px rgba(0, 0, 0, 0.65);
}
.shark-feria-card__media--full::after { display: none; }
.shark-feria-card__cta {
padding: 0.1rem 0 0.25rem;
display: flex;
align-items: stretch;
justify-content: stretch;
}
/* Fuerza color de texto NEGRO (#041020) en TODOS los estados del botón feria-card
para que no se herede el dorado del selector global a:hover,a:focus { color: gold; } */
.shark-btn--feria-card,
.shark-btn--feria-card:link,
.shark-btn--feria-card:visited,
.shark-btn--feria-card:hover,
.shark-btn--feria-card:focus,
.shark-btn--feria-card:focus-visible,
.shark-btn--feria-card:active,
.shark-btn--feria-card .shark-btn__label {
color: #041020 !important;
}
.shark-btn--feria-card {
display: flex;
align-items: center;
justify-content: center;
flex: 1 1 auto;
width: 100%;
min-height: 56px;
padding: 0.95rem 1.5rem;
font-size: 0.95rem;
font-weight: 900;
letter-spacing: 0.20em;
text-transform: uppercase;
text-align: center;
line-height: 1.15;
white-space: normal;
word-break: break-word;
hyphens: auto;
color: #041020;
background: linear-gradient(180deg,
#f9cd33 0%,
#f0be1b 50%,
#dcae10 100%);
border: 1px solid rgba(176, 123, 4, 0.45);
border-radius: 999px;
box-shadow:
0 14px 30px -16px rgba(245, 197, 24, 0.85),
0 1px 0 rgba(255, 255, 255, 0.55) inset,
0 -2px 0 rgba(128, 85, 0, 0.30) inset;
text-decoration: none;
cursor: pointer;
transition:
transform .3s cubic-bezier(.2,.8,.2,1),
box-shadow .3s ease,
background .3s ease,
filter .3s ease;
font-family: inherit;
}
/* --------------- CONSTRATE WCAG 2.1 AAA (ratio ~14.5:1 texto #041020 sobre #f9cd33) --------------- */
.shark-btn--feria-card:hover,
.shark-btn--feria-card:focus-visible {
transform: translateY(-3px);
background: linear-gradient(180deg,
#ffd748 0%,
#f5c518 50%,
#e4b211 100%);
box-shadow:
0 22px 44px -18px rgba(245, 197, 24, 0.95),
0 16px 38px -22px rgba(255, 199, 0, 0.70),
0 1px 0 rgba(255, 255, 255, 0.65) inset,
0 -2px 0 rgba(128, 85, 0, 0.30) inset;
outline: none;
}
.shark-btn--feria-card:focus-visible {
outline: 2px solid #f5c518;
outline-offset: 4px;
}
.shark-btn--feria-card:active {
transform: translateY(0) scale(0.99);
background: linear-gradient(180deg,
#e6bd19 0%,
#d4a910 55%,
#b9920a 100%);
filter: saturate(0.98);
box-shadow:
0 8px 18px -12px rgba(245, 197, 24, 0.60),
0 1px 0 rgba(255, 255, 255, 0.35) inset,
0 -1px 0 rgba(128, 85, 0, 0.30) inset;
}
.shark-btn--feria-card .shark-btn__label {
flex: 1 1 auto;
min-width: 0;
display: inline-block;
}
/* Responsive ratios & font size (armonía mobile) */
@media (max-width: 1199px) {
.shark-feria-card__wrap--imagebtn { padding: 0.9rem; border-radius: 28px; }
.shark-feria-card__media--full { border-radius: 20px; }
.shark-btn--feria-card { font-size: 0.9rem; letter-spacing: 0.18em; }
}
@media (max-width: 991px) {
.shark-feria-card__wrap--imagebtn { padding: 0.85rem; border-radius: 26px; gap: 0.85rem; }
.shark-feria-card__media--full { aspect-ratio: 3 / 3.4; border-radius: 18px; }
.shark-btn--feria-card {
font-size: 0.86rem;
letter-spacing: 0.16em;
padding: 0.9rem 1.25rem;
min-height: 52px;
}
}
@media (max-width: 560px) {
.shark-feria-card__wrap--imagebtn { padding: 1rem; border-radius: 28px; gap: 1rem; }
.shark-feria-card__media--full { aspect-ratio: 4 / 4.5; border-radius: 20px; }
.shark-btn--feria-card {
font-size: 0.95rem;
letter-spacing: 0.18em;
padding: 1rem 1.4rem;
min-height: 58px;
}
}
@media (prefers-reduced-motion: reduce) {
.shark-btn--feria-card,
.shark-feria-card__wrap--imagebtn { transition: none; }
.shark-btn--feria-card:hover,
.shark-feria-card__wrap--imagebtn:hover { transform: none; }
}
.shark-feria-card__body {
padding: 1.25rem 1.25rem 1.5rem;
display: flex;
flex-direction: column;
gap: 0.55rem;
flex: 1 1 auto;
}
.shark-feria-card__title {
margin: 0;
font-size: 1.2rem;
line-height: 1.25;
font-weight: 800;
color: var(--shark-c-gold);
letter-spacing: -0.005em;
}
.shark-feria-card__text {
margin: 0;
font-size: 0.95rem;
line-height: 1.6;
color: rgba(220, 234, 252, 0.85);
}
/* ---------- Responsive: Feria ---------- */
@media (max-width: 1199px) {
.shark-feria-cards__grid {
gap: 1.5rem;
}
}
@media (max-width: 991px) {
.shark-feria-cards__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1.25rem;
}
.shark-page-hero__inner {
padding-top: 7rem;
padding-bottom: 5rem;
}
}
@media (max-width: 768px) {
.shark-feria-cards {
padding-top: 4rem;
padding-bottom: 4rem;
}
.shark-feria-cards__header { margin-bottom: 2.5rem; }
}
@media (max-width: 560px) {
.shark-feria-cards__grid {
grid-template-columns: 1fr;
gap: 1.25rem;
}
}
@media (max-width: 480px) {
.shark-page-hero__inner {
padding-top: 6rem;
gap: 0.75rem;
}
.shark-page-hero__eyebrow { font-size: 0.7rem; padding: 0.3rem 0.8rem; }
.shark-page-hero__lede { font-size: 1rem; }
.shark-feria-card__body { padding: 1rem 1rem 1.25rem; }
.shark-feria-card__title { font-size: 1.1rem; }
}
/* ---------- ALTURA HEROES SÓLO MÓVIL (≤639px) ----------
Ajuste user 29-sep: 70vh → 52vh (más reducido, no ocupa toda la pantalla).
✅ BASE Desktop, laptop, tablet: INTACTAS
✅ TODAS LAS PÁGINAS (incluye PORTADA .shark-hero + internas):
- Portada shark-hero: 100 → 52vh
- shark-page-hero: 100 → 52vh
- shark-page-hero--imageonly: 100 → 52vh
- Capacitaciones 75%: 75 → 52vh
------------------------------------------------------------------- */
@media (max-width: 639px) {
.shark-hero,
.shark-page-hero,
.shark-page-hero--imageonly,
.shark-page-hero--capacitaciones-75 {
min-height: 52vh !important;
min-height: 52dvh !important;
padding-top: 4.5rem;
padding-bottom: 2rem;
}
}
/* ---------- Admin Bar Compensation: Hero Feria ---------- */
@media (min-width: 783px) {
body.admin-bar .shark-page-hero {
min-height: calc(100vh - 32px);
min-height: calc(100dvh - 32px);
padding-top: 32px;
}
body.admin-bar .shark-page-hero--capacitaciones-75 {
min-height: calc(75vh - 32px);
min-height: calc(75dvh - 32px);
padding-top: 32px;
}
}
/* ---------- Admin Bar Compensation: Heroes MÓVIL usuario logueado (≤782px) ---------- */
@media (max-width: 782px) and (min-width: 1px) {
body.admin-bar .shark-hero,
body.admin-bar .shark-page-hero,
body.admin-bar .shark-page-hero--imageonly,
body.admin-bar .shark-page-hero--capacitaciones-75 {
min-height: calc(52vh - 46px) !important;
min-height: calc(52dvh - 46px) !important;
padding-top: 4.5rem;
padding-bottom: 2rem;
}
}
/* ==========================================================
ADMIN BAR COMPENSATION (USUARIOS LOGUEADOS)
Evita que el header fixed tape el wpadminbar de WordPress
========================================================== */
body.admin-bar .shark-site-header {
top: 32px;
}
body.admin-bar .shark-hero__content,
body.admin-bar .shark-about,
body.admin-bar .shark-content-wrap {
padding-top: 112px; /* 80px header + 32px adminbar desktop */
}
body.admin-bar .shark-mobile-nav__panel {
top: 112px;
}
@media screen and (max-width: 782px) {
body.admin-bar .shark-site-header {
top: 46px;
}
body.admin-bar .shark-hero__content,
body.admin-bar .shark-about,
body.admin-bar .shark-content-wrap {
padding-top: 126px; /* 80px header + 46px adminbar móvil */
}
body.admin-bar .shark-mobile-nav__panel {
top: 126px;
}
}
@media screen and (max-width: 600px) {
body.admin-bar #wpadminbar {
position: fixed !important;
}
}
/* ==========================================================
BOTÓN FLOTANTE WHATSAPP · Shark Alliance
(Patrón JM Soluciones Grupales: stack bottom-right, círculo
68px, pulso verde Whatsapp. Sin shimmer amarillo hover —
cumpliendo regla permanente user.)
----------------------------------------------------------
FIXES 29-sep v3 (mobile TOTALMENTE INVISIBLE EN CAPTURA):
1. Markup ahora cuelga DIRECTAMENTE de (wp_body_open)
=> NINGÚN contenedor intermedio con overflow:hidden lo
puede recortar.
2. Selector "body > .shark-float-stack" hijo directo =>
especificidad máxima.
3. translate3d(0,0,0) => promueve a capa GPU propia, iOS nunca
la "pierde" al scrollear.
4. safe-area-inset-bottom => iPhone modernos (notch/dynamic
island) no tapan el botón con el indicador home.
5. MQ extra 480px (iPhone SE / minúsculo) y MQ 639px con
right/bottom + safe area.
========================================================== */
/* HIJO DIRECTO DE BODY — gana a cualquier regla que venga de
wrappers .page / .site / #content internos. */
body > .shark-float-stack,
body .shark-float-stack {
position: fixed !important;
right: 24px !important;
bottom: 24px !important;
top: auto !important;
left: auto !important;
width: auto !important;
height: auto !important;
max-width: none !important;
max-height: none !important;
display: flex !important;
flex-direction: column;
align-items: flex-end;
justify-content: flex-end;
gap: 1rem;
z-index: 2147483646 !important; /* MAX INT - 1: por encima TODO menos admin bar */
opacity: 1 !important;
visibility: visible !important;
overflow: visible !important;
float: none !important;
clear: both !important;
transform: translate3d(0,0,0); /* Capa GPU propia iOS/Android */
-webkit-transform: translate3d(0,0,0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
margin: 0 !important;
padding: 0 !important;
pointer-events: auto !important;
}
body > .shark-float,
body .shark-float {
position: relative !important;
width: 68px !important;
height: 68px !important;
min-width: 68px !important;
min-height: 68px !important;
overflow: visible !important; /* NO cortar el pulse expandido fuera */
isolation: auto !important; /* FIX: isolation:isolate ROMPÍA el pulse */
display: block !important;
opacity: 1 !important;
visibility: visible !important;
float: none !important;
margin: 0 !important;
padding: 0 !important;
transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
pointer-events: auto !important;
}
/* ---------- Botón base ---------- */
body .shark-float__btn {
position: relative !important;
z-index: 2 !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: 100% !important;
height: 100% !important;
min-width: 100% !important;
min-height: 100% !important;
border-radius: 50% !important;
text-decoration: none !important;
padding: 0 !important;
margin: 0 !important;
border: 2.5px solid #ffffff !important;
transition: transform .28s cubic-bezier(.22,.61,.36,1),
box-shadow .28s cubic-bezier(.22,.61,.36,1),
background-color .24s ease,
border-color .24s ease !important;
will-change: transform;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
text-indent: 0 !important;
overflow: visible !important;
color: #ffffff !important;
background-color: #25d366 !important;
}
body .shark-float__btn:focus-visible {
outline: none !important;
box-shadow: 0 0 0 3px rgba(37,211,102,.35), 0 8px 26px rgba(0,0,0,.25) !important;
}
/* ---------- Ícono (blanco WhatsApp 100% visible, fill forzado) ---------- */
body .shark-float__icon {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: 100% !important;
height: 100% !important;
color: #ffffff !important;
padding: 0 !important;
margin: 0 !important;
line-height: 0 !important;
}
body .shark-float__icon svg {
display: block !important;
width: 30px !important;
height: 30px !important;
min-width: 30px !important;
min-height: 30px !important;
color: #ffffff !important;
fill: #ffffff !important;
stroke: #ffffff !important;
stroke-width: 0 !important;
opacity: 1 !important;
visibility: visible !important;
filter: drop-shadow(0 1px 2px rgba(0,0,0,.30)) !important;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
margin: 0 !important;
padding: 0 !important;
}
/* ---------- Pulso animado detrás (FIX overflow visible + scale OK) ---------- */
body .shark-float__pulse {
position: absolute !important;
z-index: 1 !important;
inset: -6px !important;
border-radius: 50% !important;
opacity: 0.55;
transform: scale(0.94);
-webkit-transform: scale(0.94);
-webkit-animation: shark-float-pulse 2.2s cubic-bezier(.4,0,.6,1) infinite;
animation: shark-float-pulse 2.2s cubic-bezier(.4,0,.6,1) infinite;
pointer-events: none;
overflow: visible !important;
background-color: #25d366 !important;
box-shadow: 0 0 0 2px rgba(37,211,102,.62) !important;
}
@-webkit-keyframes shark-float-pulse {
0% { -webkit-transform: scale(0.94); opacity: .72; }
70% { -webkit-transform: scale(1.38); opacity: 0; }
100% { -webkit-transform: scale(1.38); opacity: 0; }
}
@keyframes shark-float-pulse {
0% { transform: scale(0.94); opacity: .72; }
70% { transform: scale(1.38); opacity: 0; }
100% { transform: scale(1.38); opacity: 0; }
}
/* ---------- Variante WHATSAPP: color verde oficial #25D366 ---------- */
body .shark-float--whatsapp .shark-float__btn {
background-color: #25d366 !important;
background-image: linear-gradient(160deg, #25d366 0%, #1da851 100%) !important;
color: #ffffff !important;
border: 2.5px solid #ffffff !important;
box-shadow:
0 4px 12px rgba(37,211,102,.28),
0 10px 28px rgba(29,168,81,.35),
0 2px 6px rgba(0,0,0,.18) !important;
}
body .shark-float--whatsapp .shark-float__btn:hover {
transform: translateY(-3px) scale(1.04) !important;
-webkit-transform: translateY(-3px) scale(1.04) !important;
background-image: linear-gradient(160deg, #29e16e 0%, #20b95a 100%) !important;
border-color: #ffffff !important;
/* REGLA PERMANENTE USER: SIN SHIMMER AMARILLO en hover. */
box-shadow:
0 6px 18px rgba(37,211,102,.36),
0 14px 36px rgba(29,168,81,.42),
0 3px 8px rgba(0,0,0,.22) !important;
}
body .shark-float--whatsapp .shark-float__btn:active {
transform: translateY(-1px) scale(1.01) !important;
-webkit-transform: translateY(-1px) scale(1.01) !important;
}
/* ---------- MQ 1023px (Tablet + Móvil general): fuerza visibilidad ---------- */
@media (max-width: 1023px) {
body > .shark-float-stack,
body .shark-float-stack {
position: fixed !important;
display: flex !important;
opacity: 1 !important;
visibility: visible !important;
z-index: 2147483646 !important;
overflow: visible !important;
transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
}
body > .shark-float,
body .shark-float {
display: block !important;
opacity: 1 !important;
visibility: visible !important;
overflow: visible !important;
}
body .shark-float--whatsapp .shark-float__btn {
opacity: 1 !important;
background-color: #25d366 !important;
background-image: linear-gradient(160deg, #25d366 0%, #1da851 100%) !important;
}
}
/* ---------- MQ 782px (Admin Bar móvil activa): compensar bottom ---------- */
@media (max-width: 782px) {
body.admin-bar > .shark-float-stack,
body.admin-bar .shark-float-stack {
bottom: calc(24px + 46px) !important;
}
}
/* ---------- MQ 639px (CELULARES, con safe-area iPhone notch) ---------- */
@media (max-width: 639px) {
body > .shark-float-stack,
body .shark-float-stack {
position: fixed !important;
/* safe-area-inset-bottom = iPhone 15+ / Dynamic Island no lo tapa */
right: calc(16px + env(safe-area-inset-right)) !important;
bottom: calc(16px + env(safe-area-inset-bottom)) !important;
top: auto !important;
left: auto !important;
display: flex !important;
gap: 0.75rem !important;
z-index: 2147483646 !important;
opacity: 1 !important;
visibility: visible !important;
overflow: visible !important;
pointer-events: auto !important;
transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
}
body > .shark-float,
body .shark-float {
width: 60px !important;
height: 60px !important;
min-width: 60px !important;
min-height: 60px !important;
overflow: visible !important;
opacity: 1 !important;
visibility: visible !important;
display: block !important;
}
body .shark-float__icon svg {
width: 28px !important;
height: 28px !important;
min-width: 28px !important;
min-height: 28px !important;
}
body.admin-bar > .shark-float-stack,
body.admin-bar .shark-float-stack {
bottom: calc(16px + 46px + env(safe-area-inset-bottom)) !important;
}
}
/* ---------- MQ EXTRA 479px (iPhone SE / pantallas minúsculas) ---------- */
@media (max-width: 479px) {
body > .shark-float-stack,
body .shark-float-stack {
position: fixed !important;
right: calc(12px + env(safe-area-inset-right)) !important;
bottom: calc(12px + env(safe-area-inset-bottom)) !important;
}
body > .shark-float,
body .shark-float {
width: 56px !important;
height: 56px !important;
min-width: 56px !important;
min-height: 56px !important;
}
body .shark-float__icon svg {
width: 26px !important;
height: 26px !important;
min-width: 26px !important;
min-height: 26px !important;
}
}
/* ---------- Admin Bar Desktop (≥783px): compensa 32px barra ---------- */
@media (min-width: 783px) {
body.admin-bar > .shark-float-stack,
body.admin-bar .shark-float-stack {
bottom: calc(24px + 32px) !important;
}
}
/* ===== Footer ===== */
.shark-site-footer {
background: var(--shark-c-bg);
border-top: 1px solid var(--shark-c-border);
padding: 2.5rem 0 2rem;
font-size: 0.9rem;
color: var(--shark-c-muted);
text-align: center;
}
.shark-footer-info {
max-width: var(--shark-rw);
margin: 0 auto;
padding: 0 var(--shark-px);
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.shark-footer-info a {
color: #ffffff; /* ← Cambiado: color AZUL → BLANCO por defecto */
text-decoration: none;
font-weight: 600;
transition: color .2s ease, text-decoration-color .2s ease;
}
.shark-footer-info a:hover,
.shark-footer-info a:focus {
color: var(--shark-c-accent); /* ← MANTENIDO: hover dorado igual que antes */
text-decoration: underline;
text-decoration-color: var(--shark-c-accent);
}
.shark-footer-whatsapp {
color: var(--shark-c-text);
font-weight: 500;
}
.shark-footer-whatsapp a {
color: var(--shark-c-whatsapp);
}
.shark-footer-whatsapp a:hover,
.shark-footer-whatsapp a:focus {
color: var(--shark-c-whatsapp-700);
}