@import url("https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,400;14..32,500;14..32,600;14..32,700&display=swap");

/* ADN Base — componentes. Todo valor sale de un token (tokens.css). */

body { margin: 0; background: var(--surface); color: var(--text-primary); font-family: var(--font-sans); -webkit-font-smoothing: antialiased; }
.adn, .adn * { box-sizing: border-box; }
.adn { font-family: var(--font-sans); font-size: 17px; line-height: 25px; letter-spacing: -0.011em; color: var(--text-primary); }
.adn h1, .adn h2, .adn h3, .adn h4, .adn p { margin: 0; }
.adn-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); padding: var(--space-6); }
.adn-stack { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-6); }

/* Responsive de la escala display: un escalón menos en tablet, menos de la mitad en móvil */
@media (max-width: 1068px) {
  .display-hero, .display-xl { font-size: 64px; line-height: 68px; letter-spacing: -0.009em; }
  .display-lg { font-size: 56px; line-height: 60px; }
  .display-md { font-size: 48px; line-height: 52px; }
  .display-sm { font-size: 40px; line-height: 44px; letter-spacing: 0; }
  .headline { font-size: 32px; line-height: 36px; }
  .title-lg { font-size: 28px; line-height: 32px; }
  .title { font-size: 24px; line-height: 28px; }
  .lead { font-size: 19px; line-height: 27px; }
}
@media (max-width: 734px) {
  .display-hero, .display-xl, .display-lg { font-size: 40px; line-height: 44px; letter-spacing: 0; }
  .display-md, .display-sm { font-size: 32px; line-height: 36px; letter-spacing: 0.004em; }
  .headline { font-size: 28px; line-height: 32px; }
  .title-lg { font-size: 24px; line-height: 28px; }
  .title { font-size: 21px; line-height: 25px; }
  .title-sm { font-size: 21px; line-height: 25px; }
  .lead { font-size: 17px; line-height: 25px; }
}

/* Foco: nunca se elimina */
.adn :focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }

/* ---------- Botón ---------- */
.adn-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-1);
  min-height: var(--control-lg); padding: 0 22px; border: 1px solid transparent; border-radius: var(--radius-pill);
  font: 400 17px/1 var(--font-sans); letter-spacing: -0.011em; text-decoration: none; white-space: nowrap; cursor: pointer;
  background: var(--action); color: var(--on-action);
  transition: background-color var(--duration-standard) var(--ease-standard), color var(--duration-standard) var(--ease-standard), border-color var(--duration-standard) var(--ease-standard); }
.adn-btn:hover { background: var(--action-hover); }
.adn-btn--secondary { background: transparent; color: var(--link); border-color: var(--link); }
.adn-btn--secondary:hover { background: var(--link); color: var(--surface); }
.adn-btn--sm { min-height: var(--control-sm); padding: 0 16px; font-size: 14px; letter-spacing: -0.016em; }
.adn-btn[aria-disabled="true"], .adn-btn:disabled { opacity: var(--opacity-disabled); pointer-events: none; }
.adn-cta { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: center; }
.adn-center .adn-cta { justify-content: center; }

/* ---------- Enlace con flecha ---------- */
.adn-link { color: var(--link); text-decoration: none; font-size: 17px; line-height: 25px; }
.adn-link::after { content: "\00a0\203A"; }
.adn-link:hover { text-decoration: underline; }
.adn-link--sm { font-size: 14px; line-height: 20px; }

/* ---------- Badge ---------- */
.adn-badge { display: inline-block; font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: -0.01em; color: var(--new); }

/* ---------- Encabezado de capítulo ---------- */
.adn-chapter-head { display: flex; flex-direction: column; gap: var(--space-2); max-width: var(--container-content); }
.adn-chapter-head .eyebrow { color: var(--text-secondary); }

/* ---------- Párrafo con entrada ---------- */
.adn-lead-p { color: var(--text-muted); max-width: var(--container-copy); }
.adn-lead-p strong { color: var(--text-primary); font-weight: 600; }
.adn-lead-p.lead { max-width: 840px; }

