/* ==========================================================================
   ARREGLAMIHOGAR — Páginas de cada plan, marcas y materiales, cambio de bañera

   Octubre de 2026. Tres tipos de página que comparten piezas: la banda de
   precio debajo de la cabecera, las partidas con su tick, la caja de
   bienvenida (en components.css) y los logotipos de marca (también allí,
   porque salen en otras páginas).

   Todo sale de los tokens de base.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   La banda del precio, pegada a la cabecera
   -------------------------------------------------------------------------- */

.plancifra {
  background: var(--wine-900);
  color: var(--stone-100);
  border-top: 1px solid oklch(0.885 0.044 82 / 0.18);
}
.plancifra__in {
  display: grid;
  gap: var(--s-6);
  padding-block: var(--s-7);
}
@media (min-width: 900px) {
  .plancifra__in {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 0.9fr);
    align-items: center;
    gap: var(--s-7);
  }
  .plancifra__in--dos { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
}

.plancifra__flag {
  display: inline-block;
  margin-bottom: var(--s-3);
  padding: 0.25rem 0.7rem;
  border: 1px solid var(--brass-400);
  border-radius: 999px;
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--brass-300);
}
.plancifra__de {
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: var(--brass-400);
}
.plancifra__n {
  margin-top: var(--s-2);
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 2rem + 2.6vw, 4rem);
  line-height: 1;
  color: var(--stone-50);
}
.plancifra__nota {
  display: block;
  margin-top: var(--s-2);
  font-size: var(--t-sm);
  color: var(--stone-300);
}
.plancifra__nota:first-of-type { margin-top: var(--s-3); }

.plancifra__hechos {
  display: grid;
  gap: var(--s-3);
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 900px) {
  .plancifra__hechos { padding-left: var(--s-7); border-left: 1px solid oklch(0.885 0.044 82 / 0.22); }
}
.plancifra__hechos li {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  font-size: var(--t-sm);
  color: var(--stone-100);
}
.plancifra .ico-trazo { flex: none; width: 1.35rem; height: 1.35rem; color: var(--brass-400); }

.plancifra__acts { display: grid; gap: var(--s-3); }
.plancifra__letra { font-size: var(--t-xs); line-height: 1.55; color: var(--stone-300); }

/* --------------------------------------------------------------------------
   Para quién es
   -------------------------------------------------------------------------- */

.planpara { max-width: 52rem; }
.planpara__t {
  margin-top: var(--s-4);
  font-family: var(--font-display);
  font-size: var(--t-xl);
  line-height: 1.3;
  color: var(--ink-900);
}

/* --------------------------------------------------------------------------
   Partidas
   -------------------------------------------------------------------------- */

.partidas {
  display: grid;
  gap: var(--s-4);
  margin-top: var(--s-6);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
}
.partida {
  padding: var(--s-5);
  background: var(--surface);
  border: 1px solid var(--hairline-soft);
  border-radius: var(--r-sm);
}
.partida--base {
  background: var(--wine-800);
  border-color: var(--wine-800);
  color: var(--stone-100);
}
.partida__et {
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--brass-400);
}
.partida__t {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--t-lg);
  line-height: 1.2;
  color: var(--wine-800);
}
.partida--base .partida__t { margin-top: var(--s-2); color: var(--stone-50); }
.partida__l {
  display: grid;
  gap: 0.55rem;
  margin: var(--s-4) 0 0;
  padding: 0;
  list-style: none;
}
.partida__l li {
  display: grid;
  grid-template-columns: 1.1rem 1fr;
  gap: 0.6rem;
  align-items: start;
  font-size: var(--t-sm);
  line-height: 1.5;
  color: var(--ink-800);
}
.partida--base .partida__l li { color: var(--stone-200); }
.partida__tick {
  width: 1.1rem;
  height: 1.1rem;
  margin-top: 0.15rem;
  fill: none;
  stroke: var(--brass-600);
  stroke-width: 2;
}
.partida--base .partida__tick { stroke: var(--brass-400); }
.partida--base .pull { margin-top: var(--s-5); color: var(--brass-300); }
.partida--base .pull::after { background: var(--brass-400); }

.partidas__salvo {
  margin-top: var(--s-5);
  font-size: var(--t-sm);
  color: var(--text-soft);
}

