/* Diego Cifuentes · Diseño de marca. Disposición de las secciones (dirección H, «Propuesta»):
   letra enorme y apretada, tarjetas amarillas, negras y grises, y el asterisco como sello.
   Colores, letra, espacio y movimiento salen de tokens.css. */

body > * { max-width: var(--ancho-max); margin-inline: auto; }
main:focus { outline: none; }
.seccion { padding: var(--seccion) var(--margen) 0; }
.cab { display: grid; grid-template-columns: 1fr minmax(0, 420px); gap: var(--e-10); align-items: end; margin-bottom: var(--e-8); }
.cab p { justify-self: end; }
.titulo-seccion { font-size: var(--t-h2); }
.acciones { display: flex; flex-wrap: wrap; gap: var(--e-3); }

/* Cabecera de metadatos */
.cabecera { display: grid; grid-template-columns: 1fr 1fr auto auto; gap: var(--e-8); align-items: center; padding: var(--e-6) var(--margen); font-size: var(--t-meta); }
.cab-marca { font-size: var(--t-chico); font-weight: 800; text-decoration: none; letter-spacing: -.01em; }
.cab-dato { line-height: 1.35; }
.cab-links { display: flex; gap: 2px; }
.cab-links a { padding: var(--e-2) var(--e-3); border-radius: var(--radio-pildora); font-size: 14px; font-weight: var(--peso-medio); text-decoration: none; transition: background-color var(--rapido) var(--ease-out); }
@media (hover: hover) { .cab-links a:hover { background: var(--gris-c); } }
.cab-links a[aria-current="true"] { background: var(--gris-c); }

/* Primera pantalla */
.hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); gap: var(--e-6) var(--e-8); padding: var(--e-4) var(--margen) 0; }
.hero-izq { display: flex; flex-direction: column; justify-content: space-between; gap: var(--e-8); padding-top: var(--e-3); }
.hero-frase { font-size: var(--t-lede); font-weight: var(--peso-medio); line-height: 1.3; letter-spacing: -.015em; max-width: 30ch; }
.hero-datos { display: flex; flex-wrap: wrap; gap: var(--e-5) var(--e-10); }
.hero-datos div { display: flex; flex-direction: column-reverse; }
.hero-datos dd { font-size: clamp(36px, 3.2vw, 46px); font-weight: 800; letter-spacing: -.045em; line-height: 1; font-variant-numeric: tabular-nums; }
.hero-datos dt { font-size: var(--t-meta); margin-top: var(--e-1); }
.hero-titulo { font-size: var(--t-h1); align-self: end; }
.hero-titulo .linea { display: block; }
.banda { grid-column: 1 / -1; position: relative; min-height: clamp(380px, 32vw, 460px); border-radius: var(--radio); overflow: hidden; margin-top: var(--e-4); isolation: isolate; }
.banda-foto { position: absolute; top: 0; right: 0; bottom: 0; width: 62%; z-index: -1; background: var(--tinta-2); }
.banda-foto img { object-position: 50% 14%; }
.banda::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, var(--tinta) 38%, rgba(15, 15, 16, 0) 72%); pointer-events: none; }
.banda-ast { position: absolute; top: var(--e-8); left: var(--e-8); color: var(--amarillo); }
.banda-texto { position: absolute; left: var(--e-8); bottom: var(--e-8); max-width: 500px; display: grid; gap: var(--e-5); justify-items: start; }
.banda-titulo { font-size: clamp(26px, 2.4vw, 34px); font-weight: var(--peso-fuerte); letter-spacing: -.03em; line-height: 1.08; }

