html { scroll-behavior: smooth; }
[hidden] { display: none !important; }
/* Logo: wordmark in Inter (the brand kit's font) with the tagline under it. */
.brand { display: inline-flex; flex-direction: column; gap: 3px; line-height: 1; }
.brand-word { font-family: Inter, system-ui, sans-serif; font-weight: 800; letter-spacing: -0.035em; white-space: nowrap; }
.brand-tag { font-family: Inter, system-ui, sans-serif; font-size: 9px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: #5A6072; white-space: nowrap; }
body { margin: 0; font-family: Outfit, system-ui, sans-serif; color: #23293A; background: #F5F3EE; }
a { color: #23293A; }
a:hover { color: #2F6FDE; }
input, button { font-family: inherit; }
input:focus-visible, a:focus-visible, button:focus-visible { outline: 3px solid #2F6FDE; outline-offset: 2px; }
.sticky-dock, .ig-pair, .ba-bar, .ba-knob, .ba-range { display: none; }
/* Phone layout: the same page as desktop (same content, order and images); only spacing, type size and
column count change. The pages use inline styles for desktop, so these overrides need !important. */
@media (max-width: 640px) {
@media (prefers-reduced-motion: reduce) { .src-track { animation: none; } }
/* Header and hero. */
.hero-zone > header { padding: 12px 16px !important; flex-wrap: nowrap !important; gap: 8px !important; }
.hero-zone > header > div:first-child { white-space: nowrap; font-size: 18px !important; gap: 8px !important; }
.hero-zone > header > div:first-child svg { width: 38px; height: 38px; }
.brand-tag { font-size: 7.5px !important; letter-spacing: 0.08em !important; white-space: normal !important; max-width: 118px; line-height: 1.25; }
.site-nav { gap: 8px !important; flex-wrap: nowrap !important; font-size: 14px !important; }
.site-nav a { white-space: nowrap; }
.site-nav a:last-child { min-height: 44px; display: inline-flex; align-items: center; box-sizing: border-box; white-space: nowrap; padding: 0 12px !important; }
#buscar { padding: 14px 16px 0 !important; }
#buscar h1 { font-size: 33px !important; line-height: 1 !important; }
/* 1. The hook: two Instagram-style posts side by side, "lo que ves online" against "lo real",
with the buttons right under them. Desktop keeps the two big cards (.ig-cards). */
.ig-cards { display: none !important; }
.ig-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 12px 12px; }
.igp { min-width: 0; background: #FFFFFF; border: 1px solid #DBDBDB; border-radius: 14px; overflow: hidden; color: #000000;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; display: flex; flex-direction: column; }
.igp-head { display: flex; align-items: center; gap: 6px; padding: 7px 8px; }
/* Avatar: Instagram story ring (gradient), a white gap, then the navy picture. */
.igp-av { flex: 0 0 auto; width: 28px; height: 28px; border-radius: 999px; padding: 2px; box-sizing: border-box;
background: conic-gradient(from 200deg, #FEDA75, #FA7E1E, #D62976, #962FBF, #4F5BD5, #FEDA75); }
.real .igp-av { background: conic-gradient(from 200deg, #FF6B4A, #FFD27A, #FF6B4A); }
.igp-av > span { width: 100%; height: 100%; border-radius: 999px; border: 2px solid #FFFFFF; box-sizing: border-box; background: #23293A; color: #FFFFFF;
display: flex; align-items: center; justify-content: center; font-size: 8px; font-weight: 700; }
.igp-av svg { width: 15px; height: 15px; }
.igp-who { min-width: 0; display: flex; flex-direction: column; line-height: 1.15; }
.igp-who b { font-size: 11.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.igp-who span { font-size: 10px; color: #262626; }
.igp-img { position: relative; }
.igp-img img { display: block; width: 100%; aspect-ratio: 6 / 5; object-fit: cover; }
.igp-tag { position: absolute; left: 6px; bottom: 6px; font-family: Outfit, system-ui, sans-serif; font-size: 11px; font-weight: 800; padding: 4px 8px; border-radius: 999px; background: #FFFFFF; color: #23293A; }
.igp-tag.real { background: #FF6B4A; }
.igp-act { display: flex; gap: 10px; padding: 7px 8px 2px; }
.igp-act svg { width: 19px; height: 19px; fill: none; stroke: #000000; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.igp-likes { padding: 2px 8px; font-size: 11.5px; font-weight: 600; }
.igp-cap { margin: 1px 8px 0; font-size: 11.5px !important; line-height: 1.35 !important; }
.igp-find { display: flex; flex-direction: column; gap: 3px; }
.igp-find b { font-weight: 600; }
.igp-find span { display: flex; gap: 5px; align-items: flex-start; font-weight: 600; line-height: 1.25; }
.igp-more { margin-top: auto; padding: 4px 8px 8px; font-size: 11px; color: #737373; line-height: 1.35; }
.igp-more small { font-size: 9px; letter-spacing: 0.03em; }
.igp-find i { flex: 0 0 auto; width: 7px; height: 7px; margin-top: 4px; border-radius: 2px; }
.hero-ctas { padding: 0 16px 48px !important; gap: 8px !important; }
.hero-ctas > div { flex-direction: column; width: 100%; gap: 8px !important; }
.hero-ctas > div > a { height: 52px !important; }
/* 4. Buttons: full width, 56px tall. */
.hero-ctas > div > a, #ejemplo > div > div:first-child > div:last-child > a, .cta-final { width: 100%; height: 56px !important; padding: 0 20px !important; justify-content: center !important; box-sizing: border-box; font-size: 17px !important; }
#ejemplo > div > div:first-child > div:last-child { flex-direction: column; align-items: stretch !important; width: 100%; }
#ejemplo > div > div:first-child > div:last-child > a { position: relative; }
#ejemplo > div > div:first-child > div:last-child > a > span { position: absolute; right: 8px; }
#ejemplo > div > div:first-child > div:last-child > a:has(> span) { padding: 0 56px 0 20px !important; font-size: 16px !important; }
/* Caution block: tape items one per line (no dangling ✕), coral text clear of the clipped edges. */
#mercado { padding: 16px 0 40px !important; }
.tape-txt { font-size: 16px !important; line-height: 1.25 !important; padding: 12px 8% 13px !important; gap: 4px !important; }
.tape-txt > div:first-child { gap: 2px 12px !important; }
.tape-txt span[aria-hidden] { display: none; }
.tape-txt > div:first-child > span:not([aria-hidden])::before, .tape-txt > div:last-child::before { content: "✕ "; color: #FF6B4A; }
#mercado > div:first-child > div:first-child, #mercado > div:first-child > div:last-child { height: 9px !important; }
#mercado > div:last-child { font-size: 17px !important; padding-top: 12px !important; padding-bottom: 12px !important; }
#mercado > div:last-child { box-sizing: border-box; padding-left: 12% !important; padding-right: 12% !important; }
#historia > div { padding: 60px 16px 64px !important; gap: 28px !important; }
/* 2. AI photos: one before/after slider. The listing photo sits on top, cut at --x. */
.ba { display: grid !important; position: relative; border-radius: 18px; overflow: hidden; touch-action: pan-y; }
.ba > figure { grid-area: 1 / 1; border-radius: 0 !important; border: 0 !important; }
.ba > figure img { aspect-ratio: 4 / 3 !important; }
.ba > figure:first-of-type { z-index: 1; clip-path: inset(0 calc(100% - var(--x, 50%)) 0 0); }
.ba > figure:last-of-type figcaption { left: auto !important; right: 10px; background: #FF6B4A !important; color: #23293A !important; }
.ba figcaption { font-size: 12px !important; padding: 5px 10px !important; top: 10px !important; }
.ba > figure:first-of-type figcaption { left: 10px !important; }
.ba-bar { display: block; position: absolute; z-index: 2; top: 0; bottom: 0; left: var(--x, 50%); width: 3px; margin-left: -1.5px; background: #F5F3EE; pointer-events: none; }
.ba-knob { display: flex; position: absolute; z-index: 2; top: 50%; left: var(--x, 50%); width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 999px; background: #FF6B4A; border: 3px solid #23293A; box-sizing: border-box; align-items: center; justify-content: center; font-weight: 800; color: #23293A; pointer-events: none; }
.ba-range { display: block; position: absolute; z-index: 3; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; }
/* Other sections: tighter padding. */
#ejemplo > div, #costos, #revisar > div { padding-left: 16px !important; padding-right: 16px !important; }
#ejemplo > div, #revisar > div { padding-top: 56px !important; padding-bottom: 56px !important; }
/* 5. Phone type scale: section titles 30px, sub-titles 26px; 56px between sections. */
h2 { font-size: 30px !important; line-height: 1.02 !important; }
h3 { font-size: 26px !important; line-height: 1.05 !important; }
#nosotros .nosotros-in { padding: 56px 16px !important; gap: 24px !important; }
#costos { padding-top: 56px !important; padding-bottom: 56px !important; gap: 32px !important; }
.divisor > div { padding: 36px 16px !important; }
#revisar [style*="max-width: 320px"] { flex: 1 1 0 !important; min-width: 0; padding: 14px !important; }
#revisar [style*="font-size: 40px"] { font-size: 32px !important; }
#revisar [style*="letter-spacing: 0.06em"] { font-size: 12px !important; letter-spacing: 0.02em !important; white-space: nowrap; }
/* Cost breakdown: one row per line so the labels don't wrap. */
#costos [style*="grid-template-columns: repeat(2, minmax(0, 1fr))"] { grid-template-columns: 1fr !important; gap: 10px !important; }
/* Día 0 sample report: compact so the whole card fits one iPhone screen. Tag sits above each finding. */
#ejemplo [style*="padding: 0 0 18px 18px"] { padding: 0 0 8px 8px !important; }
#ejemplo [style*="padding: 22px 26px"] { padding: 12px 14px !important; gap: 8px !important; }
#ejemplo [style*="padding: 22px 26px"] [style*="letter-spacing: 0.08em"] { font-size: 11px !important; }
#ejemplo [style*="font-size: 24px; letter-spacing: -0.01em"] { font-size: 19px !important; margin-top: 2px !important; }
#ejemplo [style*="padding: 5px 11px"] { font-size: 12px !important; padding: 3px 9px !important; }
#ejemplo [style*="padding: 8px 26px 4px"] { padding: 0 14px !important; }
#ejemplo [style*="gap: 14px; padding: 16px 0"] { flex-direction: column; gap: 4px !important; padding: 10px 0 !important; }
#ejemplo [style*="padding: 4px 9px"] { font-size: 11px !important; padding: 2px 8px !important; }
#ejemplo [style*="font-weight: 700; font-size: 17px"] { font-size: 15px !important; line-height: 1.25; }
#ejemplo [style*="margin-top: 2px"] { font-size: 12.5px !important; line-height: 1.35 !important; }
#ejemplo [style*="padding: 16px 0 20px"] { padding: 10px 0 12px !important; gap: 6px !important; }
#ejemplo [style*="padding: 14px 26px"] { padding: 9px 14px !important; font-size: 12.5px !important; }
/* Sources: one semi-transparent band whose names scroll by (mobile.js builds the moving track). */
#nosotros .nosotros-in > div:last-child { display: block !important; overflow: hidden; white-space: nowrap; font-size: 15px !important;
background: rgba(35,41,58,0.06); border-radius: 999px; padding: 12px 0;
-webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.src-track { display: inline-flex; gap: 22px; padding-left: 22px; animation: src-roll 40s linear infinite; }
@keyframes src-roll { to { transform: translateX(-50%); } }
/* Small labels: at least 13–14px on a phone. */
[style*="font-size: 11px"], [style*="font-size: 12px"] { font-size: 13px !important; }
[style*="font-size: 13px"] { font-size: 14px !important; }
/* Sticky call to action, shown by mobile.js once the hero buttons scroll away. It sits in a cream dock
so Safari tints its toolbar cream instead of coral. */
.sticky-dock { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
background: rgba(245,243,238,0.96); border-top: 1px solid #E3DED3; transform: translateY(110%); transition: transform 0.2s ease; }
.sticky-dock.show { transform: none; }
.sticky-cta { display: flex; height: 52px; align-items: center; justify-content: center; background: #FF6B4A; color: #23293A; font-weight: 800; font-size: 17px;
border: 2px solid #23293A; border-radius: 999px; text-decoration: none; box-sizing: border-box; }
footer { padding-bottom: 80px; }
}