/* ---------- Layout ---------- */
.adn-section { padding-block: var(--space-section); background: var(--surface); color: var(--text-primary); }
.adn-section--alt { background: var(--surface-alt); }
.adn-section--raised { background: var(--surface-raised); }
.adn-section--end { padding-bottom: var(--space-section-end); }
.adn-section--flush-top { padding-top: 0; }
.adn-container { width: var(--container-fluid); max-width: var(--container-content); margin-inline: auto; }
.adn-container--text { max-width: var(--container-text); }
.adn-container--reading { max-width: var(--container-reading); }
.adn-container--hero { max-width: var(--container-hero); }
.adn-center { text-align: center; }
.adn-gap-10 > * + * { margin-top: var(--space-10); }
.adn-gap-4 > * + * { margin-top: var(--space-4); }
.adn-grid { display: grid; gap: var(--space-5); }
.adn-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.adn-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.adn-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.adn-grid--tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); padding-inline: var(--space-3); }
@media (max-width: 734px) { .adn-grid--2, .adn-grid--3, .adn-grid--4, .adn-grid--tiles { grid-template-columns: 1fr; } }
@media (max-width: 734px) { .adn-section { padding-block: var(--space-section-sm); } }
@media (min-width: 735px) and (max-width: 1068px) { .adn-section { padding-block: var(--space-section-md); } }

/* Marcador de medio (imagen o vídeo del proyecto) */
.adn-media { display: grid; place-items: center; background: var(--surface-raised); color: var(--text-secondary); border-radius: var(--radius-card);
  font-size: 12px; line-height: 16px; letter-spacing: -0.01em; aspect-ratio: 16 / 9; width: 100%; }
.adn-media { padding: var(--space-6) max(var(--space-6), calc(50% - 210px)); text-align: center; text-wrap: balance; }
.adn-media--flat { border-radius: 0; }
.adn-section--raised .adn-media { background: var(--surface); }
.adn-card .adn-cta + .adn-media { margin-top: var(--space-10); }
.adn-media--square { aspect-ratio: 1; }
.adn-media--tall { aspect-ratio: 4 / 5; }

/* ---------- Tile de home ---------- */
.adn-tile { background: var(--surface-alt); color: var(--text-primary); text-align: center; padding-top: var(--space-14); overflow: hidden; display: flex; flex-direction: column; align-items: center; gap: var(--space-2); }
.adn-tile .adn-cta { margin-top: var(--space-4); justify-content: center; }
.adn-tile .adn-media { margin-top: var(--space-10); border-radius: 0; aspect-ratio: 21 / 9; }
.adn-tile--half .adn-media { aspect-ratio: 16 / 10; }
.adn-tile .tile-sub { color: var(--text-primary); font-weight: 400; }

/* ---------- Card ---------- */
.adn-card { --card-pad: var(--space-8); background: var(--surface-alt); color: var(--text-primary); border-radius: var(--radius-card); padding: var(--card-pad); display: flex; flex-direction: column; gap: var(--space-2); overflow: hidden; }
.adn-card .card-eyebrow { font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: -0.01em; color: var(--text-secondary); }
/* Medio a sangre (v1.5): toca los bordes de la card y lo recorta su radio. Observado en 38 de 38 cards con foto (iPhone, Mac, Watch) */
.adn-card > .adn-media, .adn-card > img, .adn-card > picture, .adn-card > video { margin: auto calc(-1 * var(--card-pad)) calc(-1 * var(--card-pad)); width: calc(100% + 2 * var(--card-pad)); max-width: none; border-radius: 0; }
.adn-card > img, .adn-card > video { display: block; object-fit: cover; }
.adn-card--wide { --card-pad: var(--space-12); }
/* Medio que llena la card, con el texto encima en una zona tranquila de la imagen */
.adn-card--fill { position: relative; isolation: isolate; min-height: 560px; }
.adn-card--fill > .adn-media, .adn-card--fill > img, .adn-card--fill > picture, .adn-card--fill > video { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; z-index: -1; aspect-ratio: auto; place-items: end center; }
.adn-card--tall { min-height: 560px; }
.adn-card--task { background: var(--surface-alt); box-shadow: var(--shadow-task); border-radius: var(--radius-panel); align-items: center; text-align: center; padding: var(--space-6); text-decoration: none; transition: transform var(--duration-standard) var(--ease-standard); }
.adn-card--task:hover { transform: scale(1.015); }
.adn-card--task .task-icon { width: 36px; height: 36px; border-radius: var(--radius-sm); background: var(--surface-raised); border: 1px solid var(--line); }
.adn-card--task span { color: var(--link); font-size: 14px; line-height: 20px; }
.adn-carousel { display: grid; grid-auto-flow: column; grid-auto-columns: 372px; gap: var(--space-5); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: var(--space-4); scrollbar-width: none; }
.adn-carousel > * { scroll-snap-align: start; }

