/* ══════════════════════════════════════════════════════════════
   Micrositio · Manual de Identidad Visual Quálitas 2026
   Reproducción del diseño MicrositioManualQuálitas-julio2026_links.pdf
   Lienzo original: 1920 px de ancho.
   ══════════════════════════════════════════════════════════════ */

/* @font-face { font-family:'Poppins'; src:url('../fonts/Poppins-Light.otf');     font-weight:300; }
@font-face { font-family:'Poppins'; src:url('../fonts/Poppins-Regular.otf');   font-weight:400; }
@font-face { font-family:'Poppins'; src:url('../fonts/Poppins-Medium.otf');    font-weight:500; }
@font-face { font-family:'Poppins'; src:url('../fonts/Poppins-SemiBold.otf');  font-weight:600; }
@font-face { font-family:'Poppins'; src:url('../fonts/Poppins-Bold.otf');      font-weight:700; } */
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;1,400&display=swap');

:root {
  --bg:        #F6F4FA;
  --morado:    #941B80;
  --title:     #881C80;
  --aqua:      #0096AE;
  --banner-a:  #0099B1;
  --banner-b:  #008395;
  --ink:       #1A1A1A;
  --plum:      #52294F;
  --violet:    #622FCC;
  --dot:       #EADCEC;
  --active-bg: #EAD9E8;
  --sep:       #DCBDDC;
  --teal-dark: #2F6C7F;
  --card-aqua: #539FB7;
  --card-mora: #983784;

  /* muestreados de hero-visual.png para recomponer el hero en anchos medios */
  --hero-teal:    #4DA0B3;
  --hero-teal-hi: #66B5C6;
  --ball-hi:      #EE6DE9;
  --ball-mid:     #8C248B;
  --ball-lo:      #86207E;

  /* ── Tipografía: escala centralizada ─────────────────────────
     Todos los tamaños de letra del sitio se definen aquí.        */
  --fs-micro:    8px;    /* chips de color, botón FAQ            */
  --fs-small:    11px;   /* texto secundario tarjeta de descarga */
  --fs-data:     12px;   /* valores CMYK/RGB de la píldora       */
  --fs-caption:  12.5px; /* captions de carruseles, ? del FAQ    */
  --fs-body:     14px;   /* texto corrido general                */
  --fs-ui:       16px;   /* header, números de sección, riel     */
  --fs-menu:     16px;   /* ítems del menú lateral               */
  --fs-lead:     16.5px; /* intro Tono, tarjetas Tono, píldora   */
  --fs-group:    18.5px; /* encabezados de grupo del menú        */
  --fs-h5:       20px;   /* etiquetas Cambia esto/Por esto, misc */
  --fs-h4:       22px;   /* subtítulo Tono, espécimen abcde      */
  --fs-h3:       23.5px; /* "Colores secundarios Quálitas"       */
  --fs-banner:   26px;   /* banners de sección                   */
  --fs-subtitle: 27px;   /* "Estilo de comunicación positivo"    */
  --fs-title:    35px;   /* títulos de tópico (h2)               */
  --fs-display:  44px;   /* "Poppins." y tope del título hero    */
  --fs-spec-big: clamp(49px, 5.8vw, 96px);   /* AaBbCc           */
  --fs-spec-num: clamp(44px, 5.1vw, 82px);   /* 123456789        */

  --header-h: 90px;
  --sb-left:  clamp(86px, calc(50vw - 863px), 97px);
  --sb-w:     392px;
  --rail-w:   110px;
  --content-w:1309px;
}

* { margin:0; padding:0; box-sizing:border-box; }

html { scroll-behavior:smooth; scrollbar-gutter:stable; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior:auto; } }

body {
  background:var(--bg);
  font-family:'Poppins', Arial, sans-serif;
  font-size:var(--fs-body);
  color:var(--ink);
}

img { max-width:100%; height:auto; }
a { text-decoration:none; color:inherit; }

.arrow { font-style:normal; color:var(--morado); font-weight:600; }

