/* Charlemos: identidad humana y tecnológica, diseñada primero para móvil. */
:root {
  color-scheme:light;
  --navy:#101825;
  --navy-soft:#132936;
  --ink:#102d38;
  --ink-soft:#3c5962;
  --muted:#667b82;
  --cyan:#12c9d7;
  --cyan-bright:#66e8ec;
  --cyan-dark:#007f92;
  --mist:#eaf6f6;
  --page:#f3f7f7;
  --paper:#ffffff;
  --line:#d9e5e6;
  --shadow:0 28px 80px rgba(8,35,44,.13);
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:24px; }
body { margin:0; min-width:320px; background:var(--page); color:var(--ink); font:16px/1.62 "Avenir Next",Avenir,"Segoe UI",system-ui,-apple-system,sans-serif; text-rendering:optimizeLegibility; }
img { max-width:100%; }
a { color:var(--cyan-dark); text-underline-offset:3px; }
button,input,select,textarea { font:inherit; }
button,a,input,select,textarea { touch-action:manipulation; }
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible { outline:3px solid var(--cyan); outline-offset:3px; }
[hidden] { display:none!important; }
.skip-link { background:white; border-radius:0 0 10px 0; left:0; padding:10px 14px; position:fixed; top:-80px; z-index:20; }
.skip-link:focus { top:0; }
.topbar { background:var(--navy); border-bottom:1px solid rgba(102,232,236,.13); color:white; padding-left:env(safe-area-inset-left); padding-right:env(safe-area-inset-right); }
.topbar-inner { align-items:center; display:flex; gap:24px; justify-content:space-between; margin:auto; max-width:1220px; min-height:104px; padding:12px 28px; }
.brand { display:block; flex:none; height:78px; overflow:hidden; width:236px; }
.brand img { display:block; height:100%; object-fit:cover; object-position:center 50%; transform:scale(1.2); width:100%; }
.topbar-link { align-items:center; border:1px solid rgba(102,232,236,.36); border-radius:999px; color:#f5ffff; display:flex; font-size:14px; font-weight:750; gap:13px; min-height:48px; padding:10px 18px; text-decoration:none; transition:background .2s ease,border-color .2s ease,transform .2s ease; }
.topbar-link:hover { background:rgba(102,232,236,.1); border-color:var(--cyan-bright); transform:translateY(-1px); }
.topbar-link span:last-child { color:var(--cyan-bright); font-size:18px; }
.preview-banner { background:#dff8f9; border-bottom:1px solid #a9e4e8; color:#124451; padding-left:env(safe-area-inset-left); padding-right:env(safe-area-inset-right); }
.preview-banner>div { align-items:center; display:flex; gap:8px 18px; margin:auto; max-width:1180px; padding:11px 8px; }
.preview-banner strong { flex:none; font-size:14px; }
.preview-banner span { font-size:14px; }
.hero { background:radial-gradient(circle at 74% 20%,rgba(18,201,215,.14),transparent 31%),linear-gradient(135deg,var(--navy) 0%,#0c2330 100%); color:#f8ffff; overflow:hidden; padding:clamp(54px,7vw,94px) 28px clamp(66px,8vw,112px); position:relative; }
.hero:before { border:1px solid rgba(102,232,236,.13); border-radius:50%; content:""; height:560px; left:-330px; position:absolute; top:-360px; width:560px; }
.hero:after { background-image:linear-gradient(rgba(102,232,236,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(102,232,236,.045) 1px,transparent 1px); background-size:44px 44px; content:""; inset:0 0 0 52%; -webkit-mask-image:linear-gradient(90deg,transparent,#000); mask-image:linear-gradient(90deg,transparent,#000); pointer-events:none; position:absolute; }
.hero-inner { align-items:center; display:grid; gap:clamp(46px,7vw,96px); grid-template-columns:minmax(0,1.08fr) minmax(360px,.72fr); margin:auto; max-width:1164px; position:relative; z-index:1; }
.hero-copy { max-width:690px; }
.eyebrow { color:var(--cyan-bright); font-size:12px; font-weight:850; letter-spacing:.18em; margin:0 0 18px; }
h1,h2 { font-family:"Iowan Old Style","Palatino Linotype",Georgia,serif; }
h1 { font-size:clamp(52px,5.6vw,78px); font-weight:500; letter-spacing:-.045em; line-height:1; margin:0 0 30px; text-wrap:balance; }
h1 em { color:var(--cyan-bright); font-weight:400; }
.lead { color:#effafa; font-size:clamp(18px,1.7vw,21px); line-height:1.58; margin:0 0 16px; max-width:650px; }
.hero-note { color:#abc5ca; margin:0; max-width:610px; }
.hero-actions { margin-top:32px; }
.primary { align-items:center; background:var(--cyan); border:0; border-radius:14px; color:#052d38; cursor:pointer; display:flex; font-weight:850; justify-content:center; min-height:52px; padding:13px 22px; text-align:center; text-decoration:none; transition:background .2s ease,box-shadow .2s ease,transform .2s ease; width:100%; }
.primary:hover { background:#4ddde5; box-shadow:0 12px 28px rgba(18,201,215,.18); transform:translateY(-1px); }
.primary:disabled { box-shadow:none; cursor:default; opacity:.45; transform:none; }
.hero-button { gap:38px; justify-content:space-between; max-width:290px; padding-left:22px; padding-right:18px; }
.hero-button span:last-child { font-size:21px; }
.hero-details { border-top:1px solid rgba(214,250,251,.16); display:grid; gap:0; grid-template-columns:repeat(3,1fr); list-style:none; margin:42px 0 0; padding:22px 0 0; }
.hero-details li { min-width:0; padding:0 18px; }
.hero-details li:first-child { padding-left:0; }
.hero-details li+li { border-left:1px solid rgba(214,250,251,.13); }
.hero-details strong,.hero-details span { display:block; }
.hero-details strong { color:white; font-size:14px; }
.hero-details span { color:#8eabb1; font-size:12px; margin-top:2px; }
.portrait { aspect-ratio:4/5; border:1px solid rgba(102,232,236,.2); border-radius:34px; box-shadow:0 34px 80px rgba(0,0,0,.26); margin:0; max-height:620px; overflow:hidden; position:relative; }
.portrait:after { background:linear-gradient(180deg,transparent 52%,rgba(6,22,30,.88) 100%); content:""; inset:0; position:absolute; }
.portrait img { display:block; height:100%; object-fit:cover; object-position:center top; width:100%; }
.portrait figcaption { align-items:center; bottom:22px; display:flex; gap:12px; left:22px; position:absolute; right:22px; z-index:1; }
.portrait figcaption strong,.portrait figcaption small { display:block; }
.portrait figcaption strong { color:white; font-size:16px; }
.portrait figcaption small { color:#b7d0d4; font-size:13px; margin-top:1px; }
.presence { background:#67e79c; border:4px solid rgba(9,35,46,.86); border-radius:50%; box-shadow:0 0 0 1px rgba(255,255,255,.25); flex:none; height:18px; width:18px; }
.agenda-section { padding:clamp(62px,8vw,104px) 28px; }
.agenda-shell { background:var(--navy-soft); border-radius:36px; box-shadow:var(--shadow); display:grid; grid-template-columns:minmax(300px,.72fr) minmax(0,1.28fr); margin:auto; max-width:1164px; overflow:hidden; }
.agenda-intro { color:#ecf9fa; padding:clamp(38px,5vw,60px); }
.agenda-intro h2 { color:white; font-size:clamp(36px,4.2vw,52px); font-weight:500; letter-spacing:-.04em; line-height:1.06; margin:0; text-wrap:balance; }
.agenda-intro>p:not(.eyebrow):not(.small-note) { color:#b8ced2; font-size:17px; margin:24px 0 0; }
.host { align-items:center; border-bottom:1px solid rgba(218,249,250,.15); display:flex; gap:14px; margin:30px 0 0; padding-bottom:26px; }
.host img { border:2px solid var(--cyan-bright); border-radius:50%; height:62px; object-fit:cover; object-position:center 15%; width:62px; }
.host strong,.host span { display:block; }
.host strong { color:white; }
.host span { color:#93b1b7; font-size:13px; }
.details { display:grid; gap:18px; list-style:none; margin:26px 0 0; padding:0; }
.details li { align-items:flex-start; display:grid; gap:12px; grid-template-columns:28px 1fr; }
.details li>span { border:1px solid rgba(102,232,236,.3); border-radius:50%; color:var(--cyan-bright); display:grid; font-size:10px; height:28px; place-items:center; width:28px; }
.details strong,.details small { display:block; }
.details strong { color:#f4ffff; font-size:14px; }
.details small { color:#8faeb4; font-size:13px; margin-top:1px; }
.small-note { color:#89a8ae; font-size:13px; margin:30px 0 0; }
.booking { background:var(--paper); border-radius:30px 0 0 30px; min-width:0; padding:clamp(34px,5vw,58px); }
.booking-heading { border-bottom:1px solid var(--line); margin-bottom:28px; padding-bottom:24px; }
.booking .eyebrow { color:var(--cyan-dark); margin-bottom:10px; }
.booking h2 { font-size:clamp(30px,3vw,40px); font-weight:500; letter-spacing:-.03em; line-height:1.12; margin:0 0 8px; }
h3 { font-size:16px; margin:0; }
.muted { color:var(--muted); font-size:14px; }
.step-title { align-items:center; display:flex; gap:11px; margin:30px 0 16px; }
.step-title>span { background:#dff7f8; border-radius:50%; color:#006f80; display:grid; font-size:12px; font-weight:850; height:30px; place-items:center; width:30px; }
label { color:#183b44; display:flex; flex-direction:column; font-size:14px; font-weight:700; gap:7px; margin-bottom:17px; }
input,select,textarea { appearance:none; -webkit-appearance:none; background:#fbfdfd; border:1px solid #b9cdd0; border-radius:12px; color:var(--ink); font-size:16px; min-height:50px; min-width:0; padding:12px 14px; width:100%; }
input[type="date"] { appearance:auto; -webkit-appearance:auto; }
select { background-image:linear-gradient(45deg,transparent 50%,#46666e 50%),linear-gradient(135deg,#46666e 50%,transparent 50%); background-position:calc(100% - 19px) 22px,calc(100% - 14px) 22px; background-repeat:no-repeat; background-size:5px 5px,5px 5px; padding-right:42px; }
textarea { min-height:118px; resize:vertical; }
input:hover,select:hover,textarea:hover { border-color:#86aab0; }
input:focus,select:focus,textarea:focus { background:white; border-color:var(--cyan-dark); box-shadow:0 0 0 4px rgba(18,201,215,.1); }
.fields { display:grid; gap:0 17px; grid-template-columns:1fr 1fr; }
fieldset { border:0; margin:0; min-width:0; padding:0; }
legend { font-size:14px; font-weight:700; margin-bottom:11px; }
.slots { display:grid; gap:9px; grid-template-columns:repeat(4,minmax(0,1fr)); }
.slot { background:white; border:1px solid #abc3c7; border-radius:11px; color:var(--ink); cursor:pointer; font-weight:700; min-height:48px; padding:10px; }
.slot:hover { border-color:var(--cyan-dark); }
.slot[aria-pressed=true] { background:#ddf8f8; border-color:#008da3; box-shadow:inset 0 0 0 1px #008da3; color:#005e6c; }
.consent { align-items:flex-start; color:var(--ink-soft); flex-direction:row; font-size:13px; font-weight:400; line-height:1.55; margin-top:22px; }
.consent input { accent-color:#008da5; appearance:auto; -webkit-appearance:checkbox; flex:none; height:20px; margin:1px 2px 0 0; min-height:20px; width:20px; }
.selection { background:#edf8f8; border-left:3px solid var(--cyan); border-radius:8px; color:#31545d; font-size:14px; padding:12px 14px; }
.status { background:#e5f7f8; border-radius:12px; color:#174c57; font-size:14px; margin-bottom:18px; padding:14px 16px; }
.status.error { background:#fff0ee; color:#942b28; }
.footnote { font-size:12px; margin-bottom:0; text-align:center; }
.honey { height:1px; left:-10000px; overflow:hidden; position:absolute; width:1px; }
.success-icon { background:#daf8e9; border-radius:50%; color:#087842; display:grid; font-size:27px; height:58px; margin-bottom:24px; place-items:center; width:58px; }
#success .eyebrow { color:#00788f; }
#success>p { line-height:1.7; }
.manifesto { align-items:start; display:grid; gap:clamp(42px,8vw,120px); grid-template-columns:minmax(0,.9fr) minmax(320px,1fr); margin:auto; max-width:1164px; padding:clamp(28px,4vw,54px) 28px clamp(82px,10vw,132px); }
.manifesto .eyebrow { color:var(--cyan-dark); }
.manifesto h2 { font-size:clamp(36px,4.2vw,52px); font-weight:500; letter-spacing:-.04em; line-height:1.08; margin:0; text-wrap:balance; }
.manifesto-copy { color:var(--ink-soft); font-size:18px; }
.manifesto-copy p:first-child { margin-top:0; }
.academy-note { border-left:3px solid var(--cyan); color:var(--ink); font-size:15px; margin-top:28px; padding-left:18px; }
footer { align-items:center; background:var(--navy); color:#9fb8bd; display:flex; font-size:13px; gap:20px; justify-content:space-between; padding:28px max(28px,calc((100vw - 1164px)/2)); padding-bottom:max(28px,env(safe-area-inset-bottom)); }
footer a { color:#d8f7f8; }
@media(max-width:960px) {
  .hero-inner { gap:40px; grid-template-columns:minmax(0,1fr) minmax(320px,.72fr); }
  .agenda-shell { grid-template-columns:minmax(270px,.68fr) minmax(0,1.32fr); }
  .agenda-intro { padding:36px 30px; }
  .fields { grid-template-columns:1fr; }
  .slots { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media(max-width:740px) {
  html { scroll-padding-top:12px; }
  .topbar-inner { min-height:84px; padding:8px 18px; }
  .brand { height:66px; width:184px; }
  .topbar-link { border:0; min-height:44px; padding:8px 0 8px 10px; }
  .topbar-link span:first-child { display:none; }
  .topbar-link span:last-child { border:1px solid rgba(102,232,236,.35); border-radius:50%; display:grid; height:42px; place-items:center; width:42px; }
  .preview-banner>div { display:block; padding:11px 18px; }
  .preview-banner strong,.preview-banner span { display:block; }
  .preview-banner span { margin-top:2px; }
  .hero { padding:42px 18px 58px; }
  .hero:after { display:none; }
  .hero-inner { display:flex; flex-direction:column; gap:38px; }
  .hero-copy { max-width:none; }
  h1 { font-size:clamp(43px,12.4vw,58px); }
  .lead { font-size:18px; }
  .hero-button { max-width:none; }
  .hero-details { margin-top:34px; }
  .hero-details li { padding:0 10px; }
  .hero-details strong { font-size:13px; }
  .hero-details span { font-size:11px; }
  .portrait { aspect-ratio:4/4.7; max-height:none; width:100%; }
  .agenda-section { padding:54px 14px; }
  .agenda-shell { display:block; border-radius:28px; }
  .agenda-intro { padding:38px 24px 34px; }
  .agenda-intro h2 { font-size:40px; }
  .booking { border-radius:24px; padding:30px 20px; }
  .booking h2 { font-size:34px; }
  .manifesto { display:block; padding:32px 22px 86px; }
  .manifesto-copy { font-size:17px; margin-top:30px; }
  footer { align-items:flex-start; flex-direction:column; padding-left:22px; padding-right:22px; }
}
@media(max-width:380px) {
  .brand { height:60px; width:164px; }
  .topbar-inner { min-height:76px; padding-left:14px; padding-right:14px; }
  .hero { padding-left:15px; padding-right:15px; }
  h1 { font-size:42px; }
  .hero-details { grid-template-columns:1fr; gap:12px; }
  .hero-details li { border-left:0!important; padding:0; }
  .hero-details span { display:inline; margin-left:5px; }
  .portrait { border-radius:26px; }
  .agenda-section { padding-left:10px; padding-right:10px; }
  .agenda-intro { padding:34px 20px 30px; }
  .agenda-intro h2 { font-size:36px; }
  .booking { padding:28px 16px; }
  .slots { grid-template-columns:1fr 1fr; }
}
@media(prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *,*:before,*:after { scroll-behavior:auto!important; transition-duration:.01ms!important; }
}