/* ---------- Navegación ---------- */
.adn-globalnav { position: sticky; top: 0; z-index: 10; height: var(--nav-global); background: var(--nav-material); -webkit-backdrop-filter: var(--material-blur); backdrop-filter: var(--material-blur); }
.adn-globalnav ul { list-style: none; margin: 0 auto; padding: 0; height: 100%; max-width: var(--container-nav); display: flex; align-items: center; justify-content: space-between; width: var(--container-fluid); }
.adn-globalnav a { color: var(--text-primary); opacity: 0.8; text-decoration: none; font-size: 12px; line-height: 16px; letter-spacing: -0.01em; transition: opacity var(--duration-short) var(--ease-standard); }
.adn-globalnav a:hover { opacity: 1; }
.adn-globalnav .logo { font-weight: 600; opacity: 1; font-size: 14px; }
.adn-localnav { position: sticky; top: 0; z-index: 9; height: var(--nav-local); background: var(--nav-material); -webkit-backdrop-filter: var(--material-blur); backdrop-filter: var(--material-blur); border-bottom: 1px solid var(--line-subtle); }
.adn-localnav > div { height: 100%; width: var(--container-fluid); max-width: var(--container-text); margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); }
.adn-localnav .title-sm { font-size: 21px; line-height: 25px; }
.adn-localnav nav { display: flex; align-items: center; gap: var(--space-6); font-size: 12px; line-height: 16px; }
.adn-localnav nav a:not(.adn-btn) { color: var(--text-primary); text-decoration: none; opacity: 0.8; }
.adn-localnav .adn-btn--sm { min-height: 28px; padding: 0 12px; font-size: 12px; }
.adn-ribbon { background: var(--surface-alt); text-align: center; padding: var(--space-4) var(--space-6); font-size: 14px; line-height: 20px; color: var(--text-primary); }

/* Fila de productos */
.adn-product-row { display: flex; justify-content: center; gap: var(--space-8); flex-wrap: wrap; list-style: none; margin: 0; padding: 0; }
.adn-product-row a { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); color: var(--text-primary); text-decoration: none; font-size: 12px; line-height: 16px; letter-spacing: -0.01em; min-width: 72px; }
.adn-product-row .pr-icon { width: 54px; height: 54px; border-radius: var(--radius-sm); background: var(--surface-alt); border: 1px solid var(--line-subtle); }
.adn-product-row a:hover span:not(.adn-badge) { color: var(--link); }

