/* Página de servicio: estilos aislados, sin depender de home.css. */
.experience-page .site-header { position: relative; z-index: 2; color: #f5f4ee; background: transparent; }
.experience-page .site-header :focus-visible { outline-color: #f5f4ee; }
.experience-page em { font-family: var(--font-editorial); font-weight: 400; }
.experience-page main h2 { font-size: clamp(2.2rem, 4.6vw, 4.7rem); font-weight: 400; line-height: 1.1; letter-spacing: -.05em; }
.experience-page .experience-eyebrow { font-size: .7rem; line-height: 1.6; letter-spacing: .15em; margin-bottom: 2rem; }
.experience-hero { --experience-header-height: 7rem; position: relative; isolation: isolate; padding: clamp(4rem, 8vw, 8rem) var(--page-gutter) 4rem; min-height: min(830px, 90svh); display: grid; place-items: center; text-align: center; color: #f5f4ee; background: #101110; }
.experience-hero::before { content: ''; position: absolute; inset: calc(-1 * var(--experience-header-height)) 0 0; z-index: -3; background: #101110; }
.experience-atmosphere { position: absolute; inset: calc(-1 * var(--experience-header-height)) 0 0; overflow: hidden; pointer-events: none; z-index: -2; }
.experience-hero::after { content: ''; position: absolute; inset: calc(-1 * var(--experience-header-height)) 0 0; z-index: -1; pointer-events: none; background: radial-gradient(ellipse at 50% 48%, rgb(10 11 10 / 94%) 0%, rgb(10 11 10 / 82%) 30%, rgb(10 11 10 / 28%) 76%, rgb(10 11 10 / 42%) 100%); }
.experience-hero-content { max-width: 1000px; }
.experience-page .experience-hero .experience-eyebrow { font-size: clamp(1.4rem, 2.2vw, 2rem); letter-spacing: .1em; margin-bottom: 2.5rem; }
.experience-hero h1 { max-width: 19ch; margin-inline: auto; font-size: clamp(2.9rem, 5.8vw, 6rem); font-weight: 400; line-height: 1.06; letter-spacing: -.055em; }
.experience-hero h1 em { color: #d3d4c8; }
.experience-lead { max-width: 43ch; margin: 2rem auto; font-size: 1.05rem; line-height: 1.7; color: #d3d4c8; }
.experience-page .experience-button { border: 1px solid #eeeee5; background: #eeeee5; color: #20221d; font-size: .7rem; letter-spacing: .08em; cursor: pointer; max-width: 100%; }
.experience-page .experience-button:hover { background: #d6d8cb; }
.experience-hero :focus-visible, .experience-final :focus-visible, .experience-page .showcase :focus-visible { outline: 2px solid #f5f4ee; outline-offset: 5px; }
.experience-hero-index { margin-top: 3.5rem; font: .62rem/1.8 var(--font-sans); letter-spacing: .13em; color: #b9bcb0; }
.interface-fragment { position: absolute; opacity: .30; color: #d3d5c8; }
.interface-fragment i { display: block; position: absolute; border: 1px solid currentColor; }
.fragment-layout { width: 300px; height: 240px; left: -2%; top: 15%; border-top: 1px solid currentColor; }
.fragment-layout i:nth-child(1) { top: 18px; left: 0; width: 65%; height: 2px; }
.fragment-layout i:nth-child(2) { top: 55px; left: 0; width: 38%; height: 140px; }
.fragment-layout i:nth-child(3) { top: 55px; right: 0; width: 52%; height: 70px; }
.fragment-products { width: 340px; height: 180px; right: -3%; bottom: 15%; }
.fragment-products i { width: 28%; height: 150px; }
.fragment-products i::after { content: ''; position: absolute; left: 20%; right: 20%; top: 20%; bottom: 30%; border: 1px solid currentColor; border-radius: 50% 50% 3px 3px; }
.fragment-products i:nth-child(2) { left: 36%; top: 20px; }
.fragment-products i:nth-child(3) { right: 0; top: 40px; }
.fragment-mobile { width: 120px; height: 220px; right: 8%; top: 8%; border: 1px solid currentColor; border-radius: 12px; }
.fragment-mobile i:nth-child(1) { inset: 20px 15px 65px; }
.fragment-mobile i:nth-child(2) { bottom: 20px; left: 15px; right: 15px; height: 24px; }
.fragment-cart { width: 200px; height: 120px; left: 8%; bottom: 7%; border-block: 1px solid currentColor; }
.fragment-cart i:first-child { left: 5px; top: 18px; width: 50px; height: 50px; }
.fragment-cart i:last-child { right: 0; bottom: 15px; width: 90px; height: 20px; }
.experience-section { max-width: var(--content-max); padding: clamp(4.5rem, 8vw, 8rem) var(--page-gutter); margin-inline: auto; }
.experience-copy { max-width: 45ch; margin: 2rem auto 0; font-size: 1.05rem; line-height: 1.8; color: #64665d; }
.experience-declaration { text-align: center; }
.experience-page .experience-declaration h2 { font-size: clamp(1.7rem, 4.5vw, 4.6rem); }
.experience-declaration h2 > span { display: block; margin-top: 1.5rem; }
.experience-declaration h2 em { text-transform: none; }
.experience-capabilities { border-top: 1px solid var(--line); text-align: center; }
.capability-list { margin-top: 3rem; text-align: left; }
.capability-list article { display: grid; grid-template-columns: 3rem 1.2fr 1fr; gap: 2rem; align-items: baseline; padding: 2.4rem 0; border-top: 1px solid #cdcec5; }
.capability-list article > span { font: italic 1rem Georgia, serif; color: #737669; }
.capability-list h3 { font-size: clamp(1.3rem, 2.5vw, 2.4rem); font-weight: 400; letter-spacing: -.04em; }
.capability-list p { max-width: 34ch; line-height: 1.7; color: #64665d; }
.experience-purpose { background: #171914; color: #f5f4ee; text-align: center; }
.purpose-pair { display: grid; grid-template-columns: 1fr auto 1fr; gap: 2rem; align-items: center; max-width: 950px; margin: 4rem auto 0; }
.purpose-pair h3 { font-weight: normal; font-size: clamp(1.15rem, 2.4vw, 2rem); letter-spacing: -.035em; }
.purpose-pair p { margin-top: 1rem; color: #babeb0; line-height: 1.7; }
.purpose-pair > span { font: italic 3rem Georgia, serif; color: #a9ae9e; }
.purpose-result { margin: 3rem auto 0; padding-top: 3rem; border-top: 1px solid #4d5145; font-size: clamp(1.5rem, 3vw, 3rem); letter-spacing: -.04em; }
.experience-page .showcase { background: #fbfbf8; color: #20221d; padding-block: 5rem; }
.experience-page .showcase-heading { text-align: center; }
.experience-page .showcase-controls { padding-block: .25rem; }
.experience-page .showcase-toggle { position: relative; top: .25rem; }
.experience-page .showcase h2 { margin-inline: auto; }
.experience-page .showcase-heading > p:last-child { margin-inline: auto; color: #64665d; }
.experience-page .showcase-note { color: #64665d; text-align: center; line-height: 1.8; }
.experience-page .showcase-preview figcaption { position: static; padding: .75rem 0; background: transparent; color: #42463a; opacity: 1; transform: none; max-width: none; }
.experience-page .showcase-capture { border-color: #d0d2c7; }
.experience-page .showcase-row:focus-visible, .experience-page .showcase-toggle:focus-visible { outline-color: #20221d; outline-offset: -3px; }
.experience-page .showcase-toggle[hidden] { display: none; }
.experience-page .showcase-gallery { grid-template-columns: minmax(0, 1fr); }
.experience-page .showcase-row { min-width: 0; overflow: clip; }
.experience-page .showcase-track { animation-play-state: paused; }
.experience-page .showcase.is-ready .showcase-track { animation-play-state: running; }
.experience-page .showcase.is-paused .showcase-track, .experience-page .showcase:focus-within .showcase-track { animation-play-state: paused; }
.experience-page .showcase:not(.is-ready) .showcase-group[aria-hidden="true"] { display: none; }
.experience-process, .experience-includes, .experience-faq { text-align: center; }
.experience-steps { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); margin-top: 4rem; text-align: left; }
.experience-steps li { padding: 1.5rem; border-top: 1px solid #c9cbc0; }
.experience-steps li + li { border-left: 1px solid #c9cbc0; }
.experience-steps span { font: italic 2.5rem Georgia, serif; color: #757969; }
.experience-steps h3 { font-size: .82rem; letter-spacing: .04em; margin: 2rem 0 1rem; font-weight: normal; }
.experience-steps p { font-size: .9rem; line-height: 1.8; color: #64665d; }
.experience-includes { border-top: 1px solid #d9dbd1; }
.experience-includes .include-columns { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 2rem; margin-top: 3rem; text-align: left; align-items: start; }
.experience-includes .include-column { list-style: none; margin: 0; padding: 0; min-width: 0; }
.experience-includes li { border-bottom: 1px solid #d9dbd1; padding: 1.3rem 0; font-size: .9rem; }
.experience-investment { background: #fafaf7; }
.experience-investment h2, .experience-investment .experience-eyebrow { text-align: center; }
.experience-investment .experience-copy { text-align: center; }
.investment-list { margin-top: 4rem; }
.investment-list > div { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; padding: 2.2rem 0; border-top: 1px solid #bfc3b3; align-items: center; }
.investment-list dt { font-size: .95rem; line-height: 1.5; }
.investment-list dt small { display: block; max-width: 45ch; font-size: .85rem; font-weight: normal; margin-top: .7rem; color: #565c4d; line-height: 1.7; }
.investment-list dd { text-align: right; font: clamp(1.5rem, 2.9vw, 2.7rem)/1.4 Georgia, serif; letter-spacing: -.035em; }
.investment-list dd small { font: .65rem var(--font-sans); letter-spacing: .06em; }
.investment-note { max-width: 65ch; margin-top: 2rem; font-size: .85rem; line-height: 1.8; color: #565c4d; }
.experience-faq .faq-item { max-width: 900px; margin-inline: auto; text-align: left; border-bottom: 1px solid #cdcec5; }
.experience-faq .faq-item:first-of-type { margin-top: 3rem; border-top: 1px solid #cdcec5; }
.experience-faq .faq-item h3 { padding: 1.5rem 0; font-size: 1rem; line-height: 1.6; font-weight: 400; }
.experience-faq .include-toggle { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 1rem; padding: 0; border: 0; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.experience-faq .include-toggle[hidden] { display: none; }
.experience-faq .faq-item p { max-width: 70ch; padding: 0 0 1.5rem; color: #64665d; line-height: 1.8; font-size: 1rem; }
.experience-final { background: #171914; color: #f5f4ee; text-align: center; }
.experience-final .experience-copy { color: #babeb0; }
.experience-actions { display: flex; justify-content: center; align-items: center; gap: 2rem; margin-top: 2.5rem; }
.experience-actions > a { font-size: .85rem; text-decoration: underline; text-underline-offset: .35em; }
.experience-page .footer-navigation > span { font-size: .8rem; line-height: 1.8; }
.experience-page .footer-navigation > span small { color: #62625d; }
@media (prefers-reduced-motion: no-preference) {
  .interface-fragment { animation: experience-drift 55s ease-in-out infinite alternate; }
  .fragment-products, .fragment-cart { animation-direction: alternate-reverse; animation-delay: -20s; }
  .capability-list article { transition: background-color 350ms ease; }
}
@keyframes experience-drift { from { transform: translateY(0); } to { transform: translateY(-20px); } }
@media (hover: hover) and (pointer: fine) { .capability-list article:hover { background: #fafaf7; } }
@media (max-width: 64rem) {
  .fragment-cart { display: none; }
  .experience-steps { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .experience-steps li:nth-child(3) { border-left: 0; }
  .investment-list > div { grid-template-columns: 1.1fr 1fr; }
}
@media (max-width: 56rem) { .experience-hero { --experience-header-height: 5.75rem; } }
@media (max-width: 40rem) {
  .experience-hero { min-height: 680px; padding-block: 4rem; }
  .experience-hero h1 { font-size: clamp(2.6rem, 10vw, 3.5rem); }
  .experience-hero-index { font-size: .55rem; letter-spacing: .07em; }
  .fragment-mobile { display: none; }
  .fragment-layout { left: -55%; opacity: .18; }
  .fragment-products { right: -65%; opacity: .18; }
  .experience-page main h2 { font-size: clamp(1.8rem, 7vw, 2.7rem); }
  .experience-page .experience-declaration h2 { font-size: clamp(1.25rem, 5.1vw, 2rem); }
  .capability-list article { grid-template-columns: 1.8rem 1fr; gap: 1rem; }
  .capability-list p { grid-column: 2; }
  .purpose-pair { grid-template-columns: 1fr; gap: 1.5rem; margin-top: 3rem; }
  .experience-includes .include-columns { display: flex; flex-direction: column; gap: 0; }
  .experience-includes .include-column { display: contents; }
  .experience-includes .include-item { order: var(--include-order); }
  .experience-steps { grid-template-columns: 1fr; }
  .experience-steps li + li { border-left: 0; }
  .investment-list > div { grid-template-columns: 1fr; gap: 1rem; }
  .investment-list dd { text-align: left; }
  .experience-actions { flex-direction: column; gap: 1.5rem; }
  .experience-page .showcase-preview--image { width: min(80vw, 21rem); }
}
@media (prefers-reduced-motion: reduce) {
  .interface-fragment { animation: none; }
  .experience-page .showcase-group[aria-hidden="true"] { display: none; }
  .experience-page .showcase-track { animation: none; }
}

/* Detalles de alcance: mismo grid editorial; despliegue independiente por fila. */
.experience-includes .include-toggle {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: 0; border: 0; background: transparent; color: inherit;
  font: inherit; text-align: left; line-height: inherit; cursor: pointer;
}
.experience-includes .include-toggle[hidden] { display: none; }
.include-toggle > span { font-size: 1rem; font-weight: normal; }
.include-description p { padding-top: .9rem; font-size: .85rem; line-height: 1.75; color: #64665d; }
.include-item.is-interactive .include-static-title { display: none; }
.include-item.is-interactive .include-description {
  display: grid; grid-template-rows: 0fr; opacity: 0;
  transition: grid-template-rows 320ms ease, opacity 250ms ease;
}
.include-item.is-interactive .include-description > div { min-height: 0; overflow: hidden; }
.include-item.is-open .include-description { grid-template-rows: 1fr; opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .include-item.is-interactive .include-description { transition: none; }
}

/* Inversión: énfasis óptico del precio sin alterar el flujo editorial. */
@media (hover: hover) and (pointer: fine) {
  .investment-list dd { transform-origin: right center; transition: transform 320ms ease, color 320ms ease; }
  .investment-list > div:hover dd { transform: scale(1.035); color: #10120e; }
}
@media (max-width: 40rem) and (hover: hover) and (pointer: fine) {
  .investment-list dd { transform-origin: left center; }
}
@media (prefers-reduced-motion: reduce) {
  .investment-list dd { transition: none; }
  .investment-list > div:hover dd { transform: none; }
}

/* Mismo overlay ambiental que el lobby; las figuras propias permanecen intactas. */
@media (min-width: 64.001rem) {
  .experience-hero::after { background: radial-gradient(ellipse at 50% 48%, rgb(10 11 10 / 96%) 0%, rgb(10 11 10 / 86%) 28%, rgb(10 11 10 / 32%) 52%, rgb(10 11 10 / 6%) 78%, transparent 100%); }
}