/* Alhambra Labs, the chosen direction: the sections under the rojo screen.
   Every section is a page of the calendar: a day mark in the margin (the running head, sticky at
   desktop) and the content beside it. Día 0 prices, Días 1–3, Día 10 with the stamp, the almagra
   band «Después» with the sebka texture, Quién and the questions, the footer. */
.dia { padding: var(--section) 0; border-top: 1px solid var(--sillar); }
.portada + .dia { border-top: 0; }
.dia-grid { display: grid; gap: 12px 56px; }
.marca { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 0.4em; font-family: var(--display); color: var(--rojo); }
.marca-k { font-weight: 600; font-size: 1.125rem; }
.marca-n { font-weight: 700; font-size: var(--d2); line-height: 0.95; letter-spacing: -0.03em; }
.marca-t { flex-basis: 100%; font-weight: 600; font-size: 1rem; color: var(--tinta); margin-top: 6px; }
@media (min-width: 1000px) {
  .dia-grid { grid-template-columns: minmax(180px, 19%) 1fr; }   /* v0.2: a narrower day column, more room for the content */
  .marca { display: block; position: sticky; top: 28px; align-self: start; border-top: 5px solid var(--rojo); padding-top: 22px; }
  .marca .lazo { position: absolute; top: -16.5px; left: 0; }
  /* Día 0 → Días 1–3 → Día 10: one continuous route line; each day mark's star is a node on it. */
  .ruta .dia-grid { position: relative; }
  .ruta .dia-grid::before { content: ""; position: absolute; left: 13px; width: 2px; background: var(--rojo); top: calc(-1 * var(--section) - 1px); bottom: calc(-1 * var(--section)); }
  .ruta-ini .dia-grid::before { top: 0; }
  .ruta .marca { border-top: 0; padding: 0 0 0 44px; }
  .ruta .marca .lazo { top: 0; }
  .marca > span { display: block; }
  .marca-t { max-width: 16ch; margin-top: 10px; }
}
.marca .lazo { display: block; width: 28px; height: 28px; align-self: center; margin-right: 0.15em; }
/* Phones: the same route line in a left margin; the star of each day mark sits on it */
@media (max-width: 999px) {
  .ruta .dia-grid { position: relative; padding-left: 32px; }
  .ruta .dia-grid::before { content: ""; position: absolute; left: 13px; width: 2px; background: var(--rojo); top: calc(-1 * var(--section) - 1px); bottom: calc(-1 * var(--section)); }
  .ruta-ini .dia-grid::before { top: 6px; }
  .ruta .marca { position: relative; }
  .ruta .marca .lazo { position: absolute; left: -32px; top: 6px; margin: 0; }
}
.dia-body > h2 { margin-bottom: 0.8em; }
.dos { display: grid; gap: 0 48px; }
@media (min-width: 720px) { .dos { grid-template-columns: 1fr 1fr; } }
/* conditions read at body size: payments, pauses and the guarantee are not small print */
.nota { line-height: 1.55; }
.nota p { margin: 0 0 0.6em; }

