/* ARTIUM VII 3D — Estilos por página */

/* ---------- Enlace extendido (toda la tarjeta es clicable) ---------- */
.servicio,
.categoria {
  position: relative;
}

.servicio__titulo a,
.categoria__titulo a {
  color: var(--c-text);
  text-decoration: none;
}

.servicio__titulo a::after,
.categoria__titulo a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: var(--r-lg);
}

.servicio__titulo a:focus-visible,
.categoria__titulo a:focus-visible {
  outline: none;
}

.servicio__titulo a:focus-visible::after,
.categoria__titulo a:focus-visible::after {
  outline: 3px solid var(--c-focus);
  outline-offset: -3px;
}

/* ---------- Hero ---------- */
.hero {
  padding-block: var(--s-6) var(--s-7);
}

.hero__rejilla {
  display: grid;
  gap: var(--s-6);
  align-items: center;
}

.hero__titulo {
  font-size: var(--t-2xl);
  font-weight: 700;
  font-stretch: 112%;
  letter-spacing: -0.022em;
  line-height: 1.04;
}

.hero__titulo span {
  color: var(--c-brand);
}

.hero__entrada {
  max-width: 36rem;
  margin-top: var(--s-5);
  color: var(--c-text-2);
  font-size: var(--t-md);
}

.hero__acciones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3);
  margin-top: var(--s-6);
}

.hero__acciones .boton {
  flex: 1 1 13rem;
}

@media (min-width: 36em) {
  .hero__acciones .boton {
    flex: 0 0 auto;
  }
}

.hero__marco {
  position: relative;
  aspect-ratio: 5 / 4;
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  background: var(--c-bg);
  overflow: hidden;
  box-shadow: var(--sombra-alta);
}

.hero__ilustracion {
  width: 100%;
  height: 100%;
}

.hero__leyenda {
  position: absolute;
  top: var(--s-3);
  right: var(--s-3);
  padding: 0.25rem 0.625rem;
  border: 1px solid var(--c-line);
  border-radius: 999px;
  background: var(--c-bg);
  color: var(--c-text-3);
  font-size: var(--t-xs);
  line-height: 1.3;
}

@media (min-width: 64em) {
  .hero {
    padding-block: var(--s-8) var(--s-7);
  }

  .hero__rejilla {
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
    gap: var(--s-8);
  }

  .hero__marco {
    aspect-ratio: 1 / 1;
  }
}

/* Animación de la boquilla: solo transform/opacity y sin movimiento si se pide reducirlo. */
@media (prefers-reduced-motion: no-preference) {
  .il-boquilla {
    animation: boquilla 5.5s ease-in-out infinite alternate;
  }

  .il-punto {
    animation: pulso 1.4s ease-in-out infinite;
  }
}

@keyframes boquilla {
  from {
    transform: translateX(-54px);
  }
  to {
    transform: translateX(54px);
  }
}

@keyframes pulso {
  50% {
    opacity: 0.35;
  }
}

.especificaciones {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin-top: var(--s-7);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  background: var(--c-line);
  overflow: hidden;
  list-style: none;
}

.especificaciones li {
  display: grid;
  gap: 0.25rem;
  padding: var(--s-4);
  background: var(--c-raised);
}

