/* Estructura de Toast: portada con foto a todo lo ancho y trazo a mano, tarjetas de producto con foto,
   lista grande con imagen que cambia, antes y después, planes, giros en texto grande y cierre. Colores PASS. */
:root { --carbon: #2B3138; --carbon2: #353C45; --orange: #FF6A00; --orange2: #E55F00; --orange3: #FF8833; --soft: #FFF0E5; --warm: #F7F3F0; --grey: #F4F6F8; --line: #E3E7EB; --muted: #6B7480; --ok: #1F9D55; --w: 1240px; --r: 22px }
* { box-sizing: border-box } html { scroll-behavior: smooth } body { margin: 0; font-family: Manrope, system-ui, -apple-system, sans-serif; color: var(--carbon); background: #fff; line-height: 1.5; -webkit-font-smoothing: antialiased }
img { max-width: 100%; display: block } a { color: inherit }
.wrap { max-width: var(--w); margin: 0 auto; padding-left: max(20px, env(safe-area-inset-left)); padding-right: max(20px, env(safe-area-inset-right)) }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: 999px; padding: 13px 26px; font-weight: 800; font-size: 15.5px; text-decoration: none; border: 2px solid transparent; cursor: pointer; font-family: inherit; transition: background .15s, transform .15s; white-space: nowrap }
.btn:hover { transform: translateY(-1px) } .btn.o { background: var(--orange); color: #fff } .btn.o:hover { background: var(--orange2) }
.btn.d { background: var(--carbon); color: #fff } .btn.l { border-color: currentColor; background: transparent } .btn.w { background: #fff; color: var(--carbon) }
:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px }
.eyebrow { color: var(--orange); font-weight: 800; letter-spacing: .14em; text-transform: uppercase; font-size: 13px; margin: 0 0 12px }
h2 { font-size: clamp(34px, 4.4vw, 60px); line-height: 1.02; letter-spacing: -.03em; margin: 0 0 16px; text-wrap: balance; font-weight: 800 }
.sub { color: var(--muted); font-size: 19px; max-width: 660px; margin: 0 }
section.s { padding-block: 104px } .center { text-align: center } .center .sub { margin-inline: auto }
.hand { position: relative; display: inline-block; white-space: nowrap } .hand svg { position: absolute; left: -6%; top: -14%; width: 112%; height: 128%; pointer-events: none; overflow: visible }
.hand path { fill: none; stroke: var(--orange); stroke-width: 5; stroke-linecap: round; stroke-dasharray: 900; stroke-dashoffset: 900; animation: draw 1.3s .4s ease-out forwards }
@keyframes draw { to { stroke-dashoffset: 0 } }
.script { font-family: Caveat, cursive; font-weight: 700; color: var(--orange); letter-spacing: 0 }

/* barra superior y menú */
.util { background: var(--carbon); color: #C9D0D8; font-size: 13px } .util .wrap { display: flex; justify-content: space-between; gap: 18px; padding-block: 8px }
.util a { text-decoration: none } .util a:hover { color: #fff } .util .right { display: flex; gap: 20px }
header.nav { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.96); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line) }
.nav .wrap { display: flex; align-items: center; gap: 26px; height: 74px } .nav .logo img { height: 34px }
.menu { display: flex; gap: 2px; flex: 1; list-style: none; margin: 0; padding: 0 }
.menu > li > button, .menu > li > a { background: none; border: 0; font: inherit; font-weight: 700; font-size: 15px; padding: 10px 14px; border-radius: 10px; cursor: pointer; text-decoration: none; display: flex; align-items: center; gap: 7px; color: var(--carbon) }
.menu > li > button::after { content: ''; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-3px) }
.menu > li > button:hover, .menu > li > button[aria-expanded="true"], .menu > li > a:hover { background: var(--grey) }
.mega { position: absolute; left: 0; right: 0; top: 74px; background: #fff; border-bottom: 1px solid var(--line); box-shadow: 0 30px 50px #2B31381a; display: none } .mega.open { display: block }
.mega .wrap { height: auto; display: grid; grid-template-columns: 1fr 1fr 1fr 320px; gap: 26px; padding-block: 28px; align-items: start }
.mega h6 { margin: 0 0 10px; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted) }
.mega a.it { display: block; padding: 10px 12px; border-radius: 12px; text-decoration: none } .mega a.it:hover { background: var(--grey) } .mega a.it b { display: block; font-size: 15px } .mega a.it span { font-size: 13px; color: var(--muted) }
.mega .feat { border-radius: 16px; overflow: hidden; background: var(--carbon); color: #fff } .mega .feat img { aspect-ratio: 16/10; object-fit: cover; width: 100% } .mega .feat div { padding: 14px 16px 16px } .mega .feat b { font-size: 17px; display: block } .mega .feat p { margin: 4px 0 12px; font-size: 14px; color: #C9D0D8 }
.nav .act { display: flex; gap: 10px; align-items: center } .nav .act .login { padding: 10px 20px; border: 2px solid var(--carbon); border-radius: 999px; font-weight: 800; text-decoration: none; font-size: 14.5px }
.burger { display: none; background: none; border: 0; padding: 8px; cursor: pointer } .burger i { display: block; width: 24px; height: 2px; background: var(--carbon); margin: 5px 0 }

/* portada con foto a todo lo ancho */
.hero { position: relative; min-height: 640px; color: #fff; display: flex; align-items: center; overflow: hidden; background: #111 }
.hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 70% center }
.hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, #14181dee 0%, #14181dcc 34%, #14181d40 62%, transparent 85%) }
.hero .wrap { position: relative; z-index: 2; width: 100%; padding-block: 90px }
.hero .kicker { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 22px; padding: 7px 16px 7px 8px; border-radius: 99px; background: #ffffff1a; font-weight: 700; font-size: 14.5px; backdrop-filter: blur(6px) } .hero .kicker i { width: 26px; height: 26px; border-radius: 50%; background: var(--orange); display: grid; place-items: center; font-style: normal }
.hero h1 { font-size: clamp(48px, 7.4vw, 104px); line-height: .96; letter-spacing: -.04em; margin: 0; max-width: 760px; font-weight: 800 }
.hero p.lead { font-size: 21px; color: #E3E7EB; margin: 24px 0 32px; max-width: 560px }
.hero .ctas { display: flex; gap: 12px; flex-wrap: wrap } .hero .btn.l { color: #fff }
.hero .note { font-size: 14px; color: #C9D0D8; margin-top: 18px }
.trust { background: var(--carbon); color: #fff } .trust .wrap { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; padding-block: 26px }
.trust div { display: flex; gap: 12px; align-items: center; font-weight: 700 } .trust svg { flex: none } .trust small { display: block; color: #9fb0c0; font-weight: 600 }

/* tarjetas de producto */
.cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 48px }
.card { position: relative; border-radius: var(--r); overflow: hidden; min-height: 400px; text-decoration: none; color: #fff; display: flex; flex-direction: column; justify-content: flex-end; background: var(--carbon); isolation: isolate }
.card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform .5s }
.card::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, transparent 30%, #FF6A00d9 78%, #E55F00 100%) }
.card.dk::before { background: linear-gradient(180deg, transparent 30%, #2B3138e6 75%, #2B3138 100%) }
.card:hover img { transform: scale(1.05) } .card div { padding: 22px 22px 24px; text-align: center } .card b { font-size: 24px; display: block; letter-spacing: -.01em } .card span { font-size: 14.5px; opacity: .92 }
.card.shot img { object-fit: cover; object-position: top left } .card.wide { grid-column: span 2 }

/* lista grande con imagen que cambia (como "Designed for what happens mid-shift") */
.mid { background: var(--warm) } .mid .grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 40px; align-items: center; margin-top: 48px }
.feats { list-style: none; margin: 0; padding: 0 } .feats button { all: unset; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 12px; width: 100%; font-size: clamp(24px, 2.6vw, 36px); font-weight: 700; letter-spacing: -.02em; line-height: 1.18; color: #B9B3AE; padding: 6px 0; transition: color .2s }
.feats button:hover { color: #7d7671 } .feats button[aria-selected="true"] { color: var(--carbon) } .feats button[aria-selected="true"]::after { content: '→'; color: var(--orange); font-size: .8em }
.feats button:focus-visible { outline: 3px solid var(--orange); outline-offset: 4px; border-radius: 6px }
.stage { position: relative; border-radius: 28px; overflow: hidden; aspect-ratio: 4/3.4; background: var(--carbon) }
.stage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .45s } .stage img.on { opacity: 1 } .stage img.shot { object-fit: contain; background: #fff; padding: 18px }
.stage p { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; padding: 60px 26px 22px; color: #fff; font-weight: 700; font-size: 17px; background: linear-gradient(transparent, #14181dd9) }

/* bloques foto + texto */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center } .split.rev > :first-child { order: 2 }
.split .ph { border-radius: 28px; overflow: hidden; box-shadow: 0 30px 60px #2B313822 } .split ul { list-style: none; padding: 0; margin: 22px 0 30px; display: grid; gap: 12px }
.split li { padding-left: 34px; position: relative; font-weight: 600; font-size: 17px } .split li::before { content: ''; position: absolute; left: 4px; top: 7px; width: 14px; height: 8px; border-left: 3px solid var(--orange); border-bottom: 3px solid var(--orange); transform: rotate(-45deg) }
.dark { background: var(--carbon); color: #fff } .dark .sub { color: #C9D0D8 }
.stat { display: flex; gap: 34px; margin: 28px 0 32px; flex-wrap: wrap } .stat div b { display: block; font-size: 46px; letter-spacing: -.03em; line-height: 1; color: var(--orange) } .stat div span { color: #C9D0D8; font-size: 14.5px }

/* planes */
.plans { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 48px; align-items: stretch }
.plan { border: 1.5px solid var(--line); border-radius: var(--r); padding: 30px 24px 26px; display: flex; flex-direction: column; gap: 10px; position: relative; background: #fff }
.plan.star { border: 2px solid var(--orange); box-shadow: 0 24px 50px #FF6A0026 } .plan .tag { position: absolute; top: -14px; left: 24px; background: var(--orange); color: #fff; font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; padding: 5px 13px; border-radius: 99px }
.plan h3 { margin: 0; font-size: 23px } .plan .for { color: var(--muted); margin: 0; min-height: 48px }
.price { font-size: 46px; font-weight: 800; letter-spacing: -.03em; line-height: 1 } .price small { font-size: 15px; color: var(--muted); font-weight: 600; letter-spacing: 0 }
.plan ul { list-style: none; padding: 18px 0 0; margin: 6px 0 18px; border-top: 1px solid var(--line); display: grid; gap: 10px; flex: 1; align-content: start }
.plan li { padding-left: 26px; position: relative; font-size: 15px } .plan li::before { content: ''; position: absolute; left: 2px; top: 7px; width: 11px; height: 6px; border-left: 2.2px solid var(--orange); border-bottom: 2.2px solid var(--orange); transform: rotate(-45deg) } .plan li.plus { font-weight: 800 }
.ceri-plan { margin-top: 18px; background: var(--carbon); color: #fff; border-radius: var(--r); overflow: hidden; display: grid; grid-template-columns: 1fr 340px; align-items: stretch }
.ceri-plan > div { padding: 30px 34px; display: flex; flex-direction: column; justify-content: center; gap: 10px } .ceri-plan h3 { margin: 0; font-size: 26px } .ceri-plan p { margin: 0; color: #C9D0D8 } .ceri-plan img { width: 100%; height: 100%; object-fit: cover }
.fine { text-align: center; color: var(--muted); font-size: 14px; margin-top: 20px }
.compare { margin-top: 52px; overflow-x: auto } .compare table { width: 100%; border-collapse: collapse; min-width: 720px; background: #fff; border-radius: 16px; overflow: hidden; border: 1px solid var(--line) }
.compare th, .compare td { padding: 14px 16px; border-bottom: 1px solid var(--line); text-align: center } .compare th:first-child, .compare td:first-child { text-align: left } .compare thead th { background: var(--carbon); color: #fff } .yes { color: var(--ok); font-weight: 800 } .no { color: #B4BCC5 }

/* giros en texto grande (como Toast) */
.types { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 26px; margin-top: 40px }
.types a { font-size: clamp(26px, 3.1vw, 42px); font-weight: 700; letter-spacing: -.02em; color: #C7CDD3; text-decoration: none; transition: color .2s } .types a:hover { color: var(--orange) }

/* preguntas */
.faq { max-width: 860px; margin: 40px auto 0 } details { border-bottom: 1px solid var(--line); padding: 20px 4px } summary { font-weight: 800; font-size: 19px; cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 16px } summary::-webkit-details-marker { display: none }
summary::after { content: '+'; color: var(--orange); font-size: 28px; line-height: 1 } details[open] summary::after { content: '−' } details p { color: var(--muted); margin: 10px 0 0; font-size: 16.5px }

/* cierre */
.closing { position: relative; overflow: hidden; color: #fff; background: var(--carbon) } .closing > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .38 }
.closing .wrap { position: relative; padding-block: 120px; text-align: center } .closing h2 { font-size: clamp(42px, 6vw, 84px) } .closing p { color: #E3E7EB; font-size: 20px; margin: 0 auto 32px; max-width: 620px }
.btn.wa { background: #1F9D55; color: #fff; font-size: 18px; padding: 17px 34px } .btn.wa:hover { background: #18834a }

footer { background: #1f2329; color: #C9D0D8; padding-block: 64px 28px } footer .cols { display: grid; grid-template-columns: 1.4fr repeat(4, 1fr); gap: 28px }
footer h6 { color: #fff; font-size: 14px; margin: 0 0 14px } footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 9px; font-size: 14.5px } footer a { text-decoration: none } footer a:hover { color: #fff }
footer .legal { border-top: 1px solid #ffffff1f; margin-top: 44px; padding-top: 20px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 13px }

.reveal { opacity: 1; transform: none } @media (prefers-reduced-motion: no-preference) { .js .reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s, transform .7s } .js .reveal.in { opacity: 1; transform: none } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto } .hand path { animation: none; stroke-dashoffset: 0 } }
@media (max-width: 1020px) {
  .menu, .nav .act .login { display: none } .burger { display: block; margin-left: auto }
  .nav.mob .menu { display: flex; flex-direction: column; position: absolute; left: 0; right: 0; top: 74px; background: #fff; padding: 12px 20px 20px; border-bottom: 1px solid var(--line); max-height: calc(100vh - 74px); overflow-y: auto }
  .mega { position: static; box-shadow: none; border: 0 } .mega .wrap { grid-template-columns: 1fr; padding: 0 0 12px } .mega .feat { display: none }
  .cards { grid-template-columns: 1fr 1fr } .card.wide { grid-column: span 2 } .mid .grid, .split, .ceri-plan { grid-template-columns: 1fr } .split.rev > :first-child { order: 0 }
  .plans { grid-template-columns: 1fr 1fr } .trust .wrap { grid-template-columns: 1fr 1fr } footer .cols { grid-template-columns: 1fr 1fr } .ceri-plan img { max-height: 260px }
  .hero::after { background: linear-gradient(180deg, #14181d99 0%, #14181de6 70%) } .hero > img { object-position: 78% center }
}
@media (max-width: 600px) {
  .cards, .plans, .trust .wrap { grid-template-columns: 1fr } .card.wide { grid-column: auto } .card { min-height: 330px } section.s { padding-block: 72px }
  .util .right, .util .lg { display: none } .nav .act .btn.o { padding: 10px 15px; font-size: 13.5px } .nav .logo img { height: 28px } .nav .wrap { gap: 12px } .hero { min-height: 580px }
}

/* páginas internas */
.menu a[aria-current="page"], .menu button.cur { color: var(--orange2) }
.phero { position: relative; color: #fff; background: var(--carbon); overflow: hidden }
.phero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .42 }
.phero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, #14181de6 0%, #14181d99 55%, transparent 100%) }
.phero .wrap { position: relative; z-index: 2; padding-block: 88px 80px }
.phero h1 { font-size: clamp(40px, 5.6vw, 76px); line-height: 1; letter-spacing: -.035em; margin: 0 0 18px; max-width: 840px; font-weight: 800; text-wrap: balance }
.phero p.lead { font-size: 20px; color: #E3E7EB; max-width: 620px; margin: 0 0 28px }
.crumbs { display: flex; gap: 8px; align-items: center; font-size: 14px; font-weight: 700; color: #C9D0D8; margin: 0 0 18px } .crumbs a { text-decoration: none; color: #fff } .crumbs a:hover { color: var(--orange3) }
.subnav { position: sticky; top: 74px; z-index: 40; background: #fff; border-bottom: 1px solid var(--line) }
.subnav .wrap { display: flex; gap: 8px; overflow-x: auto; padding-block: 12px; scrollbar-width: none } .subnav .wrap::-webkit-scrollbar { display: none }
.subnav a { flex: none; padding: 8px 16px; border-radius: 99px; background: var(--grey); font-weight: 700; font-size: 14.5px; text-decoration: none } .subnav a:hover { background: var(--soft); color: var(--orange2) }
.anchor { scroll-margin-top: 140px }
.plan-tag { display: inline-block; background: var(--soft); color: var(--orange2); font-weight: 800; font-size: 12.5px; letter-spacing: .04em; padding: 5px 12px; border-radius: 99px; margin-bottom: 14px }
.dark .plan-tag { background: #ffffff1a; color: var(--orange3) }
.probs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 48px }
.prob { background: #fff; border: 1.5px solid var(--line); border-radius: var(--r); padding: 28px 26px; display: flex; flex-direction: column; gap: 10px; text-decoration: none; transition: border-color .2s, transform .2s, box-shadow .2s }
.prob:hover { border-color: var(--orange); transform: translateY(-3px); box-shadow: 0 20px 40px #2B313814 }
.prob .q { color: var(--muted); font-size: 15.5px; margin: 0 } .prob b { font-size: 22px; letter-spacing: -.015em; line-height: 1.2 } .prob p { margin: 0; color: var(--muted); font-size: 15px }
.prob .more { margin-top: auto; padding-top: 8px; color: var(--orange2); font-weight: 800; font-size: 14.5px }
.prob svg { width: 40px; height: 40px; padding: 9px; border-radius: 12px; background: var(--soft); color: var(--orange) }
.steps3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 48px }
.step { border-radius: var(--r); overflow: hidden; background: #ffffff0f; display: flex; flex-direction: column }
.step img { aspect-ratio: 4/3; width: 100%; object-fit: cover } .step img.shot { object-fit: contain; background: #fff; padding: 10px }
.step div { padding: 22px 24px 26px } .step i { font-style: normal; display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--orange); color: #fff; font-weight: 800; margin-bottom: 10px }
.step b { display: block; font-size: 21px; margin-bottom: 4px } .step p { margin: 0; color: #C9D0D8 }
.shotframe { border-radius: 18px; overflow: hidden; border: 1px solid var(--line); box-shadow: 0 30px 60px #2B313822; background: #fff }
.shotframe img { width: 100% }
.mini-plans { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; margin-top: 44px }
.mini-plans a { background: #fff; border: 1.5px solid var(--line); border-radius: 18px; padding: 22px 20px; text-decoration: none; display: flex; flex-direction: column; gap: 6px; transition: border-color .2s, transform .2s }
.mini-plans a:hover { border-color: var(--orange); transform: translateY(-3px) } .mini-plans b { font-size: 18px } .mini-plans .pr { font-size: 32px; font-weight: 800; letter-spacing: -.03em } .mini-plans .pr small { font-size: 13px; color: var(--muted); font-weight: 600 } .mini-plans span { color: var(--muted); font-size: 14px }
.mini-plans a.star { border-color: var(--orange); box-shadow: 0 18px 40px #FF6A0022 }
.gallery { display: grid; grid-template-columns: .55fr 1fr 1fr; gap: 18px; margin-top: 44px; align-items: start }
.gallery figure { margin: 0 } .gallery figcaption { font-size: 14px; color: var(--muted); margin-top: 10px; font-weight: 600 }
.contact-card { margin: 48px auto 0; max-width: 860px; background: var(--carbon); color: #fff; border-radius: var(--r); padding: 34px; display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap }
.contact-card h3 { margin: 0 0 4px; font-size: 24px } .contact-card p { margin: 0; color: #C9D0D8 }
.faq h3.grp { margin: 40px 0 6px; font-size: 14px; letter-spacing: .12em; text-transform: uppercase; color: var(--orange) }
@media (max-width: 1020px) { .probs, .steps3 { grid-template-columns: 1fr 1fr } .mini-plans { grid-template-columns: 1fr 1fr 1fr } .gallery { grid-template-columns: 1fr 1fr } .gallery figure:first-child { grid-row: span 2 } .subnav { top: 74px } }
@media (max-width: 600px) { .probs, .steps3, .mini-plans { grid-template-columns: 1fr } .gallery { grid-template-columns: 1fr } .gallery figure:first-child { grid-row: auto; max-width: 300px; margin-inline: auto } .phero .wrap { padding-block: 64px 56px } }