/* TRANSICION ENTRE PAGINAS
   ------------------------------------------------------------------
   La otra mitad del fundido cruzado. Una transicion entre documentos solo
   ocurre si LOS DOS se apuntan, asi que este bloque tiene que estar aqui
   (las 12 fichas) Y en style.css (la portada). Si desaparece de uno de los
   dos, la transicion deja de verse sin ningun otro sintoma; por eso hay una
   guarda en tools/validate-site.js. Ver la explicacion larga en style.css. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition {
    navigation: auto;
  }
}

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 320ms;
  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}

/* MORPHING (la otra mitad; explicacion larga en style.css). La cabecera de
   cada ficha lleva su nombre inline desde buildServicePage. Aqui se nombran
   las filas de "Compara formats" para que el viaje tambien ocurra entre
   fichas, EXCLUYENDO la del formato actual: su nombre ya lo lleva la
   cabecera de esta misma pagina, y un nombre duplicado cancela la
   transicion entera sin avisar. */
.commercial-format-link[data-format-link="keynote"]:not(.is-current) { view-transition-name: format-keynote; }
.commercial-format-link[data-format-link="divulgativa"]:not(.is-current) { view-transition-name: format-divulgativa; }
.commercial-format-link[data-format-link="taller"]:not(.is-current) { view-transition-name: format-taller; }
.commercial-format-link[data-format-link="moderacio"]:not(.is-current) { view-transition-name: format-moderacio; }

::view-transition-group(*) {
  animation-duration: 320ms;
  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}

:root {
  --page-bg: #050b16;
  --page-panel: rgba(10, 22, 40, .88);
  --page-line: rgba(34, 211, 238, .22);
  --page-cyan: #22d3ee;
  --page-blue: #3b82f6;
  --page-text: #f1f5f9;
  --page-muted: #b4c0d3;
  --page-soft: #dbeafe;
  --page-shadow: 0 24px 70px rgba(0, 0, 0, .32);
}

* { box-sizing: border-box; }

html { color-scheme: dark; scroll-behavior: smooth; }

