@charset "UTF-8";

/* =========================================================
   ONION SUPPORT — COMPONENTES PÚBLICOS COMPARTIDOS
   Archivo: /src/css/views/public/public-components.css

   ÚNICA fuente de estilos de los componentes de contenido de la web
   pública: contenedor de contenido, hero de página, sección y su cabecera,
   antetítulo, botones, enlaces de servicio, catálogo publicado e iconos.
   Su marcado es el de /src/views/public/components/template.js y
   components/catalogo.js. Los consume la portada (manifiesto `public-home`
   de src/router/styles.js); los documentos estáticos (documento común,
   tools/public-static-document.mjs) también cargan la hoja: sus iconos
   (.public-home-icon) los usa la topbar. Regla, tabla de componentes y receta:
   docs/PUBLIC_EXPERIENCE.md#componentes-públicos-compartidos.

   Contrato (tools/public-design-system-contract.mjs):
   - Ninguna hoja de página redefine, copia ni varía estas reglas: una página
     compone (rejillas, orden, ritmo entre bloques) y los componentes se
     pintan aquí. Un cambio de diseño de un componente se hace en esta hoja y
     se verifica en todas las páginas que lo usan; una variante es un
     modificador de clase de esta hoja.
   - Las mismas capas que la topbar canónica: los componentes en `auth` y su
     tema claro en `compositions`, activado por el tema efectivo
     (/src/preboot/theme.js), igual en la portada que en un estático.
   - Colores: sólo tokens de /src/css/tokens/public.css (paleta incluida);
     contenedor, ritmo, radios, tipografía base y foco: sus tokens. Sin
     !important, sin estilos inline, sin reglas por ruta.
   - Las clases conservan el prefijo `public-home-*` de su origen (como la
     topbar): no indican una variante de la portada.
========================================================= */

@layer auth {

/* Fixed catalog blocks: shared by the public Home and the private preview. */
.public-catalogo-unavailable {
  display: grid;
  justify-items: start;
  gap: 24px;
  padding-block: var(--public-section-space);
}

.public-catalogo-featured {
  padding-block: var(--public-section-space);
}

.public-catalogo-grid {
  display: grid;
  grid-template-columns: repeat(var(--public-catalogo-grid-fit, auto-fit), minmax(min(100%, 280px), 1fr));
  gap: 24px;
}

.public-catalogo-grid--listing {
  --public-catalogo-grid-fit: auto-fill;
}

.public-catalogo-card {
  display: flex;
  flex-direction: column;
  min-inline-size: 0;
  overflow: hidden;
  border: 1px solid var(--public-border);
  border-radius: var(--public-radius-lg);
  color: var(--public-text-strong);
  background: var(--public-card);
}

.public-catalogo-card-content {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding: 24px;
}

.public-catalogo-card-content h2,
.public-catalogo-card-content h3 {
  margin: 0;
  font-size: clamp(20px, 2vw, 26px);
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.public-catalogo-media {
  display: grid;
  place-items: center;
  inline-size: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--public-card);
}

.public-catalogo-media img {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  min-block-size: 0;
  object-fit: contain;
}

.public-catalogo-media [hidden] {
  display: none;
}

.public-catalogo-media--hero {
  border-radius: var(--public-radius-lg);
}

.public-catalogo-image-empty {
  padding: 24px;
  color: var(--public-text-muted);
  text-align: center;
}

/* Estado de una sección (renderPublicState): carga, vacío, preparación,
   retirada o fallo de lectura, con «Reintentar» cuando procede. El hueco de
   la página de sección nace vacío (el documento estático no conoce lo
   publicado) y reserva la altura de su estado: una línea y, en pantallas
   estrechas, donde los mensajes de vacío ocupan dos, dos líneas. Pintarlo
   no desplaza el pie (un aviso publicado más largo sí puede). */
.public-home-state {
  display: grid;
  justify-items: center;
  gap: 16px;
  padding: 24px;
  color: var(--public-text-muted);
  text-align: center;
}

/* El relleno de .public-home-state, dos veces, más sus líneas. */
[data-public-catalogo-category] {
  min-block-size: calc(2 * 24px + 1lh);
}

@media (max-width: 720px) {
  [data-public-catalogo-category] {
    min-block-size: calc(2 * 24px + 2lh);
  }
}

.public-home-state p {
  margin: 0;
  overflow-wrap: anywhere;
}

.public-catalogo-description,
.public-catalogo-features,
.public-catalogo-availability {
  margin: 0;
  color: var(--public-text-soft);
  line-height: 1.6;
  overflow-wrap: anywhere;
}

/* La descripción la escribe el administrador en un textarea: conserva sus
   saltos de línea (pre-line), nunca la sangría de una plantilla. */
.public-catalogo-description {
  white-space: pre-line;
}

.public-catalogo-features {
  padding-inline-start: 20px;
}

.public-catalogo-price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
  margin: 12px 0 0;
  color: var(--public-text-strong);
}