.especificaciones__etiqueta {
  color: var(--c-text-3);
  font-family: var(--f-display);
  font-size: var(--t-xs);
  font-weight: 600;
  font-stretch: 112%;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.especificaciones__valor {
  color: var(--c-text);
  font-family: var(--f-display);
  font-size: var(--t-base);
  font-weight: 600;
  line-height: 1.3;
}

@media (min-width: 64em) {
  .especificaciones {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .especificaciones li {
    padding: var(--s-5);
  }
}

/* ---------- Propuesta de valor ---------- */
.propuesta {
  display: grid;
  gap: var(--s-4);
}

.propuesta .encabezado-seccion {
  margin-bottom: 0;
}

.propuesta__texto {
  color: var(--c-text-2);
  font-size: var(--t-md);
}

@media (min-width: 64em) {
  .propuesta {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--s-8);
    align-items: end;
  }
}

/* ---------- Servicios (tarjetas de Inicio) ---------- */
.servicio {
  padding: var(--s-5);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  background: var(--c-panel);
  transition: border-color var(--m-rapido) ease, transform var(--m-normal) var(--m-curva);
}

.servicio:hover {
  border-color: var(--c-line-strong);
  transform: translateY(-3px);
}

.servicio__icono {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  flex: none;
  border: 1px solid rgb(212 160 23 / 0.55);
  border-radius: var(--r-md);
  background: rgb(212 160 23 / 0.12);
  color: var(--c-link);
}

.servicio__icono .icono {
  width: 1.5rem;
  height: 1.5rem;
}

.servicio__titulo {
  margin: var(--s-4) 0 var(--s-2);
  font-size: var(--t-md);
}

.servicio p {
  color: var(--c-text-2);
  font-size: var(--t-sm);
}

/* ---------- Categorías ---------- */
.categoria {
  display: grid;
  grid-template-columns: 6.25rem minmax(0, 1fr);
  align-items: stretch;
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  background: var(--c-panel);
  overflow: hidden;
  transition: border-color var(--m-rapido) ease, transform var(--m-normal) var(--m-curva);
}

.categoria:hover {
  border-color: var(--c-line-strong);
  transform: translateY(-3px);
}

.categoria__imagen {
  width: 100%;
  height: 100%;
  min-height: 7.5rem;
  object-fit: cover;
}

.categoria__cuerpo {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding: var(--s-4);
}

.categoria__titulo {
  font-size: var(--t-md);
}

.categoria p {
  color: var(--c-text-2);
  font-size: var(--t-sm);
  line-height: 1.5;
}

.categoria__accion {
  display: none;
}

@media (min-width: 48em) {
  .categoria {
    grid-template-columns: minmax(0, 1fr);
  }

  .categoria__imagen {
    min-height: 0;
    aspect-ratio: 1 / 1;
  }

  .categoria__cuerpo {
    padding: var(--s-5);
  }

  .categoria__accion {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    margin-top: auto;
    padding-top: var(--s-2);
    color: var(--c-link);
    font-size: var(--t-sm);
    font-weight: 600;
  }
}

/* ---------- Proceso ---------- */
.proceso {
  display: grid;
  gap: var(--s-6);
  list-style: none;
}

@media (min-width: 48em) {
  .proceso {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 64em) {
  .proceso {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--s-5);
  }
}

.proceso__paso {
  position: relative;
  padding-top: var(--s-5);
  border-top: 1px solid var(--c-line-strong);
}

.proceso__paso::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 2.5rem;
  height: 2px;
  background: var(--avii-dorado);
}

.proceso__numero {
  display: block;
  color: var(--c-brand);
  font-family: var(--f-display);
  font-size: var(--t-lg);
  font-weight: 700;
  font-stretch: 125%;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
}

.proceso__titulo {
  margin: var(--s-3) 0 var(--s-2);
  font-size: var(--t-md);
}

.proceso p {
  color: var(--c-text-2);
  font-size: var(--t-sm);
}

/* ---------- Beneficios ---------- */
.beneficio {
  padding-top: var(--s-5);
  border-top: 1px solid var(--c-line);
}

.beneficio__icono {
  width: 1.75rem;
  height: 1.75rem;
  color: var(--c-brand);
}

.beneficio__titulo {
  margin: var(--s-4) 0 var(--s-2);
  font-size: var(--t-md);
}

.beneficio p {
  color: var(--c-text-2);
  font-size: var(--t-sm);
}

/* ---------- Detalle de producto ---------- */
.pagina-producto .migas {
  margin-top: var(--s-5);
}

.producto {
  padding-bottom: var(--seccion);
}

.producto__rejilla {
  display: grid;
  gap: var(--s-6);
}

@media (min-width: 64em) {
  .producto__rejilla {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    gap: var(--s-8);
    align-items: start;
  }

  .producto__galeria {
    position: sticky;
    top: calc(var(--alto-encabezado) + var(--s-5));
  }
}

.producto__titulo {
  font-size: clamp(1.875rem, 1.35rem + 2.2vw, 3rem);
  font-weight: 700;
  font-stretch: 110%;
}