/* ---------- Selección ---------- */
.adn-swatches { display: flex; gap: var(--space-2); }
.adn-swatch { width: 36px; height: 36px; border-radius: var(--radius-round); border: 0; padding: 3px; background: transparent; cursor: pointer; box-shadow: inset 0 0 0 1px var(--line); }
.adn-swatch > i { display: block; width: 100%; height: 100%; border-radius: var(--radius-round); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.11); }
.adn-swatch[aria-checked="true"] { box-shadow: inset 0 0 0 2px var(--focus); }
.adn-options { display: grid; gap: var(--space-3); max-width: 330px; }
.adn-option { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); min-height: var(--control-field); padding: var(--space-4); border: 1px solid var(--field-border); border-radius: var(--radius-field); background: var(--surface); cursor: pointer; transition: border-color var(--duration-short) var(--ease-standard); }
.adn-option b { font-weight: 600; }
.adn-option small { display: block; color: var(--text-secondary); font-size: 12px; line-height: 16px; }
.adn-option .price { font-size: 12px; line-height: 16px; text-align: right; color: var(--text-secondary); }
.adn-option[aria-checked="true"] { border: 2px solid var(--focus); padding: 15px; }
.adn-option[aria-disabled="true"] { opacity: var(--opacity-disabled); cursor: default; }
.adn-step-title { font-size: 24px; line-height: 28px; font-weight: 600; letter-spacing: 0.009em; }
.adn-step-title span { color: var(--text-secondary); }

/* ---------- Controles de carrusel ---------- */
.adn-carousel-controls { display: flex; align-items: center; justify-content: center; gap: var(--space-4); }
.adn-dots { display: flex; align-items: center; gap: var(--space-2); padding: 0 var(--space-5); height: 56px; border-radius: var(--radius-pill); background: var(--material); -webkit-backdrop-filter: var(--material-blur); backdrop-filter: var(--material-blur); }
.adn-dots i { width: 8px; height: 8px; border-radius: 10px; background: var(--text-secondary); opacity: 0.6; transition: width var(--duration-standard) var(--ease-standard); }
.adn-dots i.on { width: 48px; opacity: 1; background: var(--text-primary); }
.adn-round { width: 56px; height: 56px; border-radius: var(--radius-round); border: 0; background: var(--material); color: var(--text-primary); -webkit-backdrop-filter: var(--material-blur); backdrop-filter: var(--material-blur); font: 600 20px/1 var(--font-sans); cursor: pointer; display: grid; place-items: center; }
.adn-round--sm { width: 36px; height: 36px; font-size: 16px; }
.adn-round:disabled { opacity: var(--opacity-disabled); }

/* ---------- Formularios ---------- */
.adn-field { position: relative; display: block; max-width: 420px; }
.adn-field input { width: 100%; height: var(--control-field); padding: 18px 16px 0; border: 1px solid var(--field-border); border-radius: var(--radius-field); background: var(--surface); color: var(--text-primary); font: 400 17px/25px var(--font-sans); letter-spacing: -0.011em; outline: none; transition: border-color var(--duration-short) var(--ease-standard), box-shadow var(--duration-short) var(--ease-standard); }
.adn-field label { position: absolute; left: 17px; top: 16px; color: var(--text-secondary); font-size: 17px; line-height: 25px; pointer-events: none; transition: all var(--duration-short) var(--ease-standard); }
.adn-field input:focus, .adn-field input:not(:placeholder-shown) { }
.adn-field input:focus + label, .adn-field input:not(:placeholder-shown) + label { top: 8px; font-size: 12px; line-height: 16px; }
.adn-field input:focus { border-color: var(--focus); box-shadow: 0 0 0 4px var(--focus-halo); }
.adn-field .help { display: block; margin-top: var(--space-2); font-size: 12px; line-height: 16px; color: var(--text-secondary); }
.adn-field--error input { border-color: var(--error); }
.adn-field--error .help { color: var(--error); }
.adn-field--search input { padding: 0 16px 0 48px; }
.adn-field--search::before { content: ""; position: absolute; left: 18px; top: 19px; width: 13px; height: 13px; border: 2px solid var(--text-secondary); border-radius: 50%; }
.adn-field--search::after { content: ""; position: absolute; left: 31px; top: 33px; width: 7px; height: 2px; background: var(--text-secondary); transform: rotate(45deg); }
.adn-field--search { max-width: var(--container-text); }
.adn-select { appearance: none; -webkit-appearance: none; border: 0; background: transparent; color: var(--text-primary); font: 600 19px/23px var(--font-sans); padding: 16px 32px 16px 0; cursor: pointer; border-bottom: 1px solid var(--line); width: 100%;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: calc(100% - 14px) 26px, calc(100% - 9px) 26px; background-size: 5px 5px; background-repeat: no-repeat; }
.adn-check { display: flex; gap: var(--space-3); align-items: flex-start; font-size: 14px; line-height: 20px; color: var(--text-primary); max-width: 420px; }
.adn-check input { width: 20px; height: 20px; margin: 0; accent-color: var(--action); flex: none; }