.public-catalogo-card-content .public-catalogo-price {
  margin-block-start: auto;
  padding-block-start: 12px;
}

.public-catalogo-price strong {
  font-size: clamp(24px, 3vw, 34px);
  font-weight: 750;
}

.public-catalogo-price del {
  color: var(--public-text-muted);
}

.public-sr-only,
.public-catalogo-sr-only {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* =========================================================
   BASE DEL CONTENIDO
   Lo que el contenido de cada página hereda: enlaces sin color ni subrayado
   propios, controles con la tipografía del texto, selección y anillo de foco
   (el de FocusSystem, por los tokens --public-focus-*). Vive en el contenedor
   de contenido (.public-home-content), nunca en la cabecera ni en el pie, que
   son componentes propios y se pintan igual en todas las páginas.
========================================================= */

/* La tipografía base que hereda el contenido (la de la SPA en la portada,
   la misma en un documento estático). */
.public-home-content {
  font-family: var(--public-font-sans);
  font-size: var(--public-font-base);
  line-height: var(--public-line-normal);
}

/* Valores por defecto con la especificidad de una clase (:where): cualquier
   componente que declare color, tipografía o subrayado los sustituye, sea
   un enlace o un botón. */
.public-home-content :where(a) {
  color: inherit;
  text-decoration: none;
}

.public-home-content :where(button, input, select, textarea) {
  font: inherit;
}

.public-home-content :where(button) {
  color: inherit;
}

.public-home-content ::selection {
  color: rgb(var(--public-rgb-white));
  background: rgb(var(--public-rgb-blue-659) / .50);
}

.public-home-content [hidden] {
  display: none;
}

.public-home-content a:focus-visible,
.public-home-content button:focus-visible,
.public-home-content input:focus-visible,
.public-home-content select:focus-visible,
.public-home-content textarea:focus-visible,
.public-home-content summary:focus-visible {
  outline: var(--public-focus-width) solid var(--public-focus-ring);
  outline-offset: var(--focus-ring-offset, 2px);
  box-shadow: 0 0 0 4px rgb(var(--public-rgb-blue-659) / .18);
}

.public-home-icon {
  display: block;
  inline-size: 1.25em;
  block-size: 1.25em;
  color: currentColor;
}

.public-home-button {
  --button-hover-bg: var(--public-button-primary-bg);
  --button-hover-border: rgb(var(--public-rgb-white) / .24);
  --button-hover-text: var(--public-text-on-accent);
  --button-hover-shadow: 0 14px 32px rgb(var(--public-rgb-blue-659) / .24), inset 0 1px 0 rgb(var(--public-rgb-white) / .28);
  --button-hover-filter: saturate(1.12);
  --button-active-bg: var(--public-button-primary-bg);
  --button-active-border: rgb(var(--public-rgb-white) / .16);
  --button-active-text: var(--public-text-on-accent);
  --button-active-shadow: var(--public-button-primary-shadow);
  --button-active-filter: brightness(.96);

  position: relative;
  isolation: isolate;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  min-block-size: 48px;
  padding: 0 20px;

  overflow: hidden;
  border: 1px solid rgb(var(--public-rgb-white) / .16);
  border-radius: var(--public-radius-md);

  color: var(--public-text-on-accent);
  background: var(--public-button-primary-bg);
  box-shadow: var(--public-button-primary-shadow);

  font-weight: 750;
  letter-spacing: -.018em;
  text-shadow: 0 1px 1px rgb(var(--public-rgb-black) / .18);
  cursor: pointer;

}

.public-home-button .public-home-icon {
  inline-size: 18px;
  block-size: 18px;
}

.public-home-button .public-home-icon--whatsapp {
  inline-size: 20px;
  block-size: 20px;
}

/* Contenedor de página: --public-page-max de contenido entre dos márgenes
   --public-page-gutter, alineado con la topbar y con el pie legal. */
.public-home-section {
  position: relative;
  inline-size: min(100%, calc(var(--public-page-max) + 2 * var(--public-page-gutter)));
  margin-inline: auto;
  padding-inline: var(--public-page-gutter);
  scroll-margin-block-start: var(--public-topbar-scroll-offset);
}

/* El margen aparta las anclas de la cabecera fija en la portada, cuyo
   contenedor de scroll no tiene scroll-padding. En un documento estático ya
   las aparta la ventana (public-topbar.css): la sección no suma otro
   (/soporte#formulario-asistencia). */
html[data-public-topbar-document="true"] .public-home-section {
  scroll-margin-block-start: 0;
}

.public-home-section-head {
  display: grid;
  justify-items: center;
  gap: 16px;

  max-inline-size: 900px;
  margin-inline: auto;
  margin-block-end: clamp(28px, 3.8vw, 48px);

  text-align: center;
}

.public-home-section-head h1,
.public-home-section-head h2 {
  margin: 0;
  color: var(--public-text-strong);
  font-size: clamp(32px, 4.2vw, 56px);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -.035em;
  text-wrap: balance;
}

.public-home-section-head p:not(.public-home-price-eyebrow) {
  max-inline-size: 64ch;
  margin: 0;
  color: var(--public-text-soft);
  font-size: clamp(15px, 1.7vw, 19px);
  font-weight: 560;
  line-height: 1.6;
}

.public-home-price-eyebrow {
  display: inline-flex;
  align-items: center;
  margin: 0;
  color: var(--public-accent-2);
  font-size: 13px;
  font-weight: 750;
  letter-spacing: .055em;
  line-height: 1.2;
  text-transform: uppercase;
}

/* Miga de pan de las páginas propias (/me y servicios), sobre su titular. */

.public-home-button {
  min-block-size: 56px;
  padding-inline: 24px;
  border-radius: var(--public-radius-md, 16px);
  font-size: 15px;
}

@media (max-width: 720px) {

  .public-home-button {
      inline-size: 100%;
    }

  .public-home-section-head h2 {
      font-size: clamp(30px, 8.5vw, 42px);
    }

}


/* =========================================================
   HERO DE PÁGINA
   La apertura de cada página pública: titular (h1 con una línea de acento
   opcional en <span>), entradilla con su frase destacada en <strong>,
   acciones, nota y una columna visual que cada página llena con su pieza
   (el despiece del PC de la portada, el retrato de /me, el resumen de
   un servicio).
========================================================= */

.public-home-hero {
  inline-size: 100%;
  max-inline-size: none;
  min-block-size: 0;
  padding:
    clamp(36px, 4.2vw, 64px)
    var(--public-page-gutter)
    clamp(40px, 5vw, 76px);
  overflow: clip;
  background: transparent;
}

.public-home-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(440px, .92fr);
  align-items: center;
  gap: clamp(32px, 4.5vw, 72px);
  inline-size: min(100%, var(--public-page-max));
  min-block-size: 0;
  margin-inline: auto;
}