/* Día 0: the price table is the only white on the page */
.precios { width: 100%; border-collapse: collapse; background: var(--blanco); margin: 0 0 0.5rem; }
.precios th, .precios td { text-align: left; vertical-align: top; padding: 0.85rem 1rem; border-bottom: 1px solid var(--sillar); }
.precios thead th { font-family: var(--display); font-weight: 700; font-size: 1.125rem; border-bottom: 3px solid var(--rojo); }
.precios tbody th { font-family: var(--display); font-weight: 600; font-size: 1rem; width: 20%; }
.precios .price { font-family: var(--display); font-weight: 700; font-size: var(--d2); line-height: 1; color: var(--rojo); letter-spacing: -0.03em; }
.precios .iva { display: block; margin-top: 6px; font-family: var(--body); font-weight: 400; font-size: 1rem; line-height: 1.45; color: var(--tinta); letter-spacing: 0; white-space: normal; }
/* Phones: both names and prices side by side first, then what each one is (same facts, own markup). */
.planes { margin: 0 0 0.5rem; }
.planes-precios { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
/* the price sits at the foot of each box, so the two stay level when a name wraps */
.plan { margin: 0; background: var(--blanco); border-top: 3px solid var(--rojo); padding: 12px 14px; display: flex; flex-direction: column; justify-content: space-between; gap: 6px; }
.plan-h { font-family: var(--display); font-size: 1rem; font-weight: 700; line-height: 1.2; }
.plan-p { font-family: var(--display); font-weight: 700; font-size: 2.25rem; line-height: 1; color: var(--rojo); letter-spacing: -0.03em; }
.plan-iva { margin: 8px 0 1rem; }
.planes-dif { margin: 0; }
.planes-dif dt { font-family: var(--display); font-weight: 700; padding-top: 10px; border-top: 1px solid var(--sillar); }
.planes-dif dd { margin: 4px 0 12px; }
@media (max-width: 559px) { .precios { display: none; } }
@media (min-width: 560px) { .planes { display: none; } }
.mitad { margin-top: 0.75rem; }
.sub-h { font-family: var(--display); font-size: 1.25rem; font-weight: 600; margin: 1.75rem 0 0.5em; }
.incluye, .extras, .manda, .cuotas { list-style: none; padding: 0; margin: 0; }
.incluye { columns: 1; column-gap: 48px; }
@media (min-width: 720px) { .clave { columns: 2; } .extras { columns: 2; column-gap: 48px; } }
.clave { margin-bottom: 1rem; }
.incluye li { break-inside: avoid; padding: 0.5em 0 0.5em 1.4em; position: relative; border-bottom: 1px solid var(--sillar); }
.incluye li::before { content: ""; position: absolute; left: 0; top: 1.05em; width: 8px; height: 8px; background: var(--rojo); }
.extras li { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 0.55em 0; border-bottom: 1px solid var(--sillar); break-inside: avoid; }
.extras small { display: block; font-size: 1rem; line-height: 1.45; margin-top: 2px; }
.extras b { font-family: var(--display); font-weight: 700; color: var(--rojo); }
.dia-body .cta-row { margin-top: 1.5rem; }

/* Días 1–3: what the owner sends, as a list to tick */
.lista-t { font-weight: 600; margin-bottom: 0.4em; }
.manda li { padding: 0.35em 0 0.35em 1.8em; position: relative; }
.manda li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 14px; height: 14px; border: 2px solid var(--rojo); }
.pausa { border-left: 5px solid var(--rojo); padding: 2px 0 2px 18px; max-width: var(--measure); margin-top: 1.5rem; }

/* Día 10: the normal path after day 10, then the guarantee as B's stamp */
.recorrido { list-style: none; margin: 1.25rem 0 0.75rem; padding: 0; display: grid; border-top: 1px solid var(--sillar); border-left: 1px solid var(--sillar); }
.recorrido li { position: relative; isolation: isolate; padding: 12px 14px; border-right: 1px solid var(--sillar); border-bottom: 1px solid var(--sillar); display: flex; flex-direction: column; gap: 10px; }
.recorrido .cal-n { font-size: 1.25rem; color: var(--rojo); }
.recorrido .cal-fin { background: var(--rojo); }
.recorrido .cal-fin, .recorrido .cal-fin .cal-n { color: var(--blanco); }
.rec-l { line-height: 1.45; }
@media (min-width: 720px) { .recorrido { grid-template-columns: repeat(3, 1fr); } .recorrido li { min-height: 7.5rem; } }
.garantia { margin-top: 2.25rem; display: grid; gap: 14px; justify-items: start; }
.garantia h3 { margin: 0; }
.sello {
  margin: 0; display: flex; align-items: stretch; gap: 16px; color: var(--rojo); background: var(--estuco);
  padding: 16px 22px 14px 16px; border: 2px solid var(--rojo); outline: 1px solid var(--rojo); outline-offset: -8px;
  width: 100%; max-width: 420px;
}
.sello .cadena { flex: none; margin: 4px 0; }
.sello-t { display: flex; flex-direction: column; }
.sello-k { font-family: var(--display); font-weight: 600; font-size: 1rem; }
.sello-v { font-family: var(--display); font-weight: 700; font-size: 3.25rem; line-height: 1.05; letter-spacing: -0.03em; }
.sello-c { font-family: var(--display); font-weight: 600; font-size: 1rem; line-height: 1.5; }
.sello-nota { margin: 0; }

/* Después: almagra band with the sebka lattice full-bleed (estuco at 8 %, 5 % on phones; lighter than the 13 % of
   the 22-09 landing so it does not cross the figures as noise; GPT-6 rounds 1 and 2).
   Rojo is decorative only on almagra: numerals, links and markers turn white or estuco. */