/* ---------- Datos ---------- */
.adn-specs { max-width: var(--container-text); margin: 0 auto; width: var(--container-fluid); }
.adn-specs-row { display: grid; grid-template-columns: 216px repeat(2, minmax(0, 1fr)); gap: var(--space-6); padding-block: var(--space-14); border-top: 1px solid var(--line); }
.adn-specs-row h3 { font-size: 24px; line-height: 28px; font-weight: 600; letter-spacing: 0.009em; }
.adn-specs-row p { color: var(--text-primary); }
.adn-specs-row p + p { margin-top: var(--space-2); }
.adn-specs-row .col-head { font-weight: 600; }
@media (max-width: 734px) { .adn-specs-row { grid-template-columns: 1fr; } }
.adn-compare { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 3%; text-align: center; }
.adn-compare > div { padding-block: var(--space-6); display: flex; flex-direction: column; align-items: center; gap: var(--space-3); }
.adn-compare .cmp-icon { width: 32px; height: 32px; border-radius: var(--radius-sm); border: 1.5px solid var(--text-primary); }
.adn-compare .muted { color: var(--text-secondary); }
.adn-compare-head { position: sticky; top: 0; background: var(--surface); z-index: 2; border-bottom: 1px solid var(--line-subtle); }
.adn-footnotes { font-size: 12px; line-height: 16px; letter-spacing: -0.01em; color: var(--text-secondary); max-width: var(--container-text); margin: 0 auto; width: var(--container-fluid); padding-block: var(--space-6); border-top: 1px solid var(--line); }
.adn-footnotes ol { margin: 0; padding-left: 16px; display: grid; gap: var(--space-2); }
.adn sup { font-size: 0.6em; line-height: 0; vertical-align: super; }
.adn-sticky-bar { position: sticky; bottom: 0; background: var(--nav-material); -webkit-backdrop-filter: var(--material-blur); backdrop-filter: var(--material-blur); border-top: 1px solid var(--line-subtle); }
.adn-sticky-bar > div { min-height: 100px; width: var(--container-fluid); max-width: var(--container-content); margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); }
.adn-figure figcaption { margin-top: var(--space-3); font-size: 12px; line-height: 16px; font-weight: 600; color: var(--text-secondary); }

/* ---------- Movimiento ---------- */
.adn-reveal { opacity: 0; transform: translateY(24px); transition: opacity var(--duration-reveal) var(--ease-reveal), transform var(--duration-reveal) var(--ease-reveal); }
.adn-reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .adn-reveal { opacity: 1; transform: none; transition: none; }
  .adn *, .adn *::before, .adn *::after { transition-duration: 0.01s !important; scroll-behavior: auto !important; }
}

/* ---------- Footer ---------- */
.adn-footer { background: var(--surface-alt); color: var(--text-secondary); font-size: 12px; line-height: 16px; padding-block: var(--space-6) var(--space-10); }
.adn-footer > div { width: var(--container-fluid); max-width: var(--container-nav); margin: 0 auto; }
.adn-footer .cols { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-5); padding-block: var(--space-6); border-bottom: 1px solid var(--line); }
.adn-footer h4 { margin: 0 0 var(--space-2); font-size: 12px; font-weight: 600; color: var(--text-primary); }
.adn-footer a { display: block; color: var(--text-secondary); text-decoration: none; margin-bottom: var(--space-2); }
.adn-footer a:hover { text-decoration: underline; }