.public-home-hero-copy {
  container-type: inline-size;
  position: relative;
  z-index: 2;
  display: grid;
  justify-items: start;
  gap: 22px;
  min-inline-size: 0;
}

.public-home-title {
  max-inline-size: 980px;
  margin: 0;
  padding-block: .03em .06em;
  color: var(--public-text-strong);
  /* Escala del titular respecto a su columna (container-type de
     .public-home-hero-copy), de 32 a 76 px; la línea de acento, de 40 a 99 px. */
  font-size: clamp(32px, 9.8cqi, 76px);
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -.045em;
  text-wrap: balance;
}

.public-home-title span {
  display: block;
  margin-block-start: .1em;
  color: var(--public-accent);
  font-size: clamp(40px, 13cqi, 99px);
  text-shadow: 0 6px 30px rgb(var(--public-rgb-blue-659) / .12);
}

/* pre-line: el texto del hero del catálogo (un textarea del administrador)
   conserva sus saltos de línea. Todo emisor pega el texto a sus etiquetas. */
.public-home-hero-text {
  max-inline-size: 51ch;
  margin: 0;
  color: var(--public-text-soft);
  font-size: clamp(17px, 1.4vw, 19px);
  font-weight: 500;
  line-height: 1.65;
  white-space: pre-line;
}

.public-home-hero-text strong {
  display: block;
  margin-block-end: 6px;
  color: var(--public-text);
  font-weight: 650;
}

.public-home-hero-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
}

.public-home-hero-visual {
  position: relative;
  justify-self: end;
  inline-size: min(100%, 580px);
  max-inline-size: 580px;
  min-inline-size: 0;
  min-block-size: 0;
  perspective: 1200px;
}

