/* ============================================================ SAMNA · sistema visual Lenguaje Apple sobre la paleta de marca (crema #FBF0E4, tipografía grande y muy apretada, píldoras, tarjetas sin borde, nav translúcida, mucho aire) con un único acento: verde esmeralda profundo. Sin serifas. Fuentes autoalojadas, cero peticiones a terceros. Contraste comprobado sobre blanco: verde 5.19, gris secundario 7.91, gris terciario 5.07. Todos pasan AA para texto normal. ============================================================ */ /* Sin @import de fonts.css: cada página lo enlaza en su , antes que este fichero. Con el @import, la fuente no se descubría hasta terminar de bajar ESTE CSS y luego el otro: dos idas y vueltas enteras antes de pedir la letra, y en 4G el primer pintado esperaba por ello. */ :root{ /* ═══════════ PALETA DE MARCA (la que manda Irene) ═══════════ VERDE #32442F · ÁMBAR #E09132 · TAUPE #A58E74 · ARENA #F4DAB8 CREMA #FBF0E4 · OLIVA #7E7B4D · BRUMA #D9DACB Se midió el contraste de los siete antes de repartirlos, y el resultado manda sobre el gusto: VERDE sobre CREMA .... 9.33 → el único que vale para texto OLIVA sobre CREMA .... 3.87 → sólo texto grande (>=24px) TAUPE sobre CREMA .... 2.78 → NO vale para texto ÁMBAR sobre CREMA .... 2.26 → NO vale para texto Así que ÁMBAR y TAUPE no llevan una sola letra encima de fondo claro: son formas, filetes, rellenos e iconos grandes. Poner un enlace en ámbar sobre crema es ilegible, y este público tiene niebla mental y migraña: aquí un texto flojo no es un detalle estético, es alguien que abandona la página. ═══════════════════════════════════════════════════════════ */ --crema:#FBF0E4; --arena:#F4DAB8; --bruma:#D9DACB; --verde:#32442F; --ambar:#E09132; --taupe:#A58E74; --oliva:#7E7B4D; /* Los nombres de siempre siguen existiendo y ahora apuntan a la paleta nueva: así el cambio de marca no obliga a repasar 3.000 líneas de CSS buscando cada uso. */ --white:var(--crema); --gray:#F7EEE4; --gray-2:var(--bruma); /* Tinta. Todo el texto es VERDE sobre fondos claros: es el único que pasa. Los tres niveles se separan con opacidad del mismo verde y no con grises, para que no aparezca un gris frío en una paleta cálida. */ --ink:#32442F; --ink-2:#4A5A46; --ink-3:#5E6E59; --line:#DCCFBC; /* Secciones oscuras: verde profundo, no negro. */ --black:#32442F; --on-black:#FBF0E4; --on-black-2:#CFC5B2; /* El acento sigue llamándose green por compatibilidad, pero es el VERDE de marca. Sobre verde oscuro sube a ÁMBAR, que ahí sí rinde (4.13) y es el color que da carácter a la marca. */ --green:#32442F; --green-2:#3E5439; --green-soft:#F0E6D6; --green-ring:rgba(50,68,47,.18); /* El ámbar de marca sobre el verde da 4.13: vale para un titular y no para un enlace de 14px. Se sube la luminosidad sin tocar el tono. #E39B46 daba 4,51 contra el verde PLANO, pero la sección lleva degradado, halo ámbar y grano, y medido sobre los píxeles de verdad detrás del antetítulo se quedaba en 3,5-4,0. #EBB779 da 4,5 en el peor píxel. Sigue siendo el mismo ámbar, un punto más claro. */ --green-on-black:#EBB779; /* Ámbar y taupe, sólo para lo que NO es texto. */ --acento:#E09132; --acento-suave:rgba(224,145,50,.16); --taupe-linea:rgba(165,142,116,.45); --sans:'Inter Tight', -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', sans-serif; --wrap:1024px; --wrap-wide:1180px; --pill:980px; --radius:18px; --radius-lg:28px; --shadow:0 4px 24px rgba(0,0,0,.06); --shadow-md:0 8px 30px rgba(0,0,0,.09); --shadow-lg:0 12px 44px rgba(0,0,0,.12); --nav-h:48px; --ease:cubic-bezier(.4,0,.2,1); } *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} /* Sin scroll-behavior global a propósito: un salto de 8.000 px suave es el peor estímulo posible para este público. Lo decide samna.js según la distancia (cerca = suave, lejos = salto seco). */ html{ -webkit-text-size-adjust:100%; scroll-padding-top:calc(var(--nav-h) + 20px); /* 'clip' y no 'hidden': hidden en el html rompe position:sticky y la nav dejaría de quedarse arriba. */ overflow-x:clip; } body{ background:var(--white); color:var(--ink); font-family:var(--sans); font-size:17px; line-height:1.47; letter-spacing:-.012em; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; /* Aquí NO va overflow-x:hidden. Con el html en 'clip', el overflow del body ya no pasa al viewport: el body se convertía en su propia caja de scroll (overflow-y calculaba 'auto'), una caja que nunca se desplaza, y la nav sticky se anclaba a ella y se iba con la página. Lo único que se salía por los lados era el halo del hero, y ése se recorta en su sección. */ } img,svg{max-width:100%;height:auto;display:block} a{color:inherit;text-decoration:none} ::selection{background:var(--green);color:var(--crema)} :focus-visible{outline:3px solid var(--green);outline-offset:3px;border-radius:6px} /* En las secciones oscuras el fondo ES el verde del anillo (1,0-1,14:1): el foco no se veía. Crema sobre verde da 8,2:1. */ .sec-ink :focus-visible{outline-color:var(--on-black)} .skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:var(--crema);padding:12px 20px;z-index:300;border-radius:0 0 8px 0} .skip:focus{left:0;top:0} .wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 22px} .wrap-wide{max-width:var(--wrap-wide)} .narrow{max-width:700px;margin-left:auto;margin-right:auto} /* ---------- Tipografía ---------- */ h1,h2,h3,h4{font-weight:600;letter-spacing:-.022em;line-height:1.08} h1{font-size:clamp(40px,6.4vw,80px);letter-spacing:-.032em;line-height:1.05;text-wrap:balance} h2{font-size:clamp(32px,4.6vw,56px);letter-spacing:-.028em;line-height:1.07;text-wrap:balance} h3{font-size:clamp(20px,2vw,24px);letter-spacing:-.018em;line-height:1.2} p{color:var(--ink)} .lead{ font-size:clamp(19px,1.9vw,24px); line-height:1.38; letter-spacing:-.016em; color:var(--ink-2); font-weight:400; text-wrap:pretty; } .tiny{font-size:13px;line-height:1.45;color:var(--ink-3);letter-spacing:-.004em} .muted{color:var(--ink-3);font-weight:400} .num{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1} /* El antetítulo lleva un filete ámbar delante. El ámbar es el color que da carácter a esta marca, pero no puede llevar texto: sobre crema da 2.26 y es ilegible. Así que se le da el trabajo de marcar dónde empieza cada sección — un gráfico, no una letra— y con eso pasa de estar en el 0,01% de la página a verse en cada bloque. */ .kicker{ display:block; font-size:15px; font-weight:600; color:var(--green); letter-spacing:-.01em; margin-bottom:10px; } .sec-head .kicker::before{ content:'';display:block; width:34px; height:3px; border-radius:2px; background:var(--acento); margin:0 auto 14px; } /* Cuando la sección no va centrada, el filete tampoco. */ .sec-head.izq .kicker::before{margin-left:0} .link{color:var(--green);font-size:17px;letter-spacing:-.012em;display:inline-flex;align-items:center;gap:3px} .link:hover{text-decoration:underline} .link::after{content:'›';font-size:1.25em;line-height:0;transform:translateY(.02em)} /* ---------- Secciones ---------- */ section{padding:clamp(76px,10vw,132px) 0} .sec-gray{background:var(--gray)} .sec-ink{background:var(--black);color:var(--on-black)} .sec-ink h1,.sec-ink h2,.sec-ink h3{color:var(--white)} .sec-ink p,.sec-ink .lead,.sec-ink .tiny{color:var(--on-black-2)} .sec-ink .kicker{color:var(--green-on-black)} .tight{padding:clamp(60px,7vw,92px) 0} .sec-head{max-width:760px;margin:0 auto clamp(44px,5vw,68px);text-align:center} .sec-head .lead{margin-top:18px} .sec-head.left{margin-left:0;text-align:left} /* ---------- Nav ---------- */ .demo-bar{ background:var(--black); color:var(--on-black-2); font-size:12px; letter-spacing:-.004em; text-align:center; padding:9px 16px; } .nav{ position:sticky; top:0; z-index:100; background:rgba(255,255,255,.72); -webkit-backdrop-filter:saturate(180%) blur(20px); backdrop-filter:saturate(180%) blur(20px); border-bottom:1px solid rgba(0,0,0,.07); transition:background .3s var(--ease), border-color .3s var(--ease); } /* Al bajar se opaca y marca el borde: el gesto de apple.com. */ .nav.scrolled{background:rgba(255,255,255,.9);border-bottom-color:rgba(0,0,0,.12)} .nav .row{display:flex;align-items:center;justify-content:space-between;height:var(--nav-h);gap:20px} .nav .brand{font-size:18px;font-weight:600;letter-spacing:-.022em;white-space:nowrap} .nav .brand span{color:var(--ink-3);font-weight:400;font-size:14px;letter-spacing:-.01em} .nav nav ul{display:flex;gap:clamp(18px,3vw,34px);list-style:none} /* 14 px y no 12: es la navegación principal y el público lee con presbicia. Medido de 821 a 1280 px: cabe sin tocar la marca ni el botón. */ .nav nav a{font-size:14px;color:var(--ink);opacity:.85;letter-spacing:-.004em;transition:color .2s var(--ease),opacity .2s var(--ease)} .nav nav a:hover{opacity:1;color:var(--green)} /* ---------- Botones ---------- */ .btn{ display:inline-flex; align-items:center; justify-content:center; font-family:inherit; font-size:17px; font-weight:400; letter-spacing:-.012em; padding:12px 23px; border:1px solid transparent; border-radius:var(--pill); cursor:pointer; transition:background .22s var(--ease), color .22s var(--ease), transform .12s var(--ease), box-shadow .22s var(--ease), opacity .2s; white-space:nowrap; text-align:center; } .btn:active{transform:scale(.975)} .btn[disabled]{opacity:.55;cursor:default;transform:none} .btn-primary{background:var(--green);color:var(--crema);box-shadow:0 1px 2px rgba(50,68,47,.2)} .btn-primary:hover{background:var(--green-2);box-shadow:0 4px 14px rgba(50,68,47,.28)} .btn-ghost{background:transparent;color:var(--green);border-color:var(--green)} .btn-ghost:hover{background:var(--green);color:var(--crema)} .btn-ink{background:var(--white);color:var(--ink)} .btn-ink:hover{background:var(--gray)} .btn-sm{font-size:14px;padding:7px 16px} .btn-block{width:100%} /* ---------- Hero ---------- */ .hero{ padding:clamp(68px,9vw,124px) 0 clamp(56px,7vw,96px); text-align:center; position:relative; isolation:isolate; /* El halo mide un 140 % del ancho y se sale por los lados: en el móvil ensanchaba la página a 469 px. 'clip' sólo en horizontal, para que siga asomando por arriba, y sin crear caja de scroll (hidden sí la crea). */ overflow-x:clip; } /* Halo verde muy tenue: da profundidad sin usar ni una foto. */ .hero::before{ content:'';position:absolute;z-index:-1; top:-160px;left:50%;transform:translateX(-50%); width:min(1100px,140%);height:620px; background:radial-gradient(ellipse at 50% 40%, rgba(50,68,47,.09) 0%, rgba(50,68,47,.035) 38%, rgba(50,68,47,0) 70%); pointer-events:none; } .hero .lead{max-width:620px;margin:22px auto 0} .hero-cta{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-top:34px} /* Dos filas para que TODAS las etiquetas queden alineadas aunque un valor ocupe dos líneas ("4 semanas" junto a "10"). */ .hero-facts{ display:grid;grid-template-columns:repeat(4,1fr); gap:20px;margin:clamp(56px,7vw,88px) auto 0; max-width:800px; } .hero-facts .fact{text-align:center;display:grid;grid-template-rows:1fr auto;gap:8px} .hero-facts .v{ align-self:end; font-size:clamp(26px,2.9vw,38px);font-weight:600; letter-spacing:-.028em;line-height:1.08; font-variant-numeric:tabular-nums;text-wrap:balance; } .hero-facts .l{font-size:14px;color:var(--ink-3);letter-spacing:-.004em} /* ---------- Rejillas y tarjetas ---------- */ .grid{display:grid;gap:clamp(18px,2.4vw,26px)} .g2{grid-template-columns:repeat(2,1fr)} .g4{grid-template-columns:repeat(4,1fr)} .card{ background:var(--gray); border-radius:var(--radius-lg); padding:clamp(26px,3.2vw,38px); transition:transform .3s var(--ease), box-shadow .3s var(--ease); } .card h3{margin-bottom:10px} .card p{color:var(--ink-2);font-size:16px} .sec-ink .card{background:#2A3A27} .sec-ink .card p{color:var(--on-black-2)} .sec-gray .card{background:var(--white);box-shadow:var(--shadow)} /* ---------- Listas con marca ---------- */ .ticks{list-style:none;display:grid;gap:14px} .ticks li{ position:relative;padding-left:31px; font-size:17px;color:var(--ink-2);letter-spacing:-.012em; } .ticks li::before{ content:'';position:absolute;left:0;top:.4em; width:17px;height:9px; /* En ámbar: son la lista de "si te reconoces en esto", el momento en que ella se está viendo reflejada. Que el ojo las recorra es exactamente lo que interesa aquí. */ border-left:2px solid var(--acento);border-bottom:2px solid var(--acento); transform:rotate(-45deg);border-radius:1px; } .ticks li strong{color:var(--ink);font-weight:600} .sec-ink .ticks li{color:var(--on-black-2)} .sec-ink .ticks li::before{border-color:var(--green-on-black)} .sec-ink .ticks li strong{color:var(--white)} /* ---------- Pilares ---------- */ .pilar{ display:flex;gap:22px;align-items:flex-start; padding:26px 0; border-top:1px solid rgba(255,255,255,.12); } .pilar:first-child{border-top:0} .pilar .letra{ font-size:clamp(30px,3.4vw,42px);font-weight:600; letter-spacing:-.03em;line-height:1; min-width:52px;color:var(--green-on-black); } .pilar h3{margin-bottom:6px} /* ---------- Semanas ---------- */ .semana{ display:flex;gap:clamp(20px,3vw,40px);align-items:flex-start; padding:clamp(24px,3vw,34px) 0; border-top:1px solid var(--line); } .semana:first-of-type{border-top:0} .semana .n{ flex:0 0 auto;min-width:104px; font-size:14px;font-weight:600;color:var(--green); letter-spacing:-.008em;padding-top:5px; } .semana h3{margin-bottom:7px} .semana p{color:var(--ink-2);font-size:16px} /* ---------- Caja de precio ---------- */ .precio-box{ background:var(--white); border-radius:var(--radius-lg); padding:clamp(28px,3.4vw,40px); box-shadow:var(--shadow-lg); position:relative;overflow:hidden; } /* Filo arriba: convierte la caja en el ancla visual de la página. Va de verde a ámbar porque es el único sitio donde los dos colores de marca aparecen juntos, y es justo donde se decide la compra. */ .precio-box::before{ content:'';position:absolute;top:0;left:0;right:0;height:4px; background:linear-gradient(90deg,var(--green) 0%,var(--acento) 100%); } .sec-ink .precio-box{background:#2A3A27;box-shadow:none} .precio-cifra{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap} .precio-cifra .v{ font-size:clamp(44px,5.6vw,64px);font-weight:600; letter-spacing:-.032em;line-height:1;font-variant-numeric:tabular-nums; } .precio-cifra .antes{ font-size:20px;color:var(--ink-3); text-decoration:line-through;font-variant-numeric:tabular-nums; } .precio-meta{ display:grid;gap:1px;background:var(--line); border-radius:14px;overflow:hidden;margin:26px 0 4px; } .precio-meta div{ display:flex;justify-content:space-between;align-items:center; background:var(--white);padding:13px 16px; } .precio-meta .k{font-size:15px;color:var(--ink-2)} .precio-meta .v{font-size:15px;font-weight:600;font-variant-numeric:tabular-nums} /* ---------- Formularios ---------- */ .form{display:grid;gap:16px;margin-top:26px} .field{display:grid;gap:7px} /* Etiquetas, consentimiento y avisos: el público ronda los 45-60, con presbicia y el móvil en la mano. Lo que hay que leer para decidir no baja de 15 px; lo accesorio, de 13. */ .field label{font-size:15px;font-weight:500;color:var(--ink-2);letter-spacing:-.004em} /* El contorno del campo es lo ÚNICO que dice "aquí se escribe": el fondo del campo y el de la caja eran el mismo crema, y el borde --line daba 1,36:1. Al sol, con presbicia, eran dos rectángulos fantasma. #8C7F6A es el mismo taupe cálido, oscurecido hasta 3,5:1 (WCAG 1.4.11 pide 3), y el campo va un punto más claro que la caja para despegarse de ella. */ .field input,.field select,.field textarea{ font-family:inherit;font-size:17px;color:var(--ink);letter-spacing:-.012em; background:#FFFDF9; border:1.5px solid #8C7F6A;border-radius:12px; padding:13px 15px;width:100%; transition:border-color .18s var(--ease), box-shadow .18s var(--ease); } .field textarea{resize:vertical;min-height:96px;line-height:1.45} .field input:focus,.field select:focus,.field textarea:focus{ outline:none;border-color:var(--green);box-shadow:0 0 0 4px var(--green-ring); } .field input::placeholder,.field textarea::placeholder{color:var(--ink-3)} .sec-ink .field input,.sec-ink .field select,.sec-ink .field textarea{ background:var(--verde);border-color:#4E6048;color:var(--white); } .sec-ink .field label{color:var(--on-black-2)} .sec-ink .field input:focus,.sec-ink .field textarea:focus{ border-color:var(--green-on-black);box-shadow:0 0 0 4px rgba(224,145,50,.22); } .consent{display:flex;gap:11px;align-items:flex-start;font-size:15px;color:var(--ink-2);line-height:1.45} .consent input{margin-top:2px;accent-color:var(--green);width:16px;height:16px;flex:0 0 auto} .sec-ink .consent{color:var(--on-black-2)} .honey{position:absolute!important;left:-9999px!important;width:1px;height:1px;opacity:0} /* El enlace a la privacidad va FUERA del