/* --------------------------------------------------------------------------
   Materiales y marcas: una fila por material
   -------------------------------------------------------------------------- */

.mats {
  margin: var(--s-6) 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--hairline);
}
.mats__fila {
  display: grid;
  gap: var(--s-3) var(--s-6);
  padding: var(--s-5) 0;
  border-bottom: 1px solid var(--hairline);
}
@media (min-width: 860px) {
  .mats__fila {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1.2fr) auto;
    align-items: center;
  }
}
.mats__t {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--t-md);
  line-height: 1.25;
  color: var(--wine-800);
}
.mats__d { margin-top: 0.3rem; font-size: var(--t-sm); color: var(--text-soft); }
.mats__marcas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3) var(--s-5);
}
@media (max-width: 859px) { .mats__marcas { margin-block: var(--s-2); } }
.mats__sin { font-size: var(--t-xs); color: var(--text-mute); }
.mats__ver {
  justify-self: start;
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--wine-700);
  border-bottom: 1px solid var(--brass-400);
  padding-bottom: 0.15rem;
  white-space: nowrap;
}
.mats__ver:hover { color: var(--wine-900); border-color: var(--brass-600); }

/* --------------------------------------------------------------------------
   Qué recibes, sobre burdeos
   -------------------------------------------------------------------------- */

.entrega {
  display: grid;
  gap: var(--s-6) var(--s-7);
  margin: var(--s-7) 0 0;
  padding: 0;
  list-style: none;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
}
.entrega__it { padding-top: var(--s-4); border-top: 1px solid oklch(0.885 0.044 82 / 0.28); }
.entrega .ico-trazo { width: 1.8rem; height: 1.8rem; color: var(--brass-400); }
.entrega__t {
  margin-top: var(--s-3);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--t-md);
  color: var(--stone-50);
}
.entrega__d { margin-top: var(--s-2); font-size: var(--t-sm); line-height: 1.6; color: var(--stone-300); }

/* --------------------------------------------------------------------------
   Los otros dos planes
   -------------------------------------------------------------------------- */

.otrosplanes {
  display: grid;
  gap: var(--s-4);
  margin-top: var(--s-6);
}
@media (min-width: 760px) { .otrosplanes { grid-template-columns: 1fr 1fr; } }

.otroplan {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.25rem var(--s-4);
  padding: var(--s-5) var(--s-6) var(--s-5) var(--s-5);
  background: var(--surface);
  border: 1px solid var(--hairline-soft);
  border-radius: var(--r-sm);
  transition: border-color var(--t-fast) var(--out-quart), box-shadow var(--t-mid) var(--out-quart);
}
.otroplan:hover { border-color: var(--brass-400); box-shadow: var(--lift-2); }
.otroplan__n {
  grid-row: span 3;
  font-family: var(--font-display);
  font-size: var(--t-lg);
  color: var(--brass-600);
}
.otroplan__t { font-family: var(--font-display); font-size: var(--t-lg); color: var(--wine-800); }
.otroplan__p { font-family: var(--font-display); font-size: var(--t-md); color: var(--ink-900); }
.otroplan__de {
  margin-right: 0.45em;
  font-family: var(--font-text);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--text-mute);
}
.otroplan__g { font-size: var(--t-sm); color: var(--text-soft); }
.otroplan__go {
  position: absolute;
  right: var(--s-5);
  top: 50%;
  width: 1.2rem;
  height: 1.2rem;
  margin-top: -0.6rem;
  color: var(--brass-600);
  transition: transform var(--t-mid) var(--out-expo);
}
.otroplan__go svg { width: 100%; height: 100%; }
.otroplan:hover .otroplan__go { transform: translateX(4px); }

/* ==========================================================================
   Marcas y materiales
   ========================================================================== */