.producto__estado {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2) var(--s-3);
  margin-top: var(--s-4);
  color: var(--c-text-3);
  font-size: var(--t-sm);
}

.producto__resumen {
  margin-top: var(--s-4);
  font-size: var(--t-md);
}

.producto__subtitulo {
  margin: var(--s-6) 0 var(--s-3);
  font-size: var(--t-lg);
}

.caja-cotizar {
  display: grid;
  gap: var(--s-4);
  margin-top: var(--s-6);
  padding: var(--s-5);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  background: var(--c-panel);
}

.caja-cotizar__titulo {
  font-size: var(--t-lg);
}

.caja-cotizar .enlace-flecha {
  justify-self: start;
}

.producto__detalle {
  display: grid;
  gap: var(--s-6);
  margin-top: var(--s-7);
  padding-top: var(--s-7);
  border-top: 1px solid var(--c-line);
}

.producto__detalle .producto__subtitulo {
  margin-top: 0;
}

@media (min-width: 64em) {
  .producto__detalle {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    gap: var(--s-8);
  }
}

/* ---------- Servicios (página) ---------- */
.servicios-detalle {
  display: grid;
  gap: var(--s-5);
}

.servicio-detalle {
  display: grid;
  gap: var(--s-4);
  padding: var(--s-5);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  background: var(--c-panel);
}

@media (min-width: 48em) {
  .servicio-detalle {
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--s-5);
    padding: var(--s-6);
  }
}

.servicio-detalle__titulo {
  margin-bottom: var(--s-3);
  font-size: var(--t-lg);
}

.servicio-detalle__listas {
  display: grid;
  gap: var(--s-4);
  margin-top: var(--s-5);
}

@media (min-width: 48em) {
  .servicio-detalle__listas {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--s-6);
  }
}