/* ---------- Navegación y footer en móvil (≤ 734px) ---------- */
@media (max-width: 734px) {
  .adn-globalnav li:not(:first-child):not(:last-child) { display: none; }
  .adn-localnav nav a:not(.adn-btn) { display: none; }
  .adn-localnav .title-sm { font-size: 19px; line-height: 23px; }
  .adn-footer .cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- StepTrack: secuencia en línea o en bucle (v1.1). Componente propio de ADN Base: la línea con nodos no se observó en apple.com ---------- */
.adn-steps { --n: 4; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: var(--space-6); position: relative; }
.adn-steps::before { content: ""; position: absolute; top: 7px; left: 7px; right: calc((100% - (var(--n) - 1) * var(--space-6)) / var(--n) - 7px); height: 1px; background: var(--line); }
.adn-step { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); }
.adn-step__node { width: 15px; height: 15px; border-radius: var(--radius-round); background: var(--surface); box-shadow: inset 0 0 0 4px var(--node, var(--action)); margin-bottom: var(--space-4); position: relative; }
.adn-step__label { font-size: 12px; line-height: 16px; font-weight: 600; color: var(--text-secondary); }
.adn-step__title { font-size: 24px; line-height: 28px; font-weight: 600; letter-spacing: 0.009em; color: var(--text-primary); }
.adn-step__text { color: var(--text-muted); }
.adn-steps--compact .adn-step__title { font-size: 19px; line-height: 23px; }
.adn-steps--compact .adn-step__text { font-size: 14px; line-height: 20px; }
/* Bucle: la línea vuelve por debajo del último paso al primero */
.adn-steps--loop { padding-bottom: var(--space-12); }
.adn-steps__return { position: absolute; left: 7px; right: calc((100% - (var(--n) - 1) * var(--space-6)) / var(--n) - 7px); bottom: 0; height: var(--space-8); border: 1px solid var(--line); border-top: 0; border-radius: 0 0 var(--radius-card) var(--radius-card); pointer-events: none; }
.adn-steps__return::before { content: ""; position: absolute; left: -5px; top: -2px; border: 5px solid transparent; border-bottom: 7px solid var(--line); border-top: 0; }
.adn-steps__return span { font-style: normal; position: absolute; left: 50%; bottom: 0; transform: translate(-50%, 50%); padding: 0 var(--space-3); background: var(--loop-bg, var(--surface)); font-size: 12px; line-height: 16px; font-weight: 600; color: var(--text-secondary); white-space: nowrap; }
/* Variante observada en apple.com (v1.3): pasos en columnas con número y título, sin línea ni nodos */
.adn-steps--plain::before, .adn-steps--plain .adn-step__node, .adn-steps--plain .adn-steps__return { display: none; }
.adn-steps--plain.adn-steps--loop { padding-bottom: 0; }
.adn-steps--plain .adn-step__label { font-size: 17px; line-height: 25px; font-weight: 600; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
/* Pasos seleccionables: el paso activo muestra su medio debajo */
button.adn-step { all: unset; box-sizing: border-box; cursor: pointer; display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); border-radius: var(--radius-field); padding-right: var(--space-2); }
button.adn-step:focus-visible { outline: 2px solid var(--focus); outline-offset: 6px; }
button.adn-step .adn-step__title { color: var(--text-secondary); transition: color var(--duration-short) var(--ease-standard); }
button.adn-step:hover .adn-step__title, button.adn-step[aria-selected="true"] .adn-step__title { color: var(--text-primary); }
button.adn-step[aria-selected="true"] .adn-step__node { background: var(--node, var(--action)); }
@media (max-width: 1068px) {
  .adn-steps { grid-template-columns: repeat(min(var(--n), 3), minmax(0, 1fr)); row-gap: var(--space-10); }
  .adn-steps::before, .adn-steps__return { display: none; }
  .adn-steps--loop { padding-bottom: 0; }
}
@media (max-width: 734px) {
  .adn-steps { grid-template-columns: 1fr; row-gap: var(--space-6); padding-left: var(--space-8); }
  .adn-steps::before { display: block; top: 7px; bottom: 7px; left: 7px; right: auto; width: 1px; height: auto; }
  .adn-step__node { position: absolute; left: calc(-1 * var(--space-8)); top: 0; margin: 0; }
  .adn-step__title { font-size: 21px; line-height: 25px; }
  .adn-steps--plain { padding-left: 0; row-gap: var(--space-8); }
  .adn-steps--plain .adn-step__node { display: none; }
  .adn-steps--plain::before { display: none; }
}