@media (max-width: 1240px) {
  .public-home-hero-grid {
    grid-template-columns: minmax(0, 1fr) minmax(400px, .70fr);
    gap: clamp(24px, 3vw, 52px);
  }

  .public-home-hero-visual {
    inline-size: min(100%, 548px);
    max-inline-size: 548px;
  }
}

@media (max-width: 1040px) {
  .public-home-hero {
    padding-block-start: clamp(22px, 4vw, 44px);
  }

  .public-home-hero-grid {
    grid-template-columns: 1fr;
  }

  /* La columna visual conserva su tamaño natural al pasar a una columna. */
  .public-home-hero-visual {
    justify-self: center;
    inline-size: min(100%, 660px);
    max-inline-size: 660px;
  }
}

@media (max-width: 720px) {
  .public-home-hero {
    min-block-size: auto;
    padding-block: 28px 40px;
  }

  .public-home-title {
    line-height: 1.08;
    letter-spacing: -.035em;
  }

  .public-home-title span {
    margin-block-start: .08em;
  }

  .public-home-hero-text {
    font-size: 16px;
  }

  .public-home-hero-copy {
    gap: 20px;
  }

  .public-home-hero-copy > .public-home-price-eyebrow {
    max-inline-size: 36ch;
    font-size: 11px;
    line-height: 1.5;
  }

  .public-home-hero-actions {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 10px;
    inline-size: 100%;
  }

  .public-home-hero-actions .public-home-button {
    min-inline-size: 0;
    min-block-size: 52px;
    padding-inline: 10px;
    gap: 8px;
    font-size: 13px;
  }

  .public-home-hero-visual {
    inline-size: 100%;
    max-inline-size: 660px;
  }
}

/* =========================================================
   HERO DE PRODUCTO (variant "product")
   Presentación de hardware: la pieza protagonista, centrada y a la altura
   del escenario, y sobre su base, en una misma línea inferior, el texto
   anclado a la izquierda (nombre del producto, titular de una línea y línea
   de hardware, en un cuerpo contenido que deja el protagonismo a la pieza)
   y la oferta a la derecha: la única acción. El fondo propio, con el brillo
   de marca detrás de la pieza y un borde inferior en arco, sigue al tema.

   Alto: el hero llena el primer viewport bajo la cabecera, sin suelo fijo.
   La celda de la pieza cubre todo el escenario, pie incluido, y es un
   contenedor de tamaño: su contenido no la agranda y la página encuadra la
   pieza con cqi/cqb (index.css · 7.1), algo por debajo del alto de la
   celda, y funde su base bajo el texto. En un
   viewport bajo encoge la pieza, no el resto: el pie sigue en el primer
   viewport. El techo, 1280 px, deja la pieza cerca de su tamaño nativo
   (893 px) en pantallas muy altas.
   Tipografía: escala con el ancho del escenario (la rejilla es el
   contenedor, cqi) y con el alto del viewport (svh); el titular cabe en una
   línea junto a la acción y, si no cabe, se reparte en dos equilibradas.
   Pie (--public-home-hero-foot): el respiro del escenario más la reserva
   que publica la página para sus elementos fijos de las esquinas inferiores
   (--public-home-hero-clearance; en la portada, el botón de WhatsApp), que
   así nunca tapan la oferta.

   Teléfono (hasta 720 px): una columna en el orden del marcado (texto,
   pieza a sangre y oferta), con el texto en su cuerpo de móvil y el botón a
   lo ancho.
========================================================= */

.public-home-hero--product {
  --public-home-hero-ink: var(--public-text-strong);
  --public-home-hero-ink-soft: var(--public-text-soft);
  /* Titular: un degradado frío y contenido, de un blanco helado al azul
     claro de la marca. */
  --public-home-hero-headline: linear-gradient(
    90deg,
    rgb(var(--public-rgb-slate-961)) 0%,
    rgb(var(--public-rgb-slate-870)) 50%,
    rgb(var(--public-rgb-blue-758)) 100%
  );
  --public-home-hero-foot: calc(var(--public-home-hero-clearance, 0px) + clamp(12px, 2svh, 24px));

  position: relative;
  isolation: isolate;
  display: grid;
  min-block-size: clamp(480px, calc(76svh - var(--public-topbar-height, 0px)), 700px);
  padding-block: clamp(20px, 3svh, 32px) var(--public-home-hero-foot);
  color: var(--public-home-hero-ink);
}

