/** * Culture Racing — Componentes de sección reutilizables * * Patrones que se aplican desde Elementor con CSS Class. * No están atados a una página concreta — cualquier página los puede usar. * * ───────────────────────────────────────────────────────────────────────── * ÍNDICE * §1 Section wrapper → .cr-section (+ --boxed, --center, --graffiti) * §2 Button row helper → .cr-btn-row * §3 Eyebrow → .cr-section-eyebrow (+ --red, accent, --left) * §4 Title → .cr-section-title (+ --stacked, size/solid/outline spans) * §5 Subtitle → .cr-section-subtitle * §6 Buttons → .cr-btn-primary / .cr-btn-secondary (+ --white) * §7 Dual button → .cr-dual-btn (+ --white) * §8 Bento fade → .cr-bento-fade * §9 Visit (contacto) → .cr-visit (layout dos columnas + foto + mapa) * §10 Responsive → TODOS los @media consolidados acá * ───────────────────────────────────────────────────────────────────────── * BREAKPOINTS (desktop es la base, sin media query) * Desktop → base (> 1024px) * Tablet → max-width: 1024px (el bento usa el sub-rango 768–1024) * Mobile → max-width: 767px * Mobile-small → max-width: 480px (solo apilado de dual-btn / CTAs) * * No hay otros breakpoints. Todos los @media viven en §10, ordenados de * más ancho a más angosto (1024 → 767 → 480) para que el cascade sea claro. * ───────────────────────────────────────────────────────────────────────── */ /* ═══════════════════════════════════════════════════════════════════════ §1 · SECTION WRAPPER ═══════════════════════════════════════════════════════════════════════ */ .cr-section { background-color: var(--cr-color-black) !important; padding: 96px 0; gap: 0; } /* Modificador: cajón centrado. Limita el contenido de la section al ancho máximo del sitio (--cr-container-max) con gutter lateral, igual que el resto. Mismo recipe de ancho que .cr-visit, pero reutilizable en cualquier section. Útil cuando el container de Elementor está en "Full Width" (e-con-full) y su contenido (p.ej. los widgets configurador / antes-después) se va de lado a lado. El fondo negro se ve full-bleed igual porque toda la página es negra. Aplicar al container de Elementor que YA tiene .cr-section: */ .cr-section--boxed, .cr-section--boxed.e-con, .cr-section--boxed.e-flex { width: 100% !important; max-width: var(--cr-container-max, 1440px) !important; margin-inline: auto !important; padding-inline: var(--cr-container-pad, 32px) !important; box-sizing: border-box !important; } /* Modificador: centra todo el contenido vertical y horizontalmente. Ideal para CTAs finales tipo "Ahora te toca a ti" donde todos los elementos van apilados y centrados. Aplicar al container outer (cr-section): Fuerza al container interior (cualquier .e-con-inner / .e-con-boxed) a flex column + align center, independiente de la config de Elementor. El text-align center también baja a los widgets descendientes (eyebrow, title, subtitle) para que el texto quede centrado dentro de su ancho. */ .cr-section--center, .cr-section.cr-section--center { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; } .cr-section--center > .e-con-inner, .cr-section--center > .elementor-container, .cr-section--center > .e-con-boxed, .cr-section--center > .e-con-boxed > .e-con-inner, .cr-section--center > .e-flex, .cr-section--center > .e-flex > .e-con-inner { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; width: 100% !important; } .cr-section--center .cr-section-eyebrow .elementor-heading-title, .cr-section--center .cr-section-title .elementor-heading-title, .cr-section--center .cr-section-subtitle, .cr-section--center .cr-section-subtitle p { text-align: center !important; } /* Variante con textura graffiti de fondo. */ .cr-section--graffiti { position: relative; overflow: hidden; } .cr-section--graffiti::before { content: ''; position: absolute; inset: 0; background-image: url('../img/texture-graffiti.webp'); background-size: cover; background-position: center center; background-repeat: no-repeat; mix-blend-mode: var(--cr-section-texture-blend, normal); opacity: var(--cr-section-texture-opacity, 0.3); pointer-events: none; z-index: 0; /* Máscara de la textura — gradiente "to top" para medir desde el FONDO: - 0 (borde inferior) → transparent: zona de respiro al final. - --cr-section-texture-bottom-offset (default 220px desde abajo): CORTE ABRUPTO. Aquí empieza la textura plena. Las dos paradas en el mismo punto (transparent y black) producen el corte sin fade. - calc(100% - 120px): textura sigue plena hasta cerca del tope. - 100% (borde superior) → transparent: fade de entrada con el hero. Variable --cr-section-texture-bottom-offset: distancia desde el FONDO donde empieza la textura. Calíbrala según donde termina tu bento. - Sube el valor para que la textura termine MÁS ARRIBA (más respiro). - Baja el valor para que llegue MÁS ABAJO (menos respiro). */ -webkit-mask-image: linear-gradient( to top, transparent 0, transparent var(--cr-section-texture-bottom-offset, 220px), black var(--cr-section-texture-bottom-offset, 220px), black calc(100% - var(--cr-section-texture-fade-top, 180px)), transparent 100% ); mask-image: linear-gradient( to top, transparent 0, transparent var(--cr-section-texture-bottom-offset, 220px), black var(--cr-section-texture-bottom-offset, 220px), black calc(100% - var(--cr-section-texture-fade-top, 180px)), transparent 100% ); } /* Todos los hijos directos quedan por encima de la textura. */ .cr-section--graffiti > * { position: relative; z-index: 1; } /* ═══════════════════════════════════════════════════════════════════════ §2 · BUTTON ROW HELPER ═══════════════════════════════════════════════════════════════════════ */ /* Helper: container flex row para CTAs lado a lado. Reusable en cualquier sección donde tengas 2-3 botones que deben aparecer alineados horizon- talmente con wrap automático en mobile. Aplicar al container que envuelve los botones: */ .cr-btn-row, .cr-btn-row.e-con, .cr-btn-row.e-con-full, .cr-btn-row.e-con-boxed, .cr-btn-row.e-flex { display: grid !important; grid-template-columns: 1fr 1fr; align-items: center !important; justify-content: center !important; gap: 16px !important; width: auto !important; max-width: 100%; } .cr-btn-row--cta { margin-top: 3rem; } div.cr-section-subtitle--cta, div.cr-section-subtitle--cta p, div.cr-section-subtitle--cta .elementor-widget-container { max-width: 50rem !important; } /* ═══════════════════════════════════════════════════════════════════════ §3 · EYEBROW ═══════════════════════════════════════════════════════════════════════ */ .cr-section-eyebrow .elementor-heading-title, .cr-section-eyebrow--red .elementor-heading-title { color: rgba(255, 255, 255, 0.7) !important; font-family: var(--cr-font-body) !important; font-size: 14px !important; font-weight: 600 !important; letter-spacing: 0.15em !important; text-transform: uppercase !important; text-align: center !important; line-height: 1.4 !important; } /* Centrado robusto del eyebrow: si el Heading usa el tag (inline), el text-align del propio span NO lo centra (un inline se ajusta a su contenido). El centrado tiene que venir del contenedor del widget, que ocupa el 100% del ancho. Así funciona sea ,

,

o . */ .cr-section-eyebrow, .cr-section-eyebrow--red, .cr-section-eyebrow .elementor-widget-container, .cr-section-eyebrow--red .elementor-widget-container { text-align: center !important; } /* Variante: eyebrow completamente rojo (sin acento puntual). Usar en lugar de combinar varios `cr-eyebrow-accent` cuando TODO el texto debe ir en rojo. Aplicar al lado de `cr-section-eyebrow`: La especificidad y todo el reset visual ya están en la clase base. NOTA SOBRE EYEBROWS PAGE-SPECIFIC: Cada página (home, contact, prefooter, nosotros, etc.) define sus propias clases custom de eyebrow (`.cr-hero-eyebrow`, `.cr-expo-eyebrow`, `.cr-prefooter-eyebrow`, etc.) con micro-ajustes de margin / font-size / letter-spacing apropiados para cada contexto. NO se consolidan acá porque cada variante tiene tweaks tipográficos intencionales que dan personalidad a la sección. El color rojo está unificado (todos usan `var(--cr-color-primary)`) y eso es lo que mantiene la consistencia del proyecto. */ .cr-section-eyebrow--red .elementor-heading-title, .cr-section-eyebrow.cr-section-eyebrow--red .elementor-heading-title { color: var(--cr-color-primary) !important; font-weight: 700 !important; letter-spacing: 0.18em !important; } .cr-section-eyebrow--red-cta { opacity: .8; margin-top: 2rem; } /* Acento rojo para caracteres puntuales dentro del eyebrow (ej. signos de interrogación). Aplicar como span: ¿ERES MARCA? La especificidad hereda font-family / font-size / letter-spacing del padre `cr-section-eyebrow`. Solo cambiamos color. */ .cr-eyebrow-accent { color: var(--cr-color-primary) !important; font-family: inherit; font-weight: inherit; } /* Variante left-aligned del eyebrow (para headers de sección alineados a la izquierda, ej. el header del configurador). Pisa el centrado forzado tanto del heading-title como del contenedor del widget. Va DESPUÉS de las reglas de centrado para ganar por orden a igual especificidad. Como el eyebrow suele ir en tag (inline), el alineado real lo da el contenedor. */ .cr-section-eyebrow--left, .cr-section-eyebrow--left .elementor-widget-container, .cr-section-eyebrow.cr-section-eyebrow--left .elementor-widget-container, .cr-section-eyebrow--left .elementor-heading-title, .cr-section-eyebrow.cr-section-eyebrow--left .elementor-heading-title { text-align: left !important; padding-left: .6rem; } /* ═══════════════════════════════════════════════════════════════════════ §4 · TITLE ═══════════════════════════════════════════════════════════════════════ */ .cr-section-title, .cr-section-title .elementor-heading-title, .cr-section-title .elementor-widget-container { color: var(--cr-color-white) !important; font-family: var(--cr-font-display) !important; font-size: clamp(48px, 8vw, 96px) !important; font-weight: 400 !important; /* Super Brigade no tiene varios pesos */ line-height: 1.0 !important; letter-spacing: 1px !important; text-transform: uppercase !important; text-align: center !important; } /* Variante: título con LÍNEAS apiladas vertical (para títulos split tipo "EMPEZAMOS / CON UNA IDEA / SIMPLE"). El heading-title pasa de inline a flex column y cada línea es un . Aplicar al lado de la clase base: y el contenido HTML: EMPEZAMOS CON UNA IDEA SIMPLE */ .cr-section-title--stacked .elementor-heading-title, .cr-section-title.cr-section-title--stacked .elementor-heading-title { display: flex !important; flex-direction: column !important; align-items: center !important; gap: clamp(2px, 0.3vw, 6px) !important; font-style: italic !important; font-size: clamp(40px, 5.2vw, 80px) !important; line-height: 0.95 !important; letter-spacing: -0.01em !important; } .cr-section-title-line { display: flex; flex-wrap: nowrap; align-items: baseline; justify-content: center; gap: 0.32em; } /* Variante left-aligned del título stacked (para layouts dos-columnas donde el título vive en una columna y no debe estar centrado). */ .cr-section-title--stacked.cr-section-title--left .elementor-heading-title, .cr-section-title.cr-section-title--stacked.cr-section-title--left .elementor-heading-title { align-items: flex-start !important; } .cr-section-title--stacked.cr-section-title--left .cr-section-title-line { justify-content: flex-start; } /* ── Tamaño de título por nivel (independiente de solid/outline) ────────── El heading define el tamaño de REFERENCIA (su font-size = 1em, el clamp). Aplicá una de estas clases AL MISMO span (o línea) que lleva el color, para fijar su tamaño en em respecto al ref — así controlás el tamaño por ELEMENTO, no por si es solid u outline. Patrón abierto: para otra proporción agregá un __size-N-7 con `font-size: calc(N em / 7)`. TU ESTILO A MEDIDA (El "7" es la base del clamp de referencia: 1em = 7/7, el nivel más grande.) */ .cr-section-title__size-full, .cr-section-title .cr-section-title__size-full { font-size: 1em !important; /* 100% del ref (nivel más grande) */ } .cr-section-title__size-6-7, .cr-section-title .cr-section-title__size-6-7 { font-size: calc(6em / 7) !important; /* 6/7 ≈ 86% */ } .cr-section-title__size-5-7, .cr-section-title .cr-section-title__size-5-7 { font-size: calc(5em / 7) !important; /* 5/7 ≈ 71% */ } .cr-section-title__size-4-7, .cr-section-title .cr-section-title__size-4-7 { font-size: calc(4em / 7) !important; /* 4/7 ≈ 57% */ } .cr-section-title__size-3-7, .cr-section-title .cr-section-title__size-3-7 { font-size: calc(3em / 7) !important; /* 3/7 ≈ 43% */ } /* Span solid blanco (default del título, pero útil cuando se mezcla con otros spans coloreados — pisa cualquier herencia ambigua). */ .cr-section-title__solid, .cr-section-title .cr-section-title__solid { color: var(--cr-color-white) !important; -webkit-text-fill-color: var(--cr-color-white) !important; font-family: inherit; font-weight: inherit; } /* Span con efecto outline dentro del título. Hereda font-family y font-weight del título padre. ALIASES PAGE-SPECIFIC: Las clases custom de páginas concretas que reproducen este pattern se incluyen en el selector list. Esto evita re-definirlo en cada archivo (home.css, prefooter.css, plugin shop-categories, etc.) y permite que un cambio en stroke/color se propague automáticamente. VARIANTES INTENCIONALES (NO incluidas acá, viven en sus archivos): - .cr-manifesto-title-outline (home.css) — stroke 2px - .zenth-fc-title__outline (plugin shop-fc) — stroke 1px - .cr-nosotros-X__title-outline — stroke 2/2.5px (en §0 nosotros.css) IMPORTANTE: usamos `-webkit-text-fill-color: transparent` ADEMÁS de `color: transparent`. Algunos navegadores y temas CSS de terceros pueden sobrescribir `color` de inline elements; `-webkit-text-fill-color` tiene mayor prioridad para el fill del texto y es lo que respeta cualquier user-agent moderno cuando se combina con `text-stroke`. */ .cr-section-title__outline, .cr-section-title .cr-section-title__outline, .cr-section-title__outline.cr-section-title__outline, /* Aliases del theme (1.5px stroke blanco). NO incluimos clases del plugin acá — el plugin debe ser standalone con su propia definición. prefooter no se incluye porque define MUCHO más que el stroke (font-family, size, weight, etc.) y rompería la separación. */ .cr-hero-title__outline { display: inline-block; color: transparent !important; -webkit-text-fill-color: transparent !important; -webkit-text-stroke: var(--cr-outline-width) var(--cr-color-white); font-family: inherit; font-weight: inherit; background: transparent !important; } /* Modificador rojo: usa el rojo CR como color del stroke en lugar de blanco. Útil en heros de páginas como /contacto/ donde el énfasis es la marca. Self-sufficient: incluye display:inline-block + el grosor del stroke para funcionar AUNQUE se use sin la clase base .cr-section-title__outline. Sin esto, usar solo `--red` deja el stroke en 0 y el texto invisible (fill transparente + sin borde). */ .cr-section-title__outline--red, .cr-section-title .cr-section-title__outline--red { display: inline-block; -webkit-text-stroke-width: var(--cr-outline-width) !important; -webkit-text-stroke-color: var(--cr-color-primary) !important; color: transparent !important; -webkit-text-fill-color: transparent !important; } /* Variante rojo SÓLIDO (no outline). Para énfasis más fuerte que el outline, típicamente en partes del título donde la palabra es el ancla emocional. Reusable. Aplicar sin necesidad de combinar con `__outline`. IMPORTANTE: forzamos -webkit-text-fill-color al color rojo porque si Elementor o algún otro CSS aplica `-webkit-text-fill-color: transparent` por error en un descendiente, este span se vería invisible. */ .cr-section-title__solid--red, .cr-section-title .cr-section-title__solid--red { display: inline-block; color: var(--cr-color-primary) !important; -webkit-text-fill-color: var(--cr-color-primary) !important; font-family: inherit; font-weight: inherit; -webkit-text-stroke: 0 !important; /* Anula stroke si quedara heredado */ } /* ═══════════════════════════════════════════════════════════════════════ §5 · SUBTITLE ═══════════════════════════════════════════════════════════════════════ */ .cr-section-subtitle, .cr-section-subtitle p, .cr-section-subtitle .elementor-widget-container { color: rgb(255 255 255 / 48%) !important; font-family: var(--cr-font-body) !important; font-size: clamp(14px, 1.6vw, 1.2rem) !important; font-weight: 400 !important; line-height: 1.4 !important; text-align: center !important; max-width: 40rem !important; margin: 5rem auto 0 !important; z-index: 1; } .cr-section-subtitle p { margin: 0 !important; } /* ═══════════════════════════════════════════════════════════════════════ §6 · BUTTONS — primary / secondary (+ --white) ═══════════════════════════════════════════════════════════════════════ */ /* Base compartida — radius, padding, tipografía, transición */ .cr-btn-primary .elementor-button, .cr-btn-secondary .elementor-button { display: inline-flex !important; align-items: center !important; justify-content: center !important; padding: 16px 32px !important; border-radius: 999px !important; font-family: var(--cr-font-body) !important; font-size: 13px !important; font-weight: 700 !important; letter-spacing: 0.1em !important; text-transform: uppercase !important; text-decoration: none !important; border: 2px solid transparent !important; transition: background 200ms ease, color 200ms ease, border-color 200ms ease, transform 200ms ease !important; } /* Primario: rojo sólido */ .cr-btn-primary .elementor-button { background: var(--cr-color-primary) !important; border-color: var(--cr-color-primary) !important; color: var(--cr-color-white) !important; } .cr-btn-primary .elementor-button:hover, .cr-btn-primary .elementor-button:focus-visible { background: var(--cr-color-primary-hover) !important; border-color: var(--cr-color-primary-hover) !important; color: var(--cr-color-white) !important; transform: scale(1.05); } /* Secundario: outline rojo, fill al hover */ .cr-btn-secondary .elementor-button { background: transparent !important; border-color: var(--cr-color-primary) !important; color: var(--cr-color-primary) !important; } .cr-btn-secondary .elementor-button:hover, .cr-btn-secondary .elementor-button:focus-visible { background: var(--cr-color-primary) !important; border-color: var(--cr-color-primary) !important; color: var(--cr-color-white) !important; transform: scale(1.05); } /* Variante: secundario con outline BLANCO (no rojo). Para CTAs sobre fondo dark donde el secondary debe parecer "ghost". Aplicar al lado de cr-btn-secondary: */ .cr-btn-secondary--white { display: flex; justify-content: center; border: 2px solid rgba(255, 255, 255, 0.4); border-radius: 6rem; } .cr-btn-secondary--white .elementor-button, .cr-btn-secondary.cr-btn-secondary--white .elementor-button { background: transparent !important; border-color: var(--cr-color-white) !important; color: var(--cr-color-white) !important; width: 100%; border-radius: 6rem; } .cr-btn-secondary--white .elementor-button:hover, .cr-btn-secondary--white .elementor-button:focus-visible, .cr-btn-secondary.cr-btn-secondary--white .elementor-button:hover, .cr-btn-secondary.cr-btn-secondary--white .elementor-button:focus-visible { background: var(--cr-color-white) !important; border-color: var(--cr-color-white) !important; color: var(--cr-color-black, #000) !important; transform: scale(1.05); } /* ═══════════════════════════════════════════════════════════════════════ §7 · DUAL BUTTON — dos botones en un mismo pill ═══════════════════════════════════════════════════════════════════════ */ /* Wrapper: pill rojo, gap 0 para que los 2 botones queden pegados. El border es del wrapper, no de los botones individuales —los botones internos no tienen border, solo el wrapper. */ .cr-dual-btn, .cr-dual-btn.e-con, .cr-dual-btn.e-con-inner { display: inline-flex !important; flex-direction: row !important; align-items: stretch !important; gap: 0 !important; padding: 0 !important; background: transparent !important; max-width: 100%; /* fit-content para que el pill se ajuste al contenido de los 2 botones (-moz-fit-content = fallback para Firefox viejo). */ width: -moz-fit-content !important; width: fit-content !important; } /* Variante: border outer BLANCO translúcido en vez de rojo. Para CTAs dual sobre fondo dark donde el énfasis es el botón rojo interno (primary), no el border. El hover del primary mantiene el rojo, y el del secondary muestra un fill blanco translúcido sutil. Aplicar al lado de cr-dual-btn: */ .cr-dual-btn--white, .cr-dual-btn.cr-dual-btn--white, .cr-dual-btn--white.e-con, .cr-dual-btn--white.e-con-inner { border-color: rgba(255, 255, 255, 0.6) !important; } /* Cada hijo (widget Elementor que envuelve el Button) debe tomar 50% del wrapper y eliminar padding/margin propios. */ .cr-dual-btn > .elementor-element, .cr-dual-btn > .elementor-widget { margin: 0; padding: 0 !important; min-width: 0; border-radius: 6rem; overflow: hidden; border: 2px solid; } /* Base compartida para los 2 botones del dual-btn: sin border propio (ese vive en el wrapper), sin border-radius (el wrapper lo aporta vía overflow:hidden), padding generoso, texto uppercase */ .cr-dual-btn .elementor-button { display: inline-flex !important; align-items: center !important; justify-content: center !important; padding: 16px 3rem; font-family: var(--cr-font-body) !important; font-size: 13px !important; font-weight: 700 !important; letter-spacing: 0.1em !important; text-transform: uppercase !important; text-decoration: none !important; transition: background 200ms ease, color 200ms ease !important; white-space: nowrap; } .cr-dual-btn__primary { z-index: 1; border-color: var(--cr-color-primary) !important; background-color: var(--cr-color-primary); } /* Lado izquierdo: rojo sólido, texto blanco (acción primaria) */ .cr-dual-btn__primary .elementor-button { width: 100%; background: var(--cr-color-primary) !important; color: var(--cr-color-white) !important; } .cr-dual-btn__primary .elementor-button:hover, .cr-dual-btn__primary .elementor-button:focus-visible { background: var(--cr-color-primary-hover) !important; color: var(--cr-color-white) !important; } .cr-dual-btn__secondary.elementor-element { z-index: 0; border-color: var(--cr-color-primary) !important; margin-left: -5rem !important; } /* Lado derecho: transparente, texto blanco (acción secundaria) */ .cr-dual-btn__secondary .elementor-button { background: transparent !important; padding: 16px 4.6rem 16px 8.6rem; color: var(--cr-color-white) !important; } .cr-dual-btn__secondary .elementor-button:hover, .cr-dual-btn__secondary .elementor-button:focus-visible { background: rgba(255, 255, 255, 0.08) !important; color: var(--cr-color-white) !important; } /* ═══════════════════════════════════════════════════════════════════════ §8 · BENTO FADE — degradado inferior + aspect-ratios de galería ═══════════════════════════════════════════════════════════════════════ */ .cr-bento-fade { position: relative; } .cr-bento-fade::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: var(--cr-bento-fade-height, 25%); background: linear-gradient( to bottom, transparent 0%, var(--cr-bento-fade-color, var(--cr-color-black)) 100% ); pointer-events: none; z-index: 2; } /* Aspect-ratios por layout de galería (desktop). Los del tablet viven en §10. */ .cr-bento-fade .zenth-gallery--layout-desktop-bento-6 .zenth-gallery__bento { aspect-ratio: 5 / 3; grid-template-rows: repeat(3, 1fr) !important; } .cr-bento-fade .zenth-gallery--layout-desktop-bento-7 .zenth-gallery__bento { aspect-ratio: 8 / 5; grid-template-rows: repeat(5, 1fr) !important; } .cr-bento-fade .zenth-gallery--layout-desktop-bento-9 .zenth-gallery__bento { aspect-ratio: 3 / 4; grid-template-rows: repeat(4, 1fr) !important; } .cr-bento-fade .zenth-gallery--layout-desktop-bento-feature-4 .zenth-gallery__bento { aspect-ratio: 5 / 4; grid-template-rows: repeat(3, 1fr) !important; } /* ═══════════════════════════════════════════════════════════════════════ §9 · VISIT — layout dos columnas de /contacto/ (info + foto/mapa) ═══════════════════════════════════════════════════════════════════════ */ .cr-visit, .cr-visit.e-con, .cr-visit.e-flex { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 80px !important; align-items: start !important; width: 100% !important; max-width: var(--cr-container-max, 1440px) !important; margin: 0 auto !important; padding: 0 var(--cr-container-pad, 32px) !important; box-sizing: border-box !important; } /* Títulos / eyebrows dentro de visit van alineados a la izquierda. */ .cr-visit .cr-section-title, .cr-visit .cr-section-title .elementor-heading-title, .cr-visit .cr-section-eyebrow, .cr-visit .cr-section-eyebrow .elementor-heading-title { text-align: left !important; } .cr-visit .cr-section-eyebrow { margin-bottom: 0 !important; } /* TAMAÑO del título — más chico que en Instagram porque ocupa solo una columna (no el ancho completo de la sección). Mockup ~ 56-64px en desktop, ~ 40-48px en mobile. Usamos clamp() para escalar suavemente entre breakpoints. */ .cr-visit .cr-section-title, .cr-visit .cr-section-title .elementor-heading-title, .cr-visit .cr-section-title .elementor-widget-container { font-size: clamp(36px, 4.5vw, 64px) !important; line-height: 1.05 !important; letter-spacing: 0.5px !important; } /* Punto rojo del título — forzamos el color del span inline. Si Elementor no propaga la variable CSS al contenido del Heading, este selector pisa cualquier estilo del span con valor literal. */ .cr-visit .cr-section-title .elementor-heading-title span { color: var(--cr-color-primary, #E8001D) !important; } /* ── §9.1 · Columna info (eyebrow + título + lista + CTAs) ─────────────── */ .cr-visit__info { display: flex; flex-direction: column; gap: 0px; } /* Mismo principio que en visual: anular margins inyectados por Elementor para que el gap del flex sea la única fuente de separación entre eyebrow → título → lista → CTAs. */ .cr-visit__info > * { margin: 0 !important; } /* ── §9.2 · Lista de datos (icon-box: dirección, horario, etc.) ───────── */ .cr-visit__list { display: flex; flex-direction: column; gap: 20px; } /* Anular margins inyectados por Elementor entre los 4 icon-box hijos. */ .cr-visit__list > * { margin: 0 !important; } /* Anular padding del wrapper del widget */ .cr-visit__list .elementor-widget-icon-box .elementor-widget-container { padding: 0 !important; } /* Layout horizontal del icon box (icono + contenido) */ .cr-visit__list .elementor-icon-box-wrapper { display: flex !important; flex-direction: row !important; align-items: center !important; text-align: left !important; gap: 16px !important; } /* Círculo rojo del icono — anula bordes / fondos / padding del default */ .cr-visit__list .elementor-icon-box-icon { flex-shrink: 0; margin: 0 !important; width: 44px; height: 44px; border-radius: 50%; background: var(--cr-color-primary, #E8001D) !important; display: flex !important; align-items: center; justify-content: center; overflow: hidden; } /* Contenedor del SVG (puede ser o ) */ .cr-visit__list .elementor-icon-box-icon .elementor-icon { font-size: 0 !important; color: #FFFFFF !important; background: transparent !important; border: 0 !important; padding: 0 !important; width: 22px; height: 22px; display: flex !important; align-items: center; justify-content: center; } /* Restituir font-size cuando el span envuelve un ícono CR (i.cr-...). Los íconos cr- usan mask-image sobre vacío con width:1em/height:1em, por eso necesitan un font-size real en el padre. Para SVG nativo de Elementor (FontAwesome) seguimos con font-size:0 evitando el gap fantasma. */ .cr-visit__list .elementor-icon-box-icon .elementor-icon:has(> i[class*="cr-"]) { font-size: 22px !important; } .cr-visit__list .elementor-icon-box-icon .elementor-icon i[class*="cr-"] { font-size: 22px !important; color: #FFFFFF !important; } /* SVG del icono — fuerza color blanco. Cubre tanto fill (Font Awesome) como stroke (Lucide / iconos con outline). */ .cr-visit__list .elementor-icon-box-icon .elementor-icon svg { width: 22px !important; height: 22px !important; fill: #FFFFFF !important; color: #FFFFFF !important; } /* Override del azul de link cuando el icono está envuelto en */ .cr-visit__list .elementor-icon-box-icon a, .cr-visit__list .elementor-icon-box-icon a:hover, .cr-visit__list .elementor-icon-box-icon a:focus-visible { color: #FFFFFF !important; background: transparent !important; text-decoration: none !important; } /* Contenido textual al lado del ícono */ .cr-visit__list .elementor-icon-box-content { flex: 1; display: flex; flex-direction: column; gap: 2px; } /* TÍTULO del item (ej. "DIRECCIÓN") */ .cr-visit__list .elementor-icon-box-title { margin: 0 !important; font-family: var(--cr-font-body) !important; font-size: 13px !important; font-weight: 700 !important; letter-spacing: 0.08em !important; text-transform: uppercase !important; color: #FFFFFF !important; line-height: 1.2 !important; } /* Si el título es un link, mantener color blanco */ .cr-visit__list .elementor-icon-box-title a, .cr-visit__list .elementor-icon-box-title a:hover, .cr-visit__list .elementor-icon-box-title a:focus-visible { color: #FFFFFF !important; text-decoration: none !important; } /* DESCRIPCIÓN del item */ .cr-visit__list .elementor-icon-box-description { margin: 0 !important; font-family: var(--cr-font-body) !important; font-size: 15px !important; font-weight: 400 !important; color: rgba(255, 255, 255, 0.7) !important; line-height: 1.4 !important; } /* ── §9.3 · CTAs de la columna info ───────────────────────────────────── */ .cr-visit__ctas, .cr-visit__ctas.e-con, .cr-visit__ctas.e-flex { display: flex !important; flex-direction: row !important; gap: 16px !important; flex-wrap: nowrap !important; margin-top: 16px; align-items: stretch !important; width: 100%; } .cr-visit__ctas > .elementor-widget-button { flex: 1 1 0 !important; min-width: 0 !important; width: auto !important; } .cr-visit__ctas .elementor-button { width: 100% !important; padding: 18px 32px !important; } /* Variante "ghost white" para el secundario dentro de cr-visit. (Reimplementa cr-btn-secondary--white de §6, pero con hover translateY en vez de scale, para que combine con el layout fijo de los CTAs.) */ .cr-visit__ctas .cr-btn-secondary .elementor-button { background: transparent !important; border-color: var(--cr-color-white) !important; color: var(--cr-color-white) !important; } .cr-visit__ctas .cr-btn-secondary .elementor-button:hover, .cr-visit__ctas .cr-btn-secondary .elementor-button:focus-visible { background: var(--cr-color-white) !important; border-color: var(--cr-color-white) !important; color: var(--cr-color-black, #000) !important; transform: translateY(-2px); } /* ── §9.4 · Columna visual (foto + mapa) ──────────────────────────────── */ .cr-visit__visual { display: flex; flex-direction: column; gap: 16px; width: 100%; } /* Anular margin-block-start que Elementor inyecta en widgets hijos (vía --wp--style--block-gap). Sin esto se acumulan ~24px extra entre la foto y el mapa, dándoles separación incoherente con el gap de 16px del flex container. */ .cr-visit__visual > * { margin: 0 !important; } /* Wrapper de la foto (inner section que contiene la imagen + el tag). Necesario porque el tag "ABIERTO AHORA" se posiciona absolute sobre la foto, y ese tag es un widget Elementor hermano de la foto, no hijo. El wrapper actúa como contexto de posicionamiento. USO EN ELEMENTOR: Dentro de `cr-visit__visual`, agregar un Inner Section con clase `cr-visit__photo-wrap`. Dentro: el widget Image (con clase `cr-visit__photo`) y el widget CR — Status Bar (con clase `cr-visit__photo-tag`). */ .cr-visit__photo-wrap, .cr-visit__photo-wrap.e-con, .cr-visit__photo-wrap.e-con-inner { position: relative !important; width: 100%; padding: 0 !important; margin: 0 !important; } /* Foto fachada. En Elementor 4.0.8 con e_optimized_markup activado, el widget Image NO tiene .elementor-widget-container interno — el queda como hijo directo de .cr-visit__photo. Por eso el degradado va directamente sobre .cr-visit__photo, no sobre un wrapper interno. */ .cr-visit__photo, .cr-visit__photo.elementor-widget { width: 100%; position: relative; overflow: hidden; display: block; } /* Degradado rojo en la parte inferior de la foto. Refuerza la conexión visual con la paleta CR y le da peso al CTA de la columna izquierda. El gradient ocupa el 60% inferior y termina en rgba(232, 0, 29, 0.7) — sutil arriba, intenso abajo. */ .cr-visit__photo::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 30%; background: linear-gradient( to bottom, rgba(232, 0, 29, 0) 0%, rgba(232, 0, 29, 0.7) 100% ); pointer-events: none; z-index: 2; } .cr-visit__photo img { width: 100% !important; aspect-ratio: 16 / 10; object-fit: cover; display: block; position: relative; z-index: 1; } /* Tag "ABIERTO AHORA" sobre la foto. Se aplica como CSS Class al widget `CR — Status Bar` dentro del `cr-visit__photo-wrap`. El status bar mantiene su pill design nativo definido en contact.css; aquí solo lo posicionamos. Importante: el tag NO debe ser pointer-events:none porque queremos que el dot animado se vea pero también que el contenido sea legible por screen readers; el bar entero usa role="status". */ .cr-visit__photo-tag { position: absolute !important; top: 20px; right: 20px; z-index: 10; margin: 0 !important; width: auto !important; max-width: calc(100% - 40px); } /* El widget Elementor que envuelve el status bar puede tener su propio padding/margin; reseteamos para que no inflen el área del tag. */ .cr-visit__photo-tag .elementor-widget-container { padding: 0 !important; margin: 0 !important; } /* Mapa — soporta dos modos: 1. iframe interactivo de Google Maps (Elementor → widget HTML o Shortcode con