:root {
  --ink: #152126;
  --muted: #5f6f73;
  --paper: #f4f1eb;
  --card: #fffdf8;
  --line: #d9ddd8;
  --accent: #e95f38;
  --accent-dark: #b94024;
  --blue: #1a6570;
  --yellow: #f0c957;
  --shadow: 0 18px 45px rgba(21, 33, 38, .1);
  font-family: "Avenir Next", Avenir, "Trebuchet MS", sans-serif;
  color: var(--ink);
  background: var(--paper);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; background: var(--paper); }
a { color: inherit; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 3px solid var(--yellow); outline-offset: 3px; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.site-header { border-bottom: 1px solid var(--line); background: rgba(244,241,235,.93); position: sticky; top: 0; z-index: 10; backdrop-filter: blur(10px); }
.nav { width: min(1180px, calc(100% - 32px)); margin: auto; min-height: 72px; display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; padding:12px 0; position:relative; }
.brand { text-decoration:none; font-family: Georgia, serif; font-size: 1.35rem; font-weight:700; letter-spacing:-.02em; display:inline-flex; align-items:center; gap:9px; min-width:0; flex:1 1 auto; }
.brand-logo { width:36px; height:36px; display:block; }
.brand-name span { color: var(--accent); }
.brand-name { overflow-wrap:anywhere; }
.nav-links { display:flex; gap:20px; align-items:center; font-size:.9rem; flex-wrap:wrap; }
.nav-links a { text-decoration:none; color:var(--muted); }
.nav-links a:hover { color:var(--ink); }
.nav-toggle, .mobile-nav, .mobile-nav-backdrop { display:none; }
.nav-toggle { margin-left:auto; width:52px; height:52px; border:1px solid var(--line); border-radius:16px; background:var(--card); color:var(--ink); align-items:center; justify-content:center; gap:5px; padding:0; flex:0 0 auto; position:relative; box-shadow:0 8px 20px rgba(21, 33, 38, .08); }
.nav-toggle span:not(.sr-only) { display:block; width:20px; height:2px; border-radius:999px; background:currentColor; transition:transform .22s ease, opacity .22s ease; transform-origin:center; }
.nav-toggle span.sr-only { position:absolute; }
.nav-toggle[aria-expanded="true"] span:not(.sr-only):nth-child(1) { transform:translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:not(.sr-only):nth-child(2) { opacity:0; }
.nav-toggle[aria-expanded="true"] span:not(.sr-only):nth-child(3) { transform:translateY(-7px) rotate(-45deg); }
.nav-open { overflow:hidden; }
.mobile-nav-panel { background:var(--card); box-shadow:var(--shadow); border-radius:24px 0 0 24px; width:min(86vw, 340px); height:100%; margin-left:auto; padding:22px 18px 28px; display:flex; flex-direction:column; gap:20px; }
.mobile-nav-header { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.mobile-nav-close { width:48px; height:48px; border:1px solid #d4c4ff; color:var(--ink); background:#fff; border-radius:16px; font-size:2rem; line-height:1; box-shadow:0 6px 18px rgba(123, 87, 209, .12); }
.mobile-nav-links { display:grid; gap:12px; }
.mobile-nav-links a { text-decoration:none; font-size:1.05rem; color:var(--ink); padding:16px 18px; border-radius:18px; background:#fff; box-shadow:0 10px 24px rgba(21, 33, 38, .05); }
.mobile-nav-links a:hover { background:#f5f0ff; color:#7b57d1; }
.container { width: min(1180px, calc(100% - 32px)); margin:auto; }
.hero { min-height: 600px; display:grid; grid-template-columns: 1.05fr .95fr; align-items:center; gap:48px; padding:72px 0 88px; }
.eyebrow { color: var(--accent-dark); text-transform: uppercase; letter-spacing:.13em; font-size:.72rem; font-weight:800; margin:0 0 18px; }
h1,h2,h3 { font-family: Georgia, "Times New Roman", serif; line-height:1.03; margin:0; letter-spacing:-.035em; }
h1 { font-size: clamp(3.2rem, 8vw, 6.8rem); max-width: 760px; }
h2 { font-size: clamp(2.4rem, 5vw, 4.4rem); }
h3 { font-size: 1.55rem; }
.lede { color:var(--muted); font-size:1.12rem; line-height:1.65; max-width: 570px; margin:24px 0 30px; }
.button { display:inline-flex; align-items:center; justify-content:center; gap:8px; border:1px solid var(--ink); padding:13px 18px; border-radius:999px; background:var(--ink); color:#fff; text-decoration:none; font-weight:700; min-height:48px; }
.button:hover { background:var(--accent-dark); border-color:var(--accent-dark); }
.button.secondary { color:var(--ink); background:transparent; }
.button.secondary:hover { background:#fff; }
.button.small { min-height:40px; padding:9px 14px; font-size:.9rem; }
.hero-art { min-height: 420px; position:relative; background:var(--blue); overflow:hidden; border-radius:4px; box-shadow:var(--shadow); display:grid; place-items:center; }
.hero-art:before { content:""; position:absolute; inset: 12% 10%; border:1px solid rgba(255,255,255,.3); transform:rotate(-7deg); }
.hero-art:after { content:"01 / EXPERIENCIA"; position:absolute; bottom:18px; left:20px; color:#d6ebdf; font-size:.7rem; letter-spacing:.14em; }
.hero-bike { width:86%; max-width:520px; position:relative; z-index:1; }
.grid-section { padding: 30px 0 100px; }
.section-head { display:flex; justify-content:space-between; align-items:end; gap:20px; margin-bottom:28px; }
.section-head p { color:var(--muted); max-width:360px; line-height:1.5; margin:0; }
.content-grid { display:grid; grid-template-columns: repeat(3, 1fr); gap:18px; }
.content-card { background:var(--card); border:1px solid var(--line); min-height:340px; display:flex; flex-direction:column; }
.card-image { aspect-ratio: 16 / 9; background:var(--blue); color:white; display:grid; place-items:center; overflow:hidden; }
.card-image.cover-image { background:#061d2c; }
.card-image.cover-image img { width:100%; height:100%; object-fit:cover; object-position:center 38%; display:block; }
.card-image.motor { background:#d46e43; }
.card-image svg { width:86%; height:86%; }
.card-body { padding:20px; display:flex; flex-direction:column; flex:1; }
.card-meta { color:var(--accent-dark); font-size:.72rem; text-transform:uppercase; letter-spacing:.1em; font-weight:800; margin:0 0 9px; }
.card-body p { color:var(--muted); line-height:1.5; margin:10px 0 20px; }
.card-body .button { margin-top:auto; align-self:flex-start; }
.callout { background:var(--ink); color:white; padding:52px max(24px, calc((100% - 1180px)/2)); display:flex; justify-content:space-between; gap:40px; align-items:center; }
.callout p { color:#c5d2d0; max-width:520px; line-height:1.6; }
.footer { padding:38px 0; color:var(--muted); font-size:.85rem; }
.footer-inner { display:flex; justify-content:space-between; gap:20px; border-top:1px solid var(--line); padding-top:22px; }
.experience-intro { padding:60px 0 34px; display:flex; justify-content:space-between; gap:30px; align-items:end; }
.experience-intro h1 { font-size:clamp(2.8rem, 7vw, 5.8rem); max-width:790px; }
.experience-intro .lede { margin-bottom:0; }
.experience-actions { display:flex; gap:10px; flex-wrap:wrap; justify-content:flex-end; }
.experience-stage { background:#e9e4db; padding:18px; border:1px solid var(--line); }
.legacy-preview { display:none; }
.legacy-compare { display:none; }
.embedded-experience { margin: 0 0 70px; background:#211d20; padding:18px; border:1px solid var(--line); }
.embedded-heading { background:#f3e6cf; padding:18px 20px; display:flex; justify-content:space-between; align-items:center; gap:16px; }
.embedded-heading p { margin:0; }
.embedded-experience iframe { display:block; width:100%; height:clamp(1280px, 180vw, 2050px); border:0; background:#211d20; }
.interactive-panel { background:#fffdf8; border:1px solid var(--line); display:grid; grid-template-columns: 1fr 310px; min-height:540px; }
.visual-wrap { position:relative; overflow:hidden; min-height:540px; background:#e6e2d9; }
.visual-wrap svg { width:100%; height:100%; min-height:540px; display:block; transition:transform .25s ease; transform-origin:center; }
.visual-label { position:absolute; top:16px; left:18px; font-size:.72rem; font-weight:800; letter-spacing:.12em; color:var(--blue); }
.hotspot { fill:var(--accent); stroke:#fffdf8; stroke-width:3; cursor:pointer; transition:transform .2s ease, fill .2s ease; transform-box:fill-box; transform-origin:center; }
.hotspot:hover, .hotspot.active { fill:var(--yellow); transform:scale(1.28); }
.panel-controls { padding:25px; border-left:1px solid var(--line); display:flex; flex-direction:column; }
.panel-controls h2 { font-size:2rem; margin-bottom:10px; }
.panel-controls p { color:var(--muted); line-height:1.55; }
.instruction { color:var(--accent-dark) !important; font-weight:800; font-size:.9rem; }
.point-list { list-style:none; padding:0; margin:24px 0; display:grid; gap:8px; }
.point-list button { border:1px solid var(--line); background:transparent; color:var(--ink); padding:12px; text-align:left; display:flex; gap:10px; align-items:center; border-radius:2px; }
.point-list button:hover, .point-list button.active { border-color:var(--accent); background:#fff6ef; }
.point-number { color:var(--accent-dark); font-weight:800; }
.control-row { display:flex; gap:8px; margin-top:auto; border-top:1px solid var(--line); padding-top:20px; }
.icon-button { border:1px solid var(--line); background:transparent; min-height:44px; padding:8px 12px; color:var(--ink); }
.icon-button:hover { border-color:var(--ink); background:#f4f1eb; }
.compare { padding:82px 0; }
.compare-grid { display:grid; grid-template-columns:repeat(2,1fr); margin-top:30px; border-top:1px solid var(--line); }
.compare-card { padding:26px 26px 26px 0; border-bottom:1px solid var(--line); }
.compare-card + .compare-card { border-left:1px solid var(--line); padding-left:26px; }
.compare-card p { color:var(--muted); line-height:1.6; }
.force-demo { margin-top:28px; background:var(--blue); color:white; padding:28px; }
.force-demo p { color:#d6ebdf; }
.force-graphic { height:145px; position:relative; margin:20px 0 4px; border-bottom:2px solid #d6ebdf; }
.force-arrow { position:absolute; top:50%; height:3px; background:var(--yellow); transform-origin:left; transition:width .3s ease; }
.force-arrow:after { content:""; position:absolute; right:-2px; top:-6px; border-left:12px solid var(--yellow); border-top:7px solid transparent; border-bottom:7px solid transparent; }
.slider { width:100%; accent-color:var(--yellow); }
.about { padding:90px 0; max-width:780px; }
.about p { color:var(--muted); line-height:1.7; font-size:1.08rem; }
.about a { overflow-wrap:anywhere; }
.info-list { display:grid; gap:14px; margin:28px 0; }
.info-card { border:1px solid var(--line); background:var(--card); padding:18px 20px; }
.info-card h3 { margin-bottom:8px; font-size:1.15rem; }
.info-card p { margin:0; color:var(--muted); }
.footer-inner { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:24px 0 34px; border-top:1px solid var(--line); }
.footer-links { display:flex; flex-wrap:wrap; gap:16px; align-items:center; }
.footer-links a { text-decoration:none; color:var(--muted); }
.footer-links a:hover { color:var(--ink); }
.social-link { display:inline-flex; align-items:center; gap:6px; text-decoration:none; color:#e1306c; font-weight:600; }
.social-link svg { width:20px; height:20px; display:block; }
.social-link:hover { color:#c13584; }
.pending { color:var(--accent-dark); font-weight:700; }
.admin-main { padding:55px 0 90px; }
.admin-banner { border-left:4px solid var(--accent); background:#fff6ef; padding:18px 20px; margin:26px 0; line-height:1.55; }
.admin-form { background:var(--card); border:1px solid var(--line); padding:24px; max-width:800px; }
.form-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:18px; }
.field { display:grid; gap:7px; margin-bottom:17px; }
.field.full { grid-column:1/-1; }
.field label { font-size:.85rem; font-weight:800; }
.field input,.field textarea,.field select { border:1px solid #bbc5c0; background:#fff; min-height:45px; padding:10px; border-radius:2px; color:var(--ink); }
.field textarea { min-height:110px; resize:vertical; }
.admin-list { margin-top:35px; max-width:800px; }
.draft-row { display:flex; justify-content:space-between; gap:15px; align-items:center; padding:16px 0; border-bottom:1px solid var(--line); }
.status { font-size:.75rem; text-transform:uppercase; letter-spacing:.08em; color:var(--accent-dark); font-weight:800; }
@media (max-width: 760px) {
  .container, .nav { width:min(100% - 24px, 1180px); }
  .nav { min-height:62px; align-items:center; gap:12px; flex-wrap:nowrap; }
  .nav-links { display:none; }
  .nav-toggle { display:inline-flex; }
  .brand { font-size:1.08rem; max-width:calc(100% - 72px); }
  .brand-name { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .brand-logo { width:32px; height:32px; flex:0 0 auto; }
  .hero { grid-template-columns:1fr; padding:46px 0 60px; gap:34px; min-height:auto; } .hero-art { min-height:290px; }
  h1 { font-size: clamp(2.3rem, 12vw, 4rem); }
  h2 { font-size: clamp(1.9rem, 9vw, 3rem); }
  .lede, .about p { font-size:1rem; }
  .button { width:100%; }
  .button.small { width:auto; }
  .content-grid { grid-template-columns:1fr; } .section-head, .experience-intro { display:block; } .section-head p { margin-top:14px; max-width:none; }
  .experience-actions { justify-content:flex-start; margin-top:25px; display:flex; flex-wrap:wrap; gap:12px; }
  .interactive-panel { grid-template-columns:1fr; } .visual-wrap, .visual-wrap svg { min-height:350px; height:350px; } .panel-controls { border-left:0; border-top:1px solid var(--line); }
  .embedded-experience { padding:8px; } .embedded-heading { display:block; } .embedded-heading .instruction { margin-top:8px; } .embedded-experience iframe { height: 1600px; }
  .compare-grid { grid-template-columns:1fr; } .compare-card + .compare-card { border-left:0; padding-left:0; }
  .callout { display:block; padding:38px 16px; } .callout .button { margin-top:10px; } .footer-inner { display:block; } .footer-links { margin-bottom:10px; } .info-card { padding:16px; }
  .form-grid { grid-template-columns:1fr; } .field.full { grid-column:auto; } .draft-row { align-items:flex-start; flex-direction:column; }
  .mobile-nav { position:fixed; inset:0; z-index:30; align-items:stretch; justify-content:flex-end; padding:0; }
  .mobile-nav-backdrop { position:fixed; inset:0; z-index:20; background:rgba(21,33,38,.42); border:0; width:100%; }
  body[data-nav-open="true"] .mobile-nav,
  body[data-nav-open="true"] .mobile-nav-backdrop { display:flex; }
}
@media (max-width: 480px) {
  .site-header { position:static; }
  .nav { width:min(100% - 20px, 1180px); padding:10px 0; }
  .brand { font-size:.96rem; gap:8px; max-width:calc(100% - 68px); }
  .brand-logo { width:30px; height:30px; }
  .hero { padding:34px 0 48px; gap:24px; }
  .hero-art { min-height:220px; }
  .grid-section { padding:20px 0 72px; }
  .content-card, .info-card { border-radius:4px; }
  .card-body { padding:18px; }
  .embedded-experience iframe { height: 1180px; }
  .footer-links { display:grid; grid-template-columns:1fr; gap:10px; }
  .social-link svg { width:24px; height:24px; }
  .mobile-nav-panel { width:min(90vw, 320px); padding:18px 16px 24px; border-radius:22px 0 0 22px; }
  .mobile-nav-links a { padding:15px 16px; }
}
@media (prefers-reduced-motion: reduce) { *, *:before, *:after { scroll-behavior:auto !important; transition-duration:.01ms !important; animation-duration:.01ms !important; } }

/* Modelo 3D: contenido absoluto para conservar las dimensiones del recuadro. */
.hero-art-3d:before,.hero-art-3d:after{pointer-events:none}.hero-art-3d:after{z-index:2}.hero-model{position:absolute;inset:15% 5% 17%;width:90%;height:68%;z-index:1;background:transparent;--poster-color:transparent}.hero-3d-title{position:absolute;top:9%;left:0;right:0;text-align:center;margin:0;color:#d6ebdf;font-size:12px;letter-spacing:.2em;pointer-events:none}.hero-3d-help{position:absolute;bottom:13%;left:0;right:0;margin:0;text-align:center;color:#d6ebdf;font-size:12px;pointer-events:none}.hero-3d-credit{position:absolute;bottom:8px;right:12px;left:12px;text-align:right;margin:0;color:#d6ebdf;font-size:10px;z-index:3}.hero-3d-credit a{color:inherit}.hero-3d-loading{color:#d6ebdf;font-size:14px}@media(max-width:480px){.hero-art-3d:after{bottom:30px}.hero-3d-credit{font-size:9px}}