.banda { position: relative; isolation: isolate; background: var(--almagra); color: var(--estuco); border-top: 0; }
.banda::before { content: ""; position: absolute; inset: 0; z-index: -1; background: url("sebka.svg") center / 72px 72px; opacity: 0.08; }
/* phones: denser text over the lattice, so it steps back further (GPT-6 round 2) */
@media (max-width: 719px) { .banda::before { opacity: 0.05; } }
.banda-col { max-width: 46rem; }
/* the optional step sits under the fee, after a rule: the fee comes with the web, automating is a choice */
.auto { margin-top: 2rem; padding-top: 2rem; border-top: 2px solid rgb(244 239 232 / 0.5); }
.banda h2 { margin-bottom: 0.6em; }
.banda h2, .banda h3, .banda .marca, .banda .marca-t, .banda strong, .banda a { color: var(--blanco); }
.banda a:hover { color: var(--estuco); }
.banda :focus-visible { outline-color: var(--blanco); }
.banda .marca { border-top-color: var(--blanco); }
.banda .sub-h { margin-top: 0.25rem; }
.banda .cuotas li { border-color: rgb(244 239 232 / 0.35); }
.banda .cuotas b { color: var(--blanco); }
.banda .plegable { border-color: rgb(244 239 232 / 0.35); border-bottom: 0; }
.banda summary::before, .banda summary::after { background: var(--blanco); }
.banda .btn.btn-claro, .banda .btn.btn-claro:hover { color: var(--almagra); }
.auto-precio { display: flex; align-items: baseline; gap: 14px; margin: 1.25rem 0 1.5rem; }
.auto-precio b { font-family: var(--display); font-weight: 700; font-size: 2.5rem; line-height: 1; letter-spacing: -0.02em; color: var(--blanco); }
.auto-precio span { font-family: var(--display); font-weight: 600; max-width: 38ch; line-height: 1.35; }

/* Fees: the common base once, then one compact row per case */
.cuota-base { max-width: var(--measure); }
.cuotas { margin-bottom: 1.25rem; }
.cuotas li { display: grid; grid-template-columns: 8.5rem 1fr; gap: 4px 20px; align-items: baseline; padding: 12px 0; border-bottom: 1px solid var(--sillar); }
.cuotas li:first-child { border-top: 1px solid var(--sillar); }
.cuotas b { font-family: var(--display); font-weight: 700; font-size: 2rem; line-height: 1; color: var(--rojo); letter-spacing: -0.02em; }
.cuotas b small { font-size: 1rem; font-weight: 600; letter-spacing: 0; margin-left: 2px; }
.cuota-k { display: block; font-family: var(--display); font-weight: 600; }

/* Quién and the questions from the counter */
.contacto { list-style: none; margin: 1.25rem 0 32px; padding: 0; display: grid; gap: 10px; }
.contacto a { font-family: var(--display); font-weight: 600; font-size: 1.125rem; color: var(--rojo); text-decoration-thickness: 2px; text-underline-offset: 5px; }
#quien h3 { margin-top: 0.3rem; }
@media (max-width: 719px) { .faq { border-top: 1px solid var(--sillar); padding-top: 24px; margin-top: 8px; } }
details { border-bottom: 1px solid var(--sillar); padding: 0.7em 0; max-width: var(--measure); }
summary { font-family: var(--display); font-weight: 600; cursor: pointer; list-style: none; position: relative; padding-right: 32px; }
summary::-webkit-details-marker { display: none; }
/* The +/−: two rojo bars; opening turns the upright one flat. Transform only; state from [open],
   and from .cerrando (script.js) so a closing disclosure shows + at once. */
summary::before, summary::after {
  content: ""; position: absolute; right: 5px; top: 0.8em; width: 14px; height: 2px; margin-top: -1px;
  background: var(--rojo); transition: transform 260ms var(--ease-out);
}
summary::before { transform: rotate(90deg); }
details[open]:not(.cerrando) > summary::before { transform: rotate(180deg); }
details[open]:not(.cerrando) > summary::after { transform: rotate(180deg); }
.plegable > summary::before, .plegable > summary::after { width: 16px; }
details.animando { overflow: clip; }
@media (prefers-reduced-motion: reduce) { summary::before, summary::after { transition: none; } }
details p { margin: 0.5em 0 0; }
.plegable { max-width: none; border-top: 1px solid var(--sillar); padding: 0.9em 0; }
.plegable + .plegable { border-top: 0; }
.plegable > summary { font-size: 1.25rem; }
.grupos { display: grid; gap: 0 48px; }
@media (min-width: 720px) { .grupos { grid-template-columns: 1fr 1fr; } }
.grupos h4 { font-family: var(--display); font-weight: 600; font-size: 1.0625rem; color: var(--rojo); margin: 1.1rem 0 0.2rem; }

/* Footer: tinta, inside the content width, three columns at desktop */
footer { background: var(--tinta); color: var(--estuco); padding: 40px 0; }
footer a { color: var(--estuco); }
footer a:hover { color: var(--blanco); }
footer :focus-visible { outline-color: var(--estuco); }
footer .logo img { display: block; height: 40px; width: auto; }
footer p { margin: 0; }
.pie { display: grid; gap: 20px; }
.pie nav { display: flex; flex-wrap: wrap; gap: 8px 20px; }
@media (min-width: 720px) {
  .pie { grid-template-columns: auto auto 1fr; gap: 56px; align-items: start; }
  .pie nav { justify-content: flex-end; }
}