/* Entrada común · Camila Business Suite. Dos puertas de igual peso: una conversación y una revista por oficios. */
:root {
  --bg: #FBFAF8; --ink: #15161A; --muted: #5C6068; --line: #DEDDD8;
  --cm-bg: #FFF1EE; --cm-acc: #E8452F; --cm-font: 'Figtree', system-ui, sans-serif;
  --of-bg: #F1F2EE; --of-display: 'Bricolage Grotesque', 'Arial Black', sans-serif;
  --agro: #C99A06; --mar: #0B5FA5; --salud: #1F8A70; --deporte: #D7372B; --profesional: #3B3FB6; --comercio: #E06A1B; --auto: #5B6470;
  --mono: 'DM Mono', ui-monospace, monospace; --ease: cubic-bezier(.16,1,.3,1);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) { :root {
  --bg: #0E0F11; --ink: #F3F2EE; --muted: #A6A9AF; --line: #2A2C30; --cm-bg: #2A1A17; --cm-acc: #FF6A55; --of-bg: #17181B;
  --agro: #E8B923; --mar: #3B8FDB; --salud: #3DB892; --deporte: #F2584A; --profesional: #7E82F0; --comercio: #F58A3D; --auto: #8A94A3; color-scheme: dark; } }
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 17px/1.5 var(--cm-font); -webkit-font-smoothing: antialiased; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--ink); color: var(--bg); padding: 8px 14px; border-radius: 8px; z-index: 60; }
.skip:focus { left: 8px; }
.stage { min-height: 100svh; max-width: 1400px; margin: 0 auto; padding: clamp(14px, 2.4vw, 28px) clamp(16px, 3.4vw, 44px); display: grid; grid-template-rows: auto auto 1fr auto; gap: clamp(14px, 2.4vw, 28px); }
.top { display: flex; justify-content: space-between; align-items: center; font: 500 .8rem var(--mono); letter-spacing: .05em; text-transform: uppercase; }
.top p, .base p { margin: 0; }
.brand { display: flex; align-items: center; gap: 10px; }
.brand-mark { position: relative; width: 30px; height: 20px; display: inline-block; }
.brand-mark i { position: absolute; top: 0; width: 20px; height: 20px; border-radius: 50%; }
.brand-mark i:first-child { left: 0; background: var(--cm-acc); }
.brand-mark i:last-child { left: 10px; background: var(--mar); opacity: .85; }
.top-r { color: var(--muted); }
.lead { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(16px, 4vw, 56px); align-items: end; }
.lead h1 { margin: 0; font: 800 clamp(2rem, 4.6vw, 4.1rem)/1.02 var(--cm-font); letter-spacing: -.035em; text-wrap: balance; }
.lead p { margin: 0; color: var(--muted); max-width: 46ch; font-size: 1.05rem; }
.doors { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(10px, 1.6vw, 20px); min-height: min(52vh, 520px); transition: grid-template-columns .6s var(--ease); }
.doors:has(.door-cm:hover), .doors:has(.door-cm:focus-visible) { grid-template-columns: 1.1fr .9fr; }
.doors:has(.door-of:hover), .doors:has(.door-of:focus-visible) { grid-template-columns: .9fr 1.1fr; }
.door { position: relative; display: flex; flex-direction: column; gap: 14px; padding: clamp(20px, 3vw, 40px); border-radius: 28px; text-decoration: none; overflow: hidden; border: 1.5px solid var(--line); isolation: isolate; }
.door-cm { background: var(--cm-bg); font-family: var(--cm-font); }
.door-of { background: var(--of-bg); font-family: 'Instrument Sans', system-ui, sans-serif; }
.door-k { font: 500 .78rem var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.door-h { display: block; font: 800 clamp(2.2rem, 5vw, 4.4rem)/.98 var(--cm-font); letter-spacing: -.04em; text-wrap: balance; }
.door-of .door-h { font-family: var(--of-display); letter-spacing: -.045em; }
.door-p { color: var(--muted); max-width: 42ch; font-size: 1rem; }
.door-cta { margin-top: auto; align-self: flex-start; display: inline-flex; gap: 10px; align-items: center; padding: 12px 20px; border-radius: 999px; background: var(--ink); color: var(--bg); font-weight: 700; transition: gap .3s var(--ease); }
.door:hover .door-cta, .door:focus-visible .door-cta { gap: 16px; }
.chat { display: grid; gap: 8px; justify-items: start; margin: 4px 0 2px; }
.b { padding: 10px 16px; border-radius: 22px; font-weight: 600; max-width: 30ch; animation: pop .7s var(--ease) both; }
.b-you { background: var(--bg); border: 1px solid var(--line); border-bottom-left-radius: 6px; animation-delay: .4s; }
.b-me { background: #C7351F; color: #fff; border-bottom-left-radius: 6px; margin-left: 28px; animation-delay: 1.2s; }
@media (prefers-color-scheme: dark) { .b-me { background: var(--cm-acc); color: #1A0E0B; } }
@keyframes pop { from { opacity: 0; transform: translateY(10px) scale(.96); } to { opacity: 1; transform: none; } }
.swatches { display: flex; gap: 6px; height: clamp(54px, 9vw, 96px); align-items: stretch; margin: 4px 0 2px; }
.swatches i { flex: 1; border-radius: 10px; background: var(--c); transform-origin: bottom; animation: rise .8s var(--ease) both; transition: flex .5s var(--ease); }
.swatches i:nth-child(2) { animation-delay: .08s; } .swatches i:nth-child(3) { animation-delay: .16s; } .swatches i:nth-child(4) { animation-delay: .24s; }
.swatches i:nth-child(5) { animation-delay: .32s; } .swatches i:nth-child(6) { animation-delay: .4s; } .swatches i:nth-child(7) { animation-delay: .48s; }
.door-of:hover .swatches i:nth-child(odd) { flex: 1.8; }
@keyframes rise { from { transform: scaleY(.15); opacity: 0; } to { transform: none; opacity: 1; } }
.base { display: flex; justify-content: space-between; gap: 16px 32px; flex-wrap: wrap; align-items: center; color: var(--muted); font-size: .92rem; border-top: 1px solid var(--line); padding-top: 14px; }
.base > p:first-child { max-width: 64ch; }
.base-l { display: flex; gap: 18px; flex-wrap: wrap; font-weight: 600; }
.base-l a { color: var(--ink); display: inline-flex; gap: 8px; align-items: center; }
@media (max-width: 820px) {
  .lead { grid-template-columns: 1fr; }
  .doors, .doors:has(.door:hover), .doors:has(.door:focus-visible) { grid-template-columns: 1fr; min-height: 0; }
  .door { min-height: 300px; }
}
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

.base-c { margin: 6px 0 0; font-weight: 600; }
.base-c a { text-decoration: underline; text-underline-offset: 3px; color: inherit; }