.servicio-detalle__subtitulo {
  margin-bottom: var(--s-2);
  color: var(--c-text-3);
  font-size: var(--t-xs);
  font-weight: 600;
  font-stretch: 112%;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.servicio-detalle li {
  font-size: var(--t-sm);
}

.material {
  position: relative;
  padding: var(--s-6) var(--s-5);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  background: var(--c-panel);
  overflow: hidden;
}

.material__codigo {
  position: absolute;
  top: var(--s-3);
  right: var(--s-5);
  color: rgb(212 160 23 / 0.28);
  font-family: var(--f-display);
  font-size: 4.5rem;
  font-weight: 800;
  font-stretch: 125%;
  line-height: 1;
  pointer-events: none;
}

.material__titulo {
  position: relative;
  margin-bottom: var(--s-3);
  font-size: var(--t-lg);
}

.material p {
  position: relative;
}

.material__nota {
  margin-top: var(--s-4) !important;
  padding-top: var(--s-4);
  border-top: 1px solid var(--c-line);
  color: var(--c-text-3);
  font-size: var(--t-sm);
}

.lista-limites {
  gap: var(--s-3);
}

/* ---------- Cotizar ---------- */
.cotizar__rejilla {
  display: grid;
  gap: var(--s-6);
}

@media (min-width: 64em) {
  .cotizar__rejilla {
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    gap: var(--s-8);
    align-items: start;
  }

  .panel-canal {
    position: sticky;
    top: calc(var(--alto-encabezado) + var(--s-5));
  }
}

.panel-canal {
  display: grid;
  gap: var(--s-4);
  padding: var(--s-5);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  background: var(--c-panel);
  box-shadow: var(--sombra);
}

@media (min-width: 48em) {
  .panel-canal {
    padding: var(--s-6);
  }
}

.panel-canal__titulo {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  font-size: var(--t-lg);
}

.panel-canal__titulo .icono {
  width: 1.5rem;
  height: 1.5rem;
  color: var(--c-brand);
}

.panel-canal__datos {
  display: grid;
  gap: var(--s-3);
  padding-top: var(--s-4);
  border-top: 1px solid var(--c-line);
  font-size: var(--t-sm);
}

.panel-canal__datos div {
  display: grid;
  gap: 2px;
}

.panel-canal__datos dt {
  color: var(--c-text-3);
  font-size: var(--t-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.panel-canal__datos dd {
  color: var(--c-text);
}

.cotizar__subtitulo {
  margin-bottom: var(--s-3);
  font-size: var(--t-lg);
}

.lista-info li {
  display: flex;
  gap: var(--s-3);
  align-items: flex-start;
  padding-block: var(--s-4);
  border-bottom: 1px solid var(--c-line);
}

.lista-info .icono {
  margin-top: 0.2em;
  color: var(--c-ok);
}

.lista-info h3 {
  color: var(--c-text);
  font-family: var(--f-text);
  font-size: var(--t-base);
  font-weight: 600;
  font-stretch: normal;
  letter-spacing: 0;
}

.lista-info p {
  margin-top: 2px;
  color: var(--c-text-2);
  font-size: var(--t-sm);
}

.nota-privacidad {
  display: flex;
  gap: var(--s-3);
  align-items: flex-start;
  margin-top: var(--s-6);
  color: var(--c-text-3);
  font-size: var(--t-sm);
}

.nota-privacidad .icono {
  margin-top: 0.15em;
  color: var(--c-brand);
}

/* ---------- Sistema de marca (prototipo) ---------- */
.logo-aplicaciones {
  display: grid;
  gap: var(--s-3);
}

@media (min-width: 48em) {
  .logo-aplicaciones {
    grid-template-columns: 1fr 1fr;
  }
}

.logo-aplicaciones + .ficha {
  margin-top: var(--s-5);
}

.logo-aplicaciones + .ficha code {
  overflow-wrap: anywhere;
}

.muestra {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 8rem;
  padding: var(--s-5);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  background: var(--c-bg);
}

.muestra--panel {
  background: var(--c-panel);
}

.muestra--oscura {
  border-color: var(--c-line-strong);
  background: var(--avii-negro);
}

.muestra--oscura .marca {
  color: var(--avii-marfil);
}

.muestra--chica {
  flex-direction: column;
  gap: var(--s-4);
}

.muestra__favicons {
  display: flex;
  align-items: flex-end;
  gap: var(--s-3);
}

.reglas-marca {
  margin-top: var(--s-6);
}

.regla-marca {
  padding: var(--s-5);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  background: var(--c-raised);
}

.regla-marca h3 {
  margin-bottom: var(--s-4);
  font-size: var(--t-md);
}

.regla-marca p,
.regla-marca li {
  color: var(--c-text-2);
  font-size: var(--t-sm);
}

.regla-marca .lista-check li:nth-child(n + 4) .icono {
  color: var(--c-warn);
}

.area-proteccion {
  display: flex;
  justify-content: center;
  margin-bottom: var(--s-4);
  padding: var(--s-6) var(--s-4);
  border-radius: var(--r-md);
  background: var(--c-bg);
}

.area-proteccion .marca {
  outline: 1px dashed var(--c-brand);
  outline-offset: 1rem;
}

.sistema__subtitulo {
  margin-top: var(--s-7);
  font-size: var(--t-lg);
}

.paleta {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 10.5rem), 1fr));
  gap: var(--s-3);
  list-style: none;
}

.paleta__color {
  display: grid;
  gap: 2px;
  padding: var(--s-3);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  background: var(--c-bg);
  font-size: var(--t-sm);
}

.paleta__muestra {
  height: 3.5rem;
  margin-bottom: var(--s-2);
  border: 1px solid rgb(30 30 30 / 0.12);
  border-radius: var(--r-sm);
}

.paleta__muestra--bg { background: var(--c-bg); }
.paleta__muestra--raised { background: var(--c-raised); }
.paleta__muestra--panel { background: var(--c-panel); }
.paleta__muestra--text { background: var(--c-text); }
.paleta__muestra--text-2 { background: var(--c-text-2); }
.paleta__muestra--text-3 { background: var(--c-text-3); }
.paleta__muestra--brand { background: var(--c-brand); }
.paleta__muestra--link { background: var(--c-link); }
.paleta__muestra--btn { background: var(--c-btn); }
.paleta__muestra--btn-hover { background: var(--c-btn-hover); }
.paleta__muestra--focus { background: var(--c-focus); }
.paleta__muestra--line { background: var(--c-line); }
.paleta__muestra--line-strong { background: var(--c-line-strong); }
.paleta__muestra--warn { background: var(--c-warn); }
.paleta__muestra--avii-marfil { background: var(--avii-marfil); }
.paleta__muestra--avii-negro { background: var(--avii-negro); }
.paleta__muestra--avii-dorado { background: var(--avii-dorado); }
.paleta__muestra--avii-gris { background: var(--avii-gris); }