/* Fondo de la apertura: un plano continuo de lado a lado, con el brillo de
   marca detrás de la pieza y un borde inferior en arco. */
.public-home-hero--product::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-end-start-radius: 50% clamp(32px, 6vw, 96px);
  border-end-end-radius: 50% clamp(32px, 6vw, 96px);
  background:
    radial-gradient(ellipse 46% 58% at 50% 42%, rgb(var(--public-rgb-blue-659) / .26), transparent 72%),
    linear-gradient(180deg, var(--public-opening-surface), rgb(var(--public-rgb-slate-208)));
  pointer-events: none;
}

.public-home-hero--product .public-home-hero-grid {
  container-type: inline-size;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: 1fr auto;
  grid-template-areas:
    "stage stage"
    "copy offer";
  /* El botón comparte línea base con la línea de hardware; donde no hay
     alineación por la última línea base, ambos cierran abajo. */
  align-items: end;
  align-items: last baseline;
  gap: 0 clamp(24px, 4vw, 72px);
}

/* La pieza ocupa el escenario entero, también el pie: el texto y la oferta
   se apoyan sobre su base. */
.public-home-hero--product .public-home-hero-visual {
  grid-area: 1 / 1 / -1 / -1;
  container-type: size;
  display: grid;
  /* Arriba y centrada: si sobra alto (tablet en vertical), el aire queda
     entre la pieza y el texto, no bajo la cabecera. */
  place-items: start center;
  align-self: stretch;
  justify-self: stretch;
  inline-size: auto;
  max-inline-size: none;
  min-block-size: clamp(240px, 40svh, 480px);
  margin-block-end: calc(-1 * var(--public-home-hero-foot));
  perspective: none;
}

.public-home-hero--product .public-home-hero-copy {
  grid-area: copy;
  container-type: normal;
  gap: 0;
  max-inline-size: none;
}

/* Nombre del producto: firme, con el tracking ceñido de la marca y muy por
   debajo del titular. */
.public-home-hero--product .public-home-hero-name {
  margin: 0 0 clamp(2px, .4svh, 5px);
  color: var(--public-home-hero-ink);
  font-size: clamp(13px, min(.875cqi, 1.4svh), 14px);
  font-weight: 650;
  line-height: 1.15;
  letter-spacing: -.02em;
}

/* Titular: lo primero que se lee tras la pieza, en una sola línea y en un
   cuerpo contenido: la pieza manda. La caja
   abraza el texto (fit-content) y el degradado recorre la línea entera.
   background-clip sólo pinta dentro de la caja: con Segoe UI (system-ui de
   Windows) la «p» baja ~.23em y la línea acaba ~.10em bajo la base, así que
   el relleno da sitio a los descendentes y el margen negativo deja la
   huella en +.08em. */
.public-home-hero--product .public-home-title {
  inline-size: fit-content;
  max-inline-size: 100%;
  padding-block: 0 .22em;
  margin-block-end: -.14em;
  background-image: var(--public-home-hero-headline);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-size: clamp(26px, min(2.4cqi, 3.8svh), 40px);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -.035em;
  text-wrap: balance;
}

/* Línea de hardware: «Ahora con» en la tinta suave y el procesador en la
   firme; ® y ™ como volados pequeños que no abren la línea. */
.public-home-hero--product .public-home-hero-spec {
  margin: clamp(4px, .7svh, 8px) 0 0;
  color: var(--public-home-hero-ink-soft);
  font-size: clamp(13px, min(.9cqi, 1.35svh), 14px);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -.012em;
  text-wrap: balance;
}

.public-home-hero--product .public-home-hero-spec strong {
  color: var(--public-home-hero-ink);
  font-weight: 650;
}

.public-home-hero--product .public-home-hero-spec sup {
  margin-inline-start: .04em;
  font-size: .55em;
  font-weight: 600;
  line-height: 0;
  vertical-align: .62em;
}

/* Oferta: el botón azul, por encima de la base de la pieza. */
.public-home-hero--product .public-home-hero-offer {
  grid-area: offer;
  position: relative;
  z-index: 2;
  display: flex;
}

.public-home-hero--product .public-home-button {
  --button-hover-shadow: none;
  --button-active-shadow: none;
  --button-hover-filter: brightness(1.06);
  min-block-size: 44px;
  padding-inline: 22px;
  border-color: transparent;
  border-radius: var(--public-radius-pill);
  box-shadow: none;
  font-size: 15px;
  font-weight: 650;
  text-shadow: none;
}

