/*
  Centro de Ayuda SM — capa de marca SOBRE Bootstrap 5.3

  El HTML usa las clases nativas de Bootstrap (container, row, col, btn, card,
  list-group…). Este archivo NO reimplementa el layout: solo personaliza, y lo
  hace por las variables --bs-* de Bootstrap en vez de pelear con !important.
  Así la maqueta se entrega como Bootstrap estándar y se puede seguir usando
  tal cual, sin traducir nada.

  Los valores vienen de dos sitios distintos, y conviene no mezclarlos:

  1) ESPACIADO y DIMENSIONES de controles → medidos en grupo-sm.com, para que
     el salto desde su footer no se note:
       ancho de contenido 1120px  (su .e-con-inner: max-width: min(100%,1120px))
       gutter lateral     10px @375 → 20px @1440+
       padding de sección 20px @375 → 40px @1440+
       header             32px fijo arriba y abajo (NO escala)
       logo               51px de alto · botón 42px · chip 36px

  2) TIPOGRAFÍA (tamaños y pesos) → del Figma del Centro de Ayuda
     (nodo 726:952): Caladea en titulares, Inter en el resto.

  SIN MODO OSCURO (retirado el 2026-09-02). Lo tuvo, pero las manchas de fondo
  son PNG de azul muy claro y no se adaptaban: sobre fondo oscuro el título de
  cada página quedaba a 1,04:1 de contraste, ilegible. SM no ha pedido tema
  oscuro, así que se quita en vez de mantenerlo. Si algún día se recupera, los
  blobs tienen que resolverse antes (SVG con currentColor, o atenuados).
*/

/* ==========================================================================
   1. Tokens de marca
   ========================================================================== */

:root{
  --gutter: clamp(10px, 6.7px + 0.93vw, 20px);
  --section-y: clamp(20px, 13px + 1.9vw, 40px);
  --h1-size: clamp(32px, 36px + 0.85vw, 48px);
  --h2-size: clamp(24px, 19px + 1.4vw, 36px);
  --content-max: 1120px;
  --lista-max: 760px;   /* listas de una columna: "Lo mas consultado" y su nota */

  --sm-blue: #0077A3;
  --sm-blue-dark: #005E82;
  --sm-red: #E0130C;
  --ink: #2F2F2F;
  --ink-soft: #5B6572;
  --paper: #FFFFFF;
  --surface: #FFFFFF;
  --line: #E3E7EA;
  --tint: #DEF0F7;
  --tint-2: #EFF6F4;
  --footer-bg: #D8E0E9;
  --focus: #0077A3;
  /* estado hover de los botones secundarios en grupo-sm.com (--secondary
     y el gris de fondo de .sm-boton-secundario:hover) */
  --sm-grey: #6F7580;
  --hover-grey: #F5F5F5;
  /* --secondary-dark de grupo-sm.com. Es el gris que usan ELLOS sobre el azul
     claro del pie: --ink-soft (#5B6572) no sale de su paleta y encima se
     quedaba en 4,44 de contraste sobre --footer-bg. Con este, 5,34. */
  --sm-grey-dark: #4E5968;

  /* Bootstrap toma estos como suyos: así sus componentes ya salen de marca */
  --bs-primary: #0077A3;
  --bs-body-color: #2F2F2F;
  --bs-body-bg: #FFFFFF;
  --bs-body-font-family: 'Inter', -apple-system, "Segoe UI", sans-serif;
  --bs-body-font-size: 16px;
  --bs-body-line-height: 1.5;
  --bs-border-color: #E3E7EA;
  --bs-link-color: #0077A3;
  --bs-link-hover-color: #005E82;
}


/* ==========================================================================
   2. Base
   ========================================================================== */

html{ color-scheme: light; }   /* sin tema oscuro: que los controles nativos
                                  (inputs, barras de scroll) no se pinten en
                                  oscuro aunque el sistema lo esté */
/* Columna a pantalla completa para que el pie quede abajo del todo cuando la
   pagina es corta (la 404 y una busqueda sin resultados). Sin esto el footer
   se quedaba a media pantalla con un vacio blanco debajo. */
body{
  background: var(--paper);
  color: var(--ink);
  font-family: 'Inter', -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  display: flex; flex-direction: column;
}
body > main{ flex: 1 0 auto; }
h1, h2, h3{
  font-family:'Caladea', Georgia, 'Times New Roman', serif;
  text-wrap: balance;
  color: var(--ink);
  margin: 0;
}
:focus-visible{ outline:2px solid var(--focus); outline-offset:2px; }

/* Saltar al contenido. Oculto hasta que recibe el foco: con el menu lateral de
   cinco categorias y sus subcategorias, quien navega con teclado tenia que
   pasar por todo antes de llegar al texto. No se usa display:none ni
   visibility:hidden, que lo sacarian del recorrido del tabulador. */