.paleta__nombre {
  color: var(--c-text);
  font-weight: 600;
}

.paleta__hex {
  color: var(--c-text-2);
  font-size: var(--t-xs);
}

.paleta__uso {
  color: var(--c-text-3);
  font-size: var(--t-xs);
  line-height: 1.45;
}

.tabla-desplazable {
  margin-top: var(--s-4);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  overflow-x: auto;
}

.tabla {
  width: 100%;
  min-width: 42rem;
  border-collapse: collapse;
  font-size: var(--t-sm);
}

.tabla th {
  padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--c-line);
  background: var(--c-panel);
  color: var(--c-text);
  font-weight: 600;
  text-align: left;
}

.tabla td {
  padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--c-line);
  color: var(--c-text-2);
}

.tabla tr:last-child td {
  border-bottom: 0;
}

.resultado {
  font-weight: 600;
  white-space: nowrap;
}

.resultado--ok {
  color: var(--c-ok);
}

.resultado--falla {
  color: var(--c-warn);
}

.especimen {
  padding: var(--s-5);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  background: var(--c-panel);
}

.especimen__meta {
  margin-bottom: var(--s-4);
  color: var(--c-text-3);
  font-size: var(--t-xs);
}

.especimen__grande {
  color: var(--c-text);
  font-family: var(--f-display);
  font-size: var(--t-2xl);
  font-weight: 700;
  font-stretch: 118%;
  line-height: 1.05;
}

.especimen__parrafo {
  color: var(--c-text-2);
  font-size: var(--t-md);
}

.especimen__linea {
  margin-top: var(--s-4);
  color: var(--c-text);
  font-size: var(--t-lg);
  letter-spacing: 0.03em;
}

.especimen__pesos {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-4);
  margin-top: var(--s-4);
  color: var(--c-text-2);
}

.especimen--display .especimen__linea,
.especimen--display .especimen__pesos {
  font-family: var(--f-display);
  font-stretch: 112%;
}

.peso-400 { font-weight: 400; }
.peso-500 { font-weight: 500; }
.peso-600 { font-weight: 600; }
.peso-700 { font-weight: 700; }

.guia-componentes {
  display: grid;
  gap: var(--s-5);
}