/* ── Header ─────────────────────────────────────────────────── */
.topbar {
  position:fixed; top:0; left:0; right:0; height:var(--header-h);
  z-index:75;
  display:flex; align-items:center;
  /* banner plano: morado uniforme, puntos claros a la izquierda y
     recorte aqua con círculo a la derecha (PDF julio 2026) */
  background-color:#931B80;
  background-image:url('assets/header-right.png?20260818'), url('assets/header-dots-left.png?20260818');
  background-repeat:no-repeat;
  background-position:right center, left center;
  background-size:auto 100%, auto 100%;
}
.topbar-logo { height:calc(var(--header-h) * .72); margin-left:clamp(24px, 9vw, 173px); }
.topbar-title {
  color:#fff; font-weight:300; font-size:var(--fs-banner);
  letter-spacing:.24em; white-space:nowrap;
  margin-left:auto; margin-right:clamp(140px, 17vw, 335px);
}

/* ── Botón hamburguesa ──────────────────────────────────────── */
.hamb {
  position:fixed; left:8px; top:calc(var(--header-h) + 20px); z-index:70;
  width:56px; height:56px; border:none; border-radius:14px;
  background:#871C80; cursor:pointer;
  display:flex; flex-direction:column; justify-content:center; align-items:center; gap:6px;
  box-shadow:0 8px 18px rgba(135,28,128,.28);
}
.hamb span { display:block; width:26px; height:3px; border-radius:2px; background:#fff; }

/* ── Shell: sidebar + contenido debajo del hero ─────────────── */
.shell {
  display:grid; grid-template-columns:var(--sb-w) minmax(0,1fr);
  column-gap:12px; align-items:start;
  padding:0 var(--rail-w) 0 var(--sb-left);
}

/* ── Sidebar ────────────────────────────────────────────────── */
.sidebar {
  position:sticky; top:calc(var(--header-h) + 16px);
  height:calc(100vh - var(--header-h) - 32px);
  width:var(--sb-w); z-index:60;
  display:flex; flex-direction:column;
  transition:transform .3s ease;
}

.menu-card {
  flex:1; min-height:0;
  background:#fff; border-radius:28px; border:1px solid #F0E6F4;
  box-shadow:0 18px 44px rgba(90,40,110,.10);
  display:flex;
}
.menu-scroll {
  flex:1; overflow-y:auto; padding:26px 0 22px;
  display:flex; flex-direction:column;
  scrollbar-width:thin; scrollbar-color:#DCC8E0 transparent;
}

.menu-card h3 {
  font-size:var(--fs-group); font-weight:600; color:var(--plum);
  text-transform:uppercase; letter-spacing:.02em;
  margin:22px 40px 6px 49px; padding-bottom:12px;
  border-bottom:1px solid #E9DBEA;
}
.menu-card h3:first-child { margin-top:0; }

.menu-card a {
  position:relative;
  display:grid; grid-template-columns:44px 48px 1fr; align-items:center;
  padding:11px 20px 11px 46px;
  font-size:var(--fs-menu); color:var(--plum); line-height:1.2;
}
.menu-card a img { width:40px; height:36px; object-fit:contain; }
.menu-card a:hover { background:#F7EFF7; }
.menu-card a.active { background:var(--active-bg); }
.menu-card a.active::before {
  content:''; position:absolute; left:0; top:5px; bottom:5px; width:13px;
  border-radius:0 8px 8px 0; background:#871C80;
}

/* ── Riel derecho ───────────────────────────────────────────── */
.rail {
  position:fixed; right:0; top:0; height:100vh; width:var(--rail-w); z-index:40;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
}
.rail-btn { background:none; border:none; cursor:pointer; padding:6px; }
.rail-num {
  font-size:var(--fs-ui); color:var(--plum); margin:22px 0 20px;
}
.rail-dots {
  display:flex; flex-direction:column; align-items:center;
  gap:clamp(18px, 3.4vh, 38px);
  margin-bottom:26px;
}
.rail-dots a {
  width:14px; height:14px; border-radius:50%;
  background:var(--dot); position:relative;
  transition:background .25s;
}
.rail-dots a.active { background:var(--plum); }
.rail-dots a.active::after {
  content:''; position:absolute; inset:-7px;
  border:2px solid var(--violet); border-radius:50%;
}

/* ── Contenido ──────────────────────────────────────────────── */
main {
  /* max-width:var(--content-w); */
  min-width:0;
  /* contenedor de referencia: el layout del contenido responde al ancho
     real de <main> (container queries), no al de la ventana */
  container-type:inline-size;
  container-name:contenido;
}

.band-white {
  background:#fff;
  border:1px solid #F1E7F3; border-top:none; border-bottom:none;
}
.banner.round-top { border-radius:26px 26px 0 0; }
.round-bottom { border-radius:0 0 26px 26px; border-bottom:1px solid #F1E7F3; margin-bottom:44px; }

.banner {
  height:76px; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(var(--banner-a), var(--banner-b));
  color:#fff; font-size:var(--fs-banner); font-weight:300;
  letter-spacing:.42em; text-indent:.42em; white-space:nowrap;
}

section[id] { scroll-margin-top:calc(var(--header-h) + 8px); }

/* separador punteado */
hr.dots {
  border:none; height:6px; margin:6px 74px;
  background-image:radial-gradient(circle 3px, var(--sep) 96%, transparent);
  background-size:21px 6px; background-repeat:repeat-x; background-position:left center;
}
.band-lav hr.dots, .band-white > hr.dots { margin:6px 74px; }

/* ── Hero (en flujo: scrollea; solo el header queda fijo) ───── */
.hero {
  margin:calc(var(--header-h) + 20px) var(--rail-w) 16px var(--sb-left);
}
.hero-card {
  position:relative; background:#fff; border-radius:30px 30px 0 0; overflow:hidden;
  border:1px solid #F1E7F3;
}
.hero-visual {
  position:absolute; top:0; right:0; bottom:0; left:auto;
  height:100%; width:auto; max-width:none;
  object-fit:cover; object-position:right center;
}
/* velo blanco bajo el texto: en anchos intermedios la imagen (anclada a la
   derecha) invade la zona del texto; el degradado garantiza legibilidad */
.hero-card::before {
  content:none; 
  position:absolute; top:0; bottom:0; left:0; z-index:1;
  width:min(700px, 100%);
  background:linear-gradient(95deg, #fff 55%, rgba(255,255,255,.94) 72%, rgba(255,255,255,0));
}
.hero-copy {
  position:relative; z-index:2; max-width:480px;
  padding:52px 0 58px 68px;
  color:var(--plum);
}
.hero-copy h1 {
  text-transform:uppercase; font-weight:600;
  font-size:clamp(30px, 3vw, 58px); line-height:1.17;
  letter-spacing:.01em;
}
.hero-copy p {
  margin-top:14px; max-width:560px;
  font-size:clamp(15px, 1.1vw, 21px); line-height:1.62;
}
.hero-btn {
  display:inline-flex; align-items:center;
  margin-top:18px; padding:19px 38px;
  background:#871C80; color:#fff; border-radius:16px;
  font-weight:300; font-size:clamp(17px, 1.25vw, 24px);
}
.hero-btn i { font-style:normal; }
/* composición alterna para anchos medios (ver @media 761–1456px) */
.hero-alt { display:none; }

/* ── Tópicos genéricos ──────────────────────────────────────── */
.topic { position:relative; padding:80px 88px 70px 90px; }
.t-num {
  position:absolute; left:28px; top:86px;
  font-size:var(--fs-ui); color:var(--plum);
}
.t-title {
  font-size:var(--fs-title); font-weight:600; color:var(--title); line-height:1.2;
}
.t-title::after {
  content:''; display:block; width:44px; height:6px; border-radius:3px;
  background:var(--morado); margin-top:16px;
}

/* 01 ¿Qué es la Imagen Corporativa? */
.quees-grid { display:grid; grid-template-columns:300px minmax(0,1fr); column-gap:36px; }
.quees-body { line-height:1.44; padding-top:2px; }
.quees-body p + p { margin-top:18px; }

/* dos columnas: contenido + texto lateral derecho */
.topic-2col { display:grid; grid-template-columns:minmax(0,1fr) 352px; column-gap:44px; }
.topic-2col .t-title { grid-column:1; }
.col-main { min-width:0; }
.col-side {
  text-align:right; line-height:1.44;
  display:flex; flex-direction:column; gap:24px;
  padding-top:12px;
}
.col-side.side-center { justify-content:center; padding-top:0; }
/* 04 Ícono: en dos columnas el texto se centraba respecto a título + Q,
   quedando por encima de la Q; este offset lo centra sobre la Q. */
#s04 .col-side.side-center { padding-top:84px; }

.logo-row { display:flex; align-items:flex-start; gap:56px; margin:58px 0 0 24px; }
.mt-40 { margin-top:40px; } .mt-24 { margin-top:24px; }
.icono-img { margin-left:250px; }

.q-row { display:flex; align-items:flex-start; gap:66px; margin:26px 0 0 6px; }
.qmotif { position:relative; width:120px; height:122px; margin-top:36px; }
.qmotif .big   { position:absolute; left:0; top:0; width:92px; height:92px; border-radius:50%; background:#9B277F; }
.qmotif .small { position:absolute; left:64px; top:66px; width:38px; height:38px; border-radius:50%; background:#418FAA; }
.qmotif.alt .big { width: 95px; height: 95px;}
.qmotif.alt .small { width:28px; height:28px; top:70px; }

/* texto ancho centrado (sección 06) */
.wide-text { margin:22px 240px 40px 155px; line-height:1.44; }
.prot-row { display:flex; align-items:flex-start; justify-content:space-between; gap:24px; margin:34px 24px 30px -16px; }
/* min-width:0 permite que las imágenes (ítems flex) encojan proporcionalmente
   y nunca se salgan del ancho de <main> */
.prot-row img { min-width:0; flex:0 1 auto; }
.minsize { display:block; margin:36px 0 24px -16px; }

/* ── Carruseles ─────────────────────────────────────────────────
   Paginación dinámica: el JS fija --per-page según el ancho real
   (mínimo por tarjeta en data-min-item); el nº de páginas varía y
   la altura es constante gracias a la fila fija de imagen. */
.carousel { overflow:hidden; }
.car-uso { margin:26px 60px 0 70px; --img-row:176px; }
.car-pro { margin:20px 130px 0 150px; --img-row:170px; }
.car-track { display:flex; transition:transform .45s ease; }
.car-track figure {
  flex:0 0 calc(100% / var(--per-page, 1)); min-width:0;
  text-align:center; padding:0 12px;
  /* fila fija para las imágenes: bases alineadas, textos a la misma altura */
  display:grid; grid-template-rows:var(--img-row) auto;
}
.car-track img { align-self:end; justify-self:center; }
.car-track figcaption {
  margin:16px auto 0; max-width:215px;
  font-size:var(--fs-caption); line-height:1.45; color:var(--ink);
}
.car-nav { display:flex; align-items:center; justify-content:center; gap:14px; margin-top:34px; }
.car-btn {
  width:36px; height:36px; border-radius:50%;
  border:2px solid #EBC0E2; background:#fff; cursor:pointer;
  color:var(--morado); font-size:19px; line-height:1;
  display:flex; align-items:center; justify-content:center; padding-bottom:3px;
}
.car-btn:hover { background:#FBF2FA; }
.car-count { font-size:var(--fs-body); color:var(--title); margin-left:4px; }

/* ── Columna intro izquierda (08–11) ────────────────────────── */
.col-grid { display:grid; grid-template-columns:212px minmax(0,1fr); column-gap:70px; margin-top:36px; }
.col-intro { line-height:1.44; margin-left:-14px; }
.col-intro p + p { margin-top:22px; }

/* ── 08 Colores ─────────────────────────────────────────────── */
.pill {
  display:grid; grid-template-columns:50.5% 49.5%;
  border-radius:96px; overflow:hidden; min-height:190px;
  color:#fff;
}
.half { display:flex; align-items:center; }
.half.morado { background:var(--morado); justify-content:flex-end; }
.half.morado .pill-info { margin-right:64px; }
.half.aqua { background:#408EA8; }
.half.aqua .pill-info { margin-left:58px; }
.pill-info h4 { font-size:var(--fs-lead); font-weight:600; letter-spacing:.02em; }
.pill-ref { font-size:var(--fs-data); font-weight:600; margin:2px 0 14px; line-height:1.5; }
.vals { display:flex; gap:30px; font-size:var(--fs-data); font-weight:600; line-height:1.55; }

.sec-heading { text-align:center; margin:44px 0 26px; font-size:var(--fs-h3); color:var(--teal-dark); }
.sec-heading b { font-weight:700; }

/* flex-wrap: en una sola fila cuando cabe (diseño original); si no, el
   grupo aqua baja de fila en lugar de desbordar <main> */
.chips { display:flex; flex-wrap:wrap; justify-content:center; align-items:flex-start; gap:26px 66px; }
.chip-group { display:grid; grid-template-columns:repeat(4, 91px); gap:13px; }
.chip {
  width:91px; height:84px; border-radius:10px;
  color:#fff; font-size:var(--fs-micro); line-height:1.5;
  display:grid; grid-template-columns:1fr 1fr; align-content:start;
  padding:9px 10px 4px 12px; position:relative;
}
.chip b { position:absolute; left:0; right:0; bottom:7px; text-align:center; font-size:var(--fs-micro); font-weight:600; }
.chip-white { background:#fff; border:1.5px solid #BFE0F0; color:#333; }

/* ── 09 Tipografía ──────────────────────────────────────────── */
.poppins-word { font-size:var(--fs-display); font-weight:600; color:#A20084; line-height:1.3; margin:6px 0 10px; }
.poppins-word .aq, .aq { color:#0099B1; }
.mo { color:#87287C; }

.tipo-grid { grid-template-columns:430px minmax(0,1fr); }
.specimen { text-align:center; padding:0 10px; }
.aabb { font-size:var(--fs-spec-big); font-weight:600; color:#83267A; line-height:1.05; }
.ruler { position:relative; height:16px; margin:14px 8px; border-top:3px solid #3F8CA7; }
.ruler i { position:absolute; top:-9px; width:3px; height:16px; background:#3F8CA7; }
.ruler i:first-child { left:0; }
.ruler i.mid  { left:calc(50% - 5px); }
.ruler i.mid2 { left:calc(50% + 3px); }
.ruler i:last-child { right:0; }
.nums { font-size:var(--fs-spec-num); font-weight:600; color:#83267A; line-height:1.1; letter-spacing:.02em; }
.spec-weights { margin-top:14px; font-size:var(--fs-h5); color:#000; }
.spec-weights .w-light  { font-weight:300; }
.spec-weights .w-xlight { font-weight:200; }
.spec-weights .w-reg    { font-weight:400; }
.spec-weights .w-med    { font-weight:500; }
.spec-weights .w-bold   { font-weight:700; }
.spec-weights .w-italic { font-style:italic; }
.spec-weights .w-bolditalic { font-weight:700; font-style:italic; }

/* bloque Arial (debajo del de Poppins, mismo layout) */
.tipo-arial { margin-top:96px; }
.arial-word { font-family:Arial, Helvetica, sans-serif; font-size:var(--fs-display); color:#000; line-height:1.3; margin:6px 0 10px; }
.specimen-arial, .specimen-arial .spec-weights { font-family:Arial, Helvetica, sans-serif; }
.specimen-arial .aabb, .specimen-arial .nums { color:#000; font-weight:400; }
.specimen-arial .nums { font-weight:700; }
.specimen-arial .ruler { border-top-color:#1A1A1A; }
.specimen-arial .ruler i { background:#1A1A1A; }

/* ── 10 Íconos e Ilustración ────────────────────────────────── */
.iconos-grid { grid-template-columns:236px minmax(0,1fr); column-gap:104px; }
.topic-left > hr.dots { margin:44px -14px; }
.collage-row { display:flex; align-items:flex-start; gap:10px; margin:10px 0 0 -70px; }
.collage-row img { min-width:0; }

/* ── 11 Tono ────────────────────────────────────────────────── */
.tono-grid-outer { grid-template-columns:212px minmax(0,1fr); column-gap:62px; }
.tono-intro { font-size:var(--fs-lead); line-height:1.36; }
.tono-intro p + p { margin-top:20px; }
.tone-words { line-height:1.42; }
.tone-words b { font-weight:700; }

/* Las dos columnas (Cambia esto… / ¡Por esto!) nunca se apilan: la relación
   entre cada par de tarjetas es lo que comunica la sección. En anchos
   angostos encogen fuente, padding y puntos en lugar de romper el layout. */
.tono-block {
  padding-right:10px;
  --tcard-fs:     var(--fs-lead);
  --tcard-pad:    28px 34px;
  --tcard-minh:   140px;
  --tcard-gap:    10px;
  --tcard-radius: 24px;
  --tlabel-fs:    var(--fs-h5);
  --tdot-size:    42px;
}
.tono-head { text-align:center; font-size:var(--fs-subtitle); font-weight:600; color:#87287C; }
.tono-head .aq { color:#4294AC; }
.tono-sub { text-align:center; font-size:var(--fs-h4); color:var(--teal-dark); margin:26px 0 22px; }
.tono-sub b { font-weight:700; }
/* minmax(0,1fr): las dos columnas miden siempre lo mismo y el texto largo
   no las ensancha ni desborda el contenedor */
.tono-labels {
  display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:var(--tcard-gap);
  text-align:center; font-size:var(--tlabel-fs); color:#5D2B66; margin-bottom:12px;
}
.tono-cards {
  position:relative; display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr)); gap:var(--tcard-gap);
}
.tcard {
  border-radius:var(--tcard-radius); padding:var(--tcard-pad); min-height:var(--tcard-minh);
  display:flex; align-items:center; justify-content:center; text-align:center;
  font-size:var(--tcard-fs); line-height:1.4;
  overflow-wrap:break-word;
}
.tcard p { max-width:26ch; }
.tcard b { font-weight:700; }
.tcard.left { background:#fff; border:1.5px solid #D8C2DA; }
.tcard.tx-aqua { color:#3B6875; }
.tcard.tx-morado { color:#87287C; }
.tcard.fill-aqua { background:var(--card-aqua); color:#fff; }
.tcard.fill-morado { background:var(--card-mora); color:#fff; }
.tdot {
  position:absolute; z-index:2; border-radius:50%;
  width:var(--tdot-size); height:var(--tdot-size);
  left:calc(50% - var(--tdot-size) * .62);
}
.tdot.d1 { top:calc(25% - var(--tdot-size) / 2); background:var(--morado); }
.tdot.d2 { top:calc(75% - var(--tdot-size) / 2); background:var(--card-aqua); }

.topic-presentaciones { padding-top:30px; }
.topic-presentaciones .t-num { top:36px; }
.placeholder-text { margin-top:28px; font-size:var(--fs-body); color:#8a7a8f; }

/* ── Botón flotante: volver al inicio ───────────────────────── */
.faq {
  position:fixed; left:14px; bottom:22px; z-index:70;
  display:flex; align-items:center; justify-content:center;
  width:44px; height:44px;
  border:1.6px solid var(--title); border-radius:50%;
}
.faq img { width:24px; height:22px; object-fit:contain; margin-top: -2px; }

/* ══════════ Responsive ══════════
   Shell (sidebar, riel, header, FAQ) → @media por ancho de ventana.
   Contenido → @container por ancho real de <main>.                   */

/* menú colapsado en escritorio (hamburguesa) */
body.sb-hidden .shell { grid-template-columns:0 minmax(0,1fr); }
body.sb-hidden .sidebar { transform:translateX(calc(-100% - 200px)); }

@media (max-width:1560px) {
  :root { --sb-w:280px; --rail-w:88px; --fs-menu:14px; --fs-group:16px; }
  .menu-card h3 { margin-left:38px; }
  .menu-card a { padding-left:36px; grid-template-columns:40px 42px 1fr; }
  .menu-card a img { width:34px; height:31px; }
  .topbar-title { letter-spacing:.16em; margin-right:clamp(80px, 12vw, 240px); }
}

@media (max-width:1120px) {
  :root { --header-h:76px; }
  .shell { grid-template-columns:minmax(0,1fr); padding-left:24px; }
  .sidebar {
    position:fixed; left:12px; top:calc(var(--header-h) + 10px); bottom:12px;
    height:auto; z-index:80;
    transform:translateX(calc(-100% - 100px));
  }
  body.sb-open .sidebar { transform:none; box-shadow:0 0 0 200vmax rgba(40,10,45,.28); }
  .hamb { top:calc(var(--header-h) + 12px); }
  .topbar-title { font-size:15px; letter-spacing:.12em; margin-right:clamp(24px, 8vw, 120px); }
  .hero { margin:calc(var(--header-h) + 14px) var(--rail-w) 12px 24px; }
  .hero-copy { padding:44px 0 48px 40px; }
  .faq { left:10px; bottom:14px; }
}

/* De 1457px en adelante el título conserva sus dos líneas (las del <br>).
   Con .hero-copy limitado a 480px, "IDENTIDAD VISUAL" deja de caber en una
   línea alrededor de los 45px de fuente y el h1 se parte en tres: la tarjeta
   pega un salto de ~53px de alto y la imagen del hero crece con ella. */
@media (min-width:1457px) {
  .hero-copy h1 { white-space:nowrap; }
}

/* ── Hero en anchos medios ───────────────────────────────────────
   Aquí la imagen ancha no cabe junto al texto y quedaba recortada bajo
   un velo blanco (rechazado por el cliente). Se sustituye por una
   composición angosta: círculo turquesa + bola morada + la mujer sola. */
@media (min-width:761px) and (max-width:1456px) {
  .hero-visual,
  .hero-card::before { display:none; }

  .hero-copy { max-width:none; padding-right:clamp(370px, 53%, 470px); }

  /* el bloque visual se dimensiona por la ALTURA de la tarjeta (aspect-ratio
     con width:auto), así la mujer y el círculo guardan siempre la misma
     proporción aunque el texto haga crecer o encoger el hero */
  .hero-alt {
    display:block;
    position:absolute; top:0; right:0; bottom:0; left:auto;
    width:auto; aspect-ratio:1.04; max-width:52%;
  }
  /* círculo turquesa: diámetro ≈2.4× la altura de la tarjeta, de modo que
     solo se ve un arco suave como en el diseño original a 1920 */
  .hero-alt::before {
    content:''; position:absolute; left:0; top:50%;
    height:240%; aspect-ratio:1; transform:translateY(-50%);
    border-radius:50%;
    background:radial-gradient(circle at 60% 50%,
               var(--hero-teal-hi) 0%, var(--hero-teal) 72%);
  }
  /* bola-viñeta: montada sobre el borde del arco, como en el original;
     la mujer se pinta encima (orden del DOM) */
  .hero-ball {
    position:absolute; left:-10%; bottom:34%;
    height:32%; aspect-ratio:1; border-radius:50%;
    background:radial-gradient(circle at 52% 16%,
               var(--ball-hi) 0%, #C247BE 12%, #9C319A 30%,
               var(--ball-mid) 58%, var(--ball-lo) 100%);
    box-shadow:0 16px 34px rgba(82,41,79,.32);
  }
  .hero-woman {
    position:absolute; right:-3%; top:10%; height:112%; width:auto; max-width:none;
  }
}

/* tramo bajo del rango: la tarjeta es más angosta y el botón llega más a la
   derecha, así que se recoge la bola y se corre la mujer para dejarle sitio */
@media (min-width:761px) and (max-width:940px) {
  .hero-ball  { left:-3%; height:30%; }
  .hero-woman { right:-9%; }
}

@media (max-width:860px) {
  :root { --rail-w:46px; }
  .rail-num { font-size:calc(var(--fs-ui) - 4px); }
  .rail-dots a { width:11px; height:11px; }
}

/* hero móvil: solo texto, sin imagen derecha */
@media (max-width:760px) {
  .hero-visual { display:none; }
  .hero-card { border-radius:30px; }
  .hero-copy { max-width:none; padding:36px 30px 40px 32px; }
  .hero-copy p { max-width:none; }
}

@media (max-width:640px) {
  .topbar-title { display:none; }
}

/* ── Contenido: <main> ≤ 1100px ─────────────────────────────── */
@container contenido (max-width:1100px) {
  .topic { padding:64px 56px 56px 70px; }
  .t-num { left:20px; top:70px; }
  .wide-text { margin:22px 80px 36px 90px; }
  .col-grid, .tipo-grid, .iconos-grid, .tono-grid-outer { grid-template-columns:200px minmax(0,1fr); column-gap:44px; }
  .car-pro { margin:20px 60px 0 70px; }
  .car-uso { margin:26px 20px 0 30px; }
  .collage-row { margin-left:-40px; }
  .chips { gap:34px; }
}

/* ── Contenido: <main> ≤ 840px ──────────────────────────────── */
@container contenido (max-width:840px) {
  .topic-2col { grid-template-columns:minmax(0,1fr) 300px; }
  .logo-row { gap:36px; margin-left:6px; }
  .logo-row img[width="395"] { width:330px; }
  .chip-group { grid-template-columns:repeat(4, 84px); gap:10px; }
  .chip { width:84px; }
  .pill { grid-template-columns:1fr 1fr; }
  .half.morado .pill-info { margin-right:34px; }
  .half.aqua .pill-info { margin-left:34px; }
}

/* ── Contenido: <main> ≤ 700px (apilado) ────────────────────── */
@container contenido (max-width:700px) {
  .topic { padding:56px 28px 48px 44px; }
  .t-num { left:12px; top:60px; }
  .t-title { font-size:26px; }
  .banner { font-size:17.5px; letter-spacing:.3em; }
  .topic-2col { grid-template-columns:1fr; row-gap:30px; }
  .quees-grid { grid-template-columns:1fr; row-gap:26px; }
  .col-side { text-align:left; }
  #s04 .col-side.side-center { padding-top:0; }
  .col-grid, .tipo-grid, .iconos-grid, .tono-grid-outer { grid-template-columns:1fr; row-gap:28px; }
  .logo-row { flex-wrap:wrap; }
  .q-row { flex-wrap:wrap; gap:36px; }
  .prot-row { flex-wrap:wrap; justify-content:center; margin-left:0; }
  .wide-text { margin:20px 8px 30px; }
  .minsize { margin-left:0; }
  .car-uso { margin:20px 0 0; }
  .car-pro { margin:16px 20px 0; }
  .collage-row { flex-wrap:wrap; margin-left:0; }
  .tono-head { font-size:20px; }
  .tono-sub { font-size:17px; margin:18px 0 16px; }
  .tono-block {
    padding-right:0;
    --tcard-fs:13px; --tcard-pad:16px 14px; --tcard-minh:104px;
    --tcard-gap:8px; --tcard-radius:16px; --tlabel-fs:15px; --tdot-size:30px;
  }
  .icono-img { margin-left:24px; }
  .half.morado .pill-info { margin-right:24px; }
  .half.aqua .pill-info { margin-left:24px; }
  .vals { gap:16px; }
}

/* ── Contenido: <main> ≤ 480px (muy angosto) ────────────────── */
@container contenido (max-width:480px) {
  .chips { gap:18px 20px; }
  .chip-group, .chip-group.grid2 { grid-template-columns:repeat(2, 84px); justify-content:center; }
  /* anula el grid-column inline de los chips blanco/negro */
  .chip-group .chip { grid-column:auto !important; }
  .tono-head { font-size:17px; }
  .tono-sub { font-size:15px; margin:14px 0 12px; }
  .tono-block {
    --tcard-fs:11px; --tcard-pad:11px 9px; --tcard-minh:84px;
    --tcard-gap:6px; --tcard-radius:12px; --tlabel-fs:12.5px; --tdot-size:22px;
  }
}

/* ── Contenido: <main> ≤ 400px (píldora apilada) ────────────── */
@container contenido (max-width:400px) {
  .pill { grid-template-columns:1fr; border-radius:44px; }
  /* apiladas: ambas mitades centran su contenido (anula el flex-end de morado) */
  .half, .half.morado, .half.aqua { justify-content:center; padding:22px 0; }
  .half.morado .pill-info, .half.aqua .pill-info { margin:0; }
  .tono-block {
    --tcard-fs:10px; --tcard-pad:9px 6px; --tcard-minh:72px;
    --tcard-radius:10px; --tlabel-fs:11px; --tdot-size:18px;
  }
}

/* Ventana 900–1380px + menú colapsado con la hamburguesa: en los tópicos
   de IDENTIDAD VISUAL (únicos que usan .topic-2col) el aside baja para no
   traslaparse con los logos de .col-main */
@media (min-width:900px) and (max-width:1380px) {
  body.sb-hidden .topic-2col { grid-template-columns:1fr; row-gap:30px; }
  body.sb-hidden .topic-2col .col-side { text-align:left; padding-top:0; }
  body.sb-hidden #s04 .col-side.side-center { padding-top:0; }

  body .topic-2col.alt { grid-template-columns:1fr; row-gap:30px; }
  body .topic-2col.alt .col-side { text-align:left; padding-top:0; }
}