body.commercial-page {
  margin: 0;
  min-height: 100vh;
  color: var(--page-text);
  background:
    radial-gradient(circle at 15% 5%, rgba(37, 99, 235, .18), transparent 34rem),
    radial-gradient(circle at 90% 35%, rgba(6, 182, 212, .1), transparent 30rem),
    var(--page-bg);
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.commercial-page a { color: inherit; }

.commercial-page-header {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  /* Sangrias calcadas de #mainHeader .nav-container de la portada, para que el
     nombre caiga EXACTAMENTE en la misma x. Alli el valor esta repartido entre
     style.css y enhancements.css con varios puntos de ruptura; aqui se resume
     en los tres tramos que de verdad producen valores distintos. Medido en la
     portada: 56px a 1400 de ancho, 16px a 1010 y 12px a 390.
     Esta hoja es independiente y no ve aquellas reglas: si alla cambian las
     sangrias de la cabecera, hay que repetirlo aqui. */
  padding: 14px clamp(24px, 4vw, 64px);
  /* La altura tambien se iguala. En la portada no esta escrita: sale del menu
     completo, que es mas alto que el nombre (73px a partir de 1151 de ancho y
     67px por debajo). Aqui la cabecera solo lleva el nombre y dos enlaces, asi
     que se quedaba en 58px y el nombre subia 7px respecto a la portada. Con
     align-items: center, fijar la altura lo devuelve a la misma y. */
  min-height: 73px;
  border-bottom: 1px solid rgba(148, 163, 184, .14);
  background: rgba(5, 11, 22, .86);
  backdrop-filter: blur(18px);
}

/* El nombre, igual que en la portada. Antes era blanco con "Rigall" en cian y
   mas pequeno y menos grueso: tres diferencias con la cabecera principal.
   Ahora comparte receta con .logo + #mainHeader .logo del sitio grande:
   degradado cian->violeta sobre el nombre entero, mismo peso, mismo cuerpo y
   el mismo subrayado que crece al pasar por encima.

   Los colores van literales porque esta hoja es independiente (tiene su propio
   :root y no ve las variables de style.css). SI SE CAMBIA EL COLOR DE MARCA,
   hay que tocarlo en los dos sitios: --accent-gradient de style.css y este
   bloque. */
.commercial-page-logo {
  font-family: Outfit, Inter, sans-serif;
  font-weight: 800;
  font-size: 1.25rem;
  letter-spacing: 0;
  text-decoration: none;
  position: relative;
  display: inline-block;
  background: linear-gradient(135deg, #06b6d4 0%, #8b5cf6 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  /* Mismo motivo que en la portada: el degradado solo existe dentro de la caja
     del elemento, y con la caja justa el rabo de la "g" de Rigall se quedaba
     sin color y parecia cortado. */
  line-height: 1.2;
  padding: 2px 0;
  /* Como .logo de la portada. Sin esto, al estrecharse la cabecera el flex
     encogia el nombre y "Montserrat Rigall" se partia en dos lineas: la
     cabecera pasaba de 73 a 81px y dejaba de cuadrar con la portada. */
  white-space: nowrap;
  flex-shrink: 0;
  transition: transform 220ms ease, filter 220ms ease;
}

.commercial-page-logo::after {
  content: '';
  position: absolute;
  left: 0;
  right: 12%;
  bottom: -4px;
  height: 1px;
  background: linear-gradient(135deg, #5ee7ff 0%, #8f7cff 100%);
  opacity: 0;
  transform: scaleX(.6);
  transform-origin: left;
  transition: opacity 220ms ease, transform 220ms ease;
}

.commercial-page-logo:hover,
.commercial-page-logo:focus-visible {
  filter: drop-shadow(0 0 14px rgba(94, 231, 255, .28));
  transform: translateY(-1px);
}

.commercial-page-logo:hover::after,
.commercial-page-logo:focus-visible::after {
  opacity: 1;
  transform: scaleX(1);
}

.commercial-page-header-actions {
  display: flex;
  align-items: center;
  gap: 14px;
}

/* MENU PRINCIPAL de texto plano, para paginas sin JavaScript. Copia el aspecto
   de .nav-links de la portada (mismo cuerpo, mismo peso, mismo subrayado que
   crece al pasar por encima) pero sin desplegables ni hamburguesa.
   Los mismos estilos estan replicados en enhancements.css para la pagina de
   privacidad, que carga las hojas grandes en vez de esta. Si se cambia uno,
   cambiar el otro. */
.simple-nav {
  display: flex;
  align-items: center;
  gap: 18px;
}

.commercial-page .simple-nav a {
  position: relative;
  padding: 4px 0;
  color: var(--page-muted) !important;
  font-size: .92rem;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}

.commercial-page .simple-nav a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background: linear-gradient(135deg, #06b6d4 0%, #8b5cf6 100%);
  transition: width 250ms ease;
}

.commercial-page .simple-nav a:hover,
.commercial-page .simple-nav a:focus-visible {
  color: var(--page-text) !important;
}

.commercial-page .simple-nav a:hover::after,
.commercial-page .simple-nav a:focus-visible::after {
  width: 100%;
}

.commercial-page .simple-nav-cta {
  padding: 8px 18px !important;
  border-radius: 30px;
  background: linear-gradient(135deg, #06b6d4 0%, #8b5cf6 100%);
  color: #f8fafc !important;
  font-weight: 600;
}

.commercial-page .simple-nav-cta::after { display: none !important; }

.commercial-page-compare {
  color: #bae6fd !important;
  font-size: .82rem;
  font-weight: 700;
  text-decoration: none;
}

.commercial-page-compare:hover,
.commercial-page-compare:focus-visible {
  color: #fff !important;
}

/* El selector de idioma vive en header.css, la cabecera compartida con la
   portada. Aqui vivio una copia con !important que, al llegar la cabecera
   compartida, PISABA el marcado del idioma actual: el texto salia oscuro
   (#04111d) sobre fondo transparente, ilegible. Si estas paginas necesitan
   ajustar ese componente, el sitio es la COLA de tools/extract-header-css.js,
   nunca una copia aqui. */

.commercial-page-main {
  width: min(1120px, calc(100% - 36px));
  margin: 0 auto;
  padding: clamp(44px, 8vw, 92px) 0 70px;
}

.commercial-breadcrumbs {
  margin-bottom: 26px;
  color: var(--page-muted);
  font-size: .82rem;
}

.commercial-breadcrumbs a { color: #bae6fd; }

.commercial-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(280px, .8fr);
  gap: clamp(28px, 6vw, 70px);
  align-items: center;
}

.commercial-hero-copy { min-width: 0; }

.commercial-eyebrow {
  color: var(--page-cyan);
  font-weight: 700;
  font-size: .76rem;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.commercial-hero h1 {
  max-width: 850px;
  margin: 12px 0 18px;
  font-family: Outfit, Inter, sans-serif;
  font-size: clamp(2.3rem, 7vw, 5rem);
  line-height: .98;
  letter-spacing: -.045em;
}

/* Acento del titulo, igual que en la portada: cian claro con resplandor fijo.
   Aqui el brillo va un punto mas suelto y menos opaco porque estos <h1> llegan
   a 5rem y, con el halo cerrado de la portada, los bordes de las letras se
   emborronaban. El color literal es --accent-cyan-hero de style.css; esta hoja
   es independiente y no lo ve. Si cambia alli, cambiarlo aqui. */
.commercial-hero h1 span {
  color: #5ee7ff;
  text-shadow:
    0 0 16px rgba(94, 231, 255, .42),
    0 0 38px rgba(94, 231, 255, .18);
}

.commercial-lead {
  max-width: 760px;
  color: var(--page-muted);
  font-size: clamp(1.02rem, 2.2vw, 1.23rem);
  line-height: 1.7;
}

.commercial-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 26px;
}

.commercial-secondary-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 11px 19px;
  border: 1px solid rgba(186, 230, 253, .3);
  border-radius: 999px;
  color: #e0f2fe !important;
  background: rgba(15, 23, 42, .58);
  font-weight: 720;
  text-decoration: none;
}

.commercial-secondary-cta:hover,
.commercial-secondary-cta:focus-visible {
  border-color: rgba(34, 211, 238, .7);
  background: rgba(8, 47, 73, .68);
}

.commercial-response-note {
  margin: 14px 0 0;
  color: #94a3b8;
  font-size: .84rem;
}

.commercial-media {
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--page-line);
  border-radius: 22px;
  background: #020617;
  box-shadow: var(--page-shadow);
}

.commercial-media-frame {
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

.commercial-media img,
.commercial-media video {
  display: block;
  width: 100%;
  height: auto;
  max-height: 520px;
  object-fit: cover;
}

.commercial-media img.commercial-stage-image {
  height: 100%;
  max-height: none;
  object-position: center;
}

.commercial-media figcaption {
  display: grid;
  gap: 4px;
  padding: 17px 19px 19px;
  border-top: 1px solid rgba(148, 163, 184, .12);
}

.commercial-media figcaption strong {
  font-family: Outfit, Inter, sans-serif;
  font-size: .98rem;
}

.commercial-media figcaption > span:last-child {
  color: var(--page-muted);
  font-size: .84rem;
  line-height: 1.45;
}

.commercial-media-badge,
.commercial-section-eyebrow {
  color: var(--page-cyan);
  font-size: .7rem;
  font-weight: 780;
  letter-spacing: .13em;
  text-transform: uppercase;
}

/* Son cuatro datos, no tres: con auto-fit caben los cuatro en pantalla ancha
   y se reparten solos al estrecharse, sin dejar uno huerfano en su fila. */
.commercial-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
  margin: 38px 0;
}

/* La retícula del hero reserva una columna para imagen. Las paginas de formato
   no llevan, asi que el texto ocupa el ancho completo en lugar de media pagina. */
.commercial-hero-text {
  grid-template-columns: minmax(0, 1fr);
}

.commercial-fact,
.commercial-detail-card {
  border: 1px solid var(--page-line);
  border-radius: 16px;
  background: var(--page-panel);
}

.commercial-fact { padding: 18px; }
.commercial-fact span { display: block; margin-bottom: 7px; color: var(--page-cyan); font-size: .74rem; text-transform: uppercase; letter-spacing: .08em; }
.commercial-fact strong { line-height: 1.45; }

.commercial-details {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.commercial-detail-card { padding: clamp(20px, 4vw, 30px); }
.commercial-detail-card h2 { margin: 0 0 10px; font: 700 1rem/1.3 Outfit, Inter, sans-serif; color: #cffafe; }
.commercial-detail-card p { margin: 0; color: var(--page-muted); line-height: 1.65; }

.commercial-learnings,
.commercial-proof {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: clamp(24px, 5vw, 64px);
  margin-top: 44px;
  padding: clamp(24px, 5vw, 42px);
  border: 1px solid rgba(148, 163, 184, .16);
  border-radius: 22px;
  background:
    linear-gradient(135deg, rgba(15, 23, 42, .92), rgba(8, 47, 73, .3)),
    var(--page-panel);
}

.commercial-section-copy h2,
.commercial-related > h2 {
  margin: 9px 0 12px;
  font-family: Outfit, Inter, sans-serif;
  font-size: clamp(1.45rem, 3.6vw, 2.35rem);
  line-height: 1.08;
  letter-spacing: -.025em;
}

.commercial-section-copy > p:last-child {
  margin: 0;
  color: var(--page-muted);
  line-height: 1.7;
}

.commercial-learning-list {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.commercial-learning-list li {
  position: relative;
  min-height: 54px;
  padding: 15px 16px 15px 48px;
  border: 1px solid rgba(34, 211, 238, .16);
  border-radius: 14px;
  color: var(--page-soft);
  background: rgba(2, 6, 23, .42);
  line-height: 1.55;
}

.commercial-learning-list li::before {
  position: absolute;
  top: 17px;
  left: 17px;
  display: grid;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  color: #04111d;
  background: var(--page-cyan);
  content: "✓";
  place-items: center;
  font-size: .76rem;
  font-weight: 900;
}

.commercial-proof {
  border-color: rgba(59, 130, 246, .24);
  background:
    radial-gradient(circle at 92% 12%, rgba(34, 211, 238, .12), transparent 18rem),
    rgba(8, 16, 31, .82);
}

.commercial-proof-facts {
  display: grid;
  gap: 12px;
  margin: 0;
}

.commercial-proof-facts div {
  padding: 17px 18px;
  border-left: 2px solid var(--page-cyan);
  border-radius: 0 12px 12px 0;
  background: rgba(15, 23, 42, .72);
}

.commercial-proof-facts dt {
  margin-bottom: 6px;
  color: #93c5fd;
  font-size: .72rem;
  font-weight: 760;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.commercial-proof-facts dd {
  margin: 0;
  color: var(--page-text);
  line-height: 1.5;
}

.commercial-related {
  margin-top: 54px;
}

.commercial-related > h2 {
  max-width: 700px;
}

.commercial-format-nav {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-top: 24px;
}

.commercial-format-link {
  position: relative;
  display: grid;
  align-content: start;
  min-height: 132px;
  padding: 18px;
  border: 1px solid rgba(148, 163, 184, .17);
  border-radius: 16px;
  color: var(--page-text) !important;
  background: rgba(10, 22, 40, .72);
  text-decoration: none;
  transition: transform .2s ease, border-color .2s ease, background .2s ease;
}

.commercial-format-link:hover,
.commercial-format-link:focus-visible {
  border-color: rgba(34, 211, 238, .55);
  background: rgba(8, 47, 73, .54);
  transform: translateY(-2px);
}

.commercial-format-link.is-current {
  border-color: rgba(34, 211, 238, .48);
  background: linear-gradient(145deg, rgba(8, 47, 73, .72), rgba(15, 23, 42, .9));
}

.commercial-format-number {
  margin-bottom: 14px;
  color: var(--page-cyan);
  font: 760 .72rem/1 Outfit, Inter, sans-serif;
  letter-spacing: .12em;
}

.commercial-format-link strong {
  font-family: Outfit, Inter, sans-serif;
  line-height: 1.35;
}

.commercial-format-current {
  margin-top: 12px;
  color: #93c5fd;
  font-size: .7rem;
  font-weight: 720;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.commercial-topics {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 28px;
}

.commercial-topics span {
  padding: 8px 11px;
  border: 1px solid rgba(59, 130, 246, .24);
  border-radius: 999px;
  color: #bfdbfe;
  background: rgba(37, 99, 235, .08);
  font-size: .82rem;
}

.commercial-cta-panel {
  margin-top: 54px;
  padding: clamp(24px, 5vw, 42px);
  border: 1px solid rgba(34, 211, 238, .3);
  border-radius: 22px;
  background: linear-gradient(135deg, rgba(8, 47, 73, .52), rgba(15, 23, 42, .86));
}

.commercial-cta-panel h2 { margin: 0 0 10px; font-family: Outfit, Inter, sans-serif; }
.commercial-cta-panel p { margin: 0 0 20px; color: var(--page-muted); }

.commercial-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 12px 20px;
  border-radius: 999px;
  color: #03111e !important;
  background: linear-gradient(100deg, var(--page-cyan), #5ee7ff);
  font-weight: 760;
  text-decoration: none;
}

.commercial-cta:hover,
.commercial-cta:focus-visible {
  background: linear-gradient(100deg, #5ee7ff, #a5f3fc);
}

/* PIE COMPARTIDO. Antes estas paginas tenian un pie propio de dos lineas
   (.commercial-page-footer) mientras la portada llevaba marca, redes, mapa de
   10 enlaces y creditos. Ahora usan el mismo marcado que la portada, generado
   por siteFooter() en build-i18n.js, y aqui se replican sus estilos.

   Esta hoja es independiente y no ve style.css ni enhancements.css, asi que los
   valores van literales. SI SE TOCA EL PIE DE LA PORTADA, hay que repetirlo
   aqui: las reglas originales estan en style.css (footer, .footer-container,
   .footer-top, .footer-socials, .social-icon, .footer-bottom,
   .footer-privacy-link) y en enhancements.css (.footer-links-map,
   .footer-links-grid). */
.commercial-page footer {
  border-top: 1px solid rgba(148, 163, 184, .14);
  background: #0a1220;
  padding: 60px 24px 30px;
}

.footer-container {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.footer-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
}

/* La marca del pie usa la MISMA receta que .logo de style.css: degradado sobre
   el nombre y la coletilla en la misma linea, separada por el gap del flex. Lo
   habia puesto blanco y con la coletilla debajo; al comparar las capturas de la
   portada y de la ficha se vio que no era eso. */
.commercial-page footer .logo {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: Outfit, Inter, sans-serif;
  font-weight: 800;
  font-size: 1.25rem;
  background: linear-gradient(135deg, #06b6d4 0%, #8b5cf6 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  /* Mismo motivo que en la cabecera: sin sitio vertical el degradado corta el
     rabo de la "g". */
  line-height: 1.2;
  padding: 2px 0;
}

.commercial-page footer .logo span {
  font-size: .84rem;
  font-weight: 400;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.footer-socials {
  display: flex;
  gap: 16px;
}

.commercial-page .social-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--page-bg);
  border: 1px solid rgba(148, 163, 184, .14);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--page-muted) !important;
  transition: background 260ms ease, color 260ms ease, transform 260ms ease, box-shadow 260ms ease;
}

.commercial-page .social-icon:hover,
.commercial-page .social-icon:focus-visible {
  background: linear-gradient(135deg, #06b6d4 0%, #8b5cf6 100%);
  color: #f8fafc !important;
  transform: translateY(-3px);
  box-shadow: 0 10px 30px rgba(6, 182, 212, .25);
}

.footer-links-map {
  margin: 24px 0;
  padding: 16px 0;
  border-top: 1px solid rgba(255, 255, 255, .05);
  border-bottom: 1px solid rgba(255, 255, 255, .05);
  width: 100%;
}

.footer-links-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(12px, 2.5vw, 24px);
  list-style: none;
  padding: 0;
  margin: 0;
}

.commercial-page .footer-links-grid a {
  color: var(--page-muted) !important;
  text-decoration: none;
  font-size: .84rem;
  font-weight: 400;
  transition: color .3s ease;
}

.commercial-page .footer-links-grid a:hover,
.commercial-page .footer-links-grid a:focus-visible {
  color: var(--page-cyan) !important;
  outline: none;
}

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, .05);
  padding-top: 30px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: .84rem;
  color: var(--page-muted);
  flex-wrap: wrap;
  gap: 16px;
}

.footer-bottom p { margin: 0; }

/* Lleva el selector de tipo porque `.commercial-page a` pesa mas que una clase
   sola y, sin el, el color no se aplicaria. El relleno vertical lleva el
   objetivo tactil a los 24 px minimos en movil. */
a.footer-privacy-link {
  color: var(--page-muted) !important;
  text-decoration: underline;
  text-underline-offset: 3px;
  padding: 3px 4px;
}

a.footer-privacy-link:hover,
a.footer-privacy-link:focus-visible {
  color: var(--page-cyan) !important;
}

/* Estas paginas no cargan style.css, donde vive el indicador de foco del sitio.
   Sin esto, quien navega con teclado depende del contorno por defecto del navegador. */
.commercial-page a:focus-visible,
.commercial-page :focus-visible {
  outline: 2px solid #f59e0b;
  outline-offset: 4px;
  border-radius: 4px;
}

/* Los otros dos tramos de sangria de la portada. Ver el comentario de
   .commercial-page-header. */
@media (max-width: 1150px) {
  .commercial-page-header { padding: 10px 16px; min-height: 67px; }
  /* El menu horizontal se retira en el mismo punto en que la portada cambia a
     hamburguesa: siete enlaces mas "Comparar formats" y los tres idiomas no
     caben sin romper la cabecera. Lo sustituye .page-menu. */
  .simple-nav { display: none; }
  /* MISMO TAMANO QUE EN LA PORTADA. Alli el logotipo escala con la ventana
     (#mainHeader .logo en enhancements.css) y aqui estaba fijo en 1.25rem: a
     375px se veia a 20px contra los 17,25px de la portada. La regla venia asi
     del commit inicial, no la cambio esta sesion, pero no coincidian. */
  .commercial-page-logo { font-size: clamp(1.05rem, 4.6vw, 1.22rem); }
}

/* El otro tramo en que la portada encoge el logotipo, para que sigan iguales. */
@media (min-width: 1151px) and (max-width: 1320px) {
  .commercial-page-logo { font-size: clamp(1rem, 1.5vw, 1.12rem); }
}

@media (max-width: 420px) {
  .commercial-page-header { padding: 10px 12px; }
}

@media (max-width: 760px) {
  .commercial-hero { grid-template-columns: 1fr; }
  .commercial-media { order: -1; }
  .commercial-facts { grid-template-columns: 1fr; }
  .commercial-details { grid-template-columns: 1fr; }
  .commercial-learnings,
  .commercial-proof { grid-template-columns: 1fr; }
  .commercial-format-nav { grid-template-columns: 1fr 1fr; }
  .commercial-page-languages { gap: 2px; }
  .commercial-page-languages a { padding: 6px; }
}

@media (max-width: 520px) {
  .commercial-page-header { gap: 10px; }
  .commercial-page-header-actions { gap: 6px; }
  .commercial-page-compare { display: none; }
  .commercial-page-main { width: min(100% - 28px, 1120px); padding-top: 34px; }
  .commercial-hero h1 { font-size: clamp(2.25rem, 12vw, 3.35rem); }
  .commercial-hero-actions { align-items: stretch; flex-direction: column; }
  .commercial-hero-actions a { width: 100%; }
  .commercial-format-nav { grid-template-columns: 1fr; }
  .commercial-format-link { min-height: 0; }
  .commercial-page-footer span[aria-hidden="true"] { display: none; }
  .commercial-page-footer > * { display: block; margin: 4px auto; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .commercial-format-link { transition: none; }
}