@media (min-width: 64em) {
  .guia-componentes {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.guia-componentes__grupo {
  padding: var(--s-5);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  background: var(--c-bg);
}

.guia-componentes__grupo h3 {
  margin-bottom: var(--s-4);
  font-size: var(--t-md);
}

.guia-componentes__grupo > p + p,
.guia-componentes__grupo > p + .estado-canal {
  margin-top: var(--s-3);
}

.guia-componentes__tarjeta {
  max-width: 22rem;
}

/* ---------- Detalle de producto: Fase 2 ---------- */
.producto__bloque p + p {
  margin-top: var(--s-3);
}

.producto__subtitulo--menor {
  margin: var(--s-6) 0 var(--s-2);
  font-size: var(--t-md);
}

.producto__atribucion {
  margin-top: var(--s-5);
  color: var(--c-text-3);
  font-size: var(--t-sm);
}

/* =========================================================================
   Evolución comercial (D-28/D-29): tienda-catálogo. Solo tokens verificados.
   ========================================================================= */

@media (min-width: 48em) {
  .rejilla--3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 64em) {
  .rejilla--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* ---------- Hero con productos ---------- */
.mosaico {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-3);
}

.mosaico__item--1 {
  grid-row: span 2;
}

.mosaico__enlace {
  position: relative;
  display: grid;
  height: 100%;
  border: 1px solid var(--c-line-strong);
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--c-panel);
  color: var(--c-text);
  text-decoration: none;
}

.mosaico__enlace:hover {
  border-color: var(--c-text-3);
}

.mosaico__enlace:focus-visible {
  outline: 3px solid var(--c-focus);
  outline-offset: 3px;
}

.mosaico__media {
  display: block;
  min-height: 0;
}

.mosaico__media img,
.mosaico__media picture {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 4 / 5;
}

.mosaico__item:not(.mosaico__item--1) .mosaico__media img {
  aspect-ratio: 1 / 1;
}

.mosaico__texto {
  display: grid;
  gap: 0.15rem;
  padding: var(--s-2) var(--s-3);
  background: var(--c-raised);
  border-top: 1px solid var(--c-line);
}

.mosaico__nombre {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: var(--t-sm);
  line-height: 1.25;
}

.mosaico__dato {
  color: var(--c-text-3);
  font-size: var(--t-xs);
}

/* ---------- Precio público ---------- */
.precio {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 0.5rem;
  margin: var(--s-2) 0;
  color: var(--c-text);
}

.precio__monto {
  font-family: var(--f-display);
  font-weight: 650;
  font-size: var(--t-md);
  font-variant-numeric: tabular-nums;
}

.precio--ficha .precio__monto {
  font-size: var(--t-xl);
}

.precio__prefijo,
.precio__moneda {
  color: var(--c-text-2);
  font-size: var(--t-sm);
}

.precio__regular {
  color: var(--c-text-3);
  font-size: var(--t-sm);
}

.precio__vigencia {
  flex-basis: 100%;
  color: var(--c-text-3);
  font-size: var(--t-xs);
}

.precio--sin-monto {
  color: var(--c-text-2);
  font-size: var(--t-sm);
  font-weight: 600;
}

.precio--ficha.precio--sin-monto {
  font-size: var(--t-md);
}

.etiqueta--promo {
  position: static;
  color: var(--c-ok);
  border-color: var(--c-ok);
  background: var(--c-bg);
}

/* ---------- Categorías y llamadas discretas ---------- */
.categoria__conteo {
  color: var(--c-text-3);
  font-size: var(--t-xs);
}

.banda-cta--discreta {
  background: var(--c-raised);
}

.banda-cta--discreta::before {
  display: none;
}

/* El recuadro grande del mosaico se llena con su imagen. */
.mosaico__enlace {
  grid-template-rows: minmax(0, 1fr) auto;
}

.mosaico__item--1 .mosaico__media,
.mosaico__item--1 .mosaico__media picture {
  height: 100%;
}

.mosaico__item--1 .mosaico__media img {
  height: 100%;
  aspect-ratio: auto;
  min-height: 16rem;
}

/* Páginas legales (Fase 3, E-1 y E-2) */
.legal__fecha {
  margin-top: var(--s-3);
  color: var(--c-text-3);
  font-size: var(--t-sm);
}

.legal {
  display: grid;
  gap: var(--s-6);
}

@media (min-width: 60rem) {
  .legal {
    grid-template-columns: 16rem minmax(0, 1fr);
    align-items: start;
  }

  .legal__indice {
    position: sticky;
    top: var(--s-6);
  }
}

.legal__indice {
  padding: var(--s-4) var(--s-5);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  background: var(--c-raised);
  font-size: var(--t-sm);
}

.legal__indice-titulo {
  margin-bottom: var(--s-2);
  font-size: var(--t-base);
}

.legal__indice ol {
  margin: 0;
  padding-left: 1.2rem;
}

.legal__indice li + li {
  margin-top: var(--s-1);
}

.legal__indice a {
  color: var(--c-link);
}

.legal__cuerpo {
  max-width: 44rem;
}

.legal__seccion + .legal__seccion {
  margin-top: var(--s-6);
}

.legal__titulo {
  margin-bottom: var(--s-3);
  font-size: var(--t-lg);
}

.legal__seccion p,
.legal__seccion li {
  color: var(--c-text-2);
  overflow-wrap: anywhere;
}

.legal__seccion p + p,
.legal__seccion p + ul {
  margin-top: var(--s-3);
}

.legal__seccion ul {
  padding-left: 1.2rem;
}