/* Dirección visual: profundidad violeta, tarjetas claras y acentos cálidos. */
.brand-name .brand-studio { display: block; font-family: 'Segoe UI', Arial, sans-serif; font-size: 11px; font-weight: 650; line-height: 1.4; letter-spacing: .24em; text-transform: uppercase; margin-bottom: 5px; }
.brand-name { white-space: nowrap; }
.contact-form .contact-privacy { background: #fff; color: #171a30; border: 1px solid #a8abba; padding: 16px; font-size: 14px; line-height: 1.65; }
.contact-privacy a { color: #3631a8; text-decoration: underline; text-underline-offset: 3px; }
.simple-page-content { max-width: 800px; overflow-wrap: anywhere; }
.simple-page-content h2 { font-size: clamp(24px, 4vw, 32px); margin: 32px 0 16px; }
.simple-page-content p { margin: 16px 0; }
.simple-page-content a { color: #3631a8; text-decoration: underline; }
:root {
  --paper: #f9f8f5;
  --ink: #171a30;
  --muted: #383d50;
  --blue: #4b45e4;
  --coral: #ef795e;
  --lime: #e5ff88;
  --line: #dcdde8;
}

body { background: var(--paper); }
.idea-builder { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px,6vw,90px); padding-block: 80px; background: #e9e4fa; border-radius: 32px; margin-block: 30px; }
.idea-intro > p:last-child { max-width: 440px; margin-top: 24px; color: #38304c; line-height: 1.8; }
.idea-intro h2 em { color: #4934b0; }
.idea-controls { min-width: 0; }
.idea-controls fieldset { padding: 0; margin: 0; border: 0; }
.idea-controls legend { font-weight: 650; font-size: 16px; margin-bottom: 16px; }
.idea-controls label { display: flex; align-items: center; gap: 14px; padding: 16px 18px; margin-bottom: 10px; background: #fff; border: 2px solid #b7aecb; border-radius: 15px; cursor: pointer; transition: border-color .2s, background .2s; }
.idea-controls label:has(input:checked) { border-color: #4934b0; background: #f7f5ff; }
.idea-controls input { accent-color: #4934b0; width: 20px; height: 20px; flex-shrink: 0; }
.idea-controls label span { font-size: 17px; font-weight: 650; color: #25213c; }
.idea-controls small { display: block; color: #4a415c; font-size: 14px; font-weight: 400; margin-top: 3px; }
.idea-answer { margin-block: 24px; min-height: 155px; }
.idea-answer h3 { font: 500 27px/1.2 var(--serif); margin-bottom: 12px; }
.idea-answer p { color: #38304c; font-size: 16px; line-height: 1.7; }
.idea-cta { background: #35276b; color: #fff; }
.idea-cta:hover { background: #4934b0; }
.idea-note { font-size: 13px; color: #4a415c; margin-top: 16px; }
.idea-controls :focus-visible { outline: 3px solid #4934b0; outline-offset: 5px; }
@media(max-width:760px) { .idea-builder { grid-template-columns: 1fr; border-radius: 0; padding-block: 50px; } .idea-answer { min-height: 0; } }
@media(prefers-reduced-motion:no-preference) {
  .project-card { transition: transform .25s, box-shadow .25s; }
  .project-card:hover,.project-card:focus-visible { transform: translateY(-6px); }
  .journey-panel:not([hidden]) { animation: idea-arrive .25s ease-out; }
  .button span,.text-link span { display: inline-block; transition: transform .2s; }
  .button:hover span,.text-link:hover span { transform: translate(3px,-3px); }
  @keyframes idea-arrive { from { opacity: .5; transform: translateY(8px); } to { opacity: 1; transform: none; } }
}
/* Recorrido interactivo, con una explicación siempre visible. */
#process-grid { display: block; min-width: 0; border: 0; }
.journey-hint { color: #383d50; font-size: 14px; margin: 0 0 18px; }
.journey-tabs { display: flex; gap: 6px; padding: 0 0 22px; }
.journey-tabs button { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; border: 0; border-bottom: 3px solid #dcdde8; padding: 10px 5px 15px; color: #383d50; background: transparent; text-align: left; font: 600 13px/1.4 var(--sans); cursor: pointer; transition: border-color .2s, color .2s; }
.journey-number { display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid #a4a0bb; border-radius: 50%; font-size: 14px; transition: background .2s, color .2s; }
.journey-tabs button[aria-selected=true] { color: #352184; border-color: #4934b0; }
.journey-tabs button[aria-selected=true] .journey-number { background: #4934b0; color: #fff; border-color: #4934b0; }
.journey-tabs button:hover { border-color: #4934b0; }
.journey-panel { padding: clamp(24px,3vw,38px); border-radius: 24px; background: #252454; color: #fff; min-height: 340px; }
.journey-panel[hidden] { display: none; }
.journey-counter { display: block; color: #e5ff88; font-size: 13px; font-weight: 700; margin-bottom: 22px; }
.journey-panel h3 { font: 400 clamp(28px,3vw,38px)/1.15 var(--serif); margin: 0 0 18px; }
.journey-panel > p { font-size: 16px; line-height: 1.7; margin: 0; }
.journey-output { margin-top: 24px; padding-top: 20px; border-top: 1px solid #8584a4; }
.journey-output strong { color: #e5ff88; font-size: 13px; }
.journey-output p { font-size: 15px; line-height: 1.6; margin: 8px 0 0; }
.journey-tabs button:focus-visible { outline: 3px solid #4934b0; outline-offset: 3px; }
.journey-panel:focus-visible { outline: 3px solid #4934b0; outline-offset: 4px; }
@media(min-width:761px) and (max-width:1050px) {
  .process-section { grid-template-columns: 1fr; gap: 30px; }
  #process-grid { width: 100%; }
}
@media(max-width:480px) {
  .journey-tabs { flex-direction: column; gap: 4px; padding-bottom: 18px; }
  .journey-tabs button { flex-direction: row; align-items: center; gap: 12px; padding: 6px 10px; border: 1px solid #dcdde8; border-radius: 12px; font-size: 14px; }
  .journey-tabs button[aria-selected=true] { background: #efedff; }
  .journey-number { width: 32px; height: 32px; flex-shrink: 0; }
  .journey-panel { min-height: 370px; }
}
.site-header {
  position: absolute;
  top: 22px;
  left: 50%;
  transform: translateX(-50%);
  width: min(1260px, calc(100% - 44px));
  max-width: none;
  height: 140px;
  padding: 0 23px;
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 999px;
  background: #252454;
  color: #fff;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
.site-header .brand-name { font-size: 27px; }
.site-header .brand-mark { width: 116px; height: 116px; flex-shrink: 0; object-fit: contain; border-radius: 24px; background: #faf7ee; box-shadow: 0 0 0 2px rgba(255,255,255,.85), 0 8px 22px rgba(0,0,0,.2); }
.site-footer .brand-mark { width: 80px; height: 80px; object-fit: contain; border-radius: 18px; }
.site-header .desktop-nav a::after { background: #f4dbff; }
.site-header .header-contact { background: #fff; border-color: #fff; color: #1c1b3e; }
.site-header .header-contact:hover { background: #e4e3ff; color: #161736; }
.hero {
  max-width: none;
  min-height: 720px;
  padding: 182px max(24px, calc((100vw - 1260px)/2)) 102px;
  grid-template-columns: minmax(0,1.07fr) minmax(0,.93fr);
  gap: clamp(32px,5vw,84px);
  color: #fff;
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(ellipse 58% 62% at 76% 79%, rgba(101,67,208,.65), transparent 78%),
    radial-gradient(ellipse 48% 47% at 10% 91%, rgba(71,48,181,.65), transparent 75%),
    linear-gradient(145deg,#13162c 4%,#1d1c51 54%,#392783 100%);
}
.hero::before {
  content: "";
  pointer-events: none;
  position: absolute;
  inset: auto -15% -220px;
  height: 390px;
  background: radial-gradient(ellipse,rgba(141,114,232,.18),transparent 68%);
  filter: blur(34px);
}
.hero::after {
  content: "";
  pointer-events: none;
  position: absolute;
  width: 270px;
  height: 270px;
  right: -100px;
  top: 122px;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 50%;
  box-shadow: 0 0 0 52px rgba(255,255,255,.045),0 0 0 105px rgba(255,255,255,.025);
}
.hero > * { position: relative; z-index: 1; }
.hero .eyebrow { color: #f1dfff; }
.hero .eyebrow-line { background: var(--coral); }
.hero-copy h1 { font-size: clamp(60px,6.2vw,96px); }
.hero-copy h1 em { color: #f2c6ea; }
.hero-intro,.hero-footnote { color: #fff; }
.hero .button-primary { background: #fff; color: #1d1c46; }
.hero .button-primary:hover { background: #e8dcff; }
.hero .text-link { color: #fff; }
.design-caption { color: #fff; }
.design-caption > span:last-child { color: #f4d8ef; }
.style-preview {
  --preview-bg: #e9eafe;
  --preview-ink: #181b3b;
  --preview-accent: #4d42dd;
  min-height: 405px;
  border: 1px solid rgba(255,255,255,.7);
  border-radius: 29px;
  box-shadow: 18px 18px 0 rgba(23,19,62,.24),0 30px 60px rgba(14,11,45,.22);
  background: linear-gradient(148deg,#fbfbff,#d9dcff 88%);
  color: var(--preview-ink);
  overflow: hidden;
}
.style-preview::before {
  content: "";
  position: absolute;
  width: 290px;
  height: 290px;
  right: -115px;
  top: 85px;
  border: 46px solid rgba(94,84,230,.14);
  border-radius: 50%;
}
.style-preview[data-style=calido] { --preview-ink:#442325; --preview-accent:#842818; background:linear-gradient(148deg,#fff9ed,#ffbb9e); box-shadow:18px 18px 0 rgba(108,45,55,.24); }
.style-preview[data-style=elegante] { --preview-ink:#fff5dd; --preview-accent:#eed686; background:linear-gradient(148deg,#332237,#15253b); box-shadow:18px 18px 0 rgba(8,14,38,.35); }
.style-preview[data-style=calido]::before { border-color: rgba(199,75,45,.12); }
.style-preview[data-style=elegante]::before { border-color: rgba(238,214,134,.13); }
.preview-top,.preview-bottom,.preview-title { position: relative; z-index: 1; }
.preview-seal { position: absolute; z-index: 1; right: 25px; bottom: 29px; }
.preview-top { border-color: rgba(30,25,69,.3); }
.style-preview[data-style=elegante] .preview-top { border-color: rgba(255,255,255,.4); }
.preview-title { font-size: clamp(45px,4.3vw,65px); }
.preview-seal { border-width: 2px; }
.style-picker { justify-content: flex-start; gap: 8px; flex-wrap: wrap; }
.style-picker button { color: #fff; border-color: rgba(255,255,255,.26); background: rgba(255,255,255,.08); }
.style-picker button:hover { background: rgba(255,255,255,.2); }
.style-picker button[aria-pressed=true] { background: #fff; color: #171a30; border-color: #fff; }
.design-hint { color: #f2f0ff; text-align: left; }
.intro-band { background: #e7e7ff; color: #1c1c43; border-color: #c9c6ff; }
.intro-band a:hover { color: #4b45e4; }
.services,.projects-section,.business-section,.process-section,.about-section,.questions-section { position: relative; }
.section-heading h2 em,.business-heading h2 em,.process-heading h2 em,.about-copy h2 em,.questions-section h2 em { color: #4934b0; }
.services { padding-top: 112px; }
.service-accordion { background: #fff; border: 1px solid #e3e3ed; border-radius: 18px; overflow: hidden; margin-bottom: 10px; }
.service-list { border: 0; }
.service-accordion > summary { padding-inline: 24px; }
.service-accordion:hover > summary { background: #e5e0fa; color: #252454; }
.service-accordion[open] > summary { background: #35276b; color: #fff; }
.service-accordion .service-panel { background: #e5e0fa; color: #25213c; border-top: 1px solid #b2a6d7; }
.service-accordion .service-panel > p { color: #302944; font-size: 16px; line-height: 1.7; }
.service-accordion .panel-label { color: #35276b; font-size: 12px; }
.service-accordion .service-includes ul { color: #25213c; font-size: 15px; line-height: 1.6; }
.service-accordion .service-includes li::before { color: #4934b0; }
.service-accordion .panel-link { color: #35276b; font-size: 14px; }
.service-accordion .panel-link:focus-visible { outline: 3px solid #35276b; outline-offset: 5px; }
.projects-section { background: #f0effb; max-width: none; padding-inline: max(24px,calc((100vw - 1260px)/2)); }
.project-card { background: #fff; border-radius: 23px; overflow: hidden; box-shadow: 0 16px 38px rgba(40,35,92,.07); }
.project-window { padding-inline: 18px; }
.project-meta { padding: 17px 18px 22px; }
.project-preview { overflow: hidden; }
.project-preview img { transition: transform .38s ease; }
.project-card:hover .project-preview img { transform: scale(1.045); }
.business-result { border-radius: 25px; background: #fff; box-shadow: 0 18px 45px rgba(25,26,77,.08); }
/* La fotografía del ejemplo necesita espacio propio, sin texto superpuesto. */
.business-result .result-side { grid-template-columns: minmax(0,1fr); }
.business-result .business-example { display: flex; flex-direction: column; align-items: stretch; gap: 0; padding: 0; border: 1px solid #dcdde8; border-radius: 16px; overflow: hidden; background: #f4f3fc; color: #252454; }
.business-result .business-example img { display: block; position: static; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 0; }
.business-result .business-example > span { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 15px 18px; font-size: 15px; line-height: 1.5; }
.business-result .business-example:hover > span { text-decoration: underline; text-underline-offset: 4px; }
.process-section { gap: clamp(45px,7vw,100px); }
.process-step { border-radius: 16px; margin-bottom: 9px; background: #f0effb; padding-inline: 15px; }
.process-step[open] { background: #e8e6ff; }
.about-art { background: linear-gradient(145deg,#232459,#4934a5 85%); color: #fff; }
.about-art-bottom { border-top-color: #ffffff80; }
.business-heading h2 em { color: #e5ff88; }
.style-picker button { background: #30275e; border-color: #c7bfe8; font-size: 13px; }
.style-picker button:hover { background: #403578; }
.design-hint { background: #30275e; padding: 8px 12px; border-radius: 10px; font-size: 13px; }
.preview-contact { font-size: 13px; min-height: 32px; }
.contact-form input:not([type=checkbox]),.contact-form select,.contact-form textarea { font-size: 16px; }
.contact-form label,.form-preview,.contact-form .consent,.form-status { font-size: 14px; }
.project-meta .project-open { font-size: 13px; }
.contact-section { background: radial-gradient(ellipse at 82% 85%,#49369e 0%,transparent 53%),linear-gradient(135deg,#161b35,#30296a); }
.hero-intro,.hero-footnote,.design-hint,.section-heading>p,.about-copy>p,.result-copy>p { font-weight: 450; }
.contact-form input:not([type=checkbox]),.contact-form select,.contact-form textarea { border-color: #73778a; }
.contact-form input::placeholder,.contact-form textarea::placeholder { color: #535869; opacity: 1; }
.business-heading>p:last-child { color: #f3f2ff; }
.site-header :focus-visible,.hero :focus-visible,.contact-section :focus-visible,.business-section :focus-visible { outline: 3px solid #fff; outline-offset: 4px; box-shadow: 0 0 0 7px #171a30; }
.contact-form :focus-visible,.business-result :focus-visible { outline-color: #352184; box-shadow: 0 0 0 7px #fff; }
.contact-form { border-radius: 22px; }
.site-footer { background: #f9f8f5; }
.footer-legal { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; font-size: 12px; font-weight: 650; }
.footer-legal a:hover { color: var(--blue); text-decoration: underline; }
.simple-page { min-height: 55vh; padding-block: 175px 90px; }
.simple-page h1 { font-size: clamp(44px,6vw,76px); max-width: 900px; }
.simple-page-content { max-width: 780px; margin-top: 40px; font-size: 17px; line-height: 1.8; }
.simple-page-content p,.simple-page-content ul,.simple-page-content ol { margin-block: 0 1.2em; }
.simple-page-content h2 { font-size: clamp(28px,3vw,40px); margin-block: 1.3em .55em; }
.simple-page-content a { color: #3834aa; text-decoration: underline; }
.simple-page-content ul,.simple-page-content ol { padding-left: 1.5em; }
body:not(.home) .site-header { background: #252454; }
body.admin-bar .site-header { top: 54px; }
body.admin-bar .hero { padding-top: 214px; }

@media (max-width: 1050px) {
  .site-header { height: 128px; gap: 16px; }
  .site-header .brand-mark { width: 104px; height: 104px; border-radius: 22px; }
  .site-header .brand-name { font-size: 24px; }
  .site-header .desktop-nav { gap: 16px; font-size: 12px; }
  .hero { min-height: 0; padding-top: 174px; padding-bottom: 85px; }
  .hero-copy h1 { font-size: clamp(56px,6vw,72px); }
  .style-preview { min-height: 380px; }
}
@media (max-width: 760px) {
  .site-header { top: 14px; height: 112px; width: calc(100% - 28px); padding-inline: 12px; border-radius: 26px; gap: 10px; }
  .site-header .brand-name { font-size: 23px; }
  .site-header .brand-mark { width: 88px; height: 88px; }
  .site-header .menu-toggle { flex-shrink: 0; }
  .site-header .menu-toggle { border-color: rgba(255,255,255,.56); }
  .site-header .menu-toggle span { background: #fff; }
  .mobile-nav { top: 136px; }
  .hero { grid-template-columns: 1fr; padding: 168px 24px 75px; gap: 54px; }
  .hero-copy h1 { font-size: clamp(49px,9vw,72px); }
  .design-playground { max-width: 560px; }
  .design-hint { text-align: center; }
  .projects-section { padding-inline: 22px; }
  .project-meta { padding: 15px 16px 20px; }
  .service-accordion > summary { padding-inline: 15px; }
  .simple-page { padding-top: 155px; padding-bottom: 65px; }
  body.admin-bar .site-header { top: 60px; }
  body.admin-bar .mobile-nav { top: 182px; }
  body.admin-bar .simple-page { padding-top: 200px; }
}
@media (max-width: 480px) {
  .site-header .brand-name { font-size: 21px; }
  .hero { padding-inline: 22px; }
  .hero-copy h1 { font-size: clamp(48px,13vw,59px); }
  .style-preview { min-height: 350px; border-radius: 22px; padding: 23px; box-shadow: 8px 8px 0 rgba(23,19,62,.24); }
  .style-preview[data-style=calido],.style-preview[data-style=elegante] { box-shadow: 8px 8px 0 rgba(23,19,62,.24); }
  .preview-title { font-size: 47px; }
  .style-picker { justify-content: center; }
  .style-picker button { font-size: 13px; min-height: 44px; }
  .intro-band { padding-inline: 22px; }
}
@media (max-width: 360px) {
  .site-header .brand-name { font-size: 18px; }
  .site-header .brand-mark { width: 80px; height: 80px; }
  .hero-copy h1 { font-size: 45px; }
  .preview-title { font-size: 40px; }
}

/* Día 3 · Oferta visible en portada y nota de precio en servicios */
.hero-offer { margin-top: 26px; max-width: 520px; border: 1px solid rgba(255,255,255,.38); border-radius: 18px; padding: 18px 20px; background: rgba(255,255,255,.07); }
.hero-offer-title { font-size: 19px; font-weight: 650; letter-spacing: -.02em; margin: 0 0 10px; }
.hero-offer-title strong { color: var(--lime); font-weight: 750; white-space: nowrap; }
.hero-offer ul { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 6px; font-size: 15px; line-height: 1.45; }
.hero-offer li { padding-left: 22px; position: relative; }
.hero-offer li::before { content: "✓"; position: absolute; left: 0; color: var(--lime); font-weight: 700; }
.hero-offer a { font-size: 14px; font-weight: 650; border-bottom: 1px solid currentColor; padding-bottom: 2px; }
.hero-offer a:focus-visible { outline: 2px solid var(--lime); outline-offset: 3px; }
.services-note { margin-top: 34px; border: 1px solid var(--line); border-left: 4px solid var(--blue); border-radius: 6px 18px 18px 6px; padding: 22px 24px; background: #fff; max-width: 860px; }
.services-note p { font-size: 15px; line-height: 1.7; color: var(--muted); margin: 0; }
.services-note .services-price { font-size: 22px; color: var(--ink); font-weight: 650; letter-spacing: -.02em; margin-bottom: 8px; }
.services-note .services-price strong { color: var(--blue); }
@media (max-width: 760px) { .hero-offer { padding: 16px; } .hero-offer-title { font-size: 17px; } .hero-offer ul { font-size: 14px; } .services-note { padding: 18px; } .services-note .services-price { font-size: 19px; } }
@media (min-width: 761px) { .hero-copy h1 { font-size: clamp(50px, 4.7vw, 68px); max-width: 720px; } .hero-copy h1 em { max-width: none; } }
.hero-actions + .hero-offer { margin-top: 24px; }