/* * critical.css — Radiofarmacia de Centroamérica, S.A. * Architecture: Mobile-first (min-width breakpoints), BEM naming, CSS Custom Properties. * Inlined critical subset (header + hero) in each HTML . * Full file loaded via to eliminate render-blocking. * * WCAG 2.1 AA contrast ratios are documented on each color pairing. * Breakpoints: --bp-tablet: 768px, --bp-desktop: 1200px */ /* ── Custom Properties ─────────────────────────────────────────────────────── Single source of truth — no hardcoded hex values outside :root. ──────────────────────────────────────────────────────────────────────────── */ /* ========================================== PALETA GEOMÉTRICA: NEGRO / ROJO VINO / BLANCO ========================================== */ :root { --color-primary-900: #0a0a0a; /* Negro profundo */ --color-primary-700: #5c0000; /* Rojo vino intenso (tu marca) */ --color-primary-500: #8b0000; /* Rojo vino medio (hovers) */ --color-cta-600: #5c0000; /* Botones principales */ --color-cta-700: #2a0000; /* Hover botones */ --color-accent: #d40000; /* Detalles/acentos */ --color-white: #ffffff; --color-neutral-200: #e2e8f0; --color-neutral-700: #334155; /* Texto general */ /* Mantén tus variables de espacio/fuente intactas */ --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --space-2: .5rem; --space-3: .75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; --radius-md: 8px; --radius-lg: 12px; --radius-pill: 9999px; --tr-base: 200ms ease; --bp-desktop: 1200px; } /* === HEADER BLANCO LIMPIO === */ .site-header { background: #fff !important; border-bottom: 1px solid #e5e7eb !important; box-shadow: 0 2px 12px rgba(0,0,0,0.04) !important; } .site-header__nav-link { color: #1f2937 !important; font-weight: 500 !important; transition: color 0.2s ease !important; } .site-header__nav-link:hover, .site-header__nav-link--active { color: var(--color-primary-700) !important; } .btn--nav-cta { background: var(--color-primary-700) !important; color: #fff !important; } /* === HERO GEOMÉTRICO (OSCURO ELEGANTE) === */ .page-hero { background: linear-gradient(135deg, #0a0a0a 0%, #2a0505 45%, #5c0000 100%) !important; color: #fff !important; position: relative; overflow: hidden; } /* Textura geométrica sutil (opcional, estilo tu referencia) */ .page-hero::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(45deg, rgba(255,255,255,0.02) 0px, rgba(255,255,255,0.02) 1px, transparent 1px, transparent 24px); pointer-events: none; } .page-hero__eyebrow { color: #ffcccc !important; font-weight: 700 !important; } .page-hero__title { font-weight: 800 !important; } /* ── Reset ────────────────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 16px; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { font-family: var(--font-sans); color: var(--color-neutral-900); background-color: var(--color-white); line-height: 1.6; -webkit-font-smoothing: antialiased; } img, svg { display: block; max-width: 100%; } a { color: var(--color-primary-700); text-underline-offset: 0.2em; } ul, ol { list-style: none; } button { cursor: pointer; font-family: inherit; } /* ── Accessibility Utilities ─────────────────────────────────────────────── */ .visually-hidden { position: absolute !important; /* !important required: override layout context */ width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* Global focus indicator — WCAG 2.1 SC 2.4.7 Focus Visible */ :focus-visible { outline: 3px solid #005a9c; /* WCAG: #005a9c on #fff = 7.08:1 — PASS AA/AAA */ outline-offset: 2px; } /* Skip navigation link */ .skip-link { position: absolute; top: -44px; left: var(--space-4); z-index: 10000; background: var(--color-primary-700); color: var(--color-white); padding: var(--space-2) var(--space-4); border-radius: var(--radius-sm); font-weight: 600; font-size: 0.875rem; text-decoration: none; transition: top var(--tr-fast); } .skip-link:focus { top: var(--space-4); } /* ── Layout Container ────────────────────────────────────────────────────── */ .container { max-width: var(--bp-desktop); margin-inline: auto; padding-inline: var(--space-5); } /* ── Button Block ────────────────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); border: 2px solid transparent; border-radius: var(--radius-md); font-size: 1rem; font-weight: 600; line-height: 1; padding: 0.75rem 1.5rem; text-decoration: none; transition: background-color var(--tr-base), border-color var(--tr-base), color var(--tr-base), transform 80ms ease; white-space: nowrap; } .btn:active { transform: translateY(1px); } .btn:disabled { opacity: 0.6; cursor: not-allowed; transform: none; } /* Primary CTA — white text on dark teal (5.59:1 — PASS AA) */ .btn--primary { background-color: var(--color-cta-600); color: var(--color-white); border-color: var(--color-cta-600); } .btn--primary:hover { background-color: var(--color-cta-700); border-color: var(--color-cta-700); } /* Outline variant — for use on dark backgrounds */ .btn--outline { background-color: transparent; color: var(--color-white); border-color: rgba(255, 255, 255, 0.55); } .btn--outline:hover { border-color: var(--color-white); background-color: rgba(255, 255, 255, 0.1); } /* Consent accept */ .btn--consent-accept { background-color: var(--color-primary-500); color: var(--color-white); border-color: var(--color-primary-500); font-size: 0.875rem; padding: var(--space-2) var(--space-5); } .btn--consent-accept:hover { background-color: #1d4ed8; border-color: #1d4ed8; } /* Consent reject */ .btn--consent-reject { background-color: transparent; color: #e2e8f0; border-color: #4a5568; font-size: 0.875rem; padding: var(--space-2) var(--space-5); } .btn--consent-reject:hover { border-color: #e2e8f0; } /* Form submit */ .btn--submit { width: 100%; padding: var(--space-4); font-size: 1rem; } /* Nav CTA link */ .btn--nav-cta { background-color: var(--color-cta-600); color: var(--color-white); border-color: var(--color-cta-600); font-size: 0.875rem; padding: var(--space-2) var(--space-4); } .btn--nav-cta:hover { background-color: var(--color-cta-700); } /* ── Consent Banner Block ────────────────────────────────────────────────── */ .consent-banner { position: fixed; inset-block-end: 0; inset-inline: 0; z-index: 9000; background-color: #1a202c; border-top: 3px solid var(--color-primary-500); box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.35); } .consent-banner__inner { max-width: var(--bp-desktop); margin-inline: auto; padding: var(--space-5); display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); } .consent-banner__text { flex: 1 1 280px; font-size: 0.875rem; line-height: 1.55; color: #e2e8f0; } .consent-banner__text a { color: #90cdf4; text-underline-offset: 0.15em; } .consent-banner__actions { display: flex; gap: var(--space-3); flex-wrap: wrap; align-items: center; } /* ── Site Header Block ───────────────────────────────────────────────────── */ .site-header { position: sticky; top: 0; z-index: 100; background-color: var(--color-white); border-bottom: 1px solid var(--color-neutral-200); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06); } .site-header__inner { max-width: var(--bp-desktop); margin-inline: auto; padding: var(--space-3) var(--space-5); display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); } .site-header__logo { display: flex; align-items: center; gap: var(--space-3); text-decoration: none; } .site-header__logo-mark { width: 40px; height: 40px; min-width: 40px; background-color: var(--color-primary-700); border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; } .site-header__logo-mark svg { width: 24px; height: 24px; fill: var(--color-white); } .site-header__logo-name { display: block; font-size: 0.875rem; font-weight: 700; color: var(--color-primary-900); line-height: 1.2; } .site-header__logo-subtitle { display: block; font-size: 0.7rem; font-weight: 400; color: var(--color-neutral-700); line-height: 1.2; } /* Desktop nav — hidden on mobile */ .site-header__nav { display: none; } .site-header__nav-list { display: flex; align-items: center; gap: var(--space-6); } .site-header__nav-link { font-size: 0.875rem; font-weight: 500; color: var(--color-neutral-700); text-decoration: none; transition: color var(--tr-base); } .site-header__nav-link:hover { color: var(--color-primary-700); } /* Hamburger menu button */ .site-header__menu-toggle { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; background: none; border: none; border-radius: var(--radius-sm); transition: background-color var(--tr-base); } .site-header__menu-toggle:hover { background-color: var(--color-neutral-100); } .site-header__hamburger { display: block; position: relative; width: 22px; height: 2px; background-color: var(--color-neutral-700); border-radius: 2px; } .site-header__hamburger::before, .site-header__hamburger::after { content: ''; position: absolute; left: 0; width: 22px; height: 2px; background-color: var(--color-neutral-700); border-radius: 2px; transition: transform var(--tr-base); } .site-header__hamburger::before { top: -7px; } .site-header__hamburger::after { top: 7px; } /* Mobile nav panel */ .site-nav { background-color: var(--color-white); border-top: 1px solid var(--color-neutral-200); padding: var(--space-3) var(--space-5) var(--space-4); } .site-nav__list { display: flex; flex-direction: column; gap: var(--space-1); } .site-nav__link { display: block; padding: var(--space-3) var(--space-3); color: var(--color-neutral-700); font-weight: 500; font-size: 0.9375rem; text-decoration: none; border-radius: var(--radius-sm); transition: background-color var(--tr-base), color var(--tr-base); } .site-nav__link:hover { background-color: #eff6ff; color: var(--color-primary-700); } /* ── Hero Block ──────────────────────────────────────────────────────────── */ .hero { background: linear-gradient( 135deg, var(--color-primary-900) 0%, var(--color-primary-700) 60%, var(--color-cta-600) 100% ); color: var(--color-white); padding-block: var(--space-16) var(--space-12); padding-inline: var(--space-5); } .hero__inner { max-width: var(--bp-desktop); margin-inline: auto; } .hero__badge { display: inline-flex; align-items: center; gap: var(--space-2); background-color: rgba(255, 255, 255, 0.15); border: 1px solid rgba(255, 255, 255, 0.25); border-radius: var(--radius-pill); padding: var(--space-1) var(--space-4); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; margin-bottom: var(--space-5); } .hero__badge-icon { width: 12px; height: 12px; } .hero__heading { font-size: clamp(1.75rem, 5vw, 3rem); font-weight: 800; line-height: 1.15; max-width: 680px; margin-bottom: var(--space-4); } .hero__lead { font-size: clamp(0.9375rem, 2vw, 1.125rem); max-width: 600px; opacity: 0.9; margin-bottom: var(--space-8); line-height: 1.65; } .hero__cta-group { display: flex; flex-wrap: wrap; gap: var(--space-3); } /* ── Trust Bar Block ─────────────────────────────────────────────────────── */ .trust-bar { background-color: var(--color-neutral-50); border-bottom: 1px solid var(--color-neutral-200); padding-block: var(--space-5); padding-inline: var(--space-5); } .trust-bar__inner { max-width: var(--bp-desktop); margin-inline: auto; display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-5); text-align: center; } .trust-bar__item { display: flex; flex-direction: column; align-items: center; gap: var(--space-1); } .trust-bar__value { font-size: 1.5rem; font-weight: 800; color: var(--color-primary-700); line-height: 1; letter-spacing: -0.02em; } .trust-bar__label { font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-neutral-500); line-height: 1.3; } /* ── Section Shared ──────────────────────────────────────────────────────── */ .section-header { text-align: center; max-width: 620px; margin-inline: auto; margin-bottom: var(--space-12); } .section-header__title { font-size: clamp(1.5rem, 4vw, 2.25rem); font-weight: 800; color: var(--color-primary-900); margin-bottom: var(--space-3); line-height: 1.2; } .section-header__title--light { color: var(--color-white); } .section-header__lead { font-size: 1.0625rem; color: var(--color-neutral-500); line-height: 1.65; } .section-header__lead--light { color: var(--color-neutral-300); } /* ── Services Block ──────────────────────────────────────────────────────── */ .services { padding-block: var(--space-20); padding-inline: var(--space-5); background-color: var(--color-white); } .services__grid { display: grid; gap: var(--space-6); grid-template-columns: 1fr; } /* Service Card Block */ .service-card { border: 1px solid var(--color-neutral-200); border-radius: var(--radius-lg); padding: var(--space-8) var(--space-6); background-color: var(--color-white); transition: box-shadow var(--tr-base), transform var(--tr-base), border-color var(--tr-base); } .service-card:hover { box-shadow: 0 8px 32px rgba(26, 79, 138, 0.1); transform: translateY(-2px); border-color: #bfdbfe; } .service-card__icon { width: 56px; height: 56px; background: linear-gradient(135deg, #eff6ff, #dbeafe); border-radius: var(--radius-lg); display: flex; align-items: center; justify-content: center; margin-bottom: var(--space-5); color: var(--color-primary-700); flex-shrink: 0; } .service-card__title { font-size: 1.0625rem; font-weight: 700; color: var(--color-primary-900); margin-bottom: var(--space-3); line-height: 1.3; } .service-card__body { font-size: 0.9375rem; color: var(--color-neutral-700); line-height: 1.65; } /* ── About Block ─────────────────────────────────────────────────────────── */ .about { padding-block: var(--space-20); padding-inline: var(--space-5); background-color: var(--color-neutral-50); } .about__grid { display: grid; gap: var(--space-12); grid-template-columns: 1fr; } .about__title { font-size: clamp(1.5rem, 4vw, 2.25rem); font-weight: 800; color: var(--color-primary-900); margin-bottom: var(--space-5); line-height: 1.2; } .about__body { color: var(--color-neutral-700); line-height: 1.75; font-size: 0.9875rem; margin-bottom: var(--space-4); } .about__body:last-child { margin-bottom: 0; } .about__data { background-color: var(--color-white); border: 1px solid var(--color-neutral-200); border-radius: var(--radius-lg); padding: var(--space-8); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04); } .about__data-list { display: flex; flex-direction: column; gap: var(--space-5); } .about__data-term { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--color-primary-700); margin-bottom: var(--space-1); } .about__data-definition { color: var(--color-neutral-700); font-size: 0.9375rem; line-height: 1.55; } .about__data-definition a { color: var(--color-primary-700); text-decoration: none; text-underline-offset: 0.15em; } .about__data-definition a:hover { text-decoration: underline; } /* ── Quality Block ───────────────────────────────────────────────────────── */ .quality { padding-block: var(--space-20); padding-inline: var(--space-5); background: linear-gradient(135deg, var(--color-primary-900) 0%, var(--color-primary-700) 100%); color: var(--color-white); } .quality__steps { display: grid; gap: var(--space-6); grid-template-columns: 1fr; } .quality-step { background-color: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.14); border-radius: var(--radius-lg); padding: var(--space-8) var(--space-6); } .quality-step__number { display: block; font-size: 2.5rem; font-weight: 900; color: var(--color-accent); line-height: 1; margin-bottom: var(--space-4); font-variant-numeric: tabular-nums; } .quality-step__title { font-size: 1rem; font-weight: 700; color: var(--color-white); margin-bottom: var(--space-3); } .quality-step__body { font-size: 0.9rem; color: var(--color-neutral-300); line-height: 1.65; } /* ── Contact Block ───────────────────────────────────────────────────────── */ .contact { padding-block: var(--space-20); padding-inline: var(--space-5); background-color: var(--color-white); } .contact__grid { display: grid; gap: var(--space-12); grid-template-columns: 1fr; } .contact__title { font-size: clamp(1.5rem, 4vw, 2.25rem); font-weight: 800; color: var(--color-primary-900); margin-bottom: var(--space-4); line-height: 1.2; } .contact__intro { color: var(--color-neutral-700); line-height: 1.75; margin-bottom: var(--space-8); font-size: 0.9875rem; } .contact__details { font-style: normal; display: flex; flex-direction: column; gap: var(--space-4); } .contact__detail-item { display: flex; align-items: flex-start; gap: var(--space-3); color: var(--color-neutral-700); font-size: 0.9375rem; line-height: 1.5; } .contact__detail-icon { flex-shrink: 0; margin-top: 2px; color: var(--color-primary-700); } .contact__detail-text a { color: var(--color-primary-700); text-decoration: none; text-underline-offset: 0.15em; word-break: break-all; } .contact__detail-text a:hover { text-decoration: underline; } /* ── Contact Form Block ──────────────────────────────────────────────────── */ .contact-form__wrap { background-color: var(--color-neutral-50); border: 1px solid var(--color-neutral-200); border-radius: var(--radius-xl); padding: var(--space-8); } .contact-form__title { font-size: 1.125rem; font-weight: 700; color: var(--color-primary-900); margin-bottom: var(--space-6); } .contact-form { display: flex; flex-direction: column; gap: var(--space-5); } .contact-form__group { display: flex; flex-direction: column; gap: var(--space-2); } .contact-form__label { font-size: 0.875rem; font-weight: 600; color: var(--color-neutral-700); } .contact-form__label abbr { color: var(--color-error); text-decoration: none; margin-left: 0.125rem; } .contact-form__input, .contact-form__select, .contact-form__textarea { border: 1px solid #d1d5db; border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); font-size: 0.9375rem; font-family: var(--font-sans); color: var(--color-neutral-900); background-color: var(--color-white); width: 100%; transition: border-color var(--tr-base), box-shadow var(--tr-base); appearance: none; -webkit-appearance: none; } .contact-form__select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236b7280' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.75rem center; padding-right: 2.25rem; } .contact-form__input:focus, .contact-form__select:focus, .contact-form__textarea:focus { outline: none; border-color: var(--color-primary-500); box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15); } .contact-form__input--error, .contact-form__textarea--error { border-color: var(--color-error); box-shadow: 0 0 0 3px rgba(185, 28, 28, 0.1); } .contact-form__textarea { resize: vertical; min-height: 100px; line-height: 1.55; } .contact-form__error { font-size: 0.8rem; color: var(--color-error); font-weight: 500; min-height: 1.1em; } .contact-form__hint { font-size: 0.8rem; color: var(--color-neutral-500); } .contact-form__consent-group { margin-top: var(--space-2); } .contact-form__consent-label { display: flex; gap: var(--space-3); align-items: flex-start; cursor: pointer; font-size: 0.875rem; font-weight: 400; color: var(--color-neutral-700); line-height: 1.55; } .contact-form__consent-checkbox { width: 18px; height: 18px; min-width: 18px; flex-shrink: 0; margin-top: 2px; accent-color: var(--color-primary-700); cursor: pointer; } .contact-form__consent-label a { color: var(--color-primary-700); text-underline-offset: 0.15em; } .contact-form__success { display: flex; align-items: center; gap: var(--space-3); background-color: var(--color-success-bg); border: 1px solid var(--color-success-border); color: var(--color-success-text); border-radius: var(--radius-md); padding: var(--space-4) var(--space-5); font-weight: 600; font-size: 0.9375rem; line-height: 1.4; } /* ── Medical Disclaimer Block ────────────────────────────────────────────── */ /* Wraps all therapeutic/diagnostic claims — required by FDA/EMA digital guidelines */ .medical-disclaimer__wrapper { border-left: 3px solid var(--color-cta-500); background-color: rgba(0, 169, 150, 0.06); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; padding: var(--space-3) var(--space-4); margin-block: var(--space-3); } .medical-disclaimer__text { font-size: 0.9375rem; color: var(--color-neutral-700); line-height: 1.65; } /* ── Prescription Notice Block ───────────────────────────────────────────── */ /* Must appear on every product description — minimum font-size 0.875rem (spec) */ .prescription-notice { font-size: 0.875rem; /* Minimum per regulatory spec */ color: var(--color-neutral-500); /* #64748b on #fff = 4.55:1 — PASS AA */ font-style: italic; border-top: 1px solid var(--color-neutral-200); margin-top: var(--space-4); padding-top: var(--space-3); line-height: 1.5; } /* ── Site Footer Block ───────────────────────────────────────────────────── */ .site-footer { background-color: var(--color-primary-900); color: var(--color-neutral-300); } .site-footer__grid { display: grid; gap: var(--space-10); grid-template-columns: 1fr; padding-block: var(--space-12) var(--space-8); padding-inline: var(--space-5); max-width: var(--bp-desktop); margin-inline: auto; } .site-footer__logo-mark { background-color: rgba(255, 255, 255, 0.12); } .site-footer__logo-name { color: var(--color-white); } .site-footer__logo-subtitle { color: #93c5fd; } .site-footer__tagline { margin-top: var(--space-4); font-size: 0.875rem; color: #94a3b8; line-height: 1.5; } .site-footer__nav-title, .site-footer__legal-title { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: #93c5fd; margin-bottom: var(--space-4); } .site-footer__nav-list, .site-footer__legal-list { display: flex; flex-direction: column; gap: var(--space-2); } .site-footer__nav-link, .site-footer__legal-link { color: var(--color-neutral-300); text-decoration: none; font-size: 0.9rem; text-underline-offset: 0.15em; transition: color var(--tr-base); } .site-footer__nav-link:hover, .site-footer__legal-link:hover { color: var(--color-white); text-decoration: underline; } /* Mandatory pharma disclaimer — required by FDA/EMA digital guidelines */ .site-footer__disclaimer { background-color: rgba(0, 0, 0, 0.2); border-block: 1px solid rgba(255, 255, 255, 0.07); padding-block: var(--space-5); } .site-footer__disclaimer p { max-width: var(--bp-desktop); margin-inline: auto; padding-inline: var(--space-5); font-size: 0.8125rem; color: #94a3b8; line-height: 1.65; } .site-footer__disclaimer strong { color: var(--color-neutral-300); } .site-footer__bottom { padding-block: var(--space-5); padding-inline: var(--space-5); max-width: var(--bp-desktop); margin-inline: auto; display: flex; flex-direction: column; gap: var(--space-2); } .site-footer__copyright, .site-footer__contact-line { font-size: 0.8rem; color: #475569; line-height: 1.5; } .site-footer__contact-line a { color: #93c5fd; text-decoration: none; text-underline-offset: 0.15em; } .site-footer__contact-line a:hover { text-decoration: underline; } /* ── Carousel Block ──────────────────────────────────────────────────────── */ .carousel { position: relative; overflow: hidden; } .carousel__track-container { overflow: hidden; border-radius: var(--radius-lg); } .carousel__track { display: flex; transition: transform 400ms cubic-bezier(0.4, 0, 0.2, 1); will-change: transform; } .carousel__slide { flex: 0 0 100%; min-width: 0; } .carousel__btn { position: absolute; top: 50%; transform: translateY(-50%); z-index: 10; background-color: rgba(255, 255, 255, 0.9); border: 1px solid var(--color-neutral-200); border-radius: var(--radius-pill); width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; font-size: 1.125rem; color: var(--color-primary-700); transition: background-color var(--tr-base), box-shadow var(--tr-base); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); } .carousel__btn:hover { background-color: var(--color-white); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15); } .carousel__btn--prev { left: var(--space-3); } .carousel__btn--next { right: var(--space-3); } .carousel__dots { display: flex; justify-content: center; gap: var(--space-2); margin-top: var(--space-5); } .carousel__dot { width: 10px; height: 10px; border-radius: var(--radius-pill); background-color: var(--color-neutral-300); border: none; padding: 0; transition: background-color var(--tr-base), transform var(--tr-base); } .carousel__dot--active, .carousel__dot:hover { background-color: var(--color-primary-700); transform: scale(1.2); } .carousel__live-region { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; } /* ── Product Card Block ──────────────────────────────────────────────────── */ .product-card { border: 1px solid var(--color-neutral-200); border-radius: var(--radius-lg); padding: var(--space-8) var(--space-6); background-color: var(--color-white); height: 100%; display: flex; flex-direction: column; } .product-card__title { font-size: 1.125rem; font-weight: 700; color: var(--color-primary-900); margin-bottom: var(--space-4); line-height: 1.3; } .product-card__meta { display: flex; flex-direction: column; gap: var(--space-3); margin-bottom: var(--space-4); } .product-card__meta-item { display: flex; flex-direction: column; gap: var(--space-1); } .product-card__meta-label { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-primary-700); } .product-card__meta-value { font-size: 0.9rem; color: var(--color-neutral-700); } .product-card__indication { font-size: 0.9375rem; color: var(--color-neutral-700); line-height: 1.65; flex-grow: 1; } .product-card__status { display: inline-flex; align-items: center; background-color: #eff6ff; color: var(--color-primary-700); font-size: 0.75rem; font-weight: 600; padding: var(--space-1) var(--space-3); border-radius: var(--radius-pill); margin-bottom: var(--space-4); } /* ── Article Card Block ──────────────────────────────────────────────────── */ .article-card { border: 1px solid var(--color-neutral-200); border-radius: var(--radius-lg); padding: var(--space-6); background-color: var(--color-white); display: flex; flex-direction: column; gap: var(--space-3); transition: box-shadow var(--tr-base), transform var(--tr-base); } .article-card:hover { box-shadow: 0 8px 24px rgba(26, 79, 138, 0.08); transform: translateY(-2px); } .article-card__category { display: inline-block; background-color: #eff6ff; color: var(--color-primary-700); font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; padding: var(--space-1) var(--space-3); border-radius: var(--radius-pill); } .article-card__date { font-size: 0.8rem; color: var(--color-neutral-500); } .article-card__title { font-size: 1rem; font-weight: 700; color: var(--color-primary-900); line-height: 1.35; } .article-card__excerpt { font-size: 0.9rem; color: var(--color-neutral-700); line-height: 1.65; flex-grow: 1; } .article-card__link { font-size: 0.875rem; font-weight: 600; color: var(--color-primary-700); text-decoration: none; text-underline-offset: 0.15em; transition: color var(--tr-base); } .article-card__link:hover { color: var(--color-primary-900); text-decoration: underline; } /* ── Page Hero (interior pages) ──────────────────────────────────────────── */ .page-hero { background: linear-gradient(135deg, var(--color-primary-900), var(--color-primary-700)); color: var(--color-white); padding-block: var(--space-12) var(--space-10); padding-inline: var(--space-5); } .page-hero__eyebrow { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-accent); margin-bottom: var(--space-3); } .page-hero__title { font-size: clamp(1.5rem, 4vw, 2.5rem); font-weight: 800; line-height: 1.15; max-width: 700px; margin-bottom: var(--space-4); } .page-hero__lead { font-size: clamp(0.9375rem, 2vw, 1.0625rem); opacity: 0.9; max-width: 600px; line-height: 1.65; } /* ── Article Layout ──────────────────────────────────────────────────────── */ .article-body { max-width: 760px; margin-inline: auto; padding-block: var(--space-12); padding-inline: var(--space-5); } .article-body h2 { font-size: 1.5rem; font-weight: 800; color: var(--color-primary-900); margin-block: var(--space-8) var(--space-4); line-height: 1.2; } .article-body h3 { font-size: 1.125rem; font-weight: 700; color: var(--color-primary-900); margin-block: var(--space-6) var(--space-3); } .article-body p { color: var(--color-neutral-700); line-height: 1.75; margin-bottom: var(--space-5); font-size: 1rem; } .article-body ul { list-style: disc; padding-left: var(--space-6); margin-bottom: var(--space-5); } .article-body li { color: var(--color-neutral-700); line-height: 1.7; margin-bottom: var(--space-2); font-size: 1rem; } /* Article disclaimer banner */ .article-disclaimer { background-color: var(--color-neutral-50); border: 1px solid var(--color-neutral-200); border-left: 4px solid var(--color-cta-500); border-radius: 0 var(--radius-md) var(--radius-md) 0; padding: var(--space-4) var(--space-5); margin-block: var(--space-6); } .article-disclaimer p { font-size: 0.875rem; color: var(--color-neutral-500); line-height: 1.6; margin: 0; } /* ── Responsive Breakpoints ─────────────────────────────────────────────── */ @media (min-width: 600px) { .services__grid { grid-template-columns: repeat(2, 1fr); } .trust-bar__inner { grid-template-columns: repeat(4, 1fr); } } @media (min-width: 768px) { /* Header — show desktop nav, hide hamburger */ .site-header__nav { display: flex; align-items: center; } .site-header__menu-toggle { display: none; } /* Hero */ .hero { padding-block: var(--space-20); } /* About */ .about__grid { grid-template-columns: 1fr 1fr; align-items: start; } /* Quality */ .quality__steps { grid-template-columns: repeat(3, 1fr); } /* Contact */ .contact__grid { grid-template-columns: 1fr 1fr; align-items: start; } /* Footer */ .site-footer__grid { grid-template-columns: 2fr 1fr 1fr; } .site-footer__bottom { flex-direction: row; justify-content: space-between; } } @media (min-width: 1024px) { .services__grid { grid-template-columns: repeat(3, 1fr); } .hero { padding-block: calc(var(--space-20) + var(--space-4)); } } /* ── Print Stylesheet ────────────────────────────────────────────────────── */ @media print { .site-header, .site-nav, .consent-banner, .hero__cta-group, .contact-form__wrap, .site-footer__nav, .site-footer__disclaimer, .carousel__btn, .carousel__dots, .btn { display: none !important; /* !important required: override specificity for print context */ } body { font-size: 12pt; color: #000; background: #fff; } a::after { content: ' (' attr(href) ')'; font-size: 0.75em; } .hero { background: none; color: #000; border-bottom: 2px solid #000; padding: 1rem 0; } .hero__heading { font-size: 18pt; } } /* ========================================== CONTROL TOTAL DEL LOGO - HEADER ========================================== */ /* Contenedor del logo */ .site-header__logo { display: flex !important; align-items: center !important; gap: 12px !important; text-decoration: none !important; } /* IMAGEN DEL LOGO - Tamaño forzado */ .site-header__logo img, .site-header__logo-img, .site-header__logo-mark img { height: 40px !important; /* ALTURA CONTROLADA */ width: auto !important; /* Ancho proporcional */ max-width: 120px !important; /* Límite máximo */ object-fit: contain !important; /* Mantiene proporción */ display: block !important; } /* Si el logo es un SVG o div con fondo */ .site-header__logo-mark { width: 40px !important; height: 40px !important; min-width: 40px !important; display: flex !important; align-items: center !important; justify-content: center !important; } .site-header__logo-mark svg { width: 24px !important; height: 24px !important; } /* Texto del logo (nombre de la empresa) */ .site-header__logo-name { font-size: 1rem !important; font-weight: 700 !important; color: #0a0a0a !important; line-height: 1.2 !important; } .site-header__logo-subtitle { font-size: 0.75rem !important; color: #64748b !important; line-height: 1.2 !important; display: block !important; } /* ========================================== ANIMACIÓN HERO - ENTRADA SUAVE ========================================== */ /* Contenedor del hero - opacity inicial */ .page-hero { opacity: 0; animation: heroFadeIn 0.8s ease-out forwards; animation-delay: 0.2s; /* Pequeña pausa antes de iniciar */ } /* Título - Slide up */ .page-hero__title { opacity: 0; transform: translateY(30px); animation: heroSlideUp 0.8s ease-out forwards; animation-delay: 0.4s; } /* Subtítulo/eyebrow */ .page-hero__eyebrow { opacity: 0; transform: translateY(20px); animation: heroSlideUp 0.6s ease-out forwards; animation-delay: 0.3s; } /* Párrafo principal */ .page-hero__lead { opacity: 0; transform: translateY(20px); animation: heroSlideUp 0.8s ease-out forwards; animation-delay: 0.5s; } /* Botones */ .page-hero .btn, .page-hero a[class*="btn"] { opacity: 0; transform: translateY(20px); animation: heroSlideUp 0.6s ease-out forwards; animation-delay: 0.6s; } /* Keyframes - Fade In General */ @keyframes heroFadeIn { to { opacity: 1; } } /* Keyframes - Slide Up */ @keyframes heroSlideUp { to { opacity: 1; transform: translateY(0); } } /* RESPETAR preferencias de accesibilidad */ @media (prefers-reduced-motion: reduce) { .page-hero, .page-hero__title, .page-hero__eyebrow, .page-hero__lead, .page-hero .btn { animation: none !important; opacity: 1 !important; transform: none !important; } } /* ========================================== HERO - CAPAS CORRECTAS (FONDO DETRÁS, TEXTO ENCIMA) ========================================== */ /* 1. El contenedor principal crea el contexto */ .page-hero { position: relative !important; overflow: hidden !important; background: linear-gradient(135deg, #0a0a0a 0%, #2a0505 50%, #5c0000 100%) !important; } /* 2. El patrón de líneas se queda ATRÁS */ .page-hero::after { content: ''; position: absolute; inset: 0; /* Equivale a top:0; right:0; bottom:0; left:0; */ background: repeating-linear-gradient(45deg, rgba(255,255,255,0.03) 0px, rgba(255,255,255,0.03) 1px, transparent 1px, transparent 24px); z-index: 1 !important; /* Capa baja: fondo decorativo */ pointer-events: none; /* No interfiere con clics */ } /* 3. El contenido (títulos, botones) va ENCIMA */ .page-hero .container { position: relative !important; z-index: 10 !important; /* Capa alta: contenido legible */ } /* 4. Forzar visibilidad del texto y botones */ .page-hero__eyebrow, .page-hero__title, .page-hero__lead, .page-hero .btn, .page-hero a[class*="btn"] { position: relative; z-index: 11; color: #ffffff !important; /* Blanco puro sobre rojo oscuro */ text-shadow: 0 2px 4px rgba(0,0,0,0.3); /* Sutil sombra para mejor lectura */ } /* ========================================== ELIMINAR LÍNEA BLANCA - SOLO FOOTER ========================================== */ /* 1. Footer oscuro sin márgenes extra */ footer, .site-footer { margin-bottom: 0 !important; padding-bottom: 0 !important; background-color: #0a0a0a !important; border-bottom: none !important; } /* 2. Aviso inferior sin espacios ni bordes */ footer [role="note"], .site-footer__disclaimer, .medical-disclaimer__wrapper { margin-bottom: 0 !important; border-bottom: none !important; background: #0a0a0a !important; /* Mismo color que el footer */ } /* 3. Eliminar pseudo-elementos que crean líneas */ footer::after, .site-footer::after, footer::before, .site-footer::before { display: none !important; } /* 5. Main sin margen/padding extra al final */ main { margin-bottom: 0 !important; padding-bottom: 0 !important; } /* ========================================== AVISO IMPORTANTE - FONDO RECUPERADO ========================================== */ footer [role="note"], .site-footer__disclaimer { /* Fondo rojo vino sutil (transparencia 15%) */ background: rgba(92, 0, 0, 0.15) !important; /* Borde rojo intenso a la izquierda para destacar */ border-left: 4px solid #8b0000 !important; /* Asegurar que NO haya líneas blancas ni bordes extra */ border-top: none !important; border-right: none !important; border-bottom: none !important; /* <--- Clave para que no haya línea blanca */ margin-top: 2rem !important; margin-bottom: 0 !important; /* <--- Clave para que no haya espacio blanco abajo */ padding: 1.5rem 2rem !important; border-radius: 0 8px 8px 0 !important; /* Bordes redondeados solo a la derecha */ } /* Texto destacado */ footer [role="note"] strong, .site-footer__disclaimer strong { color: #ff8888 !important; /* Rojo claro para "AVISO IMPORTANTE" */ } /* ========================================== FOOTER - TEXTO VISIBLE Y LOGO ========================================== */ /* 1. Hacer visible TODO el texto del footer */ .site-footer, footer { color: #e2e8f0 !important; /* Gris claro para texto general */ } .site-footer a, footer a { color: #94a3b8 !important; /* Gris medio para enlaces */ text-decoration: none !important; } .site-footer a:hover, footer a:hover { color: #ff8888 !important; /* Rojo claro al pasar el mouse */ } /* Títulos de columnas (Navegación, Legal) */ .site-footer h3, footer h3, .footer-heading { color: #ffffff !important; /* Blanco puro */ font-weight: 700 !important; margin-bottom: 1rem !important; font-size: 0.875rem !important; text-transform: uppercase !important; letter-spacing: 0.05em !important; } /* Texto del logo/empresa */ .site-footer__logo-name, footer strong, .site-footer strong { color: #ffffff !important; /* Blanco para "Radiofarmacia CA" */ font-weight: 700 !important; } .site-footer__logo-subtitle, footer .text-muted { color: #94a3b8 !important; /* Gris para subtítulos */ } /* 2. Reemplazar el icono cuadrado por tu logo */ .site-footer__logo-mark, footer .logo-icon, .site-footer__logo-mark svg { display: none !important; /* Ocultar icono cuadrado */ } /* Si tienes una imagen de logo en el footer, mostrarla */ .site-footer__logo img, footer .site-header__logo img { display: block !important; height: 50px !important; width: auto !important; max-width: 200px !important; } /* ========================================== TARJETAS DE SERVICIOS - FONDO CLARO ========================================== */ /* Forzar fondo blanco en las tarjetas de servicios */ .service-card, .services__grid article, [class*="service"] { background: #ffffff !important; color: #1f2937 !important; /* Texto oscuro para legibilidad */ border: 1px solid #e5e7eb !important; border-radius: 12px !important; padding: 2rem !important; box-shadow: 0 4px 6px rgba(0,0,0,0.05) !important; } /* Títulos de servicios en color oscuro */ .service-card__title, .service-card h3, [class*="service"] h3 { color: #111827 !important; /* Negro suave */ font-weight: 700 !important; margin-bottom: 1rem !important; } /* Iconos de servicios - mantener color vino */ .service-card__icon, .service-card__icon svg { color: #8b0000 !important; /* Rojo vino */ background: #fef2f2 !important; /* Fondo rojo muy claro */ border-radius: 8px !important; padding: 0.75rem !important; margin-bottom: 1rem !important; } /* Texto dentro de las tarjetas */ .service-card p, .service-card__text, .medical-disclaimer__text { color: #374151 !important; /* Gris oscuro legible */ line-height: 1.6 !important; } /* Grid de servicios - espaciado */ .services__grid { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) !important; gap: 2rem !important; margin: 3rem 0 !important; background: #f9fafb !important; /* Fondo gris muy claro para la sección */ padding: 2rem !important; border-radius: 12px !important; } /* ========================================== LIMPIEZA DE SERVICIOS (ARREGLAR CAJAS NEGRAS) ========================================== */ /* 1. El Grid general limpio */ .services__grid { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) !important; gap: 2rem !important; background: #f8fafc !important; /* Fondo gris muy suave para la sección */ padding: 3rem 1.5rem !important; margin-top: 0 !important; } /* 2. La Tarjeta Blanca */ .service-card { background: #ffffff !important; border: 1px solid #e2e8f0 !important; border-radius: 16px !important; padding: 2rem !important; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1) !important; display: flex !important; flex-direction: column !important; height: 100% !important; } /* 3. Títulos (Quitar cajas blancas internas) */ .service-card__title, .service-card h3 { color: #111827 !important; /* Negro profesional */ font-size: 1.25rem !important; font-weight: 700 !important; margin: 1rem 0 !important; background: transparent !important; /* ¡ESTO QUITA LA CAJA BLANCA! */ border: none !important; padding: 0 !important; } /* 4. Texto (Quitar las CAJAS NEGRAS) */ .service-card p, .service-card .medical-disclaimer__text, .service-card__text { color: #4b5563 !important; /* Gris oscuro legible */ background: transparent !important; /* ¡ESTO QUITA LA CAJA NEGRA! */ border: none !important; padding: 0 !important; font-size: 0.95rem !important; line-height: 1.6 !important; margin-top: auto !important; /* Empuja el texto al fondo si es necesario */ } /* 5. Iconos (Hacerlos visibles y rojos) */ .service-card__icon { background: #fef2f2 !important; /* Fondo rojo muy claro */ color: #991b1b !important; /* Icono Rojo Vino */ width: 48px !important; height: 48px !important; border-radius: 10px !important; display: flex !important; align-items: center !important; justify-content: center !important; margin-bottom: 1rem !important; } .service-card__icon svg { width: 24px !important; height: 24px !important; } /* ========================================== ARREGLOS RÁPIDOS POST-BACKUP ========================================== */ /* 1. HERO - Capas correctas */ .page-hero { position: relative !important; z-index: 1 !important; } .page-hero::after { z-index: 0 !important; pointer-events: none !important; } .page-hero .container { position: relative !important; z-index: 10 !important; } .page-hero__title, .page-hero__lead, .page-hero__eyebrow { position: relative !important; z-index: 11 !important; color: #ffffff !important; } /* 2. TARJETAS DE SERVICIOS - Texto legible */ .service-card { background: #ffffff !important; color: #1f2937 !important; } .service-card__title { color: #111827 !important; background: transparent !important; } .service-card p, .service-card__text, .medical-disclaimer__text { color: #4b5563 !important; background: transparent !important; } /* 3. ICONOS DE SERVICIOS - Hacer visibles */ .service-card__icon { background: #fef2f2 !important; color: #991b1b !important; display: flex !important; align-items: center !important; justify-content: center !important; } .service-card__icon svg { display: block !important; width: 24px !important; height: 24px !important; color: #991b1b !important; } /* 4. GRID DE SERVICIOS - Espaciado correcto */ .services__grid { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important; gap: 2rem !important; background: transparent !important; } /* 5. SECCIONES DE TEXTO (Quiénes Somos, Calidad) */ main section:not(.page-hero):not(.services) { padding: 3rem 1.5rem; max-width: 1000px; margin: 0 auto; } main section:not(.page-hero):not(.services) h2 { color: #111827 !important; font-size: 2rem; margin-bottom: 1.5rem; } main section:not(.page-hero):not(.services) h3 { color: #5c0000 !important; font-size: 1.25rem; margin-top: 1.5rem; } main section:not(.page-hero):not(.services) p { color: #4b5563 !important; line-height: 1.7; margin-bottom: 1rem; } main section:not(.page-hero):not(.services) strong { color: #111827 !important; } /* 6. FORMULARIO DE CONTACTO - Básico funcional */ form, .contact-form { max-width: 600px; margin: 2rem auto; } form label { display: block; margin-bottom: 0.5rem; color: #374151; font-weight: 600; } form input[type="text"], form input[type="email"], form input[type="tel"], form textarea, form select { width: 100%; padding: 0.75rem; margin-bottom: 1.5rem; border: 1px solid #d1d5db; border-radius: 6px; font-size: 1rem; } form button[type="submit"] { background: #5c0000; color: #fff; padding: 1rem 2rem; border: none; border-radius: 6px; font-weight: 700; cursor: pointer; } form button[type="submit"]:hover { background: #8b0000; } /* ========================================== ARREGLO URGENTE: SECCIONES BLANCAS ========================================== */ /* 1. Forzar fondo blanco en secciones de contenido */ main section:not(.page-hero), .quality-section, .contact-section { background-color: #ffffff !important; color: #111827 !important; /* Texto negro */ border-top: none !important; } /* 2. Títulos oscuros sobre fondo blanco */ main section:not(.page-hero) h2, main section:not(.page-hero) h3, main section:not(.page-hero) h4 { color: #111827 !important; /* Negro fuerte */ } main section:not(.page-hero) p, main section:not(.page-hero) li, main section:not(.page-hero) span { color: #4b5563 !important; /* Gris oscuro legible */ } /* 3. Las tarjetas de "01, 02, 03" */ main section:not(.page-hero) .card, main section:not(.page-hero) [class*="card"] { background: #f9fafb !important; /* Fondo gris muy claro para las tarjetas */ border: 1px solid #e5e7eb !important; color: #111827 !important; } /* 4. Números rojos (01, 02, 03) */ main section:not(.page-hero) [class*="number"], main section:not(.page-hero) strong { color: #8b0000 !important; /* Rojo vino */ } /* ========================================== ARREGLO FINAL - HERO + SECCIONES ========================================== */ /* === 1. HERO - TEXTO BLANCO VISIBLE === */ .page-hero { background: linear-gradient(135deg, #0a0a0a 0%, #5c0000 100%) !important; color: #ffffff !important; position: relative !important; z-index: 1 !important; } .page-hero::after { z-index: 0 !important; pointer-events: none !important; } .page-hero .container { position: relative !important; z-index: 10 !important; } .page-hero__title, .page-hero__lead, .page-hero__eyebrow { color: #ffffff !important; position: relative !important; z-index: 11 !important; } .page-hero h1, .page-hero h2, .page-hero p, .page-hero a { color: #ffffff !important; } /* Botones del hero */ .page-hero .btn, .page-hero button { background: #ffffff !important; color: #0a0a0a !important; } .page-hero .btn--outline { background: transparent !important; color: #ffffff !important; border: 2px solid #ffffff !important; } /* === 2. SECCIONES DE CONTENIDO - BLANCAS === */ main > section:not(.page-hero), main section[class*="servic"], main section[class*="product"], main section[class*="nosotros"], main section[class*="Instalaciones"], main section[class*="contacto"] { background: #ffffff !important; color: #111827 !important; } /* Texto oscuro en secciones blancas */ main > section:not(.page-hero) *, main section[class*="servic"] *, main section[class*="product"] *, main section[class*="nosotros"] *, main section[class*="Instalaciones"] *, main section[class*="contact"] * { color: #111827 !important; } /* Títulos en secciones de contenido */ main > section:not(.page-hero) h1, main > section:not(.page-hero) h2, main > section:not(.page-hero) h3 { color: #111827 !important; } /* === 3. TARJETAS DE SERVICIOS - BLANCAS === */ .service-card, .services__grid article, .services__grid > div, [class*="card"] { background: #ffffff !important; border: 1px solid #e5e7eb !important; } .service-card *, [class*="card"] * { color: #111827 !important; } /* Iconos rojos */ .service-card__icon, [class*="icon"] { background: #fef2f2 !important; color: #991b1b !important; } /* === 4. PÁGINA PRODUCTOS.HTML === */ body[class*="producto"] section, body[class*="product"] section { background: #ffffff !important; } body[class*="producto"] *, body[class*="product"] * { color: #111827 !important; } /* Excepto el hero de productos */ body[class*="producto"] .page-hero, body[class*="product"] .page-hero { background: linear-gradient(135deg, #0a0a0a 0%, #5c0000 100%) !important; color: #ffffff !important; } body[class*="producto"] .page-hero *, body[class*="product"] .page-hero * { color: #ffffff !important; } /* === 5. PÁGINA NOTICIAS.HTML === */ body[class*="noticia"] section, body[class*="news"] section { background: #ffffff !important; } body[class*="noticia"] *, body[class*="news"] * { color: #111827 !important; } /* Excepto el hero de noticias */ body[class*="noticia"] .page-hero, body[class*="news"] .page-hero { background: linear-gradient(135deg, #0a0a0a 0%, #5c0000 100%) !important; color: #ffffff !important; } body[class*="noticia"] .page-hero *, body[class*="news"] .page-hero * { color: #ffffff !important; } /* === 6. FOOTER - OSCURO === */ footer, .site-footer { background: #0a0a0a !important; color: #e2e8f0 !important; } footer *, .site-footer * { color: #e2e8f0 !important; } footer a, .site-footer a { color: #94a3b8 !important; } footer a:hover, .site-footer a:hover { color: #ff8888 !important; } /* ELIMINAR CAJAS NEGRAS EN SERVICIOS */ .medical-disclaimer__wrapper, .medical-disclaimer__text, .service-card > div:last-child, .service-card p:last-child, [class*="disclaimer"] { background: transparent !important; color: #4b5563 !important; border: none !important; } /* BOTÓN CONTACTAR - Visible */ .page-hero .btn--primary, .page-hero button:first-of-type, .page-hero a[href*="contact"] { background: #ffffff !important; color: #0a0a0a !important; border: 2px solid #ffffff !important; } /* BOTÓN VER PRODUCTOS */ .page-hero .btn--outline, .page-hero a[href*="producto"] { background: transparent !important; color: #ffffff !important; border: 2px solid #ffffff !important; } /* ========================================== SECCIÓN SERVICIOS - ESPACIADO Y ESTILO ========================================== */ /* Contenedor de servicios */ #servicios, .services__grid { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important; gap: 2rem !important; padding: 4rem 1.5rem !important; /* Espacio interno */ margin-top: 0 !important; background: #f8fafc !important; /* Fondo gris claro */ scroll-margin-top: 100px !important; /* Para que el header no tape al hacer scroll */ } /* Tarjetas individuales */ .service-card { background: #ffffff !important; border: 1px solid #e5e7eb !important; border-radius: 12px !important; padding: 2rem !important; box-shadow: 0 4px 6px rgba(0,0,0,0.05) !important; transition: transform 0.3s ease, box-shadow 0.3s ease !important; } .service-card:hover { transform: translateY(-4px) !important; box-shadow: 0 10px 20px rgba(0,0,0,0.1) !important; } /* Iconos */ .service-card__icon { background: #fef2f2 !important; color: #991b1b !important; width: 48px !important; height: 48px !important; border-radius: 10px !important; display: flex !important; align-items: center !important; justify-content: center !important; margin-bottom: 1rem !important; } .service-card__icon svg { width: 24px !important; height: 24px !important; } /* Títulos */ .service-card__title { color: #111827 !important; font-size: 1.25rem !important; font-weight: 700 !important; margin: 1rem 0 !important; } /* Texto descriptivo */ .service-card p, .medical-disclaimer__text { color: #4b5563 !important; line-height: 1.6 !important; font-size: 0.95rem !important; background: transparent !important; } /* Espacio después del hero */ .page-hero { padding-bottom: 6rem !important; margin-bottom: 0 !important; } /* Transición suave al hacer click en el menú */ html { scroll-padding-top: 30px !important; /* Evita que el menú tape el título */ scroll-behavior: smooth !important; } /* ========================================== CENTRADO DE SERVICIOS + ICONOS VISIBLES ========================================== */ /* Centrar la sección de servicios */ #servicios { max-width: 1200px !important; margin-left: auto !important; margin-right: auto !important; padding-left: 1.5rem !important; padding-right: 1.5rem !important; } /* Asegurar que los iconos SVG sean visibles */ .service-card__icon svg { display: block !important; width: 32px !important; height: 32px !important; stroke: #991b1b !important; /* Rojo vino */ stroke-width: 1.5 !important; fill: none !important; } /* Fondo del icono */ .service-card__icon { background-color: #fef2f2 !important; /* Rojo muy claro */ border-radius: 10px !important; width: 56px !important; height: 56px !important; display: flex !important; align-items: center !important; justify-content: center !important; margin-bottom: 1.5rem !important; } /* Centrar contenido de las tarjetas */ .service-card { text-align: left !important; } /* Asegurar que el título se vea */ .service-card__title { color: #5c0000 !important; /* Rojo vino oscuro */ font-weight: 700 !important; margin-bottom: 1rem !important; } /* Texto descriptivo visible */ .service-card__body, .medical-disclaimer__text { color: #4b5563 !important; /* Gris legible */ font-size: 0.9375rem !important; line-height: 1.65 !important; } /* ========================================== MENÚ: ESTADO ACTIVO CON CLASE 'active' ========================================== */ /* Estilo para el enlace activo (clase simple 'active') */ .site-header__nav-link.active { color: #5c0000 !important; /* Rojo vino */ font-weight: 700 !important; position: relative; } /* Línea debajo del enlace activo */ .site-header__nav-link.active::after { content: ''; position: absolute; bottom: -4px; left: 0; width: 100%; height: 2px; background: #5c0000; border-radius: 2px; } /* Quitar hover en el enlace activo (para que no parpadee) */ .site-header__nav-link.active:hover { color: #5c0000 !important; } /* Estado normal */ .btn--nav-cta { background-color: #5c0000 !important; color: #ffffff !important; border-color: #5c0000 !important; } /* Al pasar el mouse (Hover) */ .btn--nav-cta:hover { background-color: #8b0000 !important; /* Fondo se oscurece un poco */ color: #ffffff !important; /* TEXTO SIEMPRE BLANCO */ border-color: #8b0000 !important; transform: translateY(-1px); /* Pequeña elevación para efecto premium */ } /* ========================================== HERO COMPACTO - PÁGINAS INTERNAS (Productos, Noticias, Nosotros, etc.) ========================================== */ /* Hero pequeño por defecto */ .page-hero { padding-top: 4rem !important; padding-bottom: 4rem !important; min-height: auto !important; } .page-hero__title { font-size: clamp(1.75rem, 4vw, 2.5rem) !important; } .page-hero__lead { font-size: 1rem !important; margin-bottom: 0 !important; } /* ========================================== HERO FORZADO - IZQUIERDA, GRANDE, BOTÓN VINO ========================================== */ /* 1. CONTENEDOR DEL HERO - Forzar alineación izquierda y altura */ section.hero--large { display: flex !important; align-items: center !important; /* Centrar verticalmente */ padding: 6rem 2rem !important; /* Espacio arriba/abajo y lados */ min-height: 70vh !important; /* Altura considerable */ /* LA LÍNEA ROJA DEBAJO */ border-bottom: 6px solid #8b0000 !important; /* Línea gruesa rojo vino */ background: linear-gradient(135deg, #0a0a0a 0%, #3a0000 50%, #5c0000 100%) !important; } /* 2. CONTENIDO INTERNO - Todo a la izquierda */ section.hero--large .container { text-align: left !important; /* Texto a la izquierda */ margin-left: 0 !important; /* Anular centrado de márgenes */ margin-right: auto !important; padding-left: 3rem !important; /* Mover un poco a la derecha para elegancia */ max-width: 1200px !important; display: flex !important; flex-direction: column !important; align-items: flex-start !important; /* Alinear hijos (texto/botones) a la izquierda */ } /* 3. LETRAS GIGANTES */ section.hero--large .page-hero__title { font-size: clamp(3rem, 9vw, 9rem) !important; /* MUY GRANDE */ line-height: 1.1 !important; margin-bottom: 1.5rem !important; color: #ffffff !important; font-weight: 900 !important; max-width: 850px !important; } section.hero--large .page-hero__lead { font-size: 1.4rem !important; /* Texto descriptivo GRANDE */ color: rgba(255, 255, 255, 0.9) !important; margin-bottom: 2.5rem !important; max-width: 750px !important; } /* 4. BADGE "EXCLUSIVO" */ section.hero--large .page-hero__eyebrow { background: rgba(255, 255, 255, 0.1) !important; border: 1px solid rgba(255, 255, 255, 0.3) !important; color: #ffffff !important; padding: 0.5rem 1rem !important; border-radius: 6px !important; margin-bottom: 1.5rem !important; } /* 5. BOTÓN 1: CONTACTAR (ROJO VINO + BLANCO) */ section.hero--large .btn--primary { background-color: #5c0000 !important; /* ROJO VINO (igual que el menú Contacto) */ color: #ffffff !important; /* TEXTO BLANCO */ border: 2px solid #5c0000 !important; padding: 1rem 2.5rem !important; font-size: 1.1rem !important; font-weight: 700 !important; border-radius: 8px !important; /* ANIMACIÓN */ transition: all 0.3s ease !important; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4) !important; } section.hero--large .btn--primary:hover { background-color: #3a0000 !important; /* Se oscurece mucho */ transform: translateY(-4px) !important; /* Se levanta */ box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5) !important; } /* 6. BOTÓN 2: VER PRODUCTOS (TRANSPARENTE) */ section.hero--large .btn--outline { background: transparent !important; color: #ffffff !important; border: 2px solid rgba(255, 255, 255, 0.5) !important; padding: 1rem 2.5rem !important; margin-left: 1.5rem !important; font-size: 1.1rem !important; font-weight: 700 !important; border-radius: 8px !important; /* ANIMACIÓN */ transition: all 0.3s ease !important; } section.hero--large .btn--outline:hover { background: rgba(255, 255, 255, 0.1) !important; border-color: #ffffff !important; transform: translateY(-4px) !important; /* Se levanta */ } /* ========================================== HERO - MÁS ALTURA DE FONDO ========================================== */ .hero--large { background: linear-gradient(135deg, #0a0a0a 0%, #5c0000 100%) !important; /* MÁS ALTURA - Hero largo */ padding-top: 6rem !important; padding-bottom: 6rem !important; min-height: 600px !important; /* Altura mínima grande */ display: flex !important; align-items: center !important; } /* Mantener badge gris */ .hero--large .page-hero__eyebrow { display: inline-block !important; background: rgba(200, 200, 200, 0.2) !important; border: 1px solid rgba(255, 255, 255, 0.3) !important; padding: 0.4rem 1rem !important; border-radius: 4px !important; color: #ffffff !important; font-size: 0.75rem !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.05em !important; margin-bottom: 1.5rem !important; } /* Mantener título tamaño normal */ .hero--large .page-hero__title { color: #ffffff !important; font-size: 2rem !important; font-weight: 800 !important; line-height: 1.2 !important; margin-bottom: 1rem !important; } /* Mantener texto normal */ .hero--large .page-hero__lead { color: rgba(255, 255, 255, 0.9) !important; font-size: 1rem !important; line-height: 1.5 !important; margin-bottom: 2rem !important; max-width: 600px !important; } /* Mantener botones rojos/blancos */ .hero--large .btn--primary { background: #ff3333 !important; color: #ffffff !important; border: 2px solid #ff3333 !important; padding: 0.75rem 1.5rem !important; border-radius: 6px !important; font-weight: 600 !important; } .hero--large .btn--primary:hover { background: #cc0000 !important; } .hero--large .btn--outline { background: transparent !important; color: #ffffff !important; border: 2px solid #ffffff !important; padding: 0.75rem 1.5rem !important; border-radius: 6px !important; font-weight: 600 !important; margin-left: 1rem !important; } .hero--large .btn--outline:hover { background: rgba(255, 255, 255, 0.1) !important; } /* ========================================== HERO AJUSTADO - TAMAÑO PERFECTO + ANIMACIONES SUAVES ========================================== */ /* 1. REDUCIR TAMAÑO PARA QUE QUEPA EN PANTALLA */ section.hero--large { padding: 5rem 2rem 4rem !important; /* Menos padding */ min-height: 600px !important; /* Altura fija razonable */ } /* Títulos más contenidos */ section.hero--large .page-hero__title { font-size: clamp(1.9rem, 4vw, 2.9rem) !important; /* MÁS PEQUEÑO */ line-height: 1.15 !important; margin-bottom: 1.2rem !important; } section.hero--large .page-hero__lead { font-size: 1.15rem !important; /* Texto más contenido */ margin-bottom: 2rem !important; max-width: 700px !important; } /* 2. ANIMACIONES SUAVES Y PROFESIONALES */ section.hero--large .btn { transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important; /* Suavidad profesional */ } /* 3. BOTÓN ROJO - SIN BORDES RAROS EN HOVER */ section.hero--large .btn--primary { background-color: #5c0000 !important; color: #ffffff !important; border: 2px solid #5c0000 !important; /* Borde del mismo color (invisible) */ padding: 0.9rem 2.2rem !important; font-size: 1.05rem !important; font-weight: 700 !important; border-radius: 8px !important; box-shadow: 0 2px 8px rgba(92, 0, 0, 0.3) !important; /* Sombra suave */ } /* Hover PROFESIONAL: Solo se oscurece y sube, SIN bordes extraños */ section.hero--large .btn--primary:hover { background-color: #3a0000 !important; /* Se oscurece */ border-color: #3a0000 !important; /* Mismo color (sin cambio visible) */ transform: translateY(-3px) !important; /* Sube suavemente */ box-shadow: 0 6px 20px rgba(92, 0, 0, 0.5) !important; /* Sombra más pronunciada */ } /* 4. BOTÓN VER PRODUCTOS - Hover suave */ section.hero--large .btn--outline { background: transparent !important; color: #ffffff !important; border: 2px solid rgba(255, 255, 255, 0.4) !important; padding: 0.9rem 2.2rem !important; margin-left: 1.2rem !important; } section.hero--large .btn--outline:hover { background: rgba(255, 255, 255, 0.15) !important; border-color: rgba(255, 255, 255, 0.8) !important; /* Solo se aclara un poco */ transform: translateY(-3px) !important; } /* 5. LÍNEA INFERIOR */ section.hero--large { border-bottom: 5px solid #8b0000 !important; } /* ========================================== MENÚ MÓVIL - SOBRESCRIBE ESTILOS BASE ========================================== */ /* SOLO MÓVIL (pantallas menores a 768px) */ @media (max-width: 768px) { /* Botón hamburguesa - Mostrar y colorear ROJO */ .site-header__menu-toggle { display: flex !important; width: 44px !important; height: 44px !important; background: transparent !important; border: none !important; cursor: pointer; } .site-header__menu-toggle:hover { background: rgba(92, 0, 0, 0.1) !important; } /* Las 3 líneas - ROJO VINO (sobrescribe el gris) */ .site-header__hamburger, .site-header__hamburger::before, .site-header__hamburger::after { background-color: #5c0000 !important; /* CAMBIA GRIS POR ROJO */ height: 3px !important; width: 24px !important; border-radius: 2px; } /* Menú desplegable - OCULTO por defecto */ .site-nav { display: none !important; /* Importante para ocultar */ position: absolute; top: 73px; left: 0; right: 0; background: #ffffff !important; border-bottom: 4px solid #8b0000; box-shadow: 0 8px 24px rgba(0,0,0,0.12); padding: 1.5rem; z-index: 999; } /* Cuando JavaScript agrega la clase .is-open */ .site-nav.is-open { display: block !important; animation: slideDown 0.3s ease; } @keyframes slideDown { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } } /* Lista de enlaces */ .site-nav__list { display: flex; flex-direction: column; gap: 0.25rem; } .site-nav__link { display: block; padding: 0.875rem 1rem; color: #1f2937 !important; font-size: 1rem; font-weight: 600; text-decoration: none; border-radius: 6px; transition: all 0.2s ease; } .site-nav__link:hover { background: #fff5f5; color: #5c0000 !important; padding-left: 1.25rem; } /* Botón Contacto */ .site-nav__link.btn--nav-cta { background: #5c0000 !important; color: #ffffff !important; text-align: center; margin-top: 0.5rem; padding: 1rem; } .site-nav__link.btn--nav-cta:hover { background: #3a0000 !important; color: #ffffff !important; padding-left: 1rem; } } /* DESKTOP - Ocultar menú móvil */ @media (min-width: 769px) { .site-header__menu-toggle { display: none !important; /* Ocultar en desktop */ } .site-nav { display: none !important; /* Ocultar en desktop */ } } /* FORZAR VISIBILIDAD DEL MENÚ MÓVIL */ @media (max-width: 768px) { /* Cuando NO tiene hidden (está visible) */ #mobile-nav:not([hidden]) { display: block !important; position: absolute !important; top: 73px !important; left: 0 !important; right: 0 !important; background: #ffffff !important; border-bottom: 4px solid #8b0000 !important; box-shadow: 0 8px 24px rgba(0,0,0,0.12) !important; padding: 2rem 1.5rem !important; z-index: 999 !important; animation: slideDown 0.3s ease !important; } /* Cuando tiene hidden (está oculto) */ #mobile-nav[hidden] { display: none !important; } /* Asegurar que los enlaces se vean */ #mobile-nav .site-nav__link { display: block !important; padding: 1rem !important; color: #1f2937 !important; font-size: 1.1rem !important; font-weight: 600 !important; text-decoration: none !important; border-radius: 6px !important; transition: all 0.2s ease !important; } #mobile-nav .site-nav__link:hover { background: #fff5f5 !important; color: #5c0000 !important; padding-left: 1.25rem !important; } /* Botón Contacto */ #mobile-nav .site-nav__link.btn--nav-cta { background: #5c0000 !important; color: #ffffff !important; text-align: center !important; margin-top: 1rem !important; } @keyframes slideDown { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } } } /* ========================================== PRODUCTOS DESTACADOS - ESTILOS ========================================== */ .productos-section { padding: 5rem 1.5rem; background: #f8fafc; } .section-title { text-align: center; font-size: 2.5rem; font-weight: 800; color: #5c0000; margin-bottom: 3rem; } /* Wrapper de Imagen */ .producto-image-wrapper { position: relative; height: 300px; overflow: hidden; background: #ffffff; display: flex; align-items: center; justify-content: center; padding: 2rem; } .producto-image { max-height: 250px; max-width: 100%; object-fit: contain; transition: transform 0.4s ease; } /* Overlay al hacer hover */ .producto-overlay { position: absolute; inset: 0; background: rgba(92, 0, 0, 0.85); display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.3s ease; } .producto-cta { color: #ffffff; font-size: 1.25rem; font-weight: 700; padding: 1rem 2rem; border: 2px solid #ffffff; border-radius: 8px; } /* Contenido */ .producto-content { padding: 2rem; } .producto-title { font-size: 1.5rem; font-weight: 700; color: #5c0000; margin-bottom: 1rem; } .producto-description { color: #4b5563; line-height: 1.6; margin-bottom: 1.5rem; } .producto-badge { display: inline-block; background: #fef2f2; color: #5c0000; padding: 0.5rem 1rem; border-radius: 6px; font-size: 0.875rem; font-weight: 600; border: 1px solid #fecaca; } /* CTA Ver Más Productos */ .productos-cta { text-align: center; padding: 3rem; background: linear-gradient(135deg, #5c0000 0%, #8b0000 100%); border-radius: 12px; max-width: 800px; margin: 0 auto; } .productos-cta-text { color: rgba(255,255,255,0.9); font-size: 1.25rem; margin-bottom: 1.5rem; } .btn--ver-mas { display: inline-flex; align-items: center; gap: 0.75rem; background: #ffffff; color: #5c0000; padding: 1rem 2.5rem; border-radius: 8px; font-weight: 700; font-size: 1.1rem; text-decoration: none; transition: all 0.3s ease; } .btn--ver-mas:hover { background: #f0f0f0; transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,0.2); } /* ========================================== SOLUCIONES: LÍNEA HORIZONTAL + LIMPIO ========================================== */ .productos-title, section h2 { text-align: center !important; margin-left: auto !important; margin-right: auto !important; text-align: center !important; font-size: 2rem !important; font-weight: 800 !important; color: #111827 !important; margin-bottom: 2.5rem !important; } /* GRID DE PRODUCTOS: Ocupa el espacio disponible */ .producto-img { position: relative; height: 200px; display: flex; align-items: center; justify-content: center; margin-bottom: 1rem; } .producto-img img { max-height: 100%; max-width: 100%; object-fit: contain; } /* Overlay rojo al pasar el mouse */ .overlay { position: absolute; inset: 0; background: rgba(92, 0, 0, 0.85); display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.3s ease !important; border-radius: 8px; } .overlay span { color: #fff !important; font-weight: 600 !important; border: 1px solid #fff !important; padding: 0.5rem 1rem !important; border-radius: 4px !important; } .badge { display: inline-block; background: #fff5f5 !important; color: #5c0000 !important; border: 1px solid #fecaca !important; padding: 0.3rem 0.8rem !important; border-radius: 4px !important; font-size: 0.8rem !important; font-weight: 600 !important; } .cta-text { color: #6b7280 !important; font-size: 0.9rem !important; margin: 0 !important; text-align: right !important; } .btn-linea { color: #5c0000 !important; font-weight: 700 !important; font-size: 1rem !important; text-decoration: none !important; border-bottom: 2px solid #5c0000 !important; padding-bottom: 2px !important; transition: all 0.2s ease !important; } .btn-linea:hover { color: #8b0000 !important; border-bottom-color: #8b0000 !important; transform: translateX(5px) !important; } /* ========================================== TEXTO DEL OVERLAY - BLANCO PURO ========================================== */ /* Forzar blanco absoluto en el texto del cuadro rojo */ .overlay span, .producto-cta { color: #ffffff !important; font-weight: 700 !important; letter-spacing: 0.5px !important; /* Mejora legibilidad */ text-shadow: 0 1px 4px rgba(0,0,0,0.3) !important; /* Sutil sombra para que resalte */ } /* RESTO DE ESTILOS */ .nosotros-content { flex: 1 !important; } #nosotros .info-card { background: rgba(255,255,255,0.05) !important; border: 1px solid rgba(255,255,255,0.1) !important; padding: 1.2rem !important; margin-bottom: 1rem !important; border-radius: 10px !important; } #nosotros .info-card h3 { color: #ff6b6b !important; font-size: 1.1rem !important; margin-bottom: 0.4rem !important; } #nosotros .info-card p { color: #f0f0f0 !important; font-size: 0.95rem !important; line-height: 1.5 !important; margin: 0 !important; } .nosotros-image-wrapper { flex: 0 0 450px !important; } #nosotros img { width: 100% !important; border-radius: 16px !important; box-shadow: 0 20px 60px rgba(0,0,0,0.5) !important; } /* BAJAR IMAGEN PARA SIMETRÍA */ .nosotros-image-wrapper { margin-top: 5.4rem !important; /* Empuja la imagen hacia abajo */ } /* ========================================== NOSOTROS - MENOS ESPACIO + ANIMACIÓN ========================================== */ /* 2. DEFINIR ANIMACIONES */ @keyframes fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } @keyframes fadeInRight { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: translateX(0); } } /* 3. APLICAR ANIMACIÓN A TARJETAS (Efecto Cascada) */ #nosotros .info-card { opacity: 0; /* Empiezan invisibles */ animation: fadeInUp 0.7s ease-out forwards; } /* Retrasos escalonados para que salgan una tras otra */ #nosotros .info-card:nth-child(2) { animation-delay: 0.1s; } /* "Nosotros" */ #nosotros .info-card:nth-child(3) { animation-delay: 0.3s; } /* "Misión" */ #nosotros .info-card:nth-child(4) { animation-delay: 0.5s; } /* "Visión" */ /* 4. APLICAR ANIMACIÓN A IMAGEN */ .nosotros-image-wrapper { opacity: 0; animation: fadeInRight 0.8s ease-out 0.4s forwards; /* Aparece después del texto */ } /* ========================================== INSTALACIONES - FORZAR DISEÑO DE GALERÍA ========================================== */ /* 1. CONTENEDOR GRID (Fuerza 2 columnas) */ #instalaciones .instalaciones-grid { display: grid !important; grid-template-columns: repeat(2, 1fr) !important; /* 2 COLUMNAS OBLIGATORIAS */ gap: 1.5rem !important; max-width: 1000px !important; margin: 0 auto !important; padding: 0 !important; } /* 2. CADA FOTO (Cuadrada y con Zoom) */ #instalaciones .instalacion-item { position: relative !important; /* CLAVE: Para que el texto se quede dentro */ overflow: hidden !important; /* CLAVE: Para que el zoom no se salga */ border-radius: 12px !important; margin: 0 !important; padding: 0 !important; height: 235px !important; /* Altura fija para uniformidad */ background: #000 !important; box-shadow: 0 4px 12px rgba(0,0,0,0.1) !important; } /* 3. IMAGEN */ #instalaciones .instalacion-item img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* Recorta la imagen para llenar el cuadro */ display: block !important; transition: transform 0.6s ease !important; /* Animación lenta y elegante */ } /* Animación de Zoom al pasar el mouse */ #instalaciones .instalacion-item:hover img { transform: scale(1.08) !important; } /* 4. TEXTO SOBRE LA IMAGEN (Overlay) */ #instalaciones .instalacion-caption { position: absolute !important; bottom: 0 !important; left: 0 !important; width: 100% !important; /* Fondo oscuro semitransparente */ background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.4) 100%) !important; /* TEXTO BLANCO PURO */ color: #ffffff !important; font-size: 1rem !important; font-weight: 700 !important; text-align: center !important; padding: 1rem !important; margin: 0 !important; /* Sin transformaciones raras */ transform: none !important; opacity: 1 !important; } /* Efecto Hover en el texto (Se pone rojo vino) */ #instalaciones .instalacion-item:hover .instalacion-caption { background: #5c0000 !important; /* Fondo rojo marca */ color: #ffffff !important; } /* 5. AJUSTE DE SCROLL (Para que se vea completo al hacer clic) */ #instalaciones { scroll-margin-top: 90px !important; padding-top: 2rem !important; padding-bottom: 3rem !important; } /* RESPONSIVE: Móvil (1 columna) */ @media (max-width: 700px) { #instalaciones .instalaciones-grid { grid-template-columns: 1fr !important; } #instalaciones .instalacion-item { height: 220px !important; } }/* ========================================== INSTALACIONES - CENTRAR SUBTÍTULO ========================================== */ #instalaciones .section-subtitle, #instalaciones .instalaciones-header p { text-align: center !important; margin: 0 auto !important; display: block !important; max-width: 750px !important; /* Evita que se estire demasiado en pantallas grandes */ } #instalaciones { scroll-margin-top: 10px !important; } /* ELIMINAR LÍNEA SEPARADORA DE INSTAGRAM */ .contact__instagram { border-top: none !important; /* Quitar la línea */ margin-top: 1rem !important; /* Mantener el espacio estándar */ padding-top: 0 !important; /* Quitar el relleno extra */ } /* Asegurar que el icono de Instagram tenga el mismo tamaño que los demás (Reloj, Teléfono, etc.) */ .contact__instagram-icon { width: 20px !important; /* Mismo tamaño que los iconos de contacto */ height: 20px !important; vertical-align: middle !important; } /* ========================================== CONTACTO - DISEÑO PREMIUM MEJORADO ========================================== */ /* ESPACIADO GENERAL */ .contact__grid > div:last-child { padding: 2rem 2.5rem !important; } /* TÍTULO */ .contact__grid > div:last-child h3 { color: #111827 !important; font-size: 1.75rem !important; font-weight: 700 !important; margin-bottom: 2rem !important; letter-spacing: -0.02em !important; } /* GRUPOS DE FORMULARIO */ .contact__grid > div:last-child .form-group, .contact__grid > div:last-child > div { margin-bottom: 1.75rem !important; } /* LABELS */ .contact__grid > div:last-child label { color: #374151 !important; font-weight: 600 !important; font-size: 0.95rem !important; margin-bottom: 0.5rem !important; display: block !important; letter-spacing: 0.01em !important; } /* ASTERISCOS ROJOS */ .contact__grid > div:last-child .required, .contact__grid > div:last-child .asterisk { color: #dc2626 !important; font-weight: 700 !important; margin-left: 2px !important; } /* INPUTS MEJORADOS */ .contact__grid > div:last-child input[type="text"], .contact__grid > div:last-child input[type="email"], .contact__grid > div:last-child input[type="tel"], .contact__grid > div:last-child textarea, .contact__grid > div:last-child select { width: 100% !important; padding: 0.9rem 1.1rem !important; border: 1.5px solid #e5e7eb !important; border-radius: 8px !important; font-size: 1rem !important; color: #111827 !important; background: #ffffff !important; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; box-sizing: border-box !important; } /* Focus elegante */ .contact__grid > div:last-child input:focus, .contact__grid > div:last-child textarea:focus, .contact__grid > div:last-child select:focus { border-color: #9c1c1c !important; outline: none !important; box-shadow: 0 0 0 3px rgba(156, 28, 28, 0.08) !important; transform: translateY(-1px) !important; } /* Placeholder sutil */ .contact__grid > div:last-child input::placeholder, .contact__grid > div:last-child textarea::placeholder { color: #9ca3af !important; font-style: italic !important; } /* TEXTO DE AYUDA (código de país) */ .contact__grid > div:last-child small, .contact__grid > div:last-child .form-help { color: #6b7280 !important; font-size: 0.85rem !important; margin-top: 0.4rem !important; display: block !important; font-style: italic !important; } /* CHECKBOX MEJORADO */ .contact__grid > div:last-child label:has(input[type="checkbox"]) { display: flex !important; align-items: flex-start !important; gap: 0.75rem !important; cursor: pointer !important; margin: 2rem 0 1.5rem 0 !important; padding: 0.5rem 0 !important; } .contact__grid > div:last-child input[type="checkbox"] { appearance: none !important; -webkit-appearance: none !important; width: 20px !important; height: 20px !important; border: 2px solid #d1d5db !important; border-radius: 5px !important; background: #ffffff !important; cursor: pointer !important; flex-shrink: 0 !important; margin-top: 2px !important; position: relative !important; transition: all 0.2s ease !important; } .contact__grid > div:last-child input[type="checkbox"]:hover { border-color: #9c1c1c !important; } .contact__grid > div:last-child input[type="checkbox"]:checked { background: #9c1c1c !important; border-color: #9c1c1c !important; } .contact__grid > div:last-child input[type="checkbox"]:checked::after { content: '✓' !important; position: absolute !important; top: 50% !important; left: 50% !important; transform: translate(-50%, -50%) !important; color: #ffffff !important; font-size: 13px !important; font-weight: bold !important; line-height: 1 !important; } /* TEXTO DEL CHECKBOX */ .contact__grid > div:last-child input[type="checkbox"] + span, .contact__grid > div:last-child .checkbox-label-text { color: #4b5563 !important; font-size: 0.9rem !important; line-height: 1.6 !important; } .contact__grid > div:last-child .checkbox-label-text a { color: #9c1c1c !important; text-decoration: underline !important; font-weight: 600 !important; transition: color 0.2s ease !important; } .contact__grid > div:last-child .checkbox-label-text a:hover { color: #7a1616 !important; } /* BOTÓN MEJORADO */ .contact__grid > div:last-child button[type="submit"] { width: 100% !important; padding: 1rem 2rem !important; background: linear-gradient(135deg, #9c1c1c 0%, #7a1616 100%) !important; color: #ffffff !important; border: none !important; border-radius: 10px !important; font-size: 1.05rem !important; font-weight: 600 !important; cursor: pointer !important; display: flex !important; align-items: center !important; justify-content: center !important; gap: 0.6rem !important; box-shadow: 0 4px 12px rgba(156, 28, 28, 0.25) !important; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; margin-top: 1rem !important; } .contact__grid > div:last-child button[type="submit"]:hover { background: linear-gradient(135deg, #b91c1c 0%, #9c1c1c 100%) !important; transform: translateY(-2px) !important; box-shadow: 0 8px 20px rgba(156, 28, 28, 0.35) !important; } .contact__grid > div:last-child button[type="submit"]:active { transform: translateY(0) !important; box-shadow: 0 4px 12px rgba(156, 28, 28, 0.25) !important; } /* ICONO DEL BOTÓN */ .contact__grid > div:last-child button[type="submit"] svg, .contact__grid > div:last-child button[type="submit"] i { fill: #ffffff !important; stroke: #ffffff !important; width: 20px !important; height: 20px !important; transition: transform 0.3s ease !important; } .contact__grid > div:last-child button[type="submit"]:hover svg { transform: translateX(3px) !important; } /* MENSAJE DE ÉXITO */ .contact__grid > div:last-child .contact__success, .form-success-message { background: #f0fdf4 !important; border: 1.5px solid #86efac !important; border-radius: 10px !important; padding: 1.2rem 1.5rem !important; margin: 1.5rem 0 !important; color: #166534 !important; font-weight: 500 !important; font-size: 0.95rem !important; display: flex !important; align-items: center !important; gap: 0.75rem !important; animation: slideIn 0.4s ease !important; } .contact__success svg, .form-success-message svg { fill: #16a34a !important; stroke: #16a34a !important; width: 22px !important; height: 22px !important; flex-shrink: 0 !important; } @keyframes slideIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } } /* INSTAGRAM - SIN SUBRAYADO FEOS */ .contact__instagram-link { text-decoration: none !important; border-bottom: none !important; display: inline-flex !important; align-items: center !important; gap: 0.6rem !important; color: #374151 !important; font-weight: 500 !important; transition: all 0.3s ease !important; } .contact__instagram-link:hover { color: #9c1c1c !important; transform: translateX(4px) !important; } .contact__instagram-icon { width: 20px !important; height: 20px !important; fill: currentColor !important; } /* RESPONSIVE */ @media (max-width: 768px) { .contact__grid > div:last-child { padding: 1.5rem !important; } .contact__grid > div:last-child h3 { font-size: 1.5rem !important; } .contact__grid > div:last-child button[type="submit"] { font-size: 1rem !important; padding: 0.9rem 1.5rem !important; } } /* ========================================== CONTACTO - CORRECCIONES (Asteriscos + Error CSS) ========================================== */ /* 1. ASTERISCOS ROJOS - TARGET CORRECTO (abbr) */ .contact-form__label abbr, .contact__grid label abbr, .contact-form__label .required, .contact__grid label .required { color: #dc2626 !important; /* ROJO PURO */ text-decoration: none !important; /* Quitar subrayado de abbr */ border: none !important; font-weight: 700 !important; font-size: inherit !important; margin-left: 3px !important; } /* 2. ICONO DE AVIÓN SIN RELLENO (Corregido) */ .contact__grid > div:last-child button[type="submit"] svg, .contact__grid button[type="submit"] .send-icon, .contact-form button[type="submit"] svg { fill: none !important; /* Sin relleno */ stroke: #ffffff !important; /* Contorno blanco */ stroke-width: 2px !important; stroke-linecap: round !important; stroke-linejoin: round !important; } /* 3. CORREGIR background-clip (sin errores) */ .contact__grid button[type="submit"] .fa-paper-plane, .contact-form button[type="submit"] .fa-paper-plane { background: transparent !important; -webkit-background-clip: text !important; background-clip: text !important; /* Estándar - SIN ERROR */ -webkit-text-fill-color: transparent !important; color: transparent !important; } /* 4. ESPACIO CON FOOTER */ .contact__grid > div:last-child, .contact form, .contact-form__wrap { margin-bottom: 5rem !important; padding-bottom: 2rem !important; } /* 5. BOTÓN */ .contact__grid button[type="submit"], .contact-form button[type="submit"] { background: linear-gradient(135deg, #9c1c1c 0%, #7a1616 100%) !important; color: #ffffff !important; border: none !important; border-radius: 10px !important; padding: 1rem 2rem !important; font-size: 1.05rem !important; font-weight: 600 !important; width: 100% !important; cursor: pointer !important; display: flex !important; align-items: center !important; justify-content: center !important; gap: 0.6rem !important; box-shadow: 0 4px 15px rgba(156, 28, 28, 0.25) !important; transition: all 0.3s ease !important; } .contact__grid button[type="submit"]:hover, .contact-form button[type="submit"]:hover { background: linear-gradient(135deg, #b91c1c 0%, #9c1c1c 100%) !important; transform: translateY(-2px) !important; box-shadow: 0 8px 25px rgba(156, 28, 28, 0.35) !important; } /* MENÚ MÓVIL - ENLACES FUNCIONALES */ .mobile-nav__link[href="#productos"], .site-nav__link[href="#productos"], .site-nav__link[href="index.html#productos"] { cursor: pointer !important; text-decoration: none !important; } /* Asegurar que los enlaces del menú móvil funcionen */ #mobile-nav a[href*="#productos"] { pointer-events: auto !important; } /* Asegurar que el contenido de texto vaya primero */ .nosotros-content { order: 2 !important; /* En column-reverse, order 2 va PRIMERO */ } .nosotros-image-wrapper { order: 1 !important; /* En column-reverse, order 1 va DESPUÉS */ margin-bottom: 2rem !important; } /* ========================================== MENÚ MÓVIL - ESTILO UNIFORME (Para todas las páginas) ========================================== */ /* 1. ELIMINAR SUBRAYADOS Y ESTILOS VIEJOS */ #mobile-nav a, .site-nav__list a, .mobile-menu a { text-decoration: none !important; border-bottom: none !important; background: none !important; box-shadow: none !important; } /* 2. COLOR Y TAMAÑO DEL TEXTO */ #mobile-nav .site-nav__link, .site-nav__list .site-nav__link { color: #1a1a1a !important; /* Texto oscuro limpio */ font-size: 1.1rem !important; font-weight: 500 !important; padding: 1rem 1.5rem !important; /* Espacio grande para que sea fácil tocar */ display: block !important; transition: color 0.3s ease !important; } /* 3. ESTADO ACTIVO (Al presionar o pasar mouse) */ #mobile-nav .site-nav__link:hover, .site-nav__list .site-nav__link:hover, #mobile-nav .site-nav__link:active { color: #9c1c1c !important; /* Rojo vino */ background-color: rgba(156, 28, 28, 0.05) !important; /* Fondo muy sutil */ } /* 4. SEPARADOR SUTIL ENTRE ITEMS */ #mobile-nav .site-nav__list li { border-bottom: 1px solid #f3f4f6 !important; /* Línea gris muy tenue */ } #mobile-nav .site-nav__list li:last-child { border-bottom: none !important; } /* 5. BOTÓN "CONTACTO" AL FINAL (Estilo botón rojo) */ #mobile-nav .btn--nav-cta, #mobile-nav .site-nav__link.btn--nav-cta { background: #9c1c1c !important; /* Fondo Rojo */ color: #ffffff !important; /* Texto Blanco */ text-align: center !important; border-radius: 8px !important; margin: 1.5rem 1rem 2rem 1rem !important; /* Margen para separarlo del resto */ font-weight: 700 !important; border: none !important; } #mobile-nav .btn--nav-cta:hover { background: #7a1616 !important; color: #ffffff !important; } /* ========================================== HERO RESPONSIVE - BOTONES ORDENADOS Y CON ESPACIO ========================================== */ @media (max-width: 768px) { /* 1. Contenedor de botones: Apilados verticalmente con espacio */ .page-hero div:has(> .btn), .page-hero__buttons, .hero-cta-wrapper { display: flex !important; flex-direction: column !important; align-items: center !important; gap: 1rem !important; /* Espacio uniforme entre botones */ margin-top: 2rem !important; width: 100% !important; } /* 2. Botones: Ancho completo pero centrados y con buen tacto */ .page-hero .btn, .page-hero a.btn { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; max-width: 320px !important; /* No se estiran demasiado */ margin: 0 !important; /* Elimina márgenes viejos que los pegan */ padding: 1rem 1.5rem !important; font-size: 1rem !important; box-sizing: border-box !important; text-decoration: none !important; } } /* 3 COLUMNAS EN FOOTER */ .site-footer__inner { display: flex !important; justify-content: space-between !important; gap: 3rem !important; max-width: 1200px !important; margin: 0 auto !important; flex-wrap: wrap !important; } .site-footer__brand, .site-footer__legal, .site-footer__social { flex: 1 !important; min-width: 250px !important; } .site-footer__heading { font-size: 0.85rem !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.05em !important; color: #ffffff !important; margin-bottom: 1rem !important; } /* Instagram Link */ .footer-instagram-link { display: inline-flex !important; align-items: center !important; gap: 0.75rem !important; color: #93c5fd !important; font-size: 1rem !important; text-decoration: none !important; padding: 0.5rem 0 !important; transition: all 0.3s ease !important; } .footer-instagram-link:hover { color: #ffffff !important; transform: translateX(5px) !important; } .footer-instagram-link svg { flex-shrink: 0 !important; } /* Responsive */ @media (max-width: 768px) { .site-footer__inner { flex-direction: column !important; gap: 2rem !important; } .site-footer__brand, .site-footer__legal, .site-footer__social { width: 100% !important; } } /* ── Article Card Block ──────────────────────────────────────────────────── */ /* COMENTAR O ELIMINAR ESTO: */ .article-card { border: 1px solid var(--color-neutral-200); border-radius: var(--radius-lg); padding: var(--space-6); background-color: var(--color-white); display: flex; flex-direction: column; gap: var(--space-3); transition: box-shadow var(--tr-base), transform var(--tr-base); } .article-card:hover { box-shadow: 0 8px 24px rgba(26, 79, 138, 0.08); transform: translateY(-2px); } /* ========================================== CORRECCIONES NOTICIAS - LEGIBILIDAD Y ESPACIADO ========================================== */ /* 1. BADGE SOBRE IMAGEN - MEJOR LEGIBILIDAD */ .noticia-card__category { background: rgba(0, 0, 0, 0.85) !important; /* Fondo negro semi-transparente */ color: #ffffff !important; /* Texto blanco */ border: none !important; box-shadow: 0 2px 12px rgba(0,0,0,0.4) !important; /* Sombra más pronunciada */ text-shadow: 0 1px 3px rgba(0,0,0,0.5) !important; /* Sombra al texto */ font-weight: 800 !important; /* Más grueso */ letter-spacing: 0.08em !important; /* Más espaciado */ } /* 2. VIDEOS - SIN RECUADROS */ .video-card { background: transparent !important; border: none !important; box-shadow: none !important; border-radius: 0 !important; padding: 0 !important; } .video-card__content { background: transparent !important; padding: 1.5rem 0 0 0 !important; /* Solo padding arriba */ } .video-card__title { background: transparent !important; border: none !important; box-shadow: none !important; } /* 3. ESPACIO SUFICIENTE ANTES DEL FOOTER */ .videos-section { padding-bottom: 12rem !important; /* Mucho más espacio abajo */ margin-bottom: 0 !important; } /* Asegurar que el main tenga espacio */ main { padding-bottom: 2rem !important; } /* Si hay contenedores internos */ .videos-section .container { margin-bottom: 3rem !important; } /* ========================================== SECCIÓN NOSOTROS - COMPLETA Y PROFESIONAL ========================================== */ .nosotros-content { flex: 1 !important; display: flex !important; flex-direction: column !important; gap: 1.2rem !important; } #nosotros .info-card { background: #ffffff !important; border: 2px solid #e5e7eb !important; border-radius: 12px !important; padding: 1.8rem !important; } #nosotros .info-card h3 { color: #5c0000 !important; font-size: 1.15rem !important; font-weight: 700 !important; margin-bottom: 0.6rem !important; } #nosotros .info-card p { color: #4b5563 !important; font-size: 0.9rem !important; line-height: 1.65 !important; margin: 0 !important; } .nosotros-image-wrapper { flex: 0 0 380px !important; } #nosotros img { width: 100% !important; height: auto !important; border-radius: 16px !important; box-shadow: 0 20px 60px rgba(0,0,0,0.15) !important; display: block !important; } @media (max-width: 900px) { } .nosotros-image-wrapper { flex: 0 0 auto !important; max-width: 100% !important; } .producto-img { height: 150px; /* REDUCIDO */ display: flex !important; align-items: center !important; justify-content: center !important; margin-bottom: 1.2rem; width: 100%; position: relative !important; overflow: hidden !important; border-radius: 10px !important; background: rgba(255, 255, 255, 0.06) !important; } .producto-img img { max-height: 130px; max-width: 100%; object-fit: contain !important; position: relative !important; z-index: 1 !important; } /* OVERLAY - SOLO AL HOVER */ .overlay { position: absolute !important; inset: 0 !important; background: rgba(0, 0, 0, 0.7) !important; display: flex !important; align-items: center !important; justify-content: center !important; opacity: 0 !important; transition: opacity 0.3s ease !important; z-index: 2 !important; border-radius: 10px !important; } .producto-card:hover .overlay { opacity: 1 !important; } .overlay span { color: #fff !important; font-weight: 700 !important; font-size: 0.85rem !important; border: 2px solid #fff !important; padding: 0.5rem 1rem !important; border-radius: 6px !important; background: rgba(92, 0, 0, 0.9) !important; } /* TEXTO - BLANCO PURO (MANDATORIO) */ .producto-card h3 { color: #ffffff !important; /* BLANCO */ font-size: 1rem !important; font-weight: 700 !important; margin: 0 0 0.6rem 0 !important; } .producto-card p { color: rgba(255, 255, 255, 0.85) !important; /* BLANCO SEMI-TRANSPARENTE */ font-size: 0.8rem !important; line-height: 1.5 !important; margin-bottom: 0.8rem !important; } .badge { display: inline-block !important; background: rgba(254, 254, 254, 0.1) !important; color: #ffffff !important; /* BLANCO */ border: 1px solid rgba(255, 255, 255, 0.25) !important; padding: 0.35rem 0.7rem !important; border-radius: 6px !important; font-size: 0.7rem !important; font-weight: 600 !important; margin-top: auto !important; } .cta-text { color: rgba(255, 255, 255, 0.7) !important; font-size: 0.85rem !important; margin-bottom: 0.8rem !important; text-align: center !important; } .btn-linea { color: #ffffff !important; /* BLANCO */ border-bottom: 2px solid rgba(255, 255, 255, 0.4) !important; font-size: 0.9rem !important; font-weight: 600 !important; padding-bottom: 0.2rem !important; text-decoration: none !important; transition: all 0.3s ease !important; } .btn-linea:hover { color: #ffd7d7 !important; border-bottom-color: #ffd7d7 !important; transform: translateX(4px) !important; }/* ========================================== SECCIÓN NOSOTROS - MEJORAR ESPACIADO Y ALINEACIÓN ========================================== */ #nosotros.nosotros-section { background: #ffffff !important; padding: 6rem 2rem 8rem 2rem !important; /* MÁS ESPACIO ABAJO */ width: 100% !important; scroll-margin-top: 10px !important; /* Para que el header no tape */ } #nosotros h2 { color: #111827 !important; font-size: 2.2rem !important; text-align: center !important; margin-bottom: 3rem !important; /* MÁS ESPACIO DESPUÉS DEL TÍTULO */ } #nosotros h2::after { content: '' !important; display: block !important; width: 80px !important; height: 4px !important; background: #5c0000 !important; margin: 1rem auto 0 auto !important; } .nosotros-container { display: flex !important; align-items: flex-start !important; /* ALINEAR ARRIBA */ justify-content: center !important; gap: 4rem !important; /* MÁS ESPACIO ENTRE IMAGEN Y TEXTO */ max-width: 1100px !important; margin: 0 auto !important; } .nosotros-content { flex: 1 !important; display: flex !important; flex-direction: column !important; gap: 2rem !important; /* MÁS ESPACIO ENTRE TARJETAS */ } #nosotros .info-card { background: #ffffff !important; border: 2px solid #e5e7eb !important; border-radius: 12px !important; padding: 2.5rem 2rem !important; /* MÁS ESPACIO INTERNO */ } #nosotros .info-card h3 { color: #5c0000 !important; font-size: 1.3rem !important; font-weight: 700 !important; margin-bottom: 1rem !important; } #nosotros .info-card p { color: #4b5563 !important; font-size: 1rem !important; line-height: 1.8 !important; /* MEJOR LEGIBILIDAD */ margin: 0 !important; } .nosotros-image-wrapper { flex: 0 0 400px !important; /* IMAGEN MÁS ANCHA */ align-self: center !important; /* CENTRAR VERTICALMENTE */ } #nosotros img { width: 100% !important; border-radius: 16px !important; box-shadow: 0 20px 60px rgba(0,0,0,0.15) !important; } /* ========================================== SECCIÓN PRODUCTOS - CORRECCIONES COMPLETAS ========================================== */ #productos { /* HERO ROJO MÁS CLARO (como el principal) */ background: linear-gradient(135deg, #1a0a0a 0%, #3a0a0a 50%, #8b0000 100%) !important; padding: 5rem 0 7rem 0 !important; /* MÁS ESPACIO ABAJO */ width: 100% !important; max-width: 100% !important; margin: 0 !important; position: relative !important; } #productos::before { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-image: repeating-linear-gradient(45deg, rgba(255,255,255,0.03) 0px, rgba(255,255,255,0.03) 1px, transparent 1px, transparent 20px); pointer-events: none; } #productos h2 { color: #ffffff !important; font-size: 2rem !important; font-weight: 800 !important; text-align: center !important; margin-bottom: 3rem !important; position: relative !important; z-index: 2 !important; } .productos-flex { display: flex !important; align-items: stretch !important; /* ESTIRAR ELEMENTOS */ justify-content: space-around !important; /* MÁS ESPACIADO */ gap: 3rem !important; /* AUMENTAR ESPACIO ENTRE ELEMENTOS */ max-width: 1100px !important; margin: 0 auto !important; padding: 0 2rem !important; position: relative !important; z-index: 2 !important; } .productos-grid { display: flex !important; gap: 2.5rem !important; /* MÁS ESPACIO ENTRE PRODUCTOS */ flex: 0 0 auto !important; /* NO OCUPAR TODO EL ESPACIO */ } .producto-card { background: rgba(255, 255, 255, 0.08) !important; backdrop-filter: blur(8px) !important; border: 2px solid rgba(255, 255, 255, 0.15) !important; border-radius: 16px !important; padding: 2.5rem 2rem !important; max-width: 300px !important; min-height: 450px !important; /* MÁS ALTO */ text-align: center !important; cursor: pointer !important; transition: all 0.3s ease !important; display: flex !important; flex-direction: column !important; align-items: center !important; } .producto-card:hover { border-color: rgba(255, 255, 255, 0.5) !important; background: rgba(255, 255, 255, 0.12) !important; transform: translateY(-5px) !important; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important; } .producto-img { height: 180px; display: flex !important; align-items: center !important; justify-content: center !important; margin-bottom: 1.5rem; width: 100%; position: relative !important; overflow: hidden !important; border-radius: 12px; background: rgba(255, 255, 255, 0.06); } .producto-img img { max-height: 160px; max-width: 100%; object-fit: contain !important; } /* OVERLAY - TEXTO BLANCO */ .overlay { position: absolute !important; inset: 0 !important; background: rgba(0, 0, 0, 0.75) !important; /* MÁS OSCURO */ display: flex !important; align-items: center !important; justify-content: center !important; opacity: 0 !important; transition: opacity 0.3s ease !important; z-index: 2 !important; border-radius: 12px; } .producto-card:hover .overlay { opacity: 1 !important; } .overlay span { color: #ffffff !important; /* BLANCO PURO */ font-weight: 700 !important; font-size: 1rem !important; border: 2px solid #ffffff !important; padding: 0.7rem 1.5rem !important; border-radius: 8px !important; background: rgba(139, 0, 0, 0.9) !important; /* ROJO MÁS CLARO */ text-shadow: 0 2px 4px rgba(0,0,0,0.5) !important; } /* TODO EL TEXTO DEBE SER BLANCO */ .producto-card h3 { color: #ffffff !important; /* BLANCO */ font-size: 1.2rem !important; font-weight: 700 !important; margin: 0 0 1rem 0 !important; } .producto-card p { color: rgba(255, 255, 255, 0.9) !important; /* BLANCO MÁS VISIBLE */ font-size: 0.9rem !important; line-height: 1.7 !important; margin-bottom: 1.2rem !important; } .badge { display: inline-block !important; background: rgba(255, 255, 255, 0.15) !important; color: #ffffff !important; /* BLANCO */ border: 1px solid rgba(255, 255, 255, 0.3) !important; padding: 0.5rem 1rem !important; border-radius: 6px !important; font-size: 0.8rem !important; font-weight: 600 !important; margin-top: auto !important; } /* CATÁLOGO - TEXTO BLANCO */ .cta-lateral { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; padding: 2rem !important; min-width: 220px !important; border-left: 1px solid rgba(255, 255, 255, 0.15) !important; align-self: center !important; } .cta-text { color: rgba(255, 255, 255, 0.8) !important; /* BLANCO */ font-size: 1rem !important; margin-bottom: 1.2rem !important; text-align: center !important; } .btn-linea { color: #ffffff !important; /* BLANCO PURO - MANDATORIO */ border-bottom: 2px solid rgba(255, 255, 255, 0.6) !important; font-size: 1.05rem !important; font-weight: 600 !important; padding-bottom: 0.4rem !important; transition: all 0.3s ease !important; text-decoration: none !important; } .btn-linea:hover { color: #ffd7d7 !important; border-bottom-color: #ffd7d7 !important; transform: translateX(5px) !important; } /* RESPONSIVE */ @media (max-width: 768px) { #nosotros.nosotros-section { padding: 4rem 1.5rem 6rem 1.5rem !important; } .nosotros-container { flex-direction: column-reverse !important; gap: 2.5rem !important; } .nosotros-image-wrapper { flex: 0 0 auto !important; max-width: 100% !important; } #productos { padding: 4rem 0 6rem 0 !important; } .productos-flex { flex-direction: column !important; gap: 2rem !important; padding: 0 1.5rem !important; } .productos-grid { flex-direction: column !important; gap: 2rem !important; width: 100% !important; } .producto-card { max-width: 100% !important; min-height: auto !important; } .cta-lateral { border-left: none !important; border-top: 1px solid rgba(255, 255, 255, 0.15) !important; padding-top: 2rem !important; width: 100% !important; } } /* ========================================== SECCIÓN NOSOTROS - TEXTO COMPACTO PARA VER TODO ========================================== */ #nosotros { scroll-margin-top: 1px !important; background: #ffffff !important; padding: 3rem 2rem 4rem 2rem !important; /* REDUCIDO */ } #nosotros h2 { color: #111827 !important; font-size: 1.8rem !important; /* REDUCIDO */ text-align: center !important; margin-bottom: 2rem !important; /* REDUCIDO */ } #nosotros h2::after { content: '' !important; display: block !important; width: 60px !important; height: 3px !important; background: #5c0000 !important; margin: 0.8rem auto 0 auto !important; } .nosotros-container { display: flex !important; align-items: center !important; /* CENTRADO VERTICAL */ justify-content: center !important; gap: 2.5rem !important; max-width: 1000px !important; margin: 0 auto !important; } .nosotros-content { flex: 1 !important; display: flex !important; flex-direction: column !important; gap: 1rem !important; /* REDUCIDO */ } #nosotros .info-card { background: #ffffff !important; border: 1.5px solid #e5e7eb !important; border-radius: 10px !important; padding: 1.5rem !important; /* REDUCIDO */ } #nosotros .info-card h3 { color: #5c0000 !important; font-size: 1.05rem !important; /* REDUCIDO */ font-weight: 700 !important; margin-bottom: 0.5rem !important; } #nosotros .info-card p { color: #4b5563 !important; font-size: 0.85rem !important; /* REDUCIDO */ line-height: 1.6 !important; margin: 0 !important; } .nosotros-image-wrapper { flex: 0 0 350px !important; align-self: center !important; /* CENTRADO VERTICAL */ } #nosotros img { width: 100% !important; border-radius: 14px !important; box-shadow: 0 15px 40px rgba(0,0,0,0.12) !important; } @media (max-width: 768px) { .nosotros-container { flex-direction: column-reverse !important; gap: 1.5rem !important; } .nosotros-image-wrapper { flex: 0 0 auto !important; max-width: 100% !important; } #nosotros { padding: 2.5rem 1.5rem 3rem 1.5rem !important; } } /* ========================================== SECCIÓN NOSOTROS - COMPACTA (TODO VISIBLE) ========================================== */ #nosotros { scroll-margin-top: 90px !important; background: #ffffff !important; padding: 2rem !important; /* Menos padding en la sección general */ min-height: 80vh !important; display: flex !important; align-items: center !important; justify-content: center !important; } #nosotros h2 { color: #111827 !important; font-size: 1.8rem !important; /* Título principal más pequeño */ text-align: center !important; margin-bottom: 1.5rem !important; } #nosotros h2::after { content: '' !important; display: block !important; width: 50px !important; height: 3px !important; background: #5c0000 !important; margin: 0.5rem auto 0 auto !important; } .nosotros-container { display: flex !important; align-items: center !important; justify-content: center !important; gap: 2.5rem !important; max-width: 1050px !important; margin: 0 auto !important; } .nosotros-content { flex: 1 !important; display: flex !important; flex-direction: column !important; gap: 0.8rem !important; /* Menos espacio entre tarjetas */ } #nosotros .info-card { background: #ffffff !important; border: 1.5px solid #e5e7eb !important; border-radius: 10px !important; padding: 1rem !important; /* Padding interno reducido */ box-shadow: none !important; /* Sin sombra para más limpieza */ } #nosotros .info-card h3 { color: #5c0000 !important; font-size: 0.95rem !important; /* Título tarjeta más pequeño */ font-weight: 700 !important; margin-bottom: 0.3rem !important; } #nosotros .info-card p { color: #4b5563 !important; font-size: 0.80rem !important; /* Texto contenido más pequeño */ line-height: 1.5 !important; margin: 0 !important; } .nosotros-image-wrapper { flex: 0 0 350px !important; display: flex !important; align-items: center !important; justify-content: center !important; } #nosotros img { width: 100% !important; max-height: 400px !important; object-fit: cover !important; border-radius: 14px !important; box-shadow: 0 10px 30px rgba(0,0,0,0.1) !important; } @media (max-width: 768px) { .nosotros-container { flex-direction: column-reverse !important; gap: 1.5rem !important; } .nosotros-image-wrapper { flex: 0 0 auto !important; width: 100% !important; } } /* ========================================== SOLO TEXTO BLANCO - HOVER Y CATÁLOGO ========================================== */ /* Botón "Ver Detalles" al hacer hover */ .overlay span { color: #ffffff !important; border: 2px solid #ffffff !important; background: rgba(139, 0, 0, 0.9) !important; /* Fondo rojo vino */ } /* Texto "¿Buscas más opciones?" */ .cta-text { color: #ffffff !important; } /* Enlace "Ver Catálogo Completo" */ .btn-linea { color: #ffffff !important; border-bottom: 2px solid rgba(255, 255, 255, 0.5) !important; } .btn-linea:hover { color: #ffd7d7 !important; /* Color claro al pasar mouse */ border-bottom-color: #ffd7d7 !important; } /* ========================================== CORRECCIÓN FINAL: TEXTO BLANCO EN PRODUCTOS ========================================== */ /* Forzar texto BLANCO en el hover de productos */ #productos .overlay span { color: #ffffff !important; border: 2px solid #ffffff !important; background: rgba(92, 0, 0, 0.9) !important; } /* Forzar texto BLANCO en "¿Buscas más opciones?" */ #productos .cta-text { color: #ffffff !important; } /* Forzar texto BLANCO en el enlace del catálogo */ #productos .btn-linea { color: #ffffff !important; border-bottom-color: rgba(255, 255, 255, 0.6) !important; } #productos .btn-linea:hover { color: #ffd7d7 !important; border-bottom-color: #ffd7d7 !important; } /* GRID DE NOTICIAS - CENTRADO CORREGIDO */ .noticias-grid{ display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 3rem; max-width: 1200px; margin: 0 auto; /* ← Centra el grid */ padding: 0 2rem; /* ← Padding lateral */ justify-content: center; /* ← Centra columnas */ align-items: start; /* ← Alinea arriba */ } /* TARJETA INDIVIDUAL */ .noticia-card{ background: transparent; border: none; box-shadow: none; display: flex; flex-direction: column; text-align: center; padding: 0; margin: 0 auto; /* ← Centra la tarjeta */ width: 100%; max-width: 400px; /* ← Ancho máximo */ } /* Contenedor principal */ .container{ max-width: 1200px; margin: 0 auto; padding: 0 1.25rem; } /* RESPONSIVE */ @media (max-width: 768px) { .noticias-grid { grid-template-columns: 1fr; gap: 2.5rem; padding: 0 1rem; } .noticia-card { max-width: 100%; } }/* ========================================== PRODUCTOS DESTACADOS ========================================== */ #productos { padding: 4rem 1.5rem; background: #fff; text-align: center; } .productos-title { font-size: 2rem; color: #111827; margin-bottom: 3rem; font-weight: 800; } .productos-flex { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: 2.5rem; max-width: 1100px; margin: 0 auto; } .productos-grid { display: flex; gap: 2rem; flex-wrap: wrap; justify-content: center; } .producto-card { background: #fff; border: 2px solid #e5e7eb; border-radius: 16px; padding: 1.5rem; max-width: 300px; text-align: center; transition: transform 0.3s ease, border-color 0.3s ease; } .producto-card:hover { transform: translateY(-5px); border-color: #5c0000; } .producto-img { height: 200px; display: flex; align-items: center; justify-content: center; margin-bottom: 1rem; position: relative; overflow: hidden !important; border-radius: 12px; background: #f8fafc; } .producto-img img { max-height: 120%; max-width: 100%; object-fit: contain; } .overlay { position: absolute; inset: 0; background: rgba(92, 0, 0, 0.9); display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.3s ease; border-radius: 12px; } .producto-card:hover .overlay { opacity: 1; } .overlay span { color: #fff; font-weight: 600; border: 2px solid #fff; padding: 0.5rem 1rem; border-radius: 6px; } .producto-card h3 { color: #5c0000; font-size: 1.2rem; font-weight: 700; margin: 0.5rem 0; } .producto-card p { color: #6b7280; font-size: 0.9rem; line-height: 1.5; margin-bottom: 1rem; } .badge { display: inline-block; background: #fef2f2; color: #5c0000; padding: 0.4rem 1rem; border-radius: 6px; font-size: 0.8rem; font-weight: 600; border: 1px solid #fecaca; } .cta-lateral { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 1rem; min-width: 200px; } .cta-text { color: #6b7280; font-size: 0.95rem; margin-bottom: 0.8rem; } .btn-linea { color: #5c0000; font-weight: 600; font-size: 1rem; text-decoration: none; border-bottom: 2px solid #5c0000; padding-bottom: 2px; transition: all 0.2s ease; } .btn-linea:hover { color: #8b0000; border-bottom-color: #8b0000; }/* ═══════════ INSTALACIONES - CORREGIDO ═══════════ */ .instalaciones-grid { display: grid !important; grid-template-columns: repeat(2, 1fr) !important; gap: 0.8rem !important; max-width: 900px !important; margin: 0 auto !important; } /* Tarjeta: Más pequeña */ .instalacion-card { position: relative !important; border-radius: 10px !important; overflow: hidden !important; box-shadow: 0 2px 8px rgba(92, 0, 0, 0.1) !important; aspect-ratio: 16/8.3 !important; /* Más ancha que alta (cabe mejor) */ border: 1px solid #e5e7eb !important; transition: all 0.3s ease !important; } .instalacion-card img { width: 100% !important; height: 110% !important; object-fit: cover !important; position: absolute !important; top: 0 !important; left: 0 !important; } .card-title { position: absolute !important; bottom: 0 !important; left: 0 !important; width: 100% !important; padding: 0.5rem !important; background: linear-gradient(to top, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0.8) 100%) !important; color: #5c0000 !important; font-weight: 800 !important; font-size: 1rem !important; text-align: center !important; z-index: 20 !important; } /* ═══════════ CICLOTRÓN INTERACTIVO - DEFINITIVO ═══════════ */ /* 1. La tarjeta interactiva */ .instalacion-card.interactive { cursor: pointer !important; } /* 2. EL BADGE - Selector específico (LA CLAVE DEL ÉXITO) + Tamaño compacto */ .instalacion-card.interactive .click-badge, div.instalacion-card.interactive div.click-badge { /* Color Blanco Forzado */ color: #ffffff !important; /* Posición */ position: absolute !important; top: 0.5rem !important; /* TAMAÑO COMPACTO ORIGINAL */ right: 0.5rem !important; /* TAMAÑO COMPACTO ORIGINAL */ z-index: 9999 !important; /* Siempre arriba */ /* Fondo Rojo Vino Sólido */ background: #5c0000 !important; /* Padding y Bordes Compactos */ padding: 0.3rem 0.6rem !important; /* TAMAÑO COMPACTO ORIGINAL */ border-radius: 4px !important; /* Texto Pequeño y Legible */ font-size: 0.7rem !important; /* TAMAÑO COMPACTO ORIGINAL */ font-weight: 700 !important; /* Opacidad Total (Para que no se vea gris) */ opacity: 1 !important; /* Sutil sombra para que resalte */ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5) !important; pointer-events: none !important; } /* Asegurar que el TEXTO dentro del badge sea BLANCO siempre */ .instalacion-card.interactive .click-badge span { color: #ffffff !important; display: block !important; } /* Imágenes del Ciclotrón */ .instalacion-card.interactive .img-default { opacity: 1 !important; z-index: 2 !important; transition: opacity 0.4s ease !important; } .instalacion-card.interactive .img-alternate { opacity: 0 !important; z-index: 1 !important; transition: opacity 0.4s ease !important; } /* AL HACER CLICK: Intercambiar */ .instalacion-card.interactive.active .img-default { opacity: 0 !important; } .instalacion-card.interactive.active .img-alternate { opacity: 1 !important; z-index: 3 !important; } /* Overlay central */ .instalacion-card.interactive .interactive-overlay { position: absolute !important; inset: 0 !important; background: rgba(92, 0, 0, 0.85) !important; display: flex !important; align-items: center !important; justify-content: center !important; opacity: 0 !important; transition: opacity 0.3s ease !important; z-index: 10 !important; pointer-events: none !important; } .instalacion-card.interactive:hover .interactive-overlay { opacity: 1 !important; } .instalacion-card.interactive.active .interactive-overlay { opacity: 0 !important; } /* Pill central (Blanco con texto Rojo) */ .interactive-pill { background: #ffffff !important; color: #5c0000 !important; padding: 0.5rem 1rem !important; border-radius: 6px !important; font-weight: 800 !important; font-size: 0.85rem !important; box-shadow: 0 4px 12px rgba(0,0,0,0.3) !important; } @media (max-width: 768px) { .instalaciones-grid { grid-template-columns: 1fr !important; gap: 1rem !important; } } /* ═══════════ CORRECCIONES MÓVIL - NOTICIAS.HTML ═══════════ */ /* 1. HERO - Texto bien distribuido en móvil */ @media (max-width: 768px) { .page-hero__title { font-size: 1.8rem !important; line-height: 1.2 !important; word-break: normal !important; overflow-wrap: break-word !important; hyphens: none !important; text-wrap: balance !important; /* Distribuye líneas naturalmente */ } .page-hero__lead { font-size: 1rem !important; line-height: 1.6 !important; } .page-hero { padding-block: 3rem 2.5rem !important; /* Menos padding en móvil */ padding-inline: 1rem !important; } } /* Ocultar el badge en pantallas de celular */ @media (max-width: 768px) { .click-badge { display: none !important; } }