@media (max-width: 720px) {
  .public-home-hero--product::before {
    background:
      radial-gradient(ellipse 70% 42% at 50% 56%, rgb(var(--public-rgb-blue-659) / .26), transparent 72%),
      linear-gradient(180deg, var(--public-opening-surface), rgb(var(--public-rgb-slate-208)));
  }

  .public-home-hero--product .public-home-hero-grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto 1fr auto;
    grid-template-areas:
      "copy"
      "visual"
      "offer";
    align-items: stretch;
    row-gap: clamp(10px, 1.8svh, 24px);
  }

  /* La pieza, a sangre: de borde a borde del viewport. */
  .public-home-hero--product .public-home-hero-visual {
    grid-area: visual;
    min-block-size: max(min(70vw, 360px), clamp(120px, 22svh, 360px));
    margin-block-end: 0;
    margin-inline: calc(-1 * var(--public-page-gutter));
  }

  /* En una columna el texto va encima de la pieza, en su cuerpo de móvil:
     el titular escala con el ancho y se reparte en dos líneas
     equilibradas. */
  .public-home-hero--product .public-home-hero-name {
    margin-block-end: 6px;
    font-size: 18px;
  }

  .public-home-hero--product .public-home-title {
    font-size: clamp(36px, 12cqi, 56px);
  }

  .public-home-hero--product .public-home-hero-spec {
    margin-block-start: 10px;
    font-size: 17px;
  }

  /* La oferta, a lo ancho. */
  .public-home-hero--product .public-home-hero-offer {
    display: grid;
  }

  .public-home-hero--product .public-home-button {
    inline-size: 100%;
    min-block-size: 52px;
    font-size: 16px;
  }
}

/* Colores forzados e impresión: sin fondo propio y el titular, a texto
   sólido; la tinta ya es la del tema, que ambos modos resuelven. */
@media (forced-colors: active), print {
  .public-home-hero--product::before {
    background: none;
  }

  .public-home-hero--product .public-home-title {
    background-image: none;
    color: var(--public-text-strong);
  }
}

/* Movimiento reducido: el contenido aparece y cambia de estado sin
   transiciones. */
@media (prefers-reduced-motion: reduce) {
  .public-home-content *,
  .public-home-content *::before,
  .public-home-content *::after {
    scroll-behavior: auto;
    animation-duration: .001ms;
    animation-iteration-count: 1;
    transition-duration: .001ms;
  }
}

}

@layer compositions {

/* =========================================================
   TEMA CLARO
========================================================= */

html:is([data-theme="light"], .theme-light) .public-home-section-head h2 {
  color: var(--public-text-strong);
}

html:is([data-theme="light"], .theme-light) .public-home-content ::selection {
  color: rgb(var(--public-rgb-white));
  background: rgb(var(--public-rgb-blue-659) / .66);
}

html:is([data-theme="light"], .theme-light) .public-home-title span {
  color: rgb(var(--public-rgb-blue-548));
  text-shadow: 0 6px 28px rgb(var(--public-rgb-blue-659) / .08);
}

html:is([data-theme="light"], .theme-light) .public-home-hero-text {
  color: var(--public-text);
}

/* Hero de producto: el fondo claro de siempre y el titular en un degradado
   de tinta a azul de marca. */
html:is([data-theme="light"], .theme-light) .public-home-hero--product {
  --public-home-hero-headline: linear-gradient(
    90deg,
    rgb(var(--public-rgb-slate-254)) 0%,
    rgb(var(--public-rgb-blue-481)) 100%
  );
}

html:is([data-theme="light"], .theme-light) .public-home-hero--product::before {
  background:
    radial-gradient(ellipse 46% 58% at 50% 42%, rgb(var(--public-rgb-blue-659) / .14), transparent 72%),
    linear-gradient(180deg, var(--public-opening-surface), rgb(var(--public-rgb-slate-951c)));
}

@media (max-width: 720px) {
  html:is([data-theme="light"], .theme-light) .public-home-hero--product::before {
    background:
      radial-gradient(ellipse 70% 42% at 50% 56%, rgb(var(--public-rgb-blue-659) / .14), transparent 72%),
      linear-gradient(180deg, var(--public-opening-surface), rgb(var(--public-rgb-slate-951c)));
  }
}

html:is([data-theme="light"], .theme-light) .public-home-price-eyebrow {
  color: rgb(var(--public-rgb-blue-481));
  text-shadow: none;
}

}