.muro {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--hairline);
  border-left: 1px solid var(--hairline);
}
@media (min-width: 640px) { .muro { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .muro { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

.muro__it {
  display: grid;
  border-right: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}
.muro__it .logom {
  --logom-h: 2.4rem;
  width: 100%;
  height: auto;
  min-height: 7.5rem;
  padding: var(--s-5) var(--s-4);
  transition: background-color var(--t-fast) var(--out-quart);
}
.muro__it .logom img { height: 2.4rem; max-width: 82%; }
.muro__it .logom__txt {
  font-size: clamp(1.05rem, 0.95rem + 0.45vw, 1.35rem);
  white-space: normal;
  text-align: center;
  line-height: 1.15;
}
.muro__it .logom--alto img { height: 3.6rem; }
.muro__it .logom:hover { background: var(--surface); }
.muro__pie { margin-top: var(--s-4); font-size: var(--t-xs); color: var(--text-mute); }

.marcagr + .marcagr { border-top: 1px solid var(--hairline); }
.marcafs {
  display: grid;
  gap: var(--s-4);
  margin-top: var(--s-6);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr));
}
.marcaf {
  display: grid;
  grid-template-rows: auto 1fr;
  gap: var(--s-5);
  padding: var(--s-6) var(--s-5) var(--s-5);
  background: var(--surface);
  border: 1px solid var(--hairline-soft);
  border-radius: var(--r-sm);
  scroll-margin-top: calc(var(--head-h) + 1.5rem);
}
.marcaf:target { border-color: var(--brass-500); box-shadow: var(--lift-2); }
.marcaf__logo {
  display: flex;
  align-items: center;
  min-height: 4.6rem;
  max-width: 15rem;
  padding-bottom: var(--s-4);
  border-bottom: 1px solid var(--hairline-soft);
}
.marcaf__t {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--t-lg);
  color: var(--wine-800);
}
.marcaf__de {
  margin-top: 0.2rem;
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--brass-700);
}
.marcaf__que { margin-top: var(--s-3); font-size: var(--t-sm); font-weight: 600; color: var(--ink-900); }
.marcaf__por { margin-top: var(--s-2); font-size: var(--t-sm); line-height: 1.6; color: var(--text-soft); }
.marcaf__cats { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-4); }
.marcaf__cat {
  padding: 0.3rem 0.7rem;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  font-size: var(--t-xs);
  color: var(--ink-800);
  transition: border-color var(--t-fast) var(--out-quart), color var(--t-fast) var(--out-quart);
}
.marcaf__cat:hover { border-color: var(--brass-500); color: var(--wine-700); }

.porplanes {
  display: grid;
  gap: var(--s-4);
  margin-top: var(--s-6);
}
@media (min-width: 900px) { .porplanes { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.porplan {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding: var(--s-5);
  background: var(--surface);
  border: 1px solid var(--hairline-soft);
  border-radius: var(--r-sm);
  transition: border-color var(--t-fast) var(--out-quart), box-shadow var(--t-mid) var(--out-quart);
}
.porplan:hover { border-color: var(--brass-400); box-shadow: var(--lift-2); }
.porplan__t { font-family: var(--font-display); font-size: var(--t-lg); color: var(--wine-800); }
.porplan__p { font-family: var(--font-display); font-size: var(--t-md); color: var(--ink-900); }
.porplan__de {
  margin-right: 0.45em;
  font-family: var(--font-text);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--text-mute);
}
.porplan__logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3) var(--s-4);
  padding: var(--s-4) 0;
  border-block: 1px solid var(--hairline-soft);
}
.porplan__ver {
  margin-top: auto;
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--wine-700);
}

/* ==========================================================================
   Cambio de bañera
   ========================================================================== */

.banprecios { display: grid; gap: var(--s-4); }
@media (min-width: 640px) { .banprecios { grid-template-columns: 1fr 1fr; } }
.banprecio {
  padding: var(--s-5);
  border: 1px solid oklch(0.885 0.044 82 / 0.28);
  border-radius: var(--r-sm);
}
.banprecio__t {
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: var(--brass-400);
}
.banprecio__de {
  display: block;
  min-height: 1.1rem;
  margin-top: var(--s-3);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--stone-300);
}
.banprecio__n {
  margin-top: 0.15rem;
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 1.8rem + 1.8vw, 3.2rem);
  line-height: 1;
  color: var(--stone-50);
}
.banprecio__d { margin-top: var(--s-3); font-size: var(--t-sm); line-height: 1.55; color: var(--stone-300); }

