/* ════════════════════════════════════════════════════════════════ Studio M · Hoja de estilo compartida de las páginas de rama Sistema Swiss Magazine (crema). Mismas clases que el diseño previo, re-skin a la nueva identidad. El acento se inyecta por --ramcol-1 / --ramcol-2 / --ramcol-shadow en de cada página. ════════════════════════════════════════════════════════════════ */ :root { --paper:#F4F2ED; --paper-2:#ECE9E1; --paper-3:#E4E0D6; --ink:#111111; --ink-2:#3a3a3a; --muted:#6F6A60; --muted-2:#8F8B82; --line:#D8D5CE; --line-bold:rgba(17,17,17,.55); --rose:#E63B2E; --violet:#E63B2E; --teal:#E63B2E; --display:'Archivo',system-ui,sans-serif; --serif:'Archivo',Georgia,serif; --mono:'Space Mono',ui-monospace,monospace; /* acento de la rama · cada página lo sobreescribe en */ --ramcol-1:#E63B2E; --ramcol-2:#E63B2E; --ramcol-shadow:rgba(230,59,46,.28); } * { box-sizing: border-box; } html { scroll-behavior: smooth; } html, body { margin: 0; background: var(--paper); color: var(--ink-2); font-family: var(--serif); font-size: 17px; line-height: 1.62; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; } .font-serif { font-family: var(--serif); font-style: italic; } .font-mono { font-family: var(--mono); } a { text-decoration: none; color: inherit; } /* ── FONDO · aura crema sutil + grano (lo demás se apaga) ── */ .bg-base { position: fixed; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(58% 80% at 102% 12%, color-mix(in srgb, var(--ramcol-1) 22%, transparent) 0%, transparent 60%), radial-gradient(50% 60% at -6% 100%, rgba(230,59,46,.16) 0%, transparent 60%); } .bg-mesh, .blob, .blob-1, .blob-2, .blob-3, .vignette, .scan-line, .cursor-glow { display: none !important; } .bg-grid { position: fixed; inset: 0; z-index: 1; pointer-events: none; background-image: linear-gradient(rgba(17,17,17,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(17,17,17,.035) 1px, transparent 1px); background-size: 80px 80px; mask-image: radial-gradient(ellipse at center, black 40%, transparent 82%); } .bg-noise { position: fixed; inset: 0; z-index: 2; pointer-events: none; opacity: .05; mix-blend-mode: multiply; background-image: url("data:image/svg+xml;utf8,"); } /* marco editorial fijo (coherente con la home) */ body::before { content:""; position: fixed; inset: 22px; z-index: 60; pointer-events: none; border: 1.5px solid rgba(17,17,17,.42); } .content { position: relative; z-index: 10; } /* ── NAV ────────────────────────────────────────────────── */ .nav-wrap { position: fixed; top: 1.1rem; left: 50%; transform: translateX(-50%); z-index: 80; width: calc(100% - 4rem); max-width: 980px; } .nav-pill { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.5rem 0.5rem 0.5rem 1.25rem; border-radius: 999px; backdrop-filter: blur(14px) saturate(1.1); -webkit-backdrop-filter: blur(14px) saturate(1.1); background: rgba(241,236,225,.7); border: 1.5px solid var(--ink); } .nav-brand { display: flex; align-items: center; gap: 0.6rem; } .nav-dot { width: 9px; height: 9px; border-radius: 999px; background: var(--ramcol-1); } .nav-brand-text { font-family: var(--display); font-weight: 700; font-size: 0.95rem; letter-spacing: -0.02em; text-transform: none; color: var(--ink); } .nav-links { display: none; align-items: center; gap: 0.25rem; } .nav-links a { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase; padding: 0.6rem 0.7rem; border-radius: 999px; color: var(--muted); transition: color 0.15s; } .nav-links a:hover, .nav-links a.active { color: var(--ramcol-1); } .nav-cta { font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 500; padding: 0.65rem 1rem; border-radius: 999px; color: var(--paper); background: var(--ink); border: 1px solid var(--ink); transition: transform 0.3s cubic-bezier(0.2,0.9,0.3,1.1); } .nav-cta:hover { transform: scale(1.04); } @media (min-width: 880px) { .nav-links { display: flex; } } /* ── CONTENEDOR ─────────────────────────────────────────── */ .wrap { max-width: 1240px; margin: 0 auto; width: 100%; padding-left: 2rem; padding-right: 2rem; } @media (min-width: 768px) { .wrap { padding-left: 3rem; padding-right: 3rem; } } /* ── HERO DE RAMA ───────────────────────────────────────── */ .rama-hero { min-height: 92vh; display: flex; align-items: center; padding: 9rem 0 5rem; position: relative; } .rama-hero-grid { display: grid; grid-template-columns: 1fr; gap: 3rem; align-items: center; } @media (min-width: 1024px) { .rama-hero-grid { grid-template-columns: 7fr 5fr; } } .data-chip { display: inline-flex; align-items: center; gap: 0.4rem; font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.2em; text-transform: uppercase; font-weight: 500; padding: 0.4rem 0.8rem; border-radius: 999px; background: transparent; color: var(--ramcol-1); border: 1px solid var(--ramcol-1); } .rama-num-massive { font-family: var(--display); font-weight: 800; font-size: clamp(4.5rem, 8vw, 8rem); line-height: 0.86; letter-spacing: -0.04em; color: var(--ramcol-1); opacity: 1; } .rama-titulo-big { font-family: var(--display); font-weight: 800; font-size: clamp(2.5rem, 5.5vw, 4.5rem); line-height: 0.95; letter-spacing: -0.03em; color: var(--ink); margin: 0; } .rama-titulo-big em { font-family: var(--serif); font-style: italic; font-weight: 500; color: var(--ramcol-1); } .rama-sub { font-family: var(--serif); font-style: italic; font-size: clamp(1.1rem, 2.2vw, 1.5rem); color: var(--muted); font-weight: 400; } .lead { font-size: clamp(1.05rem, 1.4vw, 1.25rem); color: var(--ink-2); line-height: 1.6; max-width: 580px; } .lead em { font-family: var(--serif); font-style: italic; color: var(--ramcol-1); } .stats-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; padding-top: 0; border-top: 1px solid var(--line); } @media (min-width: 640px) { .stats-row { grid-template-columns: repeat(3, 1fr); } } .stats-row > div { padding: 1.2rem 1.2rem 1.2rem 0; border-right: 1px solid var(--line); } .stats-row > div:last-child { border-right: none; } .stat-label { font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted-2); margin-bottom: 0.4rem; } .stat-value { font-family: var(--display); font-size: 1.35rem; font-weight: 700; color: var(--ink); letter-spacing: -0.01em; } .stat-value.sm { font-size: 1.05rem; } .stat-value .u { font-size: 0.8rem; color: var(--muted); } .hero-actions { display: flex; flex-wrap: wrap; gap: 0.85rem; } .btn-fill { display: inline-flex; align-items: center; gap: 0.7rem; font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 500; padding: 0.95rem 1.6rem; border-radius: 999px; color: var(--paper); background: var(--ink); border: 1px solid var(--ink); transition: transform 0.25s; } .btn-fill:hover { transform: scale(1.04); } .btn-ghost { display: inline-flex; align-items: center; gap: 0.6rem; font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 500; padding: 0.95rem 1.5rem; border-radius: 999px; border: 1.5px solid var(--ink); color: var(--ink); transition: background 0.25s, color 0.25s; } .btn-ghost:hover { background: var(--ink); color: var(--paper); } /* Marco visual del hero · tarjeta crema con número y sombra dura */ .rama-frame { position: relative; aspect-ratio: 4/5; border-radius: 18px; overflow: hidden; background: var(--paper-2); border: 1.5px solid var(--ink); box-shadow: 8px 9px 0 var(--ink); display: flex; align-items: center; justify-content: center; } .rama-frame::before { display: none; } .rama-frame .tag { font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); text-align: center; padding: 1rem; z-index: 3; } .rama-frame .tag .b { display: block; font-family: var(--display); font-size: 1.4rem; letter-spacing: -0.01em; color: var(--ramcol-1); margin-top: 0.5rem; text-transform: none; font-weight: 700; } .corner { position: absolute; width: 16px; height: 16px; z-index: 4; } .corner.tl { top: 14px; left: 14px; border-top: 1.5px solid var(--ink); border-left: 1.5px solid var(--ink); } .corner.tr { top: 14px; right: 14px; border-top: 1.5px solid var(--ink); border-right: 1.5px solid var(--ink); } .corner.bl { bottom: 14px; left: 14px; border-bottom: 1.5px solid var(--ink); border-left: 1.5px solid var(--ink); } .corner.br { bottom: 14px; right: 14px; border-bottom: 1.5px solid var(--ink); border-right: 1.5px solid var(--ink); } /* ── SECCIONES DE CONTENIDO ─────────────────────────────── */ .section { padding: 5.5rem 0; position: relative; border-top: 1.5px solid var(--ink); } .section-eyebrow { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.26em; text-transform: uppercase; color: var(--ramcol-1); margin: 0 0 1rem; } .section-title { font-family: var(--display); font-weight: 800; font-size: clamp(1.9rem, 4vw, 3rem); line-height: 1.02; letter-spacing: -0.025em; margin: 0 0 1rem; color: var(--ink); } .section-title em { font-family: var(--serif); font-style: italic; font-weight: 500; color: var(--ramcol-1); } .section-intro { color: var(--ink-2); font-size: 1.05rem; line-height: 1.6; max-width: 640px; margin: 0 0 3rem; } /* Tarjetas */ .cards { display: grid; grid-template-columns: 1fr; gap: 1.25rem; } @media (min-width: 640px) { .cards.cols-2 { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 640px) { .cards.cols-4 { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 900px) { .cards.cols-3 { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 1100px) { .cards.cols-4 { grid-template-columns: repeat(4, 1fr); } } .card { position: relative; border-radius: 16px; padding: 1.75rem; background: var(--paper-2); border: 1px solid var(--line); transition: transform 0.3s, border-color 0.3s, box-shadow 0.3s; } .card:hover { transform: translateY(-4px); border-color: var(--ink); box-shadow: 6px 7px 0 var(--ink); } .card .k { font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ramcol-1); margin-bottom: 0.9rem; } .card h3 { font-family: var(--display); font-weight: 700; font-size: 1.2rem; letter-spacing: -0.01em; margin: 0 0 0.6rem; color: var(--ink); } .card p { color: var(--ink-2); font-size: 0.97rem; line-height: 1.6; margin: 0; } .card .price { font-family: var(--display); font-weight: 800; font-size: 1.6rem; color: var(--ink); margin: 0.4rem 0 0.2rem; letter-spacing: -0.02em; } .card .price .u { font-size: 0.8rem; color: var(--muted); font-weight: 500; } /* Botón de WhatsApp por plan/tarjeta · personaliza el mensaje (data-wa-context) */ .card-wa { display: inline-flex; align-items: center; gap: 0.5rem; margin-top: 1.1rem; font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 700; color: var(--ink); background: transparent; border: 1.5px solid var(--ink); border-radius: 999px; padding: 0.62rem 1.05rem; cursor: pointer; transition: background 0.15s, color 0.15s, border-color 0.15s; } .card-wa:hover { background: #25D366; border-color: #25D366; color: #fff; } .card-wa svg { width: 15px; height: 15px; fill: currentColor; } /* Lista de proceso numerada */ .steps { display: grid; grid-template-columns: 1fr; gap: 1.25rem; } @media (min-width: 768px) { .steps { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1100px) { .steps { grid-template-columns: repeat(4, 1fr); } } .step { position: relative; padding: 1.5rem; border-radius: 16px; background: var(--paper-2); border: 1px solid var(--line); } .step .n { font-family: var(--display); font-size: 2.2rem; font-weight: 800; line-height: 1; color: var(--ramcol-1); margin-bottom: 0.8rem; letter-spacing: -0.03em; } .step h4 { font-family: var(--display); font-weight: 700; font-size: 1.05rem; margin: 0 0 0.4rem; color: var(--ink); } .step p { color: var(--ink-2); font-size: 0.92rem; line-height: 1.55; margin: 0; } /* Lista con checks */ .checklist { display: grid; grid-template-columns: 1fr; gap: 0.9rem; } @media (min-width: 700px) { .checklist { grid-template-columns: repeat(2, 1fr); } } .checklist li { list-style: none; display: flex; gap: 0.75rem; align-items: flex-start; color: var(--ink-2); font-size: 1rem; line-height: 1.5; } .checklist .mk { flex-shrink: 0; width: 22px; height: 22px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; font-size: 0.7rem; color: var(--paper); background: var(--ramcol-1); margin-top: 0.15rem; font-weight: 700; } /* FAQ */ .faq { display: grid; grid-template-columns: 1fr; gap: 0.75rem; max-width: 820px; } .faq details { border-radius: 14px; border: 1px solid var(--line); background: var(--paper-2); overflow: hidden; } .faq summary { cursor: pointer; list-style: none; padding: 1.1rem 1.35rem; font-family: var(--display); font-weight: 600; font-size: 1.02rem; color: var(--ink); display: flex; justify-content: space-between; align-items: center; gap: 1rem; } .faq summary::-webkit-details-marker { display: none; } .faq summary .ic { flex-shrink: 0; color: var(--ramcol-1); transition: transform 0.25s; font-family: var(--mono); } .faq details[open] summary .ic { transform: rotate(45deg); } .faq .a { padding: 0 1.35rem 1.2rem; color: var(--ink-2); font-size: 0.97rem; line-height: 1.6; } /* Banda de contacto */ .contact-band { position: relative; border-radius: 18px; overflow: hidden; padding: clamp(2.5rem, 5vw, 4.5rem); text-align: center; background: var(--paper-2); border: 1.5px solid var(--ink); box-shadow: 8px 9px 0 var(--ink); } .contact-band h2 { font-family: var(--display); font-weight: 800; font-size: clamp(2rem, 4.5vw, 3.2rem); letter-spacing: -0.03em; margin: 0 0 1rem; color: var(--ink); } .contact-band h2 em { font-family: var(--serif); font-style: italic; font-weight: 500; color: var(--ramcol-1); } .contact-band p { color: var(--ink-2); font-size: 1.05rem; line-height: 1.6; max-width: 560px; margin: 0 auto 2rem; } .contact-actions { display: flex; flex-wrap: wrap; gap: 0.85rem; justify-content: center; } /* ── MARQUEE ────────────────────────────────────────────── */ .marquee { position: relative; overflow: hidden; padding: 1.1rem 0; border-top: 1.5px solid var(--ink); border-bottom: 1.5px solid var(--ink); background: var(--paper-2); mask-image: linear-gradient(90deg, transparent 0%, black 6%, black 94%, transparent 100%); } .marquee-track { display: flex; gap: 3rem; animation: marquee 28s linear infinite; white-space: nowrap; width: max-content; } .marquee-item { font-family: var(--display); font-weight: 700; font-size: 0.95rem; letter-spacing: -0.01em; color: var(--ink); } .marquee-item strong { color: var(--ink); font-weight: 800; } .marquee-dot { color: var(--ramcol-1); font-size: 0.7rem; align-self: center; } @keyframes marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } /* ── FOOTER ─────────────────────────────────────────────── */ footer { padding: 2.5rem 0 3rem; border-top: 1.5px solid var(--ink); } .footer-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; } .footer-copy { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); } .footer-right { display: flex; align-items: center; gap: 1.25rem; font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; } .footer-right a { color: var(--muted); font-weight: 500; transition: color 0.15s; } .footer-right a:hover { color: var(--ramcol-1); } .status { display: flex; align-items: center; gap: 0.6rem; color: var(--ink-2); font-weight: 500; } .status-dot { width: 8px; height: 8px; border-radius: 999px; background: var(--teal); box-shadow: 0 0 0 0 rgba(230,59,46,.5); animation: pulse-lime 2s ease-in-out infinite; } @keyframes pulse-lime { 0%,100% { box-shadow: 0 0 0 0 rgba(230,59,46,.4); } 70% { box-shadow: 0 0 0 9px rgba(230,59,46,0); } } /* ── REVEAL AL SCROLL ───────────────────────────────────── */ .reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.8s cubic-bezier(0.22,1,0.36,1), transform 0.8s cubic-bezier(0.22,1,0.36,1); } .reveal.in { opacity: 1; transform: translateY(0); } .reveal.d1 { transition-delay: 0.06s; } .reveal.d2 { transition-delay: 0.12s; } .reveal.d3 { transition-delay: 0.18s; } .reveal.d4 { transition-delay: 0.24s; } ::selection { background: var(--ink); color: var(--paper); } /* ════════════════════════════════════════════════════════════════ AÑADIDOS · foto real en hero, galería, prueba social y formulario ════════════════════════════════════════════════════════════════ */ /* Hero con FOTO real (reemplaza el marco vacío) */ .rama-photo-hero { position: relative; aspect-ratio: 4/5; border-radius: 18px; overflow: hidden; border: 1.5px solid var(--ink); box-shadow: 8px 9px 0 var(--ink); background: var(--paper-2); } .rama-photo-hero img { width: 100%; height: 100%; object-fit: cover; display: block; filter: grayscale(1) contrast(1.04); transition: filter .5s; } .rama-photo-hero:hover img { filter: grayscale(0) contrast(1.02); } .rama-photo-hero .tagline { position: absolute; left: 0; bottom: 0; z-index: 3; font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.16em; text-transform: uppercase; background: var(--ink); color: var(--paper); padding: 0.45rem 0.7rem; } /* Galería de portafolio */ .gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem; } @media (min-width: 760px) { .gallery { grid-template-columns: repeat(3, 1fr); } } .gallery figure { position: relative; margin: 0; border-radius: 12px; overflow: hidden; border: 1px solid var(--line); } .gallery img { width: 100%; aspect-ratio: 4/5; object-fit: cover; display: block; filter: grayscale(1) contrast(1.05); transition: filter .4s, transform .5s; } .gallery figure:hover img { filter: grayscale(0) contrast(1.02); transform: scale(1.03); } .gallery figure.wide { grid-column: span 2; } .gallery figcaption { position: absolute; left: 0; bottom: 0; font-family: var(--mono); font-size: 0.56rem; letter-spacing: 0.12em; text-transform: uppercase; background: var(--ink); color: var(--paper); padding: 0.35rem 0.6rem; } /* Prueba social · testimonios */ .quotes { display: grid; grid-template-columns: 1fr; gap: 1.25rem; } @media (min-width: 760px) { .quotes { grid-template-columns: repeat(2, 1fr); } } .quote { border-radius: 16px; padding: 1.75rem; background: var(--paper-2); border: 1px solid var(--line); } .quote p { font-family: var(--serif); font-style: italic; font-size: 1.12rem; line-height: 1.5; color: var(--ink); margin: 0 0 1rem; } .quote .who { font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); } .quote .who strong { color: var(--ramcol-1); font-weight: 700; } /* Selector de público (hub de foto) */ .audience { display: grid; grid-template-columns: 1fr; gap: 1rem; } @media (min-width: 760px) { .audience { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 980px) { .audience.three { grid-template-columns: repeat(3, 1fr); } } .audience a { display: block; border-radius: 16px; padding: 1.9rem; background: var(--paper-2); border: 1.5px solid var(--ink); box-shadow: 5px 6px 0 var(--ink); transition: transform .25s, box-shadow .25s; } .audience a:hover { transform: translate(-2px,-2px); box-shadow: 8px 9px 0 var(--ramcol-1); } .audience .k { font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ramcol-1); } .audience h3 { font-family: var(--display); font-weight: 800; font-size: 1.5rem; letter-spacing: -0.02em; margin: 0.6rem 0 0.5rem; color: var(--ink); } .audience p { color: var(--ink-2); font-size: 0.97rem; line-height: 1.55; margin: 0 0 1rem; } .audience .go { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink); font-weight: 700; } /* ── FORMULARIO DE CAPTURA ── */ .lead-form { border-radius: 18px; border: 1.5px solid var(--ink); background: var(--paper-2); box-shadow: 8px 9px 0 var(--ink); padding: clamp(1.5rem, 3vw, 2.25rem); max-width: 560px; } .lead-form .lf-kick { font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ramcol-1); margin-bottom: 0.5rem; } .lead-form h3 { font-family: var(--display); font-weight: 800; font-size: clamp(1.4rem, 3vw, 1.9rem); letter-spacing: -0.02em; text-transform: none; line-height: 1; margin: 0 0 1.1rem; color: var(--ink); } .lf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; } @media (max-width: 520px) { .lf-row { grid-template-columns: 1fr; } } .lead-form input, .lead-form select, .lead-form textarea { width: 100%; font-family: var(--display); font-size: 1rem; color: var(--ink); background: var(--paper); border: 1.5px solid var(--line); padding: 0.8rem 0.9rem; margin-top: 0.6rem; border-radius: 10px; -webkit-appearance: none; appearance: none; } .lead-form select { cursor: pointer; } .lead-form textarea { resize: vertical; min-height: 70px; } .lead-form input::placeholder, .lead-form textarea::placeholder { color: var(--muted); } .lead-form input:focus, .lead-form select:focus, .lead-form textarea:focus { outline: none; border-color: var(--ramcol-1); } .lf-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; } .lf-submit { width: 100%; margin-top: 0.85rem; font-family: var(--mono); font-weight: 700; font-size: 0.74rem; letter-spacing: 0.14em; text-transform: uppercase; background: var(--ink); color: var(--paper); border: 1.5px solid var(--ink); border-radius: 999px; padding: 1rem; cursor: pointer; transition: background .2s, transform .2s; } .lf-submit:hover { background: var(--ramcol-1); border-color: var(--ramcol-1); transform: scale(1.02); } .lf-submit:disabled { opacity: .5; cursor: not-allowed; transform: none; } .lf-note { font-family: var(--mono); font-size: 0.58rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin-top: 0.7rem; } .lf-status { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.08em; text-transform: uppercase; margin-top: 0.7rem; display: none; } .lf-status.ok { display: block; color: #1f8f50; } .lf-status.err { display: block; color: var(--ramcol-1); } .lead-form.done .lf-row, .lead-form.done input, .lead-form.done select, .lead-form.done textarea, .lead-form.done .lf-submit, .lead-form.done .lf-note { display: none; } .contact-split { display: grid; grid-template-columns: 1fr; gap: 2.5rem; align-items: start; } @media (min-width: 900px) { .contact-split { grid-template-columns: 1fr 1fr; } } /* ── MOBILE ─────────────────────────────────────────────── */ @media (max-width: 800px) { body::before { inset: 12px; } .bg-grid, .bg-noise { display: none !important; } .section, .rama-hero { padding-top: 4.5rem; padding-bottom: 4.5rem; } .nav-wrap { width: calc(100% - 1.5rem); } } @media (prefers-reduced-motion: reduce) { .marquee-track, .status-dot { animation: none !important; } .reveal { opacity: 1; transform: none; } } /* ════════════════════════════════════════════════════════════════ COHERENCIA CON LA HOME · Swiss afilado (override final) La home es PLANA (papel sin aura), de esquinas RECTAS y SIN sombras duras. Este bloque alinea las 8 páginas de rama a ese mismo look, sin tocar el HTML de cada una. (Decisión de Male: "todo al look de la home".) ════════════════════════════════════════════════════════════════ */ /* 1 · Fondo plano como la home: fuera el aura rosa/roja */ .bg-base { display: none !important; } /* 2 · Esquinas RECTAS (la home no usa redondeces) */ .nav-pill, .nav-links a, .nav-cta, .data-chip, .rama-frame, .rama-photo-hero, .btn-fill, .btn-ghost, .card, .card-wa, .step, .faq details, .contact-band, .gallery figure, .quote, .audience a, .lead-form, .lead-form input, .lead-form select, .lead-form textarea, .lf-submit, .marquee { border-radius: 0 !important; } /* 3 · Fuera las sombras duras desplazadas (la home usa solo líneas) */ .nav-pill, .rama-frame, .rama-photo-hero, .contact-band, .audience a, .lead-form { box-shadow: none !important; } .card:hover { box-shadow: none !important; transform: translateY(-3px) !important; } .audience a:hover { box-shadow: none !important; transform: translateY(-3px) !important; } /* 4 · Nav como barra editorial plana (no píldora translúcida) */ .nav-pill { background: var(--paper) !important; border: 1.5px solid var(--ink) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } /* ── BANDA DE FOTO GRANDE (full-width) ── */ .photo-band{position:relative;width:100%;height:clamp(320px,56vh,620px);overflow:hidden;border-top:1.5px solid var(--ink);border-bottom:1.5px solid var(--ink)} .photo-band img{width:100%;height:100%;object-fit:cover;display:block;filter:grayscale(1) contrast(1.04)} .photo-band .pb-cap{position:absolute;left:0;bottom:0;font-family:var(--mono);font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;background:var(--ink);color:var(--paper);padding:.5rem .8rem} /* ── CELULAR: paquetes deslizables (swipe) y proceso compacto ── */ @media (max-width: 760px){ .section .cards{display:flex;flex-wrap:nowrap;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;gap:.8rem;margin-right:-2rem;padding-right:2rem;scrollbar-width:none} .section .cards::-webkit-scrollbar{display:none} .section .cards > *{flex:0 0 82%;scroll-snap-align:start} .card{padding:1.4rem} .steps{grid-template-columns:repeat(2,1fr);gap:.8rem} .step{padding:1.1rem} .step .n{font-size:1.7rem;margin-bottom:.4rem} } /* ── HERO de rama a todo lo ancho (foto de fondo, texto encima) ── */ .rama-hero.hero-bg{min-height:88vh;padding:8rem 0 4rem;align-items:flex-end} .rama-hero.hero-bg .hero-bg-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 20%;z-index:0;filter:grayscale(1) contrast(1.04)} .rama-hero.hero-bg::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(17,17,17,.9),rgba(17,17,17,.55) 46%,rgba(17,17,17,.1) 82%),linear-gradient(to top,rgba(17,17,17,.62),transparent 48%)} .rama-hero.hero-bg .wrap{position:relative;z-index:2} .rama-hero.hero-bg .rama-hero-grid{grid-template-columns:1fr !important;max-width:660px} .rama-hero.hero-bg .rama-titulo-big{color:var(--paper)} .rama-hero.hero-bg .lead{color:rgba(244,242,237,.92)} .rama-hero.hero-bg .lead em{color:var(--paper)} .rama-hero.hero-bg .stats-row{border-top-color:rgba(244,242,237,.32)} .rama-hero.hero-bg .stats-row>div{border-right-color:rgba(244,242,237,.22)} .rama-hero.hero-bg .stat-label{color:rgba(244,242,237,.72)} .rama-hero.hero-bg .stat-value{color:var(--paper)} .rama-hero.hero-bg .btn-ghost{color:var(--paper);border-color:var(--paper)} .rama-hero.hero-bg .btn-ghost:hover{background:var(--paper);color:var(--ink)} .rama-hero.hero-bg .data-chip{color:var(--paper);border-color:rgba(244,242,237,.55)}