/* ---------- FeatureGrid: rejilla con una celda destacada (v1.1) ---------- */
.adn-feature-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--space-5); }
.adn-feature-grid > * { grid-column: span 3; }
.adn-feature-grid > .is-featured { grid-column: span 4; grid-row: span 2; }
.adn-feature-grid > .is-featured + * , .adn-feature-grid > .is-featured + * + * { grid-column: span 2; }
.adn-feature-grid > :nth-child(4):nth-last-child(3), .adn-feature-grid > :nth-child(4):nth-last-child(3) ~ * { grid-column: span 2; }
.adn-feature-grid .adn-card { gap: var(--space-3); }
.adn-feature-grid .adn-card h3 { font-size: 24px; line-height: 28px; font-weight: 600; letter-spacing: 0.009em; }
.adn-feature-grid .adn-card p { color: var(--text-muted); }
.adn-feature-grid .is-featured h3 { font-size: 32px; line-height: 36px; letter-spacing: 0.004em; }
.adn-feature-grid .is-featured > img, .adn-feature-grid .is-featured > .adn-media { margin-top: auto; }
@media (max-width: 1068px) {
  .adn-feature-grid > *, .adn-feature-grid > .is-featured + *, .adn-feature-grid > .is-featured + * + *, .adn-feature-grid > :nth-child(4):nth-last-child(3), .adn-feature-grid > :nth-child(4):nth-last-child(3) ~ * { grid-column: span 3; }
  .adn-feature-grid > .is-featured { grid-column: 1 / -1; grid-row: auto; }
}
@media (max-width: 734px) { .adn-feature-grid > *, .adn-feature-grid > * ~ * { grid-column: 1 / -1 !important; } }

/* ---------- ProductTile: ficha abierta para elegir un producto (v1.5). Observada en "Conoce a la familia" de Mac e iPad ---------- */
.adn-product-tile { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-2); }
.adn-product-tile__media { display: grid; place-items: center; width: 100%; aspect-ratio: 3 / 2; margin: 0 0 var(--space-6); border-radius: var(--radius-card); background: var(--surface-alt); overflow: hidden; object-fit: cover; }
.adn-section--alt .adn-product-tile__media { background: var(--surface); }
.adn-product-tile__swatches { display: flex; justify-content: center; gap: 6px; list-style: none; margin: 0 0 var(--space-3); padding: 0; }
.adn-product-tile__swatches li { width: 12px; height: 12px; border-radius: var(--radius-round); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.11); }
.adn-product-tile__new { min-height: 16px; font-size: 12px; line-height: 16px; font-weight: 600; color: var(--new); }
.adn-product-tile__name { font-size: 28px; line-height: 32px; font-weight: 600; letter-spacing: 0.007em; }
.adn-product-tile__lead { font-size: 17px; line-height: 25px; font-weight: 600; max-width: 30ch; }
.adn-product-tile__price { margin-top: var(--space-3); font-size: 14px; line-height: 20px; font-variant-numeric: tabular-nums; }
.adn-product-tile > .adn-cta { justify-content: center; margin-top: auto; padding-top: var(--space-4); }
@media (max-width: 734px) { .adn-product-tile__name { font-size: 24px; line-height: 28px; } }