/* Los tres días, en línea, con el número grande */
.dias {
  display: grid;
  gap: var(--s-4);
  margin: var(--s-7) 0 0;
  padding: 0;
  list-style: none;
  counter-reset: dia;
}
@media (min-width: 860px) { .dias { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; } }
.dias__it {
  position: relative;
  padding: var(--s-6) var(--s-5) var(--s-5);
  background: var(--surface);
  border: 1px solid var(--hairline-soft);
  border-radius: var(--r-sm);
}
@media (min-width: 860px) {
  .dias__it { border-radius: 0; }
  .dias__it + .dias__it { border-left: 0; }
  .dias__it:first-child { border-radius: var(--r-sm) 0 0 var(--r-sm); }
  .dias__it:last-child { border-radius: 0 var(--r-sm) var(--r-sm) 0; }
  /* La flecha entre un día y el siguiente */
  .dias__it + .dias__it::before {
    content: "";
    position: absolute;
    left: -0.55rem;
    top: 2.35rem;
    width: 1.1rem;
    height: 1.1rem;
    background: var(--surface);
    border-top: 1px solid var(--hairline);
    border-right: 1px solid var(--hairline);
    transform: rotate(45deg);
  }
}
.dias__n {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
  background: var(--wine-800);
  color: var(--stone-50);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
}
.dias__t {
  margin-top: var(--s-4);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--t-lg);
  color: var(--wine-800);
}
.dias__d { margin-top: var(--s-3); font-size: var(--t-sm); line-height: 1.6; color: var(--text-soft); }

.banpares {
  display: grid;
  gap: var(--s-7);
  margin-top: var(--s-6);
}
@media (min-width: 900px) { .banpares { grid-template-columns: 1fr 1fr; gap: var(--s-6); } }

.banpromo { display: grid; gap: var(--s-7); }
@media (min-width: 960px) {
  .banpromo { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: start; }
}
.banpromo__l { margin-top: var(--s-5); }
.banpromo__lado { display: grid; gap: var(--s-5); }
.banpromo__lado .bienvenida { grid-template-columns: auto 1fr; padding: var(--s-5); margin: 0; }
.banpromo__lado .bienvenida__t { font-size: var(--t-lg); }

.banfuera {
  padding: var(--s-5);
  border: 1px dashed var(--hairline);
  border-radius: var(--r-sm);
}
.banfuera__t {
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--text-mute);
}
.banfuera__l {
  display: grid;
  gap: 0.45rem;
  margin: var(--s-3) 0 0;
  padding-left: 1.1rem;
  font-size: var(--t-sm);
  color: var(--text-soft);
}

.eliges {
  display: grid;
  gap: var(--s-4);
  margin-top: var(--s-6);
}
@media (min-width: 760px) { .eliges { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.elige {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding: var(--s-4);
  background: var(--surface);
  border: 1px solid var(--hairline-soft);
  border-radius: var(--r-sm);
  transition: border-color var(--t-fast) var(--out-quart), box-shadow var(--t-mid) var(--out-quart);
}
.elige:hover { border-color: var(--brass-400); box-shadow: var(--lift-2); }
.elige__pic {
  display: block;
  margin: calc(var(--s-4) * -1) calc(var(--s-4) * -1) var(--s-3);
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--r-sm) var(--r-sm) 0 0;
  background: var(--stone-100);
}
.elige__pic img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-slow) var(--out-expo); }
.elige:hover .elige__pic img { transform: scale(1.04); }
.elige__t { font-family: var(--font-display); font-size: var(--t-lg); color: var(--wine-800); }
.elige__d { font-size: var(--t-sm); color: var(--text-soft); }
.elige__marcas { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-4); margin-top: var(--s-2); }
.elige__ver {
  margin-top: auto;
  padding-top: var(--s-3);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--wine-700);
}

/* Las tres notas de «antes de decidir» son enlaces */
.clara__it--enlace { display: block; color: inherit; transition: border-color var(--t-fast) var(--out-quart); }
.clara__it--enlace:hover { border-top-color: var(--brass-500); }
.clara__it--enlace:hover .clara__t { color: var(--wine-700); }

@media (prefers-reduced-motion: reduce) {
  .elige__pic img, .otroplan__go { transition: none; }
}

/* Los enlaces dentro de un párrafo de entrada se tienen que ver como enlace. */
.bay-head__aside a,
.titular__bajo a {
  color: var(--wine-700);
  text-decoration: underline;
  text-decoration-color: var(--brass-500);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.bay-head__aside a:hover,
.titular__bajo a:hover { color: var(--wine-900); text-decoration-color: var(--wine-700); }