.saltar-al-contenido{
  position:absolute; left:50%; top:0; transform: translate(-50%, -120%);
  z-index:100;
  background: var(--sm-blue); color:#fff;
  padding:12px 20px; border-radius:0 0 8px 8px;
  font-size:13px; font-weight:600; text-decoration:none;
  transition: transform .15s ease;
}
.saltar-al-contenido:focus{ transform: translate(-50%, 0); color:#fff; }
/* El <main> recibe el foco al saltar, pero sin dibujarle un recuadro alrededor
   de media pagina: el usuario ya sabe que ha saltado porque la vista se mueve. */
main:focus{ outline:none; }

/* El .container de Bootstrap da 1140px en xl y 1320 en xxl; grupo-sm.com usa
   1120. Sumamos el gutter al max-width (en vez de restarlo) para que el
   contenido util sea exactamente 1120 y el padding solo entre al estrechar. */
.container,
.container-sm, .container-md, .container-lg, .container-xl, .container-xxl{
  max-width: calc(var(--content-max) + var(--gutter) * 2);
  padding-inline: var(--gutter);
}

/* ==========================================================================
   3. Controles (personalizacion de .btn via variables de Bootstrap)
   ========================================================================== */

/* line-height fijo de 16px: con el interlineado normal de 13px el boton medía
   46px en vez de los 42px de grupo-sm.com */
.btn{
  --bs-btn-padding-x: 24px;
  --bs-btn-padding-y: 12px;
  --bs-btn-font-size: 13px;
  --bs-btn-font-weight: 400;
  --bs-btn-line-height: 16px;
  --bs-btn-border-radius: 8px;
}
/* El hover NO oscurece el azul: lo INVIERTE a fondo blanco con texto y borde
   azules. Medido en grupo-sm.com:
     .sm-boton-azul div a:hover { background-color: var(--white-pure);
                                  color: var(--accent); }
   con --white-pure #FFFFFF y --accent #0077A3. El borde de 1px azul del estado
   normal se mantiene, y es lo que da el aspecto de boton "outline" al pasar. */
.btn-primary{
  --bs-btn-bg: var(--sm-blue);
  --bs-btn-border-color: var(--sm-blue);
  --bs-btn-color: #fff;
  --bs-btn-hover-bg: var(--surface);
  --bs-btn-hover-border-color: var(--sm-blue);
  --bs-btn-hover-color: var(--sm-blue);
  --bs-btn-active-bg: var(--surface);
  --bs-btn-active-border-color: var(--sm-blue);
  --bs-btn-active-color: var(--sm-blue);
  /* Estado deshabilitado (p. ej. "Enviando..." del formulario de contacto): sin estas
     variables Bootstrap usa su azul por defecto (#0d6efd) en vez del azul corporativo. */
  --bs-btn-disabled-bg: var(--sm-blue);
  --bs-btn-disabled-border-color: var(--sm-blue);
  --bs-btn-disabled-color: #fff;
}
/* chips "CTA" del Figma: borde azul permanente, 36px de alto.
   Su hover en grupo-sm.com no es azul sino GRIS, y es otra regla distinta:
     .sm-boton-secundario div a:hover { border: 1px solid var(--secondary);
       background-color: #F5F5F5; color: var(--secondary); }
   con --secondary #6F7580. */
.btn-outline-primary{
  --bs-btn-color: var(--sm-blue);
  --bs-btn-border-color: var(--sm-blue);
  --bs-btn-bg: var(--surface);
  --bs-btn-hover-bg: var(--hover-grey);
  --bs-btn-hover-color: var(--sm-grey);
  --bs-btn-hover-border-color: var(--sm-grey);
  --bs-btn-active-bg: var(--hover-grey);
  --bs-btn-active-color: var(--sm-grey);
  --bs-btn-active-border-color: var(--sm-grey);
}
/* El padding reducido es de los CHIPS, no de todo boton outline. Cuando estaba
   en .btn-outline-primary, un outline junto a un primary medía 38px frente a
   42px; el flex los estiraba a la misma altura y el texto del outline quedaba
   descolgado hacia arriba. Los botones outline normales usan el padding de
   .btn y quedan a la misma altura que los primary. */
.quick-links .btn,
.filter-chips .btn{
  --bs-btn-padding-x: 20px;
  --bs-btn-padding-y: 10px;
}

/* ==========================================================================
   4. Header
   ========================================================================== */

header.site{
  background: var(--surface);
  z-index: 40;
  /* sin linea inferior: ni Figma ni grupo-sm.com la tienen */
}
/* 32px fijo (no fluido) medido en .e-con-inner de grupo-sm.com: esta franja,
   a diferencia del resto de la web, NO escala con el viewport */
.header-row{ padding-block: 32px; gap: 24px; }
.brand img{ height: clamp(36px, 20px + 2.2vw, 51px); width:auto; }
.header-actions{ gap: 24px; }
.header-divider{ width:1px; height:32px; background: var(--line); flex:none; }
/* icon-user.svg ya viene a 44x44 con su espacio interno compuesto:
   se renderiza a tamaño nativo, sin padding de boton ni reescalado */
.icon-btn{ background:transparent; }
.icon-btn img{ width:44px; height:44px; }
.icon-btn:hover img{ opacity:.7; }
.selector-idioma .icon-btn{
  display:flex; align-items:center; justify-content:center;
  width:44px; height:44px; border-radius:50%;
  border:1px solid var(--line); color: var(--ink);
  transition: background-color .15s ease, border-color .15s ease;
}
.selector-idioma .icon-btn:hover{ background: var(--hover-grey); }
.selector-idioma .icon-btn[aria-expanded="true"]{ border-color: var(--sm-blue); }
.selector-idioma-actual{ font-weight:600; font-size:0.9rem; letter-spacing:0.02em; }
/* Menu del selector: mismo radio/sombra que el resto de superficies flotantes
   del sitio (paginacion y tarjetas), no el borde/sombra por defecto de Bootstrap */
.selector-idioma .dropdown-menu{
  margin-top:8px; padding:6px;
  border:1px solid var(--line); border-radius:8px;
  box-shadow: 0 2px 6px rgba(0,0,0,.15);
}
.selector-idioma .dropdown-item{
  border-radius:6px; padding:8px 12px;
  font-family:'Inter', sans-serif; font-size:0.9rem; color: var(--ink);
}
.selector-idioma .dropdown-item:hover,
.selector-idioma .dropdown-item:focus{ background: var(--hover-grey); color: var(--ink); }
.selector-idioma .dropdown-item.active{
  background: var(--tint); color: var(--sm-blue-dark); font-weight:600;
}

/* ==========================================================================
   5. Hero
   ========================================================================== */

/* La mancha va como background-image y con CONTAIN, no cover: en Figma es una
   forma organica con aire alrededor (~72% del ancho), no un fondo que cubre.
   Para que contain de ese 72%, el hero necesita los ~596px de alto del frame
   Search de Figma — de ahi los multiplicadores de padding, mayores que en el
   resto de secciones. */
.hero{
  position:relative; overflow:hidden;
  padding-block: calc(var(--section-y) * 3.1) calc(var(--section-y) * 2.7);
  background-image: url('../Img/Vector-hero.png');
  background-repeat: no-repeat; background-position: center; background-size: contain;
}
.hero-inner{ position:relative; z-index:1; }
.hero-eyebrow{
  gap:8px; font-size: clamp(14px, 12px + .6vw, 20px); font-weight:600;
  letter-spacing:.05em; text-transform:uppercase; color: var(--sm-red);
  margin-bottom:18px;
}
.hero-eyebrow svg{ width:16px; height:16px; }
h1.hero-title{ font-size: var(--h1-size); font-weight:700; line-height:1.1; margin-bottom:16px; }
h1.hero-title .accent{ color: var(--sm-blue); }
.hero-sub{
  color: var(--ink-soft); font-size: clamp(16px, 14px + .6vw, 20px);
  font-weight:400; line-height:1.45; max-width:46ch;
  margin:0 auto calc(var(--section-y) * 0.85);
}

/* Buscador, resultados de búsqueda y estado vacío: viven en packages/sm-centro-ayuda-ui/src/styles/centroAyuda.css (compartidos con SM.B2B.Web). */

.quick-label{
  font-size:.78rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  color: var(--ink-soft); margin-top:28px; margin-bottom:12px;
}
.quick-links{ gap:10px; }

/* Acceso rapido sin articulo detras. El trazo discontinuo es la convencion de
   "esto es una propuesta, todavia no existe": se distingue de sus vecinos sin
   inventarle un color nuevo ni sacarlo de la fila. */
.quick-links .aspiracional{ border-style: dashed; }
/* Doble clase: .nota-ejemplo se declara mas abajo con margin:0 y ganaria. */
.nota-ejemplo.nota-aspiracional{
  align-items:flex-start; justify-content:center; text-align:left;
  max-width:62ch; margin:12px auto 0;
}
.nota-ejemplo.nota-aspiracional svg{ margin-top:2px; }

/* ==========================================================================
   6. Secciones
   ========================================================================== */

section{ padding-block: var(--section-y); position:relative; }
.section-head{ max-width:56ch; margin:0 auto calc(var(--section-y) * 0.9); position:relative; z-index:1; }
.section-head h2{ font-size: var(--h2-size); font-weight:700; margin-bottom:10px; }
.section-head p{ color: var(--ink-soft); font-size: clamp(16px, 14px + .6vw, 20px); margin:0; }

/* tarjetas de categoria: .card de Bootstrap sin borde y con sombra
   permanente, como en Figma (radio 12, shadow 0 2px 6px) */
.cat-card{
  --bs-card-border-width: 0;
  --bs-card-border-radius: 12px;
  --bs-card-bg: var(--surface);
  --bs-card-spacer-x: 10px;
  --bs-card-spacer-y: 20px;
  box-shadow: 0 2px 6px rgba(0,0,0,.15);
  text-decoration:none; color:inherit;
  transition: transform .15s ease, box-shadow .15s ease;
}
.cat-card:hover{ transform: translateY(-3px); box-shadow: 0 6px 16px rgba(0,0,0,.18); }
.cat-card .card-body{ display:flex; flex-direction:column; gap:10px; }
.cat-card img.cat-icon{ width:44px; height:44px; flex:none; }
.cat-card .card-title{ font-family:'Inter',sans-serif; font-size:16px; font-weight:600; margin:0; }
.cat-card .card-text{ margin:0; font-size:13px; color: var(--ink-soft); line-height:1.5; }
/* card-footer sin fondo ni borde: solo sirve para anclar el contador abajo */
.cat-card .card-footer{
  background:transparent; border:0;
  padding: 0 var(--bs-card-spacer-x) var(--bs-card-spacer-y);
  display:inline-flex; align-items:center; gap:4px;
  font-size:13px; color: var(--sm-blue); font-weight:700;
}
.cat-card .card-footer svg{ width:16px; height:16px; transition: transform .15s ease; }
.cat-card:hover .card-footer svg{ transform: translateX(3px); }

/* lo mas consultado: la mancha anclada ARRIBA, que es donde esta su curva.
   El anclaje es lo que importa aqui: con "center center" se veia solo su
   zona maciza y quedaba un rectangulo de color liso, sin forma.

   El tamano es cover, y resuelve los dos casos con una sola regla porque
   el lado que limita cambia con la proporcion del contenedor:
     desktop (1440x483, mas ancho que la imagen) -> escala por ANCHO; se ven
       los primeros 483px de la imagen, con su curva superior.
     movil (375x~700, mas alto)                  -> escala por ALTO; llena la
       seccion entera y se recorta a los lados.
   Con "100% auto" el alto de la mancha en movil salia a 266px (375/1.409)
   para una seccion del doble: se acababa la imagen, aparecia su borde
   inferior irregular — su base solo cubre de x=70 a x=1010 de 1440 — y
   debajo quedaba una franja blanca hasta el footer. */
.section-decorated{
  overflow:hidden; background-color: var(--paper);
  background-image: url('../Img/Vector.png');
  background-repeat: no-repeat; background-position: center top; background-size: cover;
}
.article-list{
  position:relative; z-index:1; max-width: var(--lista-max); margin:0 auto;
  --bs-list-group-bg: transparent;
  --bs-list-group-border-color: var(--line);
}
.article-row{ gap:16px; padding:18px 4px; color:inherit; }
.article-row .body b{ font-size:16px; font-weight:600; display:block; margin-bottom:3px; }
.article-row .body span{ font-size:13px; font-weight:400; color: var(--ink-soft); }
.article-row svg{
  width:24px; height:24px; color: var(--ink-soft); flex:none;
  transition: transform .15s ease, color .15s ease;
}
.article-row:hover svg{ color: var(--sm-blue); transform: translateX(3px); }
.article-row:hover .body b{ color: var(--sm-blue); }

/* ==========================================================================
   7. Footer
   ========================================================================== */

footer{ background: var(--footer-bg); padding-block: var(--section-y); }
/* logo y columnas arriba-alineados: en Figma comparten el mismo y, no estan
   centrados entre si. Sin linea divisoria sobre el copyright. */
.footer-top{ gap:40px; padding-bottom: calc(var(--section-y) * 0.8); }
.footer-brand img{ height: clamp(36px, 20px + 2.2vw, 51px); width:auto; }
.footer-links{ gap: clamp(24px, 4vw, 56px); }
.footer-col h4{
  font-size:16px; text-transform:uppercase; letter-spacing:.05em;
  color: var(--ink); margin:0 0 12px; font-weight:700;
}
.footer-col ul{ margin:0; display:flex; flex-direction:column; gap:9px; }
.footer-col a{ text-decoration:none; font-size:13px; font-weight:500; color: var(--ink); }
.footer-col a:hover{ color: var(--sm-blue); }
/* --sm-grey-dark y no --ink-soft: sobre el azul claro del pie, el gris de
   ellos da 5,34 de contraste y el nuestro se quedaba en 4,44. Es el único
   sitio del proyecto donde el texto pequeño va sobre --footer-bg. */
.footer-bottom p{ margin:0; font-size:13px; color: var(--sm-grey-dark); }
/* bloque RRSS bajo la columna "Grupo SM", etiqueta encima de los iconos */
.socials-block{ align-items:flex-start; gap:10px; margin-top:20px; }
.socials-block span{
  font-size:16px; font-weight:700; letter-spacing:.05em;
  text-transform:uppercase; color: var(--ink);
}
/* iconos sueltos, sin caja ni borde */
.socials{ gap:14px; }
.socials a img{ width:20px; height:20px; }
.socials a:hover img{ opacity:.7; }

/* ==========================================================================
   9. Pagina de categoria (formacion-docentes.html)
   ========================================================================== */

/* Cabecera de categoria: misma mancha que el hero de la home, pero la seccion
   es mas baja, asi que la mancha se ancla arriba y se escala por ancho.
   Aqui NO se usa contain: la forma se aprovecha solo como fondo suave. */
.cat-hero{
  position:relative; overflow:hidden;
  padding-block: calc(var(--section-y) * 1.2) calc(var(--section-y) * 1.4);
  background-image: url('../Img/Vector-hero.png');
  background-repeat: no-repeat; background-position: center top; background-size: 130% auto;
}
.cat-hero .container{ position:relative; z-index:1; }

/* breadcrumb: separador "/" en vez del ">" por defecto de Bootstrap */
.cat-breadcrumb{
  --bs-breadcrumb-divider: "/";
  --bs-breadcrumb-item-padding-x: 6px;
  margin-bottom: 24px;
  font-size:13px;
}
.cat-breadcrumb a{ color: var(--ink-soft); text-decoration:none; }
.cat-breadcrumb a:hover{ color: var(--sm-blue); }
.cat-breadcrumb .breadcrumb-item.active{ color: var(--ink); font-weight:600; }

/* Sin el selector h1: en la pagina de articulo esta cabecera va en un <p>,
   porque alli el unico H1 tiene que ser el titulo del articulo. La familia
   se declara aqui porque el <p> no la hereda de la regla h1,h2,h3. */
.cat-title{
  font-family:'Caladea', Georgia, 'Times New Roman', serif;
  font-size: var(--h1-size); font-weight:700; line-height:1.1;
  color: var(--ink); margin:0 0 16px;
}
.cat-title .accent{ color: var(--sm-blue); }
.cat-sub{
  color: var(--ink-soft); font-size: clamp(16px, 14px + .4vw, 18px);
  font-weight:400; line-height:1.45; max-width:52ch; margin:0;
}


.cat-body{ padding-block: var(--section-y) calc(var(--section-y) * 1.6); }

/* Menu lateral de categorias. Del Figma (797:1932): tarjeta blanca con borde
   #D8E0E9, radio 8, y el item activo sobre --tint con el texto en azul. */
.side-nav{
  background: var(--surface);
  border:1px solid var(--footer-bg);
  border-radius:8px;
  padding:16px 12px;
  display:flex; flex-direction:column; gap:4px;
  position:sticky; top:calc(115px + 16px);
}
.side-nav-link{
  display:flex; align-items:center; gap:10px;
  padding:10px; border-radius:8px;
  font-size:15px; font-weight:500; line-height:1.35;
  color: var(--ink); text-decoration:none;
}
/* El icono va como SVG inline con currentColor, no como <img>: asi hereda el
   color del enlace y cambia con el estado. Con <img> el SVG se renderiza
   aislado y el CSS no puede tocarlo — por eso antes el color estaba grabado
   en cada archivo y "Formacion para docentes" salia azul aunque no estuviera
   activo, mientras el activo de turno se quedaba gris. */
.side-nav-link .nav-ico{ width:24px; height:24px; flex:none; color: inherit; }
.side-nav-link:hover{ background: var(--hover-grey); color: var(--ink); }
.side-nav-link.active{ background: var(--tint); color: var(--sm-blue); }

/* Chips de filtro: mismos botones que los CTA del hero.
   Van en UNA fila que se desliza, no apilados: al envolverse ocupaban tres
   filas en movil y empujaban los articulos fuera de la pantalla. Sin
   breakpoint: si caben no hay scroll y se ven igual que antes; si no caben,
   se arrastran. */
.filter-chips{
  gap:10px; margin-bottom:24px;
  /* el nowrap lo pone .flex-nowrap de Bootstrap en el HTML: su regla lleva
     !important y desde aqui no se puede sobrescribir */
  overflow-x: auto;
  overscroll-behavior-x: contain;   /* arrastrar hasta el tope no mueve la pagina */
  scrollbar-width: none;            /* la pista se sustituye por el degradado */
}
.filter-chips::-webkit-scrollbar{ display:none; }
.filter-chips .btn{ flex:none; }
/* Sin scroll-snap: con el colchon del foco, el snap dejaba la tira
   desplazada 4px al cargar y encendia el degradado izquierdo sin motivo.
   En chips de anchos distintos tampoco aportaba gran cosa. */

/* El outline del foco se dibuja 2px por fuera del boton; sin este colchon lo
   recortaba el propio scroller y no se veia por donde ibas con el teclado. */
.filter-chips{ padding:4px; margin-inline:-4px; }

/* Degradado en el lado por el que queda tira. Las clases las pone el JS: si se
   dejara fijo, con pocos chips difuminaria el ultimo sin haber nada mas. */
.filter-chips.hay-derecha{
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 44px), transparent);
          mask-image: linear-gradient(to right, #000 calc(100% - 44px), transparent);
}
.filter-chips.hay-izquierda{
  -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 44px), transparent);
          mask-image: linear-gradient(to left, #000 calc(100% - 44px), transparent);
}
.filter-chips.hay-izquierda.hay-derecha{
  -webkit-mask-image: linear-gradient(to right, transparent, #000 44px, #000 calc(100% - 44px), transparent);
          mask-image: linear-gradient(to right, transparent, #000 44px, #000 calc(100% - 44px), transparent);
}

/* Destacado editorial. En el Figma es un bloque azul solido; aqui lleva
   titular, texto y CTA. Los textos son de ejemplo. */
.banner-destacado{
  background: var(--sm-blue); color:#fff;
  border-radius:12px; padding:24px 28px; gap:24px;
  margin-bottom: calc(var(--section-y) * 0.9);
}
/* Sin opacity. Llevaba .9, que sobre el azul deja el blanco en #E6F1F6 y el
   contraste en 4,39; a opacidad plena son 5,04. El eyebrow ya se distingue del
   titular por tamaño y mayúsculas, no necesita además ser más flojo — y ese .9
   no venía de grupo-sm.com, se decidió aquí. */
.banner-eyebrow{
  font-size:13px; font-weight:700; letter-spacing:.65px; text-transform:uppercase;
  margin:0 0 6px;
}
.banner-titulo{
  font-family:'Caladea', Georgia, serif; color:#fff;
  font-size: clamp(20px, 16px + 1vw, 26px); font-weight:700; margin:0 0 8px;
}
.banner-desc{ margin:0; font-size:14px; line-height:1.5; opacity:.92; max-width:62ch; }
/* CTA invertido: sobre fondo azul el boton va blanco y al pasar se vuelve
   translucido, en vez del inverso habitual (que aqui desapareceria) */
.banner-cta{
  --bs-btn-bg: #fff;
  --bs-btn-border-color: #fff;
  --bs-btn-color: var(--sm-blue);
  --bs-btn-hover-bg: transparent;
  --bs-btn-hover-border-color: #fff;
  --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: transparent;
  --bs-btn-active-border-color: #fff;
  --bs-btn-active-color: #fff;
  flex:none;
}

.bloque-titulo{
  font-size: clamp(20px, 16px + 1vw, 28px); font-weight:700;
  margin:0 0 20px;
}

/* Tarjeta de articulo. Del Figma (797:2039): misma sombra y radio que las
   tarjetas de categoria de la home, con etiqueta de seccion arriba y el
   tiempo de lectura anclado abajo. */
.article-card{
  --bs-card-border-width: 0;
  --bs-card-border-radius: 12px;
  --bs-card-bg: var(--surface);
  --bs-card-spacer-x: 16px;
  --bs-card-spacer-y: 20px;
  box-shadow: 0 2px 6px rgba(0,0,0,.15);
  text-decoration:none; color:inherit;
  transition: transform .15s ease, box-shadow .15s ease;
}
.article-card:hover{ transform: translateY(-3px); box-shadow: 0 6px 16px rgba(0,0,0,.18); }
.article-card .card-body{ display:flex; flex-direction:column; gap:10px; }
/* Un articulo puede pertenecer a varias subcategorias y llevar varias
   etiquetas: se colocan en linea y saltan de fila si no caben. Fuera de
   .article-card por el mismo motivo que .etiqueta: la cabecera del articulo
   tambien las usa. */
.etiquetas{ display:flex; flex-wrap:wrap; gap:6px; }
.article-card .etiquetas{ align-self:flex-start; }
/* Etiqueta de subcategoria. Se usa en las tarjetas y en la cabecera del
   articulo, asi que la clase va suelta: colgando de .article-card no llegaba
   al articulo y salia como texto plano. */
.etiqueta{
  display:inline-block;
  background: var(--tint); color: var(--sm-blue);
  border-radius:25px; padding:4px 8px;
  font-size:13px; font-weight:700; letter-spacing:.65px; text-transform:uppercase;
}
.article-card .etiqueta{ align-self:flex-start; }
.article-card .card-title{
  font-family:'Inter',sans-serif; font-size:16px; font-weight:600;
  line-height:1.35; margin:0;
}
.article-card .card-text{ margin:0; font-size:13px; color: var(--ink-soft); line-height:1.5; }
.article-card .card-footer{
  background:transparent; border:0;
  padding: 0 var(--bs-card-spacer-x) var(--bs-card-spacer-y);
  display:flex; align-items:center; gap:4px;
  font-size:13px; color: var(--ink-soft);
}
.article-card .card-footer img{ width:16px; height:16px; }

@media (max-width: 991.98px){
  .side-nav{ position:static; }
}


/* ==========================================================================
   9c. Pagina de articulo
   ========================================================================== */

/* ⚠️ El Figma no tiene pantalla de articulo, asi que aqui NO hay fuente de
   verdad para la tipografia. Todo lo de abajo reutiliza valores que ya existen
   en el proyecto en vez de abrir una escala nueva:
     - cuerpo 16px  = el "Titulo de tarjeta" del Figma, aqui en peso 400
     - h2      = .bloque-titulo, el mismo de "Articulos"
     - ancho   = --lista-max, el mismo de "Lo mas consultado"
   El unico valor nuevo es el interlineado 1.7, que 1.35 se queda corto para
   leer parrafos largos. Si SM aporta valores propios, mandan ellos. */

/* Encabezado del articulo. Va DENTRO de la columna de contenido, no en la
   cabecera azul: arriba se mantiene el titulo de la categoria para que se siga
   viendo donde estas, y el titulo del articulo abre el texto. */
.art-encabezado{ margin-bottom:24px; }
h1.art-title{
  font-size: var(--h2-size);   /* un escalon por debajo del titulo de categoria */
  font-weight:700; line-height:1.15; margin:0 0 14px;
}
.art-meta{
  display:flex; align-items:center; flex-wrap:wrap; gap:12px; margin:0;
}
.art-lectura{
  display:inline-flex; align-items:center; gap:6px;
  font-size:13px; color: var(--ink-soft);
}
.art-lectura img{ width:16px; height:16px; }

/* El texto ocupa la columna entera (decision de diseno, 2026-09-02). Sin tope
   de ancho: a 1440 salen ~107 caracteres por linea. */
.art-cuerpo{
  font-size:16px; line-height:1.7; color: var(--ink);
}
.art-cuerpo p{ margin:0 0 18px; }
.art-cuerpo > p:last-child{ margin-bottom:0; }
.art-entradilla{ font-size:18px; line-height:1.6; color: var(--ink); font-weight:500; }
.art-cuerpo h2{
  font-size: clamp(18px, 15px + .7vw, 22px); font-weight:700;
  margin:32px 0 16px;
}
/* :not(.btn) importa: sin el, esta regla le pisaba el color al boton primario
   del articulo sin contenido y el texto salia azul sobre fondo azul. */
.art-cuerpo a:not(.btn){ color: var(--sm-blue); text-decoration:underline; text-underline-offset:2px; }
.art-cuerpo a:not(.btn):hover{ color: var(--sm-blue-dark); }

/* Enlace cuyo destino real todavia no tenemos. Mismo criterio que el acceso
   rapido aspiracional del hero: trazo discontinuo y una nota que lo explica. */
.art-cuerpo a.pendiente{
  text-decoration-style: dashed; color: var(--ink-soft);
}
.art-cuerpo a.pendiente:hover{ color: var(--sm-blue); }

/* Las claves: en origen son mayusculas + cursiva + subrayado a la vez. Aqui
   el termino se distingue solo por el peso y una barra azul. */
.art-claves{ margin:0 0 18px; }
.art-claves dt{
  font-weight:700; color: var(--ink);
  padding-left:14px; border-left:3px solid var(--sm-blue);
  margin-bottom:4px;
}
.art-claves dd{ margin:0 0 18px 17px; color: var(--ink-soft); }
.art-claves dd:last-child{ margin-bottom:0; }

/* Enumeracion sin termino. En origen estas listas van con "--" delante de
   cada linea, o sueltas como parrafos; aqui son un <ul> de verdad, que un
   lector de pantalla anuncia como lista y dice cuantos elementos tiene. */
.art-lista{ margin:0 0 18px; padding-left:0; list-style:none; }
.art-lista li{ position:relative; padding-left:20px; margin-bottom:10px; }
.art-lista li:last-child{ margin-bottom:0; }
.art-lista li::before{
  content:""; position:absolute; left:2px; top:.7em;
  width:6px; height:6px; border-radius:50%; background: var(--sm-blue);
}

/* Hueco de imagen. Los articulos de Sonrisas y LORAN llevan una imagen que en
   la web actual esta rota, asi que no hay archivo que colocar: se deja el
   hueco a la vista en vez de omitirlo y que se olvide. */
.art-imagen{ margin:28px 0 18px; max-width:520px; }
.art-imagen-hueco{
  display:flex; align-items:center; justify-content:center;
  aspect-ratio: 16 / 9; border-radius:12px;
  background: var(--hover-grey);
  border:1px dashed var(--line);
  color: var(--ink-soft);
}
.art-imagen-hueco svg{ width:40px; height:40px; }
.art-imagen figcaption{
  margin-top:10px; font-size:13px; color: var(--ink-soft);
}


/* Aviso del articulo compartido por varias etapas. */
.nota-ejemplo.nota-compartido{ align-items:flex-start; margin-top:14px; }
.nota-ejemplo.nota-compartido svg{ margin-top:2px; }

.art-salida{ margin-top:24px; }

.art-volver{ margin-top: calc(var(--section-y) * 1.1); }
.art-volver .btn{ display:inline-flex; align-items:center; gap:8px; }
.art-volver svg{ width:16px; height:16px; }

.art-relacionados{ margin-top: calc(var(--section-y) * 1.6); }

/* ==========================================================================
   9d. Resultados de busqueda y pagina 404
   ========================================================================== */


/* La 404 usa el hero de la home, pero sin tanto aire arriba: no hay eyebrow
   ni parrafo largo que llenar. */
.pagina-404{ padding-block: calc(var(--section-y) * 2.4) calc(var(--section-y) * 2.6); }
.pagina-404 .hero-title{ margin-bottom:12px; }

/* ==========================================================================
   9b. Paginador de articulos
   ========================================================================== */

/* Tope de 10 articulos por pagina. Con una sola pagina el <nav> va oculto
   desde el JS: no aporta nada y ocupa. Personalizado por variables --bs-*,
   heredando las medidas de los botones (13px, radio 8) para que no aparezca
   una tercera escala en la pagina. */
.paginador{ margin-top: calc(var(--section-y) * 1.2); }
.pagination{
  gap:8px; margin:0;
  --bs-pagination-font-size: 13px;
  --bs-pagination-padding-x: 14px;
  --bs-pagination-padding-y: 9px;
  --bs-pagination-border-radius: 8px;
  --bs-pagination-color: var(--ink-soft);
  --bs-pagination-bg: var(--surface);
  --bs-pagination-border-color: var(--line);
  /* Mismo hover gris que .btn-outline-primary en grupo-sm.com */
  --bs-pagination-hover-color: var(--sm-grey);
  --bs-pagination-hover-bg: var(--hover-grey);
  --bs-pagination-hover-border-color: var(--line);
  --bs-pagination-focus-color: var(--sm-blue);
  --bs-pagination-focus-bg: var(--hover-grey);
  --bs-pagination-active-bg: var(--sm-blue);
  --bs-pagination-active-border-color: var(--sm-blue);
  --bs-pagination-disabled-color: var(--line);
  --bs-pagination-disabled-bg: var(--surface);
  --bs-pagination-disabled-border-color: var(--line);
}
/* Con gap, Bootstrap ya no puede redondear solo los extremos de la fila. */
.pagination .page-link{
  border-radius: var(--bs-pagination-border-radius);
  min-width:40px; text-align:center; font-weight:600;
}
/* La pagina actual no reacciona al raton, por el mismo motivo que el chip de
   filtro seleccionado: el azul solido ya dice "estas aqui", y cambiarlo al
   pasar por encima hace dudar de si sigue activo. */
.pagination .active .page-link,
.pagination .active .page-link:hover{
  background: var(--sm-blue); border-color: var(--sm-blue); color:#fff;
}
.pagination .disabled .page-link{ cursor:default; }

/* Al saltar de pagina el JS hace scrollIntoView a la cabecera del bloque; el
   header es sticky y mide 108px medidos, asi que sin este margen tapaba el
   titulo "Articulos" y la primera fila de tarjetas. */
.bloque-cabecera,
#lista-articulos{ scroll-margin-top: 124px; }

/* ==========================================================================
   10. Header en movil
   ========================================================================== */

/* A 375px los hijos del header sumaban 403px para una fila de 355: el logo
   a su minimo (36px de alto = 204 de ancho) mas el icono, el separador y un
   boton de 106. El flex lo comprimia y el boton "Contacto" quedaba pegado al
   borde. Se reduce logo, gaps y padding del boton solo por debajo de 576px. */

@media (max-width: 575.98px){
  .brand img{ height:30px; }
  .header-row{ gap:12px; }
  .header-actions{ gap:12px; }
  .header-actions .btn{ --bs-btn-padding-x: 16px; }
  .icon-btn img{ width:36px; height:36px; }
  .selector-idioma .icon-btn{ width:36px; height:36px; }
}

/* ==========================================================================
   11. Nota de contenido de ejemplo y estado vacio
   ========================================================================== */

/* Hoy las cinco categorias de la web real estan vacias ("No hay articulos para
   esta categoria"), asi que todo lo que se ve en las maquetas es de ejemplo.
   La nota lo dice sin romper el diseno: quien abra la pagina sin contexto no
   debe creerse que esos articulos existen. */
.bloque-cabecera{ margin-bottom:20px; }
.bloque-cabecera .bloque-titulo{ margin-bottom:6px; }
/* Al cambiar de página el JS le trae el foco aquí (el <ul> del paginador se
   vacía y el foco se caía al <body>). Como el <main>, recibe el foco pero no
   se le dibuja recuadro: el usuario ya sabe que ha saltado porque la vista se
   ha movido y el recuento le dice en qué página está. */
.bloque-cabecera:focus{ outline:none; }

/* Recuento de artículos: es un role="status", así que además de leerse
   anuncia el filtro y la página al lector de pantalla.
   Mismos 13px / --ink-soft que .nota-ejemplo — no abre escala nueva. */
.recuento{
  margin:0; font-size:13px; color: var(--ink-soft);
}
.bloque-cabecera .nota-ejemplo + .recuento{ margin-top:4px; }
.recuento:empty{ display:none; }   /* sin JS no deja un hueco en blanco */
.nota-ejemplo{
  display:flex; align-items:center; gap:6px;
  margin:0; font-size:13px; color: var(--ink-soft);
}
.nota-ejemplo svg{ width:16px; height:16px; flex:none; }
/* Bajo el banner destacado. El aviso tiene que quedar pegado al banner, asi
   que el margen inferior se lo cede la nota: el :has() se lo quita al banner
   cuando lleva una debajo. Si un navegador no soportara :has(), lo unico que
   pasa es que la nota queda mas separada. */
.banner-destacado:has(+ .nota-banner){ margin-bottom:10px; }
.nota-ejemplo.nota-banner{
  align-items:flex-start;
  margin: 0 0 calc(var(--section-y) * 0.9);
}
.nota-ejemplo.nota-banner svg{ margin-top:2px; }

/* Cuando va bajo una lista, comparte su ancho y su sangria: si no, arranca
   pegada al borde del container y no parece pertenecer a la lista.
   El z-index la deja por encima del blob de fondo de la seccion. */
.article-list + .nota-ejemplo{
  position:relative; z-index:1;
  max-width: var(--lista-max); margin:16px auto 0; padding-inline:4px;
}

/* Estado vacio de categoria. Es el estado REAL de todas hoy, no un caso raro:
   por eso ofrece salidas (contacto, volver) en vez de dejar al usuario parado. */
.estado-vacio{
  display:flex; flex-direction:column; align-items:center; text-align:center;
  gap:16px;
  padding: clamp(40px, 4vw, 64px) 24px;
  background: var(--surface);
  border:1px solid var(--footer-bg);
  border-radius:12px;
}
/* Mismo par de colores que el item activo del menu: fondo --tint y el icono
   en --sm-blue. El SVG va inline con currentColor, asi que basta con dar el
   color al contenedor. */
.estado-vacio-icono{
  width:64px; height:64px; border-radius:16px;
  background: var(--tint);
  color: var(--sm-blue);
  display:flex; align-items:center; justify-content:center;
}
.estado-vacio-icono .nav-ico{ width:28px; height:28px; }
.estado-vacio-titulo{
  font-size: clamp(20px, 16px + 1vw, 26px); font-weight:700; margin:0;
}
.estado-vacio-texto{
  margin:0; max-width:52ch; font-size:15px; line-height:1.55; color: var(--ink-soft);
}
.estado-vacio-acciones{ gap:12px; margin-top:8px; align-items:center; }



/* ==========================================================================
   12. Submenu de subcategorias (Compras y devoluciones)
   ========================================================================== */

/* Solo algunas categorias tienen subcategorias reales. En la web actual esas
   subcategorias parten el listado en bloques apilados con listas de enlaces;
   aqui se reaprovechan como FILTROS, y el submenu lateral es un atajo al
   mismo filtro. Por eso los dos comparten data-filtro. */
.side-nav-group{ display:flex; flex-direction:column; }
.side-nav-group .side-nav-link{ justify-content:flex-start; }
.side-nav-chevron{ width:16px; height:16px; margin-left:auto; flex:none; }

.side-nav-sub{
  display:flex; flex-direction:column;
  margin: 2px 0 2px 34px;   /* alineado con el texto del padre, no con su icono */
}
.side-nav-sublink{
  position:relative;
  padding: 8px 10px;
  font-size:14px; font-weight:500;
  color: var(--ink-soft); text-decoration:none;
  border-radius:6px;
}
.side-nav-sublink:hover{ background: var(--hover-grey); color: var(--ink); }
/* barra a la izquierda para marcar la subcategoria activa, como en la web
   actual (alli en rojo; aqui en el azul de marca) */
.side-nav-sublink.active{ color: var(--sm-blue); font-weight:600; }
.side-nav-sublink.active::before{
  content:""; position:absolute; left:0; top:6px; bottom:6px;
  width:3px; border-radius:2px; background: var(--sm-blue);
}

/* las tarjetas ocultas por el filtro */
#lista-articulos > .col[hidden]{ display:none; }

/* El chip SELECCIONADO no reacciona al raton: se queda en el azul de marca.
   No necesita feedback de hover porque su estado ya lo da todo, y cualquier
   cambio (invertir a blanco u oscurecer) hace dudar de si sigue seleccionado
   mientras el cursor esta encima. El feedback de "esto se puede pulsar" lo
   dan los chips inactivos, que si tienen hover. */
.filter-chips .btn-primary{
  --bs-btn-hover-bg: var(--sm-blue);
  --bs-btn-hover-border-color: var(--sm-blue);
  --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: var(--sm-blue);
  --bs-btn-active-border-color: var(--sm-blue);
  --bs-btn-active-color: #fff;
}

/* ==========================================================================
   13. Pagina de contacto (contacto.html)
   ========================================================================== */

/* La cabecera (.cat-hero/.cat-title/.cat-sub) es la misma que la de categoria,
   sin buscador: aqui no se busca, se abre una consulta. Todo lo de abajo es
   el cuerpo del wizard, isla React montada en #cto-root (ver Contacto/Index.cshtml).

   Port fiel de la seccion "13. Contacto" de SM-CentroAyuda/css/style.css: la
   version anterior de esta seccion reinventaba una hoja simplificada con los
   mismos nombres de clase pero perdiendo bastante fidelidad visual frente al
   prototipo (tarjeta del wizard, linea del stepper, chip elegido sin hover,
   separador del formulario, tipografia de titulos...). Las unicas
   adaptaciones reales frente al original son por markup: aqui los chips son
   <button class="btn-primary|btn-outline-primary"> controlados por React, no
   el patron .btn-check (input oculto) + label.btn del HTML estatico, asi que
   las reglas que en el original colgaban de ".btn-check:checked + .btn" aqui
   cuelgan directamente de ".btn-primary".

   El propio .cto no lleva max-width: el original tampoco lo tiene, el wizard
   ocupa el mismo .container (tope 1120/1160) que el resto de paginas del
   sitio — un max-width propio aqui lo dejaba encogido a 760px dentro de un
   contenedor mucho mas ancho. */

/* --- La tarjeta del wizard ---------------------------------------------- */
.cto-wizard{
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  padding: clamp(20px, 3vw, 32px);
}

/* --- Indicador de pasos -------------------------------------------------
   Sin numeros escritos a mano: las etiquetas y cual esta activo los calcula
   contacto.tsx desde el propio recorrido, para que no puedan descuadrarse. */
.cto-pasos{
  list-style: none;
  margin: 0 0 8px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 0;
}
.cto-paso{
  flex: 1 1 0;
  min-width: 92px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  position: relative;
  text-align: center;
}
/* La linea que une los pasos: va detras del circulo, no entre elementos, para
   que no se descuadre cuando una etiqueta ocupa dos lineas. */
.cto-paso::before{
  content: "";
  position: absolute;
  top: 13px;
  left: 0;
  right: 50%;
  height: 1px;
  background: var(--line);
}
.cto-paso::after{
  content: "";
  position: absolute;
  top: 13px;
  left: 50%;
  right: 0;
  height: 1px;
  background: var(--line);
}
.cto-paso:first-child::before,
.cto-paso:last-child::after{ display: none; }
.cto-paso.hecho::before,
.cto-paso.hecho::after,
.cto-paso.activo::before{ background: var(--sm-blue); }
.cto-paso-n{
  position: relative;
  z-index: 1;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--sm-grey);
  font-size: 13px;
  font-weight: 700;
  display: grid;
  place-items: center;
  flex: none;
}
.cto-paso-n svg{ width: 13px; height: 13px; }
.cto-paso.activo .cto-paso-n{
  background: var(--sm-blue);
  border-color: var(--sm-blue);
  color: #fff;
}
.cto-paso.hecho .cto-paso-n{
  background: var(--tint);
  border-color: var(--sm-blue);
  color: var(--sm-blue-dark);
}
.cto-paso-txt{ font-size: 13px; color: var(--ink-soft); line-height: 1.35; }
.cto-paso.activo .cto-paso-txt{ color: var(--ink); font-weight: 600; }

/* --- Volver a empezar ---------------------------------------------------- */
.cto-reset{ margin: 14px 0 0; font-size: 13px; }
.cto-reset a{ color: var(--sm-blue); }
.cto-reset a:hover{ color: var(--sm-blue-dark); }

/* --- Cabecera de los caminos aparte (caso abierto y DPO) ---------------- */
.cto-via{ margin-top: 18px; }
.cto-via-titulo{
  font-family: 'Caladea', Georgia, serif;
  font-size: 24px;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 6px;
}
.cto-via-texto{ margin: 0; font-size: 15px; color: var(--ink-soft); max-width: 68ch; }

/* --- Las tiras de chips -------------------------------------------------- */
.cto-fila{ margin-top: 26px; }
.cto-fila-enc{ margin: 0 0 12px; font-size: 15px; color: var(--ink); }
.cto-fila-n{ color: var(--sm-grey); font-weight: 700; margin-right: 6px; }
.cto-fila-enc b{ font-weight: 700; }
.cto-chips{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  /* Colchon para que el outline del foco no se recorte, igual que en
     .filter-chips de las categorias. */
  padding: 4px;
  margin-inline: -4px;
}
.cto-chips .btn{ --bs-btn-font-size: 13px; }

/* El chip ELEGIDO no reacciona al raton: el azul solido ya dice "esto es lo
   que has elegido", y cualquier cambio al pasar el raton hace dudar de si
   sigue elegido. El feedback de "esto se puede pulsar" lo dan los chips
   inactivos, que si tienen hover. Aqui el chip elegido ya lleva .btn-primary
   directamente (ver nota de cabecera de esta seccion). */
.cto-chips .btn-primary{
  --bs-btn-hover-bg: var(--sm-blue);
  --bs-btn-hover-border-color: var(--sm-blue);
  --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: var(--sm-blue);
  --bs-btn-active-border-color: var(--sm-blue);
  --bs-btn-active-color: #fff;
}

/* --- Formulario: bloques ------------------------------------------------- */
.cto-form{ margin-top: 30px; border-top: 1px solid var(--line); padding-top: 26px; }
.cto-bloque + .cto-bloque{ margin-top: 26px; }
.cto-bloque-titulo{
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 4px;
}
.cto-bloque-texto{ margin: 0 0 14px; font-size: 13px; color: var(--ink-soft); max-width: 68ch; }
.cto-bloque:first-child .cto-bloque-texto{ font-size: 15px; }

.cto-form .form-label{
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 5px;
}
.cto-form .form-control,
.cto-form .form-select{
  --bs-body-font-size: 14px;
  font-size: 14px;
  border-color: var(--line);
  border-radius: 8px;
  padding: 9px 12px;
  color: var(--ink);
}
.cto-form .form-control:focus,
.cto-form .form-select:focus{
  border-color: var(--sm-blue);
  box-shadow: 0 0 0 3px rgba(0, 119, 163, .18);
}
.cto-form .form-check-input:checked{
  background-color: var(--sm-blue);
  border-color: var(--sm-blue);
}
.cto-form .form-check-input:focus{
  border-color: var(--sm-blue);
  box-shadow: 0 0 0 3px rgba(0, 119, 163, .18);
}
.cto-req{ color: var(--sm-red); font-weight: 700; margin-left: 3px; }
.cto-ayuda{ margin: 5px 0 0; font-size: 12px; color: var(--ink-soft); line-height: 1.45; }
/* A diferencia del prototipo (que gateaba con :invalid + una clase "validado"
   puesta a mano en el submit), aqui el mensaje de error solo se MONTA cuando
   mostrarErrores+obligatorio+vacio ya es cierto (ver Campo en common.tsx), asi
   que no hace falta el "display:none hasta validar" del CSS original. */
.cto-error{ margin: 5px 0 0; font-size: 12px; color: var(--sm-red); }
/* Borde rojo del campo cuando ya se ha intentado enviar y falta ese dato —
   equivalente visual de ".cto-form.validado :invalid" del prototipo, aplicado
   aqui via clase explicita (Campo ya calcula "invalido" en React). */
.cto-form .form-control.cto-invalido,
.cto-form .form-select.cto-invalido{ border-color: var(--sm-red); }

/* --- Grupos de radios --------------------------------------------------- */
.cto-radios{ border: 0; padding: 0; margin: 0; min-width: 0; }
.cto-radios legend{ float: none; width: auto; }
.cto-radios-caja{
  display: flex;
  flex-wrap: wrap;
  gap: 6px 22px;
  margin-top: 2px;
}
.cto-radios .form-check{ margin: 0; }
.cto-radios .form-check-label{ font-size: 14px; color: var(--ink); }
.cto-mas{ --bs-btn-font-size: 13px; margin-top: 4px; }

/* --- Adjuntos ------------------------------------------------------------ */
.cto-zona{
  position: relative;
  border: 1px dashed var(--sm-blue);
  border-radius: 10px;
  background: var(--tint-2);
  transition: background .15s ease;
}
.cto-zona.encima{ background: var(--tint); }
/* El input NO se oculta con display:none: eso lo saca del recorrido del
   tabulador. Se cubre con la etiqueta, que es la que se ve y recibe el foco. */
.cto-zona-input{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}
.cto-zona-label{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 22px 16px;
  font-size: 13px;
  color: var(--ink-soft);
  text-align: center;
  cursor: pointer;
}
.cto-zona-label svg{ width: 22px; height: 22px; flex: none; color: var(--sm-blue); }
.cto-zona-label b{ color: var(--ink); }
.cto-zona-input:focus-visible + .cto-zona-label{
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: 10px;
}
.cto-adjuntos{ display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.cto-adjunto{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 8px 5px 12px;
  border: 1px solid var(--sm-blue);
  border-radius: 999px;
  background: var(--tint);
  font-size: 13px;
  color: var(--sm-blue-dark);
}
.cto-adjunto-x{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: none;
  padding: 2px;
  line-height: 0;
  color: var(--sm-blue-dark);
  border-radius: 50%;
  cursor: pointer;
}
.cto-adjunto-x svg{ width: 13px; height: 13px; }
.cto-adjunto-x:hover{ background: var(--paper); }

/* --- Legal ----------------------------------------------------------------
   El texto es de SM y no se toca. Lo que si se hace es sacarlo del muro a
   ancho completo: caja propia, con su fondo, para que se lea como aviso y no
   como letra pequeña colada antes del boton. */
.cto-legal{ margin-top: 26px; }
.cto-legal-texto{
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--hover-grey);
  padding: 14px 16px;
  max-width: 78ch;
}
.cto-legal-texto p{ margin: 0; font-size: 12px; line-height: 1.55; color: var(--sm-grey-dark); }
.cto-legal-texto p + p{ margin-top: 7px; }
.cto-legal-texto b{ color: var(--ink); font-weight: 700; }
.cto-check{ margin-top: 14px; }
.cto-check .form-check-label{ font-size: 13px; color: var(--ink); }

/* --- Pie del formulario ---------------------------------------------------- */
.cto-pie{
  margin-top: 26px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 18px;
}
.cto-obligatorios{ margin: 0; font-size: 12px; color: var(--ink-soft); }
.cto-error-envio{
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0 0 14px;
  padding: 12px 16px;
  font-size: 14px;
  line-height: 1.45;
  color: #8a0d09;
  background: #fdecea;
  border: 1px solid #f5b5b2;
  border-left: 4px solid var(--sm-red);
  border-radius: 8px;
}
.cto-error-envio svg{ flex: 0 0 18px; width: 18px; height: 18px; margin-top: 1px; color: var(--sm-red); }

/* --- Confirmacion ----------------------------------------------------------- */
.cto-hecho{ text-align: center; padding: 20px 0 6px; }
.cto-hecho-ico{
  width: 52px;
  height: 52px;
  margin: 0 auto 16px;
  border-radius: 50%;
  background: var(--tint);
  color: var(--sm-blue);
  display: grid;
  place-items: center;
}
.cto-hecho-ico svg{ width: 24px; height: 24px; }
.cto-hecho-titulo{
  font-family: 'Caladea', Georgia, serif;
  font-size: 28px;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 8px;
}
.cto-hecho-texto{
  margin: 0 auto;
  max-width: 58ch;
  font-size: 15px;
  color: var(--ink-soft);
}
.cto-hecho .nota-ejemplo{ justify-content: center; margin-top: 16px; }
.cto-hecho-acciones{ gap: 12px; justify-content: center; margin-top: 22px; }

/* --- Otras formas de contactar --------------------------------------------- */
.cto-otros{ margin-top: 34px; }
.cto-otros-titulo{
  font-family: 'Caladea', Georgia, serif;
  font-size: 24px;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 16px;
}
.cto-otro{
  display: flex;
  flex-direction: column;
  gap: 6px;
  height: 100%;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  text-decoration: none;
  transition: transform .15s ease, box-shadow .15s ease;
}
.cto-otro:hover{ transform: translateY(-3px); box-shadow: 0 6px 16px rgba(0, 0, 0, .12); }
.cto-otro-nombre{ font-size: 16px; font-weight: 600; color: var(--ink); }
.cto-otro-texto{ font-size: 13px; color: var(--ink-soft); line-height: 1.5; }
.cto-otro-ir{
  margin-top: auto;
  padding-top: 10px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  font-weight: 700;
  color: var(--sm-blue);
}
.cto-otro-ir svg{ width: 15px; height: 15px; transition: transform .15s ease; }
.cto-otro:hover .cto-otro-ir svg{ transform: translateX(3px); }
.cto-otros-pie{ margin: 16px 0 0; font-size: 13px; color: var(--ink-soft); }

@media (max-width: 575.98px){
  .cto-pasos{ gap: 4px 0; }
  .cto-paso{ min-width: 72px; }
  .cto-paso-txt{ font-size: 12px; }
  .cto-hecho-titulo{ font-size: 24px; }
}

@media (prefers-reduced-motion: reduce){
  .cto-otro, .cto-otro-ir svg{ transition: none; }
  .cto-otro:hover{ transform: none; }
}