/* ══════════════════════════════════════════════════════════════════ KAPAY STUDIO — sistema visual "A2 · editorial centrado" ------------------------------------------------------------------ Superficie arena, Fraunces de display, DM Sans de texto, eje simétrico y medida estrecha. El naranja de marca (#e8821e) NO se toca: lo único que cambia respecto a Platform es el suelo. Se carga DESPUÉS de main.css y mobile.css en las páginas de Studio. ══════════════════════════════════════════════════════════════════ */ /* ── Tema ────────────────────────────────────────────────────────── Va en , no en : main.css declara `html, body { background: var(--bg) }` y el fondo del elemento raíz se propaga al lienzo. Además hace falta la clase para ganarle en especificidad a `:root` (0,1,0) — un `html` pelado (0,0,1) pierde. */ html.studio { --bg: #f6f1e8; /* arena */ --surface: #efe7d9; /* arena honda: cápsula del nav, bloques */ --text: #241f1a; /* tinta cálida, no azulada */ --muted: #6f6558; --border: #e2d8c8; --dim: #c3b7a4; /* frases en negativo del posicionamiento */ --nav-bg: rgba(246,241,232,.94); --serif: 'Fraunces', Georgia, 'Times New Roman', serif; } html.studio, html.studio body { background: var(--bg); } html.studio body { color: var(--text); } /* main.css fija la barra en blanco: sobre arena cantaría */ html.studio .navbar { background: var(--nav-bg); } /* La marca de la barra ya no necesita reglas propias: el conmutador Platform / Studio de main.css dice en qué contexto estás, y el resto (cápsula, separador, punto naranja) sale de --surface y --border, que este mismo bloque html.studio acaba de redefinir en arena. */ /* ── Contenedores ──────────────────────────────────────────────── */ .a2-wrap { max-width: 800px; margin: 0 auto; padding: 0 40px; text-align: center; } .a2-wide { max-width: 960px; } /* Medida de lectura: el centrado no aguanta líneas largas */ .a2-lead { font-size: clamp(16.5px, 1.7vw, 18px); line-height: 1.72; color: var(--muted); max-width: 520px; margin-left: auto; margin-right: auto; } .a2-body { font-size: 16.5px; line-height: 1.75; color: var(--muted); max-width: 480px; margin-left: auto; margin-right: auto; } .a2-body + .a2-body { margin-top: 16px; } /* ── Tipografía ────────────────────────────────────────────────── */ .a2-eyebrow { display: block; font-size: 11.5px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); margin-bottom: 30px; } .a2-eyebrow-orange { color: var(--primary); } .a2-h1 { font-family: var(--serif); font-optical-sizing: auto; font-size: clamp(40px, 6vw, 74px); font-weight: 400; line-height: 1.02; letter-spacing: -.026em; color: var(--text); } .a2-h2 { font-family: var(--serif); font-optical-sizing: auto; font-size: clamp(29px, 3.9vw, 46px); font-weight: 400; line-height: 1.1; letter-spacing: -.022em; color: var(--text); } .a2-h3 { font-family: var(--serif); font-size: clamp(23px, 2.4vw, 27px); font-weight: 400; letter-spacing: -.014em; color: var(--text); } .a2-h1 em, .a2-h2 em { font-style: italic; font-weight: 300; color: var(--primary); } /* ── Filete corto naranja: el separador de la casa ─────────────── */ .a2-rule { width: 46px; height: 1px; background: var(--primary); margin: 0 auto; border: 0; } .a2-hair { height: 1px; background: var(--border); border: 0; } /* ── Secciones ─────────────────────────────────────────────────── */ .a2-sec { padding: 104px 0; } .a2-sec-s { padding: 76px 0; } .a2-hero { padding: 172px 0 100px; } .a2-close { padding: 118px 0 128px; } .a2-tint { background: var(--surface); } /* ── Acciones ──────────────────────────────────────────────────── */ .a2-btn { display: inline-flex; align-items: center; gap: 10px; background: var(--primary); color: #fff; padding: 15px 34px; border-radius: 100px; font-size: 15px; font-weight: 600; letter-spacing: -.005em; transition: background .2s, transform .15s, box-shadow .2s; } .a2-btn:hover { background: var(--primary-dark); color: #fff; transform: translateY(-1px); box-shadow: 0 8px 24px rgba(232,130,30,.28); } /* WhatsApp deliberadamente SIN el verde de marca: en un eje centrado y sobrio el botón verde rompe el registro. Va como enlace discreto. */ .a2-sub { display: block; margin-top: 16px; font-size: 14px; color: var(--muted); } .a2-sub a { color: var(--text); border-bottom: 1px solid var(--border); } .a2-sub a:hover { color: var(--primary); border-bottom-color: var(--primary); } /* ── Declaración de posicionamiento ────────────────────────────── */ .a2-statement p { font-family: var(--serif); font-size: clamp(24px, 3.3vw, 39px); font-weight: 300; line-height: 1.26; letter-spacing: -.018em; color: var(--dim); } .a2-statement p.on { color: var(--text); font-weight: 400; font-style: italic; margin-top: .3em; } /* ── Método numerado ───────────────────────────────────────────── */ .a2-step { padding: 34px 0; border-top: 1px solid var(--border); } .a2-step:last-child { border-bottom: 1px solid var(--border); } .a2-num { display: block; font-family: var(--serif); font-size: 15px; font-weight: 400; color: var(--primary); letter-spacing: .1em; margin-bottom: 10px; } .a2-step .a2-h3 { margin-bottom: 9px; } .a2-step p { font-size: 16px; line-height: 1.62; color: var(--muted); max-width: 440px; margin: 0 auto; } /* ── Tipos de producto (página "What we build") ────────────────── */ .a2-shape { padding: 40px 0; border-top: 1px solid var(--border); } .a2-shape:last-child { border-bottom: 1px solid var(--border); } .a2-shape .a2-h3 { margin-bottom: 12px; } .a2-shape p { font-size: 16.5px; line-height: 1.65; color: var(--muted); max-width: 470px; margin: 0 auto; } .a2-replaces { display: inline-block; margin-top: 16px; font-size: 13.5px; line-height: 1.55; color: var(--dim); max-width: 430px; } .a2-replaces b { color: var(--muted); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; font-size: 11px; display: block; margin-bottom: 5px; } /* ── Puntos prácticos ──────────────────────────────────────────── */ .a2-points { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--border); } .a2-point { background: var(--bg); padding: 34px 30px 38px; } .a2-tint .a2-point { background: var(--surface); } .a2-point h4 { font-family: var(--serif); font-size: 21px; font-weight: 400; letter-spacing: -.012em; margin-bottom: 10px; color: var(--text); } .a2-point p { font-size: 15.5px; line-height: 1.62; color: var(--muted); max-width: 330px; margin: 0 auto; } /* ── Lista simple centrada ─────────────────────────────────────── */ .a2-plain { list-style: none; padding: 0; margin: 0 auto; max-width: 470px; } .a2-plain li { padding: 15px 0; border-bottom: 1px solid var(--border); font-size: 16.5px; line-height: 1.55; color: var(--muted); } .a2-plain li:first-child { border-top: 1px solid var(--border); } .a2-plain li b { color: var(--text); font-weight: 600; } /* ── La prueba: la única imagen de Studio ────────────────────────── Va más ancha que la medida de lectura (.a2-wrap son 800px) para que se lea como el elemento excepcional que es. Filete fino y sin sombra: en un eje centrado y sobrio una sombra la convertiría en decoración. */ .a2-shot { max-width: 960px; margin: 46px auto 0; padding: 0 40px; } .a2-shot img { display: block; width: 100%; height: auto; border: 1px solid var(--border); border-radius: 6px; } .a2-shot figcaption { margin-top: 15px; text-align: center; font-size: 13.5px; line-height: 1.5; color: var(--dim); } /* ── Móvil ─────────────────────────────────────────────────────── */ @media (max-width: 768px) { .a2-wrap { padding: 0 24px; } .a2-shot { padding: 0 24px; margin-top: 36px; } .a2-hero { padding: 122px 0 76px; } .a2-sec { padding: 76px 0; } .a2-sec-s { padding: 60px 0; } .a2-close { padding: 86px 0 92px; } .a2-points { grid-template-columns: 1fr; } .a2-shape { padding: 32px 0; } .a2-btn { width: 100%; justify-content: center; padding: 16px 24px; } }