/* Cómo trabajamos */
.pasos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--hueco); }
.paso { position: relative; min-height: 300px; border-radius: var(--radio); padding: var(--e-6); display: flex; flex-direction: column; justify-content: space-between; background: var(--gris-c); overflow: hidden; isolation: isolate; }
.paso.amarilla { background: var(--amarillo); }
.paso.oscuro { background: var(--tinta); }
.paso-foto { position: absolute; inset: 0; z-index: -1; background: var(--tinta); }
.paso-foto.cargada img { opacity: .38; }
.paso h3 { font-size: 20px; font-weight: var(--peso-fuerte); letter-spacing: -.02em; }
.paso p { font-size: var(--t-chico); color: var(--texto-2); margin-top: var(--e-2); max-width: 30ch; }
.paso.oscuro p { color: #D0D0D4; }
.paso-n { font-size: clamp(64px, 6vw, 84px); font-weight: var(--peso-normal); letter-spacing: -.06em; line-height: .9; font-variant-numeric: tabular-nums; }

/* Marcas */
.mosaico { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); grid-template-rows: 1fr 1fr; gap: var(--hueco); }
.mos-grande { grid-row: 1 / 3; min-height: clamp(460px, 44vw, 640px); }
.mos-grande .foto { position: absolute; inset: 0; }
.mos-etq { position: absolute; top: var(--e-4); left: var(--e-4); z-index: 2; }
.mos-pie { position: absolute; left: var(--e-4); right: var(--e-4); bottom: var(--e-4); z-index: 2; }
.mos-fila { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--hueco); }
.mos-fila-inv .mos-foto { order: 2; }
.mos-foto { min-height: 240px; }
.mos-foto .foto { position: absolute; inset: 0; }
.mos-texto { display: flex; flex-direction: column; justify-content: space-between; gap: var(--e-6); }
.mos-nombre { font-size: clamp(28px, 2.6vw, 36px); font-weight: var(--peso-fuerte); letter-spacing: -.04em; line-height: 1; margin-bottom: var(--e-2); }
.mos-texto p { font-size: 14px; }
.muestras { display: flex; gap: 6px; margin-top: var(--e-3); }
.muestras li { width: 22px; height: 22px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(15, 15, 16, .15); }
.oscuro .muestras li { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3); }

/* Paquetes */
.planes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--hueco); align-items: stretch; }
.plan { display: flex; flex-direction: column; min-height: 540px; }
.plan-etq { align-self: flex-start; margin-bottom: var(--e-4); }
.plan-nombre { font-size: 20px; font-weight: var(--peso-fuerte); letter-spacing: -.02em; }
.plan-precio { font-size: var(--t-precio); margin: var(--e-4) 0 var(--e-2); }
.plan-para { font-size: 14px; }
.plan-lista { display: grid; gap: var(--e-2); margin: var(--e-6) 0 var(--e-8); font-size: var(--t-chico); }
.plan-lista li { display: grid; grid-template-columns: 14px 1fr; gap: var(--e-3); align-items: start; }
.ast-mini svg { width: 12px; height: 12px; margin-top: .35em; }
.plan .boton { margin-top: auto; }

.pedido { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); grid-template-rows: auto auto; gap: var(--hueco); margin-top: var(--hueco); }
.pedido .configurador { grid-row: span 2; }
.revision { display: flex; flex-direction: column; gap: var(--e-3); }
.revision .boton { align-self: flex-start; margin-top: var(--e-2); }
.configurador { display: flex; flex-direction: column; gap: var(--e-5); }
.config-paquetes { align-self: flex-start; }
.config-nota { font-size: 14px; margin-top: calc(-1 * var(--e-3)); }
.config-total dd { font-size: var(--t-titulo); letter-spacing: -.02em; }
.config-acciones { display: grid; gap: var(--e-3); margin-top: auto; }
.config-ayuda { font-size: 14px; }
.boton-texto { border: 0; background: none; padding: 0; cursor: pointer; font-size: inherit; color: var(--texto); }
.pago { display: flex; flex-direction: column; gap: var(--e-3); }
.extras { margin-top: auto; }
.extras summary, .pregunta summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: var(--e-4); }
.extras summary::-webkit-details-marker, .pregunta summary::-webkit-details-marker { display: none; }
.extras summary { font-weight: var(--peso-fuerte); min-height: 44px; }
.extras ul { display: grid; gap: var(--e-2); padding-top: var(--e-2); font-size: 14px; }
.extras li { display: flex; justify-content: space-between; gap: var(--e-4); }
.mas { position: relative; flex: none; width: 16px; height: 16px; }
.mas::before, .mas::after { content: ""; position: absolute; left: 0; top: 7px; width: 16px; height: 2px; border-radius: 2px; background: currentColor; transition: transform var(--medio) var(--ease-out); }
.mas::after { transform: rotate(90deg); }
details[open] > summary .mas::after { transform: rotate(0deg); }

