/* ============================================================ STYLE LANDING — woowlow ------------------------------------------------------------ Hoja unificada para las landings de Woowlow. ARQUITECTURA DE SELECTORES: - Estilos compartidos: body#led .xxx, body#wedding-planners .xxx - Específicos LED: body#led .xxx - Específicos Weddings: body#wedding-planners .xxx Cada landing solo necesita su ID en el body: (página LED) (página Wedding Planners) POR QUÉ ESTE PATRÓN: El style.php global del e-commerce tiene reglas con bastante especificidad (ej: #leadOk, #div_content h2, etc). Para que esta hoja gane la cascada, todas las reglas se prefijan con body#led / body#wedding-planners — eso da especificidad 1 ID + componentes, suficiente para vencer al global. El bloque de propiedades se escribe UNA sola vez; solo el selector se duplica con coma para cubrir las dos landings. ============================================================ */ /* ============================================================ 1. TOKENS / VARIABLES ============================================================ */ body#led, body#wedding-planners { --accent: #66d39c; --accent-dark: #59b586; --accent-soft: rgba(102, 211, 156, 0.15); --ink: #2a2a2a; --text: #4a4a4a; --text-soft: #5a5a5a; --muted: #6b6b6a; --soft: #939392; --line: #ececec; --line-soft: #e6e3dc; --cream: #fbf9f6; --cream-deep: #f4f0e8; --danger: #ff4655; } /* ============================================================ 2. LAYOUT BASE ============================================================ */ body#led .landingLED, body#wedding-planners .landingLED { min-height: auto !important; } /* ============================================================ 3. COMPONENTES COMPARTIDOS ============================================================ */ /* ---------- HERO ---------- */ body#led .hero, body#wedding-planners .hero { position: relative; overflow: hidden; background: #0e0e10; color: #fff; border-radius: 2px; margin-bottom: 70px; } body#led .hero-media, body#wedding-planners .hero-media { position: absolute; inset: 0; background-size: cover; background-position: center; filter: brightness(.55) saturate(.9); } /* Imagen por defecto del hero — se puede sobreescribir inline en cada landing */ body#led .hero-media { background-image: url('https://images.unsplash.com/photo-1519741497674-611481863552?auto=format&fit=crop&w=2000&q=80'); } body#led .hero-grad, body#wedding-planners .hero-grad { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.25) 60%, rgba(0,0,0,.5) 100%); } body#led .hero-inner, body#wedding-planners .hero-inner { position: relative; padding: 110px 60px 120px; max-width: 720px; } body#led .hero .eyebrow, body#wedding-planners .hero .eyebrow { font-size: 12px; letter-spacing: 0.45em; text-transform: uppercase; margin: 0 0 24px; color: #d4d4d4; font-weight: 400; } body#led .hero h1, body#wedding-planners .hero h1 { font-family: 'Prata', serif; font-weight: 400; font-size: 62px; line-height: 1.05; margin: 0 0 22px; letter-spacing: -0.5px; color: #fff; } body#led .hero h1 em, body#wedding-planners .hero h1 em { font-style: italic; color: var(--accent); } body#led .hero p.lede, body#wedding-planners .hero p.lede { font-size: 17px; line-height: 1.7; color: #ececec; margin: 0 0 36px; max-width: 540px; font-weight: 400; } body#led .hero .cta-row, body#wedding-planners .hero .cta-row { display: flex; gap: 14px; flex-wrap: wrap; } body#led .hero-meta, body#wedding-planners .hero-meta { position: absolute; bottom: 30px; right: 40px; text-align: right; font-size: 11px; color: rgba(255,255,255,.7); letter-spacing: 0.15em; text-transform: uppercase; } /* ---------- BUTTONS ---------- */ body#led .btn, body#wedding-planners .btn { display: inline-flex; align-items: center; gap: 10px; background: var(--accent); color: #fff; border: 0; padding: 14px 28px; font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 600; border-radius: 2px; text-decoration: none; transition: background .15s; cursor: pointer; } body#led .btn:hover, body#wedding-planners .btn:hover { background: var(--accent-dark); } body#led .btn.outline, body#wedding-planners .btn.outline { background: transparent; border: 1px solid rgba(255,255,255,.7); color: #fff; } body#led .btn.outline:hover, body#wedding-planners .btn.outline:hover { background: rgba(255,255,255,.1); } body#led .btn.dark, body#wedding-planners .btn.dark { background: #313131; color: #fff; } body#led .btn.dark:hover, body#wedding-planners .btn.dark:hover { background: #000; } /* ---------- SECTION TITLES ---------- */ body#led .section-title, body#wedding-planners .section-title { text-align: center; margin: 0 0 18px; position: relative; display: flex; align-items: center; justify-content: center; gap: 28px; } body#led .section-title::before, body#wedding-planners .section-title::before, body#led .section-title::after, body#wedding-planners .section-title::after { content: ""; flex: 1; height: 1px; background: #d8d8d8; max-width: 50px; } body#led .section-title h2, body#wedding-planners .section-title h2 { font-family: 'Prata', serif; font-size: 30px; letter-spacing: 0; text-transform: none; color: var(--ink); margin: 0; font-weight: 400; line-height: 1.25; max-width: 760px; } /* Blindaje contra el style.php global: el h2 del lead-band lleva id="leadOk" (lo usa el JS del formulario para mostrar mensajes tras el envío). Si el global tiene reglas sobre #leadOk con alta especificidad, esta regla las pisa con 2 IDs. */ body#led .section-title h2#leadOk, body#wedding-planners .section-title h2#leadOk { font-family: 'Prata', serif; font-size: 30px; letter-spacing: 0; text-transform: none; color: var(--ink); margin: 0; font-weight: 400; line-height: 1.25; max-width: 760px; } /* Mismo blindaje para el párrafo de la intro (id="leadOk2") */ body#led .section-intro#leadOk2, body#wedding-planners .section-intro#leadOk2 { text-align: center; color: var(--muted); max-width: 720px; margin: 14px auto 0; font-size: 15.5px; line-height: 1.75; font-weight: 400; } body#led .section-intro, body#wedding-planners .section-intro { text-align: center; color: var(--muted); max-width: 720px; margin: 14px auto 0; font-size: 15.5px; line-height: 1.75; font-weight: 400; } body#led .section, body#wedding-planners .section { padding: 0 0 80px; } /* ---------- INTRO COPY ---------- */ body#led .intro-copy, body#wedding-planners .intro-copy { text-align: center; padding: 0 0 70px; } body#led .intro-copy h2, body#wedding-planners .intro-copy h2 { font-family: 'Prata', serif; font-weight: 400; font-size: 32px; line-height: 1.3; max-width: 880px; margin: 0 auto 18px; color: var(--ink); } body#led .intro-copy p, body#wedding-planners .intro-copy p { color: var(--text-soft); max-width: 740px; margin: 0 auto; font-size: 15.5px; line-height: 1.85; font-weight: 400; } /* ---------- PROCESS BAND ---------- */ body#led .process-band, body#wedding-planners .process-band { background: #fafafa; padding: 80px 0; } body#led .process-grid, body#wedding-planners .process-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; margin-top: 50px; counter-reset: step; } body#led .step, body#wedding-planners .step { position: relative; padding-top: 48px; } body#led .step::before, body#wedding-planners .step::before { counter-increment: step; content: counter(step, decimal-leading-zero); font-family: 'Prata', serif; font-size: 28px; color: var(--accent); position: absolute; top: 0; left: 0; } body#led .step::after, body#wedding-planners .step::after { content: ""; position: absolute; top: 14px; left: 36px; right: -8px; height: 1px; background: repeating-linear-gradient(to right, #cfcfcf 0 4px, transparent 4px 8px); } body#led .step:last-child::after, body#wedding-planners .step:last-child::after { display: none; } body#led .step h4, body#wedding-planners .step h4 { font-family: 'Prata', serif; font-weight: 400; font-size: 17px; margin: 0 0 8px; color: var(--ink); } body#led .step p, body#wedding-planners .step p { margin: 0; color: var(--text-soft); font-size: 13.5px; line-height: 1.65; font-weight: 400; } /* ---------- LEAD FORM ---------- */ body#led .lead-band, body#wedding-planners .lead-band { padding: 40px 0 90px; background: linear-gradient(180deg, var(--cream) 0%, #fff 70%); } body#led .lead-band .section-title, body#wedding-planners .lead-band .section-title { margin-top: 0; } body#led .lead-card, body#wedding-planners .lead-card { max-width: 760px; margin: 18px auto 0; background: #fff; padding: 56px 60px 44px; border: 1px solid var(--line); position: relative; } body#led .lead-card::before, body#wedding-planners .lead-card::before { content: ""; position: absolute; top: -1px; left: 50%; transform: translateX(-50%); width: 60px; height: 2px; background: var(--accent); } body#led .lead-card .ornament, body#wedding-planners .lead-card .ornament { text-align: center; font-size: 11px; letter-spacing: 0.45em; text-transform: uppercase; color: var(--accent); margin: 0 0 12px; font-weight: 600; } body#led .lead-card .lead-head, body#wedding-planners .lead-card .lead-head { text-align: center; margin-bottom: 44px; } body#led .lead-card .lead-head h3, body#wedding-planners .lead-card .lead-head h3 { font-family: 'Prata', serif; font-weight: 400; font-size: 32px; line-height: 1.25; color: var(--ink); margin: 0 0 14px; } body#led .lead-card .lead-head p, body#wedding-planners .lead-card .lead-head p { color: var(--text-soft); font-size: 14.5px; line-height: 1.7; max-width: 460px; margin: 0 auto; font-weight: 400; } body#led .lead-form-grid, body#wedding-planners .lead-form-grid { display: grid; grid-template-columns: 1fr 1fr; column-gap: 36px; row-gap: 6px; } body#led .field, body#wedding-planners .field { position: relative; padding: 12px 0 6px; } body#led .field.full, body#wedding-planners .field.full { grid-column: 1 / -1; } body#led .field label, body#wedding-planners .field label { display: block; font-size: 12px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--muted); font-weight: 700; margin-bottom: 8px; } body#led .field label .req, body#wedding-planners .field label .req { color: var(--danger); margin-left: 3px; font-weight: 400; } body#led .field input, body#wedding-planners .field input, body#led .field textarea, body#wedding-planners .field textarea { width: 100%; box-sizing: border-box; border: 0; border-bottom: 1px solid #d8d8d8; padding: 12px 14px 14px; font-family: inherit; font-size: 16px; color: var(--ink); background: transparent; outline: none; transition: border-color .2s, background-color .2s; font-weight: 400; } body#led .field input::placeholder, body#wedding-planners .field input::placeholder, body#led .field textarea::placeholder, body#wedding-planners .field textarea::placeholder { color: #a8a8a8; font-size: 14px; font-style: italic; } body#led .field textarea, body#wedding-planners .field textarea { resize: vertical; min-height: 100px; padding: 14px 14px 14px; line-height: 1.6; } body#led .field input:focus, body#wedding-planners .field input:focus, body#led .field textarea:focus, body#wedding-planners .field textarea:focus { border-bottom-color: var(--accent); } /* Select del formulario (lo usa Weddings; LED no lo tiene pero el CSS es seguro) */ body#led .lead-form-grid select, body#wedding-planners .lead-form-grid select { width: 100%; box-sizing: border-box; border: 0; border-bottom: 1px solid #d8d8d8; padding: 12px 36px 14px 14px; font-family: inherit; font-size: 16px; color: var(--ink); background-color: transparent; background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: right 8px center; background-size: 12px 8px; outline: none; appearance: none; -webkit-appearance: none; -moz-appearance: none; transition: border-color .2s; font-weight: 400; cursor: pointer; line-height: 1.4; } body#led .lead-form-grid select:focus, body#wedding-planners .lead-form-grid select:focus { border-bottom-color: var(--accent); } body#led .lead-form-grid select:focus-visible, body#wedding-planners .lead-form-grid select:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } body#led .lead-form-grid select::-ms-expand, body#wedding-planners .lead-form-grid select::-ms-expand { display: none; } body#led .lead-form-grid option, body#wedding-planners .lead-form-grid option { color: var(--ink); background: #fff; } body#led .lead-card .acepto, body#wedding-planners .lead-card .acepto { display: flex; gap: 12px; align-items: flex-start; margin: 30px 0 26px; font-size: 13px; color: var(--text-soft); line-height: 1.65; font-weight: 400; } body#led .lead-card .acepto input[type=checkbox], body#wedding-planners .lead-card .acepto input[type=checkbox] { margin-top: 3px; accent-color: var(--accent); flex-shrink: 0; } body#led .lead-card .acepto a, body#wedding-planners .lead-card .acepto a { color: var(--ink); text-decoration: underline; } body#led .lead-actions, body#wedding-planners .lead-actions { text-align: center; } body#led .lead-card button[type=submit], body#wedding-planners .lead-card button[type=submit] { background: var(--accent); color: #fff; border: 0; padding: 16px 56px; font-size: 11px; letter-spacing: 0.3em; text-transform: uppercase; font-weight: 700; border-radius: 2px; cursor: pointer; transition: background .15s; font-family: inherit; } body#led .lead-card button[type=submit]:hover, body#wedding-planners .lead-card button[type=submit]:hover { background: var(--accent-dark); } body#led .lead-card .lead-foot, body#wedding-planners .lead-card .lead-foot { text-align: center; margin-top: 22px; font-size: 11px; color: #8a8a8a; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 400; } body#led .lead-card .lead-foot strong, body#wedding-planners .lead-card .lead-foot strong { color: var(--accent); font-weight: 700; letter-spacing: 0.16em; } body#led .lead-success, body#wedding-planners .lead-success { display: none; text-align: center; border-top: 1px solid var(--accent); border-bottom: 1px solid var(--accent); padding: 22px 18px; color: #2e7d57; font-size: 14px; line-height: 1.6; margin: 0 0 30px; font-family: 'Prata', serif; font-weight: 400; } body#led .lead-success.visible, body#wedding-planners .lead-success.visible { display: block; } body#led .lead-success strong, body#wedding-planners .lead-success strong { display: block; font-size: 18px; margin-bottom: 6px; color: var(--ink); } /* ---------- FAQ ---------- */ body#led .faq-band, body#wedding-planners .faq-band { padding: 30px 0 80px; background: var(--cream); } body#led .faq-list, body#wedding-planners .faq-list { max-width: 860px; margin: 44px auto 0; border-top: 1px solid var(--line-soft); counter-reset: faq; } body#led .faq-item, body#wedding-planners .faq-item { border-bottom: 1px solid var(--line-soft); background: transparent; } body#led .faq-item summary, body#wedding-planners .faq-item summary { list-style: none; cursor: pointer; padding: 22px 56px 22px 56px; position: relative; display: block; font-family: 'Prata', serif; font-size: 18px; color: #313131; line-height: 1.4; transition: color .15s; font-weight: 400; } body#led .faq-item summary::-webkit-details-marker, body#wedding-planners .faq-item summary::-webkit-details-marker { display: none; } body#led .faq-item summary::before, body#wedding-planners .faq-item summary::before { content: counter(faq, decimal-leading-zero); counter-increment: faq; position: absolute; left: 0; top: 24px; font-family: 'Prata', serif; font-size: 14px; color: var(--accent); letter-spacing: 0.1em; font-weight: 400; } body#led .faq-item summary::after, body#wedding-planners .faq-item summary::after { content: "+"; position: absolute; right: 8px; top: 18px; font-size: 26px; font-weight: 300; color: var(--soft); transition: transform .25s, color .15s; line-height: 1; } body#led .faq-item[open] summary::after, body#wedding-planners .faq-item[open] summary::after { content: "–"; color: var(--accent); } body#led .faq-item[open] summary, body#wedding-planners .faq-item[open] summary { color: var(--accent); } body#led .faq-item summary:hover, body#wedding-planners .faq-item summary:hover { color: var(--accent); } body#led .faq-item .faq-body, body#wedding-planners .faq-item .faq-body { padding: 0 56px 26px 56px; color: #525252; font-size: 14px; line-height: 1.75; font-weight: 400; } body#led .faq-foot, body#wedding-planners .faq-foot { text-align: center; margin-top: 36px; color: var(--soft); font-size: 13px; font-weight: 400; } body#led .faq-foot a, body#wedding-planners .faq-foot a { color: var(--accent); font-weight: 600; text-decoration: underline; } /* ---------- CTA FINAL ---------- */ body#led .cta-final, body#wedding-planners .cta-final { text-align: center; padding: 80px 0; background: var(--cream); } body#led .cta-final h2, body#wedding-planners .cta-final h2 { font-family: 'Prata', serif; font-weight: 400; font-size: 40px; margin: 0 0 12px; color: var(--ink); } body#led .cta-final p, body#wedding-planners .cta-final p { color: var(--text-soft); margin: 0 0 30px; font-size: 16px; font-weight: 400; } body#led .cta-final .ctas, body#wedding-planners .cta-final .ctas { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; } body#led .cta-final .contact-info, body#wedding-planners .cta-final .contact-info { margin-top: 36px; display: flex; justify-content: center; gap: 60px; color: var(--text); font-size: 14px; flex-wrap: wrap; font-weight: 400; } body#led .cta-final .contact-info strong, body#wedding-planners .cta-final .contact-info strong { display: block; font-family: 'Prata', serif; font-size: 18px; color: var(--ink); font-weight: 400; margin-bottom: 4px; } /* ---------- RESET de botones Bootstrap dentro de modales ---------- La regla .btn de arriba pisa los botones btn-default/success/danger de los modales globales del e-commerce. Aquí restauramos su look original solo dentro de .modal-footer / .modal-header. */ body#led .modal-footer .btn, body#wedding-planners .modal-footer .btn, body#led .modal-header .btn, body#wedding-planners .modal-header .btn { display: inline-block; align-items: initial; gap: 0; background: transparent; background-image: none; color: #333; border: 1px solid transparent; padding: 6px 12px; font-size: 14px; line-height: 1.42857143; letter-spacing: normal; text-transform: none; font-weight: 400; border-radius: 4px; text-align: center; vertical-align: middle; white-space: nowrap; cursor: pointer; } body#led .modal-footer .btn-default, body#wedding-planners .modal-footer .btn-default { background-color: #fff; color: #333; border-color: #ccc; } body#led .modal-footer .btn-default:hover, body#wedding-planners .modal-footer .btn-default:hover, body#led .modal-footer .btn-default:focus, body#wedding-planners .modal-footer .btn-default:focus { background-color: #e6e6e6; border-color: #adadad; color: #333; } body#led .modal-footer .btn-success, body#wedding-planners .modal-footer .btn-success { background-color: #5cb85c; color: #fff; border-color: #4cae4c; } body#led .modal-footer .btn-success:hover, body#wedding-planners .modal-footer .btn-success:hover, body#led .modal-footer .btn-success:focus, body#wedding-planners .modal-footer .btn-success:focus { background-color: #449d44; border-color: #398439; color: #fff; } body#led .modal-footer .btn-danger, body#wedding-planners .modal-footer .btn-danger { background-color: #d9534f; color: #fff; border-color: #d43f3a; } body#led .modal-footer .btn-danger:hover, body#wedding-planners .modal-footer .btn-danger:hover, body#led .modal-footer .btn-danger:focus, body#wedding-planners .modal-footer .btn-danger:focus { background-color: #c9302c; border-color: #ac2925; color: #fff; } /* ============================================================ 4. ESPECÍFICOS LANDING LED — body#led ============================================================ */ /* ---------- VARIANTS (1 y 2 pantallas) ---------- */ body#led .variants-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; margin-top: 36px; } body#led .variant-card { background: #fff; border: 1px solid var(--line); overflow: hidden; display: flex; flex-direction: column; transition: box-shadow .2s, transform .2s; } body#led .variant-card:hover { box-shadow: 0 18px 40px rgba(0,0,0,0.08); transform: translateY(-2px); } body#led .variant-photo { aspect-ratio: 16/10; background-size: cover; background-position: center; background-color: #f5f3ee; position: relative; } body#led .variant-photo .badge { position: absolute; top: 14px; left: 0; background: var(--accent); color: #fff; font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; padding: 5px 14px 6px; font-weight: 600; } body#led .variant-body { padding: 28px 28px 30px; } body#led .variant-body .kicker { font-size: 10px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--muted); margin: 0 0 8px; font-weight: 600; } body#led .variant-body h3 { font-family: 'Prata', serif; font-weight: 400; font-size: 26px; line-height: 1.2; margin: 0 0 14px; color: var(--ink); } body#led .variant-body p { color: var(--text); font-size: 15px; line-height: 1.75; margin: 0 0 22px; font-weight: 400; } body#led .variant-features { list-style: none; margin: 0 0 24px; padding: 0; border-top: 1px dashed #e6e6e6; padding-top: 18px; } body#led .variant-features li { font-size: 14px; color: var(--text); padding: 6px 0; display: flex; gap: 10px; font-weight: 400; } body#led .variant-features li::before { content: "+"; color: var(--accent); font-weight: 700; flex-shrink: 0; } /* ---------- INTEGRATION (3 cards integración estética) ---------- */ body#led .integration { background: var(--cream); padding: 80px 0; } body#led .integration-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 50px; } body#led .integ-card { background: #fff; overflow: hidden; border: 1px solid var(--line); text-align: center; } body#led .integ-photo { aspect-ratio: 4/5; background-size: cover; background-position: center; } body#led .integ-card h4 { font-family: 'Prata', serif; font-weight: 400; font-size: 19px; color: var(--ink); margin: 22px 16px 8px; } body#led .integ-card p { color: var(--muted); font-size: 14px; margin: 0 22px 22px; line-height: 1.65; font-weight: 400; } /* ---------- ESCULTURA (split editorial con dimensiones) ---------- */ body#led .escultura { margin-top: 70px; display: grid; grid-template-columns: 1.1fr 1fr; gap: 60px; align-items: center; } body#led .escultura-img { aspect-ratio: 4/5; background-image: url('/img/landing/pantallas-wedding-planners.jpg?auto=format&fit=crop&w=1400&q=80'); background-size: cover; background-position: center; } body#led .escultura h3 { font-family: 'Prata', serif; font-weight: 400; font-size: 32px; line-height: 1.25; color: var(--ink); margin: 0 0 16px; } body#led .escultura .dim { margin-top: 24px; display: flex; gap: 30px; align-items: baseline; color: var(--ink); font-family: 'Prata', serif; } body#led .escultura .dim div span { display: block; font-size: 11px; letter-spacing: 0.25em; color: var(--muted); text-transform: uppercase; margin-bottom: 6px; font-family: 'Open Sans', sans-serif; font-weight: 600; } body#led .escultura .dim div strong { font-size: 26px; font-weight: 400; } body#led .escultura p { color: var(--text); line-height: 1.8; font-size: 15px; font-weight: 400; } /* ---------- LIVE EXPERIENCES ---------- */ body#led .live-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-top: 44px; } body#led .live-card { position: relative; aspect-ratio: 4/5; background-size: cover; background-position: center; overflow: hidden; color: #fff; } body#led .live-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 30%, rgba(0,0,0,.85) 100%); } body#led .live-card .live-body { position: absolute; bottom: 0; left: 0; right: 0; padding: 32px 36px 36px; z-index: 2; } body#led .live-tag { display: inline-block; background: var(--danger); color: #fff; font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; padding: 4px 10px; margin-bottom: 14px; font-weight: 600; } body#led .live-tag .dot { width: 6px; height: 6px; background: #fff; border-radius: 50%; display: inline-block; margin-right: 6px; vertical-align: middle; animation: blink 1.4s ease-in-out infinite; } @keyframes blink { 0%,100% { opacity: 1; } 50% { opacity: .35; } } body#led .live-card h3 { font-family: 'Prata', serif; font-weight: 400; font-size: 30px; margin: 0 0 8px; color: #fff; } body#led .live-card .sub { font-style: italic; color: rgba(255,255,255,.95); margin: 0 0 14px; font-size: 15px; font-weight: 400; } body#led .live-card p { margin: 0; color: rgba(255,255,255,.92); font-size: 14px; line-height: 1.7; font-weight: 400; } /* ---------- CORPORATIVO (split a sangre) ---------- */ body#led .corp { position: relative; overflow: hidden; background: #161616; color: #fff; margin: 80px 0; } body#led .corp-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 0; align-items: stretch; } body#led .corp-photo { background-image: url('/img/landing/pantallas-led-verticales-corporativos.jpg?auto=format&fit=crop&w=1400&q=80'); background-size: cover; background-position: center; min-height: 460px; } body#led .corp-text { padding: 80px 60px; } body#led .corp-text .eyebrow { font-size: 11px; letter-spacing: 0.4em; text-transform: uppercase; color: var(--accent); margin: 0 0 18px; font-weight: 600; } body#led .corp-text h2 { font-family: 'Prata', serif; font-weight: 400; font-size: 38px; line-height: 1.2; margin: 0 0 22px; color: #fff; } body#led .corp-text p { color: #d4d4d4; line-height: 1.8; font-size: 15px; margin: 0 0 28px; max-width: 460px; font-weight: 400; } /* ---------- TARIFAS / PRICING ---------- */ body#led .pricing-band { padding: 0 0 80px; } body#led .price-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-top: 44px; } body#led .price-card { border: 1px solid var(--line); background: #fff; padding: 38px 36px 32px; position: relative; } body#led .price-card.featured { border: 1px solid var(--accent); box-shadow: 0 12px 36px var(--accent-soft); } body#led .price-card .ribbon { position: absolute; top: -12px; left: 36px; background: var(--accent); color: #fff; font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; padding: 5px 12px; font-weight: 600; } body#led .price-card h3 { font-family: 'Prata', serif; font-weight: 400; font-size: 24px; margin: 0 0 6px; color: var(--ink); } body#led .price-card .sub { font-size: 12.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); margin: 0 0 26px; font-weight: 600; } body#led .price-table { width: 100%; border-collapse: collapse; margin-bottom: 22px; } body#led .price-table th, body#led .price-table td { text-align: left; padding: 12px 0; border-bottom: 1px dashed var(--line); font-size: 14.5px; font-weight: 400; } body#led .price-table th { color: var(--muted); font-weight: 600; font-size: 11.5px; letter-spacing: 0.18em; text-transform: uppercase; } body#led .price-table td.amt { text-align: right; font-family: 'Prata', serif; font-size: 19px; color: var(--ink); } body#led .price-table td.amt small { font-family: 'Open Sans', sans-serif; font-size: 11px; color: var(--muted); margin-left: 4px; } body#led .price-card .foot { font-size: 13px; color: var(--muted); margin: 0; line-height: 1.65; border-top: 1px solid var(--line); padding-top: 16px; font-weight: 400; } body#led .price-note { background: #fbf8f5; color: var(--text); padding: 22px 28px; margin-top: 36px; font-size: 14px; line-height: 1.7; border-left: 3px solid var(--accent); font-weight: 400; } /* ---------- INCLUYE / SERVICIOS ---------- */ body#led .includes-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-top: 40px; } body#led .includes-col h3 { font-family: 'Prata', serif; font-weight: 400; font-size: 23px; margin: 0 0 22px; padding-bottom: 14px; border-bottom: 1px solid var(--line); color: var(--ink); } body#led .includes-col ul { list-style: none; padding: 0; margin: 0; } body#led .includes-col li { padding: 10px 0 10px 30px; position: relative; font-size: 14.5px; color: var(--ink); line-height: 1.65; border-bottom: 1px dashed #f0f0f0; font-weight: 400; } body#led .includes-col li::before { content: "✓"; position: absolute; left: 0; top: 9px; color: var(--accent); font-weight: 700; } body#led .includes-col.extras li::before { content: "+"; color: var(--danger); } /* ============================================================ 5. ESPECÍFICOS LANDING WEDDING PLANNERS — body#wedding-planners ============================================================ */ /* ---------- Aire superior de las bandas con titular ---------- */ body#wedding-planners .reasons-band, body#wedding-planners .cases-band { padding-top: 70px; } body#wedding-planners .moments-band, body#wedding-planners .conditions-band { padding-top: 100px; } body#wedding-planners .reasons-band .section-title, body#wedding-planners .moments-band .section-title, body#wedding-planners .conditions-band .section-title, body#wedding-planners .cases-band .section-title { margin-top: 24px; } /* ---------- POR QUÉ WOOWLOW (.reasons-band) ---------- */ body#wedding-planners .reasons-band { padding-bottom: 80px; } body#wedding-planners .reasons-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 56px 48px; margin-top: 50px; } body#wedding-planners .reason { max-width: 320px; } body#wedding-planners .reason-num { font-family: 'Prata', serif; font-weight: 400; font-size: 44px; line-height: 1; color: var(--accent); margin: 0 0 18px; letter-spacing: -0.5px; } body#wedding-planners .reason h3 { font-family: 'Prata', serif; font-weight: 400; font-size: 21px; line-height: 1.3; margin: 0 0 12px; color: var(--ink); } body#wedding-planners .reason p { color: var(--text); font-size: 14.5px; line-height: 1.75; margin: 0; font-weight: 400; } /* ---------- CATÁLOGO POR MOMENTO (.moments-band) ---------- */ body#wedding-planners .moments-band { background: var(--cream); padding-bottom: 80px; } body#wedding-planners .moments-band .section-intro { margin-bottom: 4px; } body#wedding-planners .moments-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 50px; } body#wedding-planners .moment { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); padding: 32px 30px 28px; text-decoration: none; color: inherit; transition: border-color .2s, transform .2s, box-shadow .2s; position: relative; } body#wedding-planners .moment:hover { border-color: #d4d4d4; transform: translateY(-2px); box-shadow: 0 14px 32px rgba(0,0,0,0.05); } body#wedding-planners .moment:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } body#wedding-planners .moment-tag { font-size: 10.5px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--accent); margin: 0 0 14px; font-weight: 600; } body#wedding-planners .moment h3 { font-family: 'Prata', serif; font-weight: 400; font-size: 21px; line-height: 1.3; margin: 0 0 12px; color: var(--ink); } body#wedding-planners .moment p { color: var(--text); font-size: 14px; line-height: 1.7; margin: 0 0 22px; font-weight: 400; flex: 1; } body#wedding-planners .moment-link { display: inline-block; font-size: 11.5px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--accent); font-weight: 700; transition: transform .2s; } body#wedding-planners .moment:hover .moment-link { transform: translateX(4px); } /* ---------- LED TEASER (split editorial full-bleed) ---------- */ body#wedding-planners .led-teaser { position: relative; overflow: hidden; background: #161616; color: #fff; margin: 0 0 80px; } body#wedding-planners .led-teaser-inner { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; } body#wedding-planners .led-teaser-photo { min-height: 540px; background-color: #2a2722; background-image: linear-gradient(135deg, rgba(0,0,0,0.35), rgba(0,0,0,0)), url('/img/landing/pantallas-led-verticales-bodas-2.jpg?auto=format&fit=crop&w=1400&q=80'); background-size: cover; background-position: center; } body#wedding-planners .led-teaser-text { padding: 80px 64px; display: flex; flex-direction: column; justify-content: center; } body#wedding-planners .led-teaser-text .eyebrow { font-size: 11px; letter-spacing: 0.4em; text-transform: uppercase; color: var(--accent); margin: 0 0 18px; font-weight: 600; } body#wedding-planners .led-teaser-text h2 { font-family: 'Prata', serif; font-weight: 400; font-size: 36px; line-height: 1.2; margin: 0 0 20px; color: #fff; } body#wedding-planners .led-teaser-text > p { color: #d4d4d4; line-height: 1.8; font-size: 15px; margin: 0 0 26px; max-width: 480px; font-weight: 400; } body#wedding-planners .led-teaser-features { list-style: none; margin: 0 0 30px; padding: 18px 0 0; border-top: 1px dashed rgba(255,255,255,0.18); max-width: 500px; } body#wedding-planners .led-teaser-features li { position: relative; padding: 8px 0 8px 22px; font-size: 14px; line-height: 1.65; color: #d4d4d4; font-weight: 400; } body#wedding-planners .led-teaser-features li::before { content: "+"; position: absolute; left: 0; top: 8px; color: var(--accent); font-weight: 700; } body#wedding-planners .led-teaser-features li strong { color: #fff; font-weight: 600; } body#wedding-planners .led-teaser-text .btn { align-self: flex-start; } /* ---------- CONDICIONES CANAL (.conditions-band) ---------- .cond-tag (eyebrow + línea verde): la línea va PEGADA al texto con padding-bottom:4px, y separada del H3 con margin-bottom:36px. Si quieres más/menos aire entre la línea verde y el H3, ajusta ese margin-bottom (línea ~XX). */ body#wedding-planners .conditions-band { background: var(--cream); padding-bottom: 80px; } body#wedding-planners .conditions-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 50px; } body#wedding-planners .cond-card { background: #fff; border: 1px solid var(--line); padding: 30px 30px 28px; } body#wedding-planners .cond-tag { display: inline-block; font-size: 10px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--accent); font-weight: 700; margin: 0 0 36px; padding-bottom: 4px; border-bottom: 1px solid var(--accent); } body#wedding-planners .cond-card h3 { font-family: 'Prata', serif; font-weight: 400; font-size: 19px; line-height: 1.3; margin: 0 0 12px; color: var(--ink); } body#wedding-planners .cond-card p { color: var(--text); font-size: 14px; line-height: 1.7; margin: 0; font-weight: 400; } /* ---------- CASOS / PORTFOLIO (.cases-band) ---------- */ body#wedding-planners .cases-band { padding-bottom: 80px; } body#wedding-planners .cases-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-top: 50px; } body#wedding-planners .case-card { background: #fff; border: 1px solid var(--line); display: flex; flex-direction: column; overflow: hidden; transition: box-shadow .2s, transform .2s; } body#wedding-planners .case-card:hover { box-shadow: 0 18px 40px rgba(0,0,0,0.08); transform: translateY(-2px); } body#wedding-planners .case-photo { position: relative; aspect-ratio: 16/10; background-size: cover; background-position: center; background-color: #f5f3ee; } body#wedding-planners .case-tag { position: absolute; top: 16px; left: 0; background: var(--accent); color: #fff; font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; padding: 6px 14px 7px; font-weight: 600; } body#wedding-planners .case-body { padding: 28px 30px 30px; } body#wedding-planners .case-body .kicker { font-size: 10px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--muted); margin: 0 0 8px; font-weight: 600; } body#wedding-planners .case-body h3 { font-family: 'Prata', serif; font-weight: 400; font-size: 22px; line-height: 1.25; margin: 0 0 14px; color: var(--ink); } body#wedding-planners .case-body p { color: var(--text); font-size: 14.5px; line-height: 1.7; margin: 0; font-weight: 400; } /* Card placeholder (sin imagen) */ body#wedding-planners .case-card.placeholder { background: var(--cream); border: 1px dashed #d8d3c8; justify-content: center; align-items: stretch; text-align: center; } body#wedding-planners .case-card.placeholder:hover { box-shadow: none; transform: none; } body#wedding-planners .case-card.placeholder .case-body { padding: 60px 40px; } body#wedding-planners .case-card.placeholder .kicker { color: var(--accent); } body#wedding-planners .case-card.placeholder h3 { max-width: 360px; margin: 0 auto 14px; } body#wedding-planners .case-card.placeholder p { max-width: 380px; margin: 0 auto; color: var(--muted); } body#wedding-planners .cases-foot { text-align: center; margin-top: 36px; color: var(--soft); font-size: 13px; } body#wedding-planners .cases-foot a { color: var(--accent); font-weight: 600; text-decoration: underline; } /* ---------- ACCESIBILIDAD ---------- */ body#wedding-planners .moment:focus-visible, body#wedding-planners .case-card:focus-within { outline: 2px solid var(--accent); outline-offset: 3px; } @media (prefers-reduced-motion: reduce) { body#wedding-planners .moment, body#wedding-planners .moment:hover, body#wedding-planners .moment-link, body#wedding-planners .moment:hover .moment-link, body#wedding-planners .case-card, body#wedding-planners .case-card:hover { transition: none; transform: none; } } /* ============================================================ 6. RESPONSIVE — todos los breakpoints juntos por mantenibilidad ============================================================ */ /* ---------- Tablet y mobile ancho (≤920px) ---------- */ @media (max-width: 920px) { /* Compartido */ body#led .hero h1, body#wedding-planners .hero h1 { font-size: 42px; } body#led .hero-inner, body#wedding-planners .hero-inner { padding: 70px 30px 80px; } body#led .lead-form-grid, body#wedding-planners .lead-form-grid { grid-template-columns: 1fr; } body#led .lead-card, body#wedding-planners .lead-card { padding: 40px 26px 34px; } body#led .lead-card .lead-head h3, body#wedding-planners .lead-card .lead-head h3 { font-size: 26px; } body#led .process-grid, body#wedding-planners .process-grid { grid-template-columns: 1fr 1fr; } body#led .step::after, body#wedding-planners .step::after { display: none; } body#led .intro-copy h2, body#wedding-planners .intro-copy h2 { font-size: 24px; } body#led .cta-final h2, body#wedding-planners .cta-final h2 { font-size: 30px; } body#led .section-title, body#wedding-planners .section-title { gap: 18px; padding: 0 16px; } body#led .section-title::before, body#wedding-planners .section-title::before, body#led .section-title::after, body#wedding-planners .section-title::after { flex: 0 1 28px; max-width: 28px; } body#led .section-title h2, body#wedding-planners .section-title h2 { font-size: 22px; line-height: 1.3; } body#led .section-title h2#leadOk, body#wedding-planners .section-title h2#leadOk { font-size: 22px; line-height: 1.3; } /* LED-específico */ body#led .variants-grid, body#led .live-grid, body#led .integration-grid, body#led .price-grid, body#led .includes-grid, body#led .corp-inner, body#led .escultura, body#led .foot-cols { grid-template-columns: 1fr; } body#led .corp-photo { min-height: 280px; } body#led .corp-text { padding: 50px 30px; } body#led .escultura h3 { font-size: 26px; } body#led .corp-text h2 { font-size: 28px; } body#led .includes-col h3 { font-size: 19px; } body#led .price-card h3 { font-size: 21px; } body#led .live-card h3 { font-size: 24px; } /* Weddings-específico */ body#wedding-planners .reasons-grid { grid-template-columns: 1fr 1fr; gap: 44px 36px; } body#wedding-planners .moments-grid { grid-template-columns: 1fr 1fr; } body#wedding-planners .conditions-grid { grid-template-columns: 1fr 1fr; } body#wedding-planners .cases-grid { grid-template-columns: 1fr; } body#wedding-planners .led-teaser-inner { grid-template-columns: 1fr; } body#wedding-planners .led-teaser-photo { min-height: 320px; } body#wedding-planners .led-teaser-text { padding: 50px 30px; } body#wedding-planners .led-teaser-text h2 { font-size: 28px; } body#wedding-planners .reasons-band, body#wedding-planners .moments-band, body#wedding-planners .conditions-band { padding: 60px 0; } body#wedding-planners .reason-num { font-size: 38px; } body#wedding-planners .case-card.placeholder .case-body { padding: 44px 28px; } } /* ---------- Mobile estrecho (≤480px) ---------- */ @media (max-width: 480px) { /* Compartido */ body#led .hero h1, body#wedding-planners .hero h1 { font-size: 34px; } body#led .hero-inner, body#wedding-planners .hero-inner { padding: 60px 24px 70px; } body#led .hero p.lede, body#wedding-planners .hero p.lede { font-size: 15.5px; } body#led .section-title, body#wedding-planners .section-title { gap: 16px; padding: 0 14px; } body#led .section-title::before, body#wedding-planners .section-title::before, body#led .section-title::after, body#wedding-planners .section-title::after { flex: 0 1 22px; max-width: 22px; } body#led .section-title h2, body#wedding-planners .section-title h2 { font-size: 22px; line-height: 1.3; } body#led .section-title h2#leadOk, body#wedding-planners .section-title h2#leadOk { font-size: 22px; line-height: 1.3; } body#led .lead-card, body#wedding-planners .lead-card { padding: 36px 20px 30px; } body#led .faq-item summary, body#wedding-planners .faq-item summary { padding: 20px 40px 20px 44px; font-size: 16px; } body#led .faq-item summary::before, body#wedding-planners .faq-item summary::before { left: 0; top: 22px; font-size: 13px; } body#led .faq-item summary::after, body#wedding-planners .faq-item summary::after { right: 4px; top: 16px; } body#led .faq-item .faq-body, body#wedding-planners .faq-item .faq-body { padding: 0 40px 24px 44px; } /* LED-específico */ body#led .variant-body, body#led .price-card { padding: 26px 22px; } body#led .corp-text { padding: 40px 22px; } body#led .live-card .live-body { padding: 26px 22px 26px; } /* Weddings-específico */ body#wedding-planners .reasons-grid { grid-template-columns: 1fr; gap: 36px; } body#wedding-planners .moments-grid { grid-template-columns: 1fr; } body#wedding-planners .conditions-grid { grid-template-columns: 1fr; } body#wedding-planners .reason { max-width: none; } body#wedding-planners .reason-num { font-size: 34px; margin-bottom: 12px; } body#wedding-planners .moment { padding: 26px 22px 24px; } body#wedding-planners .cond-card { padding: 24px 22px 22px; } body#wedding-planners .case-body { padding: 24px 22px 26px; } body#wedding-planners .led-teaser-text { padding: 40px 22px; } body#wedding-planners .led-teaser-text h2 { font-size: 24px; } } /* ============================================================ PARCHE FINAL — separación línea verde / H3 en .cond-tag Forzado con !important para vencer cualquier regla del global o cualquier caché residual del navegador o del servidor. ============================================================ */ body#wedding-planners .cond-card .cond-tag { margin-bottom: 40px !important; padding-bottom: 4px !important; }