/* Garantía */
.garantia { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--hueco); }
.garantia-texto { display: flex; flex-direction: column; justify-content: space-between; gap: var(--e-8); min-height: 420px; padding: clamp(28px, 3vw, 44px); }
.titulo-garantia { font-size: clamp(48px, 4.8vw, 68px); line-height: 1; }
.garantia-texto p { max-width: 46ch; margin-bottom: var(--e-6); }
.garantia-cifra { display: flex; flex-direction: column; justify-content: space-between; padding: clamp(28px, 3vw, 44px); }
.garantia-100 { display: block; font-size: clamp(96px, 10vw, 150px); }
.garantia-pie { display: block; font-size: 18px; font-weight: var(--peso-medio); max-width: 30ch; margin-top: var(--e-3); }

/* Anuncios */
.anuncios-marco { border-radius: calc(var(--radio) + 8px); padding: clamp(28px, 4vw, 56px); }
.servicios { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--hueco); }
.servicio { display: flex; flex-direction: column; gap: var(--e-4); }
.servicio-precio { font-size: clamp(52px, 4.6vw, 68px); }
.servicio-precio .secundario { font-size: var(--t-chico); letter-spacing: 0; font-weight: var(--peso-medio); }
.servicio .boton { margin-top: auto; align-self: flex-start; }

/* Testimonios */
.testimonios { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--hueco); }
.testimonios blockquote { font-size: var(--t-titulo); font-weight: var(--peso-medio); line-height: 1.25; margin-bottom: var(--e-5); }

/* Preguntas */
.faq { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--hueco); align-items: start; }
.pregunta { border-radius: var(--radio-chico); background: var(--papel); transition: background-color var(--medio) var(--ease-out); }
.pregunta summary { min-height: 68px; padding: var(--e-4) var(--e-6); font-size: 18px; font-weight: var(--peso-fuerte); letter-spacing: -.01em; border-radius: var(--radio-chico); }
@media (hover: hover) { .pregunta:not([open]) summary:hover { background: var(--gris-c); } }
.pregunta p { padding: 0 var(--e-6) var(--e-6); color: var(--texto-2); max-width: 60ch; }
.pregunta[open] { background: var(--amarillo); --foco-halo: var(--amarillo); }
.pregunta[open] p { color: var(--amarillo-texto); }

/* Pie */
.pie { padding: var(--seccion) var(--margen) calc(var(--e-8) + env(safe-area-inset-bottom)); }
.pie-cierre { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--e-8); flex-wrap: wrap; padding-bottom: var(--e-10); border-bottom: 1px solid var(--filete); }
.pie-titulo { font-size: var(--t-h2); }
.pie-sub { margin-top: var(--e-4); max-width: 44ch; }
.pie-fila { display: grid; grid-template-columns: 1.2fr 1fr auto; gap: var(--e-8); align-items: start; padding: var(--e-8) 0; font-size: var(--t-chico); }
.pie-fila nav { display: flex; flex-wrap: wrap; gap: var(--e-2) var(--e-5); }
.pie-fila nav a { text-decoration: none; font-weight: var(--peso-medio); }
@media (hover: hover) { .pie-fila nav a:hover { text-decoration: underline; text-underline-offset: 4px; } }
.pie-nota { font-size: var(--t-meta); }

/* Barra fija en el celular */
.barra { display: none; }

/* Tableta */
@media (max-width: 1100px) {
  .cabecera { grid-template-columns: 1fr auto; }
  .cabecera { row-gap: var(--e-3); }
  .cab-dato { display: none; }
  .cab-links { grid-column: 1 / -1; grid-row: 2; overflow-x: auto; scrollbar-width: none; margin-inline: calc(-1 * var(--margen)); padding-inline: calc(var(--margen) - var(--e-3)); }
  .cab-links::-webkit-scrollbar { display: none; }
  .cab-links a { flex: none; background: var(--papel); }
  .pasos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .planes, .servicios { grid-template-columns: 1fr; }
  .plan { min-height: 0; }
  .pedido, .garantia { grid-template-columns: 1fr; }
  .pedido .configurador { grid-row: auto; }
  .faq { grid-template-columns: 1fr; }
}

/* Teléfono */
@media (max-width: 760px) {
  :root { --hueco: 10px; --radio: 20px; }
  .cab { grid-template-columns: 1fr; gap: var(--e-4); margin-bottom: var(--e-6); }
  .cab p { justify-self: start; }
  .hero { grid-template-columns: 1fr; gap: var(--e-5); }
  .hero-titulo { order: -1; font-size: clamp(56px, 17vw, 80px); }
  .hero-izq { padding-top: 0; gap: var(--e-5); }
  .hero-datos { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: var(--e-4) var(--e-6); }
  .hero-datos dt { font-size: 12px; max-width: 13ch; }
  .hero-datos dd { font-size: 30px; }
  .banda { min-height: 440px; }
  .banda-foto { width: 100%; }
  .banda-foto.cargada img { opacity: .5; }
  .banda::after { background: linear-gradient(180deg, rgba(15, 15, 16, .2) 0%, var(--tinta) 72%); }
  .banda-ast { top: var(--e-5); left: var(--e-5); }
  .banda-texto { left: var(--e-5); right: var(--e-5); bottom: var(--e-5); }
  .banda-titulo { font-size: 21px; }
  .banda .acciones { width: 100%; flex-direction: column; }
  .banda .boton { width: 100%; }
  .pasos { grid-template-columns: 1fr 1fr; }
  .paso { min-height: 220px; padding: var(--e-5); }
  .paso-n { font-size: 56px; }
  .mosaico { grid-template-columns: 1fr; grid-template-rows: none; }
  .mos-grande { grid-row: auto; min-height: 0; aspect-ratio: 1; }
  .mos-pie .segmentado span { padding: 0 var(--e-3); font-size: var(--t-meta); min-height: 36px; }
  .mos-foto { min-height: 200px; }
  .config-paquetes { display: grid; grid-template-columns: 1fr; width: 100%; border-radius: 20px; }
  .config-paquetes span { border-radius: 16px; }
  .garantia-texto { min-height: 0; }
  .pie-fila { grid-template-columns: 1fr; gap: var(--e-5); }
  .pie { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }

  .barra {
    position: fixed; z-index: 40; left: var(--e-3); right: var(--e-3); bottom: calc(var(--e-3) + env(safe-area-inset-bottom));
    display: flex; align-items: center; justify-content: space-between; gap: var(--e-3);
    padding: 6px 6px 6px var(--e-5); border-radius: var(--radio-pildora);
    background: var(--tinta); color: var(--papel); --texto-2: #B5B5BA; --foco: var(--amarillo); --foco-halo: var(--tinta);
    box-shadow: 0 10px 30px rgba(15, 15, 16, .25);
    font-size: var(--t-meta); line-height: 1.3;
    transform: translateY(calc(100% + 32px)); transition: transform var(--medio) var(--ease-out);
  }
  .barra.visible { transform: none; }
  .aviso { bottom: calc(84px + env(safe-area-inset-bottom)); }
}

/* Movimiento (find-animation-opportunities): solo lo que pasó el filtro.
   1. Preguntas y extras se abren con su alto, no de golpe. */
:root { interpolate-size: allow-keywords; }
.pregunta::details-content, .extras::details-content {
  block-size: 0; opacity: 0; overflow: clip;
  transition: block-size var(--medio) var(--ease-out), opacity var(--medio) var(--ease-out), content-visibility var(--medio) allow-discrete;
}
.pregunta[open]::details-content, .extras[open]::details-content { block-size: auto; opacity: 1; }

/* 2. Lo que agrega el interruptor de anuncios aparece sin saltar. */
.config-nota, .config-total > div { transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out); }
@starting-style { .config-nota, .config-total > div { opacity: 0; transform: translateY(-4px); } }

/* 3 y 4. Entrada del hero en la primera carga y de los grupos de tarjetas al llegar a ellos. */
@media (prefers-reduced-motion: no-preference) {
  .js .hero-titulo .linea, .js .hero-izq > * { animation: subir 520ms var(--ease-out) both; }
  .js .hero-titulo .linea:nth-child(3) { animation-delay: 60ms; }
  .js .hero-izq > :nth-child(2) { animation-delay: 120ms; }
  .js .banda { animation: abrir 700ms var(--ease-out) 120ms both; }
  .con-grupos [data-grupo] > * { opacity: 0; transform: translateY(12px); transition: opacity 420ms var(--ease-out), transform 420ms var(--ease-out); transition-delay: calc(var(--i, 0) * 50ms); }
  .con-grupos [data-grupo].visto > * { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .con-grupos [data-grupo] > * { transition: opacity 200ms linear; }
}
@keyframes subir { from { opacity: 0; transform: translateY(16px); } }
@keyframes abrir { from { clip-path: inset(100% 0 0 0 round var(--radio)); } to { clip-path: inset(0 0 0 0 round var(--radio)); } }