/* ==========================================================================
   roche-as.es · parte pública — estilos de marca Roche
   Hoja propia de la parte pública. Solo la cargan las páginas que usan el layout
   public_page/master_ras. No se toca addmira.css (compartida con el webshop).
   Todo cuelga del contenedor .ras (no del body) para no alterar el banner de
   cookies de OneTrust, que se inyecta directamente en el body.
   Valores de la guía de marca Roche (Brand Elements Guidelines); los marcados
   como muestreados o aproximados están pendientes de la biblioteca oficial.
   ========================================================================== */

/* ---------- Tipografías (ficheros de www/assets/fonts) --------------------- */
@font-face { font-family: "Roche Sans"; src: url("../assets/fonts/roche_sans/RocheSansLight-Light.ttf") format("truetype"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Roche Sans"; src: url("../assets/fonts/roche_sans/RocheSans-Regular.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Roche Sans"; src: url("../assets/fonts/roche_sans/RocheSansMedium-Medium.ttf") format("truetype"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Roche Sans"; src: url("../assets/fonts/roche_sans/RocheSans-Bold.ttf") format("truetype"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Roche Serif"; src: url("../assets/fonts/roche_serif/RocheSerifLight-LightItalic.ttf") format("truetype"); font-weight: 300; font-style: italic; font-display: swap; }

/* ---------- Variables ----------------------------------------------------- */
:root {
  /* Azules: 600 y 900 son oficiales; el resto de la escala digital está
     muestreado de la imagen de la guía y debe confirmarse con el fichero oficial. */
  --ras-blue-100: #D9E0F7;
  --ras-blue-200: #AFC0EF;
  --ras-blue-400: #5D80DF;
  --ras-blue-600: #0B41CD;   /* Roche Blue */
  --ras-blue-700: #0936AB;
  --ras-blue-900: #022366;   /* Dark Blue */
  --ras-blue-light: #1482FA; /* Light Blue */
  --ras-blue-pale: #BDE3FF;  /* Extra Light Blue */

  /* Neutros cálidos */
  --ras-neutral-4: #FFF7F5;
  --ras-neutral-3: #FFE8DE;
  --ras-neutral-2: #FAD6C7;

  /* Grises cálidos (escala digital de la guía) */
  --ras-grey-50: #FBFBFA;
  --ras-grey-100: #F5F5F2;   /* Grey 5 */
  --ras-grey-200: #EAE8E5;
  --ras-grey-300: #DBD6D1;   /* Grey 4 */
  --ras-grey-400: #C2BAB5;   /* Grey 3 */
  --ras-grey-500: #9D948E;
  --ras-grey-600: #706B69;   /* Grey 2 */
  --ras-grey-700: #544F4F;   /* Grey 1 */
  --ras-grey-800: #312F2E;
  --ras-grey-900: #21201F;

  /* Estado: solo para avisos funcionales */
  --ras-status-red: #CC0033;
  --ras-status-yellow: #FFC414;
  --ras-status-green: #007C6B;

  /* Papeles */
  --ras-text: var(--ras-grey-900);
  --ras-text-muted: var(--ras-grey-700);
  --ras-text-subtle: var(--ras-grey-600);
  --ras-line: var(--ras-grey-200);
  --ras-line-strong: var(--ras-grey-300);
  --ras-action: var(--ras-blue-600);
  --ras-action-hover: var(--ras-blue-900);
  --ras-action-press: var(--ras-blue-400);
  --ras-focus: var(--ras-blue-light);

  /* Keylines: proporción 1 : 2 : 4 (mitad, igual y doble que la línea del logo) */
  --ras-keyline-1: 1px;
  --ras-keyline-2: 2px;
  --ras-keyline-3: 4px;

  /* Degradados a 49° (aproximación en CSS de las combinaciones documentadas;
     en producción deben sustituirse por los de la biblioteca oficial). */
  --ras-gradient-cool: linear-gradient(139deg, var(--ras-blue-pale) -35%, var(--ras-neutral-4) 42%, #FFFFFF 100%);
  --ras-gradient-warm: linear-gradient(139deg, #FFFFFF 0%, var(--ras-neutral-4) 45%, var(--ras-neutral-3) 135%);
  --ras-gradient-soft: linear-gradient(139deg, #FFFFFF 0%, #FFFFFF 18%, var(--ras-neutral-4) 55%, var(--ras-neutral-3) 118%);   /* "White to Neutral 3", transición continua */

  /* Espaciado (unidad de 4 px). El margen lateral sale del logo: área de respeto (⅓ de su ancho)
     + 11 % del ancho del logo → 24 + 8 = 32 px con el logo de 72 px en móvil. */
  --ras-gutter: 32px;
  --ras-section: 64px;
  --ras-max: 1280px;
  --ras-ease: 200ms ease-out;
}
@media (min-width: 768px)  { :root { --ras-gutter: 40px; --ras-section: 80px; } }
@media (min-width: 1200px) { :root { --ras-gutter: 64px; --ras-section: 112px; } }

/* ---------- Base ---------------------------------------------------------- */
.ras {
  font-family: "Roche Sans", "Noto Sans", Arial, sans-serif;
  font-weight: 300;
  font-size: 1.125rem;          /* 18 px en móvil y tableta */
  line-height: 1.6;
  color: var(--ras-text);
  background: #FFFFFF;
  text-align: left;
  -webkit-font-smoothing: antialiased;
}
@media (min-width: 1200px) { .ras { font-size: 1.25rem; } }  /* 20 px en escritorio */

.ras .wrap { width: 100%; max-width: var(--ras-max); margin-inline: auto; padding-inline: var(--ras-gutter); }
.ras .section { padding-block: var(--ras-section); }
.ras .section--tight { padding-block: calc(var(--ras-section) * 0.6); }
.ras .section--warm { background: var(--ras-neutral-4); }
.ras .section--grey { background: var(--ras-grey-100); }
.ras .section--cool { background: var(--ras-gradient-cool); }   /* mismo degradado que la cabecera de la v1 */
.ras .measure { max-width: 34em; }

/* Escala tipográfica de la guía: móvil / tableta / escritorio */
.ras h1, .ras .h1 { font-weight: 300; font-size: 2.5rem; line-height: 1.2; margin: 0 0 0.5em; letter-spacing: 0; }
.ras h2, .ras .h2 { font-weight: 300; font-size: 1.875rem; line-height: 1.2; margin: 0 0 0.6em; }
.ras h3, .ras .h3 { font-weight: 300; font-size: 1.75rem; line-height: 1.2; margin: 0 0 0.6em; }
.ras h4, .ras .h4 { font-weight: 400; font-size: 1.5rem; line-height: 1.3; margin: 0 0 0.6em; }
.ras h5, .ras .h5 { font-weight: 400; font-size: 1.25rem; line-height: 1.32; margin: 0 0 0.6em; }
.ras h6, .ras .h6 { font-weight: 400; font-size: 1.125rem; line-height: 1.48; margin: 0 0 0.6em; }
.ras .lead { font-weight: 300; font-size: 1.25rem; line-height: 1.6; }
@media (min-width: 768px) {
  .ras h1, .ras .h1 { font-size: 3rem; }
  .ras h2, .ras .h2 { font-size: 2.5rem; line-height: 1.3; }
  .ras h3, .ras .h3 { font-size: 1.875rem; line-height: 1.3; }
  .ras .lead { font-size: 1.375rem; }
}
@media (min-width: 1200px) {
  .ras h1, .ras .h1 { font-size: 3.8125rem; line-height: 1.15; }
  .ras h2, .ras .h2 { font-size: 3rem; line-height: 1.2; }
  .ras h3, .ras .h3 { font-size: 2.5rem; line-height: 1.25; }
  .ras h4, .ras .h4 { font-size: 1.875rem; line-height: 1.35; }
  .ras h5, .ras .h5 { font-size: 1.5rem; line-height: 1.4; }
  .ras h6, .ras .h6 { font-size: 1.25rem; line-height: 1.5; }
  .ras .lead { font-size: 1.625rem; }
}
/* Neutraliza reglas globales de addmira.css (h2 oblicuo, gris y en otra familia; h5 con filete) */
.ras h1, .ras h2, .ras h3, .ras h4, .ras h5, .ras h6 { font-family: inherit; font-style: normal; color: var(--ras-text); padding: 0; border: 0; letter-spacing: 0; }
.ras p { margin: 0 0 1em; }
.ras strong, .ras b { font-weight: 500; }
.ras .text-muted-ras { color: var(--ras-text-muted); }
.ras .small-ras { font-size: 1rem; line-height: 1.5; }
.ras .overline { display: block; font-weight: 400; font-size: 1rem; line-height: 1.5; color: var(--ras-text-subtle); margin-bottom: 0.5rem; }
.ras blockquote.quote { font-family: "Roche Serif", Georgia, serif; font-style: italic; font-weight: 300; font-size: 1.25rem; margin: 0 0 1em; padding-left: 1.5rem; border-left: var(--ras-keyline-1) solid var(--ras-line-strong); color: var(--ras-text-muted); }

/* Enlaces */
.ras a { color: var(--ras-action); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; transition: color var(--ras-ease); }
.ras a:hover { color: var(--ras-action-hover); }
.ras a:focus-visible, .ras button:focus-visible, .ras .btn:focus-visible, .ras input:focus-visible, .ras [tabindex]:focus-visible {
  outline: 3px solid var(--ras-focus); outline-offset: 3px; box-shadow: none;
}
.ras .skip-link { position: absolute; left: var(--ras-gutter); top: -100px; z-index: 100; background: #FFFFFF; padding: 12px 16px; font-weight: 400; }
.ras .skip-link:focus { top: 8px; }

/* Iconos de interfaz (trazo único, mismo grosor en toda la web) */
.ras .ico { width: 1.1em; height: 1.1em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; vertical-align: -0.16em; }

/* ---------- Botones (se re-estilan las clases de Bootstrap) ---------------- */
.ras .btn {
  font-family: inherit; font-weight: 500; font-size: 1rem; line-height: 1.5;
  padding: 0.6875rem 1.5rem; min-height: 48px; border-radius: 2px; border-width: 1px;
  display: inline-flex; align-items: center; gap: 0.5rem; text-decoration: none; cursor: pointer;
  transition: background-color var(--ras-ease), border-color var(--ras-ease), color var(--ras-ease);
}
.ras .btn-primary { background: var(--ras-action); border-color: var(--ras-action); color: #FFFFFF; }
.ras .btn-primary:hover, .ras .btn-primary:focus { background: var(--ras-action-hover); border-color: var(--ras-action-hover); color: #FFFFFF; box-shadow: none; }
.ras .btn-primary:active, .ras .btn-primary.active { background: var(--ras-action-press); border-color: var(--ras-action-press); color: #FFFFFF; box-shadow: none; }
.ras .btn-outline-primary { background: #FFFFFF; border-color: var(--ras-action); color: var(--ras-action); }
.ras .btn-outline-primary:hover, .ras .btn-outline-primary:focus { background: var(--ras-blue-100); border-color: var(--ras-action-hover); color: var(--ras-action-hover); box-shadow: none; }
.ras .btn-outline-primary:active { background: var(--ras-blue-200); border-color: var(--ras-action-hover); color: var(--ras-action-hover); box-shadow: none; }
.ras .btn:disabled, .ras .btn.disabled { opacity: 0.45; cursor: not-allowed; }
.ras .btn-sm { min-height: 44px; padding: 0.5rem 1rem; font-size: 1rem; }

/* Enlace con flecha (acción terciaria) */
.ras .link-arrow { display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 400; font-size: 1rem; text-decoration: none; min-height: 44px; }
.ras .link-arrow .ico { transition: transform var(--ras-ease); }
.ras .link-arrow:hover .ico { transform: translateX(4px); }

/* ---------- Cabecera ------------------------------------------------------ */
.ras .site-header { background: #FFFFFF; border-bottom: 1px solid var(--ras-line); }
.ras .site-header__inner { display: grid; grid-template-columns: auto 1fr; grid-template-areas: "logo toggle" "menu menu"; align-items: center; padding-block: 16px; row-gap: 0; }
.ras .site-logo { grid-area: logo; display: inline-flex; margin-left: -8px; padding: 8px 0; }  /* el margen de contenido cae entre el vértice y el hombro del hexágono */
.ras .site-logo img { width: 72px; height: auto; display: block; }
.ras .site-header__toggle { grid-area: toggle; justify-self: end; background: none; border: 1px solid var(--ras-line-strong); border-radius: 2px; min-height: 44px; padding: 0 14px; font: inherit; font-weight: 400; font-size: 1rem; color: var(--ras-text); display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.ras .site-menu { grid-area: menu; }
.ras .site-nav ul, .ras .site-utilities ul { list-style: none; margin: 0; padding: 0; }
.ras .site-nav a, .ras .site-utilities a { display: flex; align-items: center; min-height: 48px; color: var(--ras-text); text-decoration: none; font-size: 1rem; }
.ras .site-nav a { font-weight: 400; border-bottom: 1px solid var(--ras-line); }
.ras .site-nav a:hover, .ras .site-utilities a:hover { color: var(--ras-action); }
.ras .site-nav a[aria-current="page"] { color: var(--ras-action); }
.ras .site-nav { margin-top: 16px; }
.ras .site-utilities { padding-top: 8px; }
.ras .site-utilities a { font-weight: 300; color: var(--ras-text-muted); }
.ras .site-utilities .btn { margin-top: 12px; color: var(--ras-action); font-weight: 500; }
.ras .site-utilities .sep { display: none; }

@media (min-width: 992px) {
  .ras .site-header__inner { grid-template-areas: "logo utilities" "nav nav"; padding-block: 24px 0; row-gap: 24px; }   /* 32 px libres sobre y bajo el logo de 90 px (mínimo 30) */
  .ras .site-logo img { width: 90px; }
  .ras .site-logo { margin-left: -10px; }
  .ras .site-header__toggle { display: none; }
  .ras .site-menu.collapse { display: contents !important; }
  .ras .site-utilities { grid-area: utilities; justify-self: end; padding-top: 0; }
  .ras .site-utilities ul { display: flex; align-items: center; gap: 28px; }
  .ras .site-utilities a { min-height: 44px; }
  .ras .site-utilities .sep { display: block; width: 1px; height: 20px; background: var(--ras-line-strong); }
  .ras .site-utilities .btn { margin-top: 0; }
  .ras .site-nav { grid-area: nav; margin-top: 0; }
  .ras .site-nav ul { display: flex; gap: 40px; }
  .ras .site-nav a { border-bottom: 2px solid transparent; min-height: 52px; padding-bottom: 2px; }
  .ras .site-nav a:hover { border-bottom-color: var(--ras-line-strong); }
  .ras .site-nav a[aria-current="page"] { border-bottom-color: var(--ras-action); color: var(--ras-text); }
}

/* ---------- Staging (cabecera de página: degradado + keyline de flecha) ---- */
.ras .staging { background: var(--ras-gradient-cool); border-bottom: 1px solid var(--ras-line); }
.ras .staging--warm { background: var(--ras-gradient-warm); }
.ras .staging__inner { position: relative; padding-block: 48px; }   /* va dentro de .wrap, sin relleno lateral propio */
.ras .staging__title h1 { margin: 0; }
.ras .staging__keyline { display: none; }
.ras .staging__body { margin-top: 24px; padding-top: 24px; border-top: var(--ras-keyline-2) solid var(--ras-action); color: var(--ras-text-muted); }
.ras .staging__body > :last-child { margin-bottom: 0; }
.ras .breadcrumbs { font-size: 1rem; margin: 0 0 16px; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 8px; color: var(--ras-text-subtle); }
.ras .breadcrumbs a { color: var(--ras-text-muted); }
.ras .breadcrumbs li + li::before { content: "/"; margin-right: 8px; color: var(--ras-grey-600); }

@media (min-width: 992px) {
  .ras .staging__inner { display: grid; grid-template-columns: 55% 45%; align-items: center; min-height: 340px; padding-block: 0; }
  .ras .staging__title { padding-block: 56px; padding-right: 190px; }   /* deja libre la zona de la flecha */
  .ras .staging__body { margin: 0; padding: 56px 0 56px 64px; border-top: 0; align-self: stretch; display: flex; flex-direction: column; justify-content: center; border-left: var(--ras-keyline-1) solid var(--ras-action); }
  /* Flecha: brazos a 49°, punta en el 55 % del ancho y centrada en vertical */
  .ras .staging__keyline { display: block; position: absolute; top: 0; bottom: 0; right: 45%; aspect-ratio: 0.4346 / 1; pointer-events: none; }
  .ras .staging__keyline svg { width: 100%; height: 100%; display: block; overflow: visible; }
  .ras .staging__keyline polyline { fill: none; stroke: var(--ras-action); stroke-width: var(--ras-keyline-1); stroke-linejoin: bevel; vector-effect: non-scaling-stroke; }
}

/* ---------- Bloques partidos según la retícula ABA (45 % | 55 %) ---------- */
.ras .split { display: grid; gap: 24px; }
@media (min-width: 992px) {
  .ras .split { grid-template-columns: 45fr 55fr; gap: 0; align-items: start; }
  .ras .split > :first-child { padding-right: 64px; }
  .ras .split--reverse { grid-template-columns: 55fr 45fr; }
}
.ras .section-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 32px; margin-bottom: 40px; }
.ras .section-head h2 { margin: 0; }

/* ---------- Formularios --------------------------------------------------- */
.ras .form-label { font-weight: 400; font-size: 1rem; margin-bottom: 6px; color: var(--ras-text); }
.ras .form-control { font-family: inherit; font-weight: 300; font-size: 1.125rem; min-height: 48px; padding: 10px 14px; color: var(--ras-text); background: #FFFFFF; border: 1px solid var(--ras-grey-600); border-radius: 2px; transition: border-color var(--ras-ease); }
.ras .form-control:hover { border-color: var(--ras-grey-900); }
.ras .form-control:focus { border-color: var(--ras-action); box-shadow: none; outline: 3px solid var(--ras-focus); outline-offset: 2px; }
.ras .form-text { font-size: 1rem; color: var(--ras-text-muted); margin-top: 6px; }
.ras .field { margin-bottom: 20px; }
.ras .field--password { position: relative; }
.ras .field--password .form-control { padding-right: 104px; }
.ras .field__toggle { position: absolute; right: 4px; bottom: 2px; min-height: 44px; padding: 0 12px; background: none; border: 0; font: inherit; font-weight: 400; font-size: 1rem; color: var(--ras-action); cursor: pointer; }
.ras .form-status { margin-top: 16px; padding: 12px 16px; font-size: 1rem; background: #FFFFFF; border-left: var(--ras-keyline-3) solid var(--ras-status-yellow); }
.ras .form-links { display: flex; flex-wrap: wrap; gap: 4px 32px; margin-top: 20px; font-size: 1rem; }
.ras .form-links a { display: inline-flex; align-items: center; min-height: 44px; }

/* ---------- Tarjetas ------------------------------------------------------ */
/* Hero card: imagen a un lado, texto al otro; se alternan */
.ras .hero-card { display: grid; gap: 24px; align-items: center; }
.ras .hero-card + .hero-card { margin-top: 56px; }
.ras .hero-card__media { background: var(--ras-grey-100); display: flex; align-items: center; justify-content: center; aspect-ratio: 16 / 10; padding: 32px; overflow: hidden; }
.ras .hero-card__media img { max-width: 100%; max-height: 100%; width: auto; height: auto; display: block; }
.ras .hero-card__media--photo { padding: 0; }
.ras .hero-card__media--photo img { width: 100%; height: 100%; object-fit: cover; }
.ras .hero-card__body h3 { margin-bottom: 0.4em; }
.ras .hero-card__body p { color: var(--ras-text-muted); }
.ras .hero-card__body .btn { margin-top: 12px; }
@media (min-width: 768px) {
  .ras .hero-card { grid-template-columns: 45fr 55fr; gap: 0; }
  .ras .hero-card__body { padding-left: 64px; }
  .ras .hero-card--reverse { grid-template-columns: 55fr 45fr; }
  .ras .hero-card--reverse .hero-card__media { order: 2; }
  .ras .hero-card--reverse .hero-card__body { padding-left: 0; padding-right: 64px; }
  .ras .hero-card + .hero-card { margin-top: 96px; }
}

/* Tarjeta de noticia sin imagen (default card de la guía) */
.ras .card-grid { display: grid; gap: 40px; grid-template-columns: 1fr; }
@media (min-width: 768px) { .ras .card-grid { grid-template-columns: repeat(3, 1fr); gap: 48px; } }
.ras .news-card { display: flex; flex-direction: column; height: 100%; padding-bottom: 24px; border-bottom: 1px solid var(--ras-line-strong); }
.ras .news-card__title { font-weight: 400; font-size: 1.375rem; line-height: 1.35; margin: 0 0 12px; }
.ras .news-card__title a { text-decoration: none; display: inline; }
.ras .news-card__title a:hover { text-decoration: underline; }
.ras .news-card p { color: var(--ras-text-muted); font-size: 1.0625rem; margin-bottom: 16px; }
.ras .news-card .link-arrow { margin-top: auto; }
@media (min-width: 1200px) { .ras .news-card__title { font-size: 1.5rem; } }

/* Lista de noticias en retícula ABA: fecha | contenido | enlace */
.ras .news-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ras-line-strong); }
.ras .news-row { display: grid; gap: 8px; padding-block: 32px; border-bottom: 1px solid var(--ras-line-strong); }
.ras .news-row__meta { font-weight: 400; font-size: 1rem; color: var(--ras-text-subtle); }
.ras .news-row__meta time { display: block; color: var(--ras-text); }
.ras .news-row h3 { font-weight: 400; font-size: 1.375rem; line-height: 1.35; margin: 0 0 8px; }
.ras .news-row p { color: var(--ras-text-muted); margin: 0; }
@media (min-width: 992px) {
  .ras .news-row { grid-template-columns: 22.5fr 55fr 22.5fr; gap: 0; align-items: start; padding-block: 40px; }
  .ras .news-row__body { padding-right: 48px; }
  .ras .news-row__action { justify-self: end; }
  .ras .news-row h3 { font-size: 1.5rem; }
}

/* Noticia destacada */
/* Sin keyline superior (2026-10-20): ya no hay nada encima que separar (se retiró el aviso de borrador) */
.ras .featured { border-top: 0; padding-top: 0; }
.ras .featured h2 { max-width: 20em; }
.ras .featured .lead { color: var(--ras-text-muted); max-width: 32em; }
.ras .featured .btn { margin-top: 16px; }

.ras .tag { display: inline-flex; align-items: center; font-weight: 400; font-size: 0.875rem; line-height: 1.4; padding: 4px 12px; border: 1px solid var(--ras-grey-500); border-radius: 999px; color: var(--ras-text-muted); background: #FFFFFF; }
.ras .note { font-size: 1rem; color: var(--ras-text-muted); padding: 12px 16px; background: var(--ras-grey-100); border-left: var(--ras-keyline-3) solid var(--ras-status-yellow); margin: 0 0 40px; }

/* ---------- Bloque con degradado suave de blanco a neutro cálido ------------ */
.ras .split-band { background: var(--ras-gradient-soft); }
.ras .split-band p { color: var(--ras-text-muted); }

/* ---------- Ventajas de registrarse --------------------------------------- */
.ras .benefits { list-style: none; margin: 0 0 40px; padding: 0; display: grid; gap: 24px 0; grid-template-columns: 1fr; }
.ras .benefits li { font-weight: 400; font-size: 1.125rem; line-height: 1.45; }
/* Icono oficial de Roche (bitono azul, sin recolorear ni fondo), encima de la línea */
.ras .benefits__icon { display: block; width: 48px; height: 48px; margin-bottom: 16px; }
.ras .benefits__text { display: block; padding: 20px 0; border-top: 1px solid var(--ras-line-strong); }
@media (min-width: 768px) { .ras .benefits { grid-template-columns: repeat(2, 1fr); column-gap: 48px; } }
@media (min-width: 1200px) { .ras .benefits { grid-template-columns: repeat(4, 1fr); } .ras .benefits li { font-size: 1.25rem; } .ras .benefits__text { padding-top: 24px; } }

/* ---------- Pestañas (instrumentación) ------------------------------------ */
.ras .tabs-roche { display: flex; flex-wrap: wrap; gap: 0 32px; margin: 0 0 40px; padding: 0; list-style: none; border-bottom: 1px solid var(--ras-line-strong); }
.ras .tabs-roche .nav-link { background: none; border: 0; border-bottom: 2px solid transparent; border-radius: 0; margin-bottom: -1px; padding: 0 0 2px; min-height: 52px; font-family: inherit; font-weight: 400; font-size: 1.0625rem; color: var(--ras-text-muted); cursor: pointer; transition: color var(--ras-ease), border-color var(--ras-ease); }
.ras .tabs-roche .nav-link:hover { color: var(--ras-action); border-bottom-color: var(--ras-line-strong); }
.ras .tabs-roche .nav-link.active { color: var(--ras-text); border-bottom-color: var(--ras-action); }
.ras .product { display: grid; gap: 32px; align-items: start; }
/* Fotos de producto con fondo blanco: caja blanca con filete, sin fundir ni filtrar la imagen */
.ras .product__media { background: #FFFFFF; border: 1px solid var(--ras-line); display: flex; align-items: center; justify-content: center; padding: 32px; aspect-ratio: 4 / 3; }
.ras .product__media img { max-width: 100%; max-height: 100%; width: auto; height: auto; }
.ras .product__text p { color: var(--ras-text-muted); }
.ras .product__text ul { color: var(--ras-text-muted); padding-left: 1.2em; }
.ras .product__text li { margin-bottom: 0.35em; }
.ras .product__note { font-weight: 400; color: var(--ras-text); }
@media (min-width: 992px) { .ras .product { grid-template-columns: 55fr 45fr; gap: 0; } .ras .product__text { padding-right: 64px; } }

.ras .two-col { display: grid; gap: 32px; }
@media (min-width: 992px) { .ras .two-col { grid-template-columns: 1fr 1fr; gap: 64px; } }
.ras .two-col p { color: var(--ras-text-muted); margin: 0; }

/* ---------- Acordeón (archivo de noticias) -------------------------------- */
.ras .accordion-item { border: 0; border-bottom: 1px solid var(--ras-line-strong); border-radius: 0; background: transparent; }
.ras .accordion-item:first-child { border-top: 1px solid var(--ras-line-strong); }
.ras .accordion-button { font-family: inherit; font-weight: 400; font-size: 1.25rem; color: var(--ras-text); background: transparent; padding: 20px 0; min-height: 64px; border-radius: 0 !important; box-shadow: none; gap: 16px; }
.ras .accordion-button:not(.collapsed) { color: var(--ras-text); background: transparent; box-shadow: none; }
.ras .accordion-button:focus { box-shadow: none; border-color: transparent; }
.ras .accordion-body { padding: 8px 0 32px; color: var(--ras-text-muted); max-width: 44em; }
.ras .table-roche { width: 100%; font-size: 1rem; margin: 16px 0; border-collapse: collapse; }
.ras .table-roche th { font-weight: 400; color: var(--ras-text); text-align: left; padding: 10px 16px 10px 0; border-bottom: 1px solid var(--ras-grey-600); }
.ras .table-roche td { padding: 10px 16px 10px 0; border-bottom: 1px solid var(--ras-line); font-variant-numeric: tabular-nums; }

/* ---------- Pie ----------------------------------------------------------- */
.ras .site-footer { background: var(--ras-gradient-warm); border-top: var(--ras-keyline-1) solid var(--ras-line-strong); font-size: 1rem; color: var(--ras-text-muted); }
.ras .site-footer__top { display: grid; gap: 32px; padding-block: 56px 40px; }
.ras .site-footer h2 { font-weight: 400; font-size: 1rem; color: var(--ras-text-subtle); margin: 0 0 8px; }
.ras .site-footer ul { list-style: none; margin: 0; padding: 0; }
.ras .site-footer a { color: var(--ras-text); text-decoration: none; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; }
.ras .site-footer a:hover { color: var(--ras-action); text-decoration: underline; }
.ras .footer-quick a { width: 100%; justify-content: space-between; font-weight: 400; font-size: 1.125rem; border-bottom: 1px solid var(--ras-grey-400); min-height: 56px; }
.ras .site-footer__bottom { border-top: 1px solid var(--ras-line-strong); padding-block: 24px 48px; display: grid; gap: 16px; }
.ras .footer-legal { display: flex; flex-wrap: wrap; gap: 0 32px; }
.ras .site-footer__disclaimer { font-size: 0.875rem; line-height: 1.55; max-width: 68em; margin: 0; }
@media (min-width: 768px) { .ras .site-footer__top { grid-template-columns: 1fr 1fr; } }
@media (min-width: 992px) {
  .ras .site-footer__top { grid-template-columns: 22.5fr 22.5fr 55fr; gap: 0; }
  .ras .site-footer__top > * { padding-right: 48px; }
}

/* ---------- Movimiento reducido ------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .ras *, .ras *::before, .ras *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* ==========================================================================
   Componentes del resto de páginas públicas
   ========================================================================== */

/* ---------- Franja de aviso bajo el staging ------------------------------- */
.ras .band { background: var(--ras-grey-100); border-bottom: 1px solid var(--ras-line); padding-block: 20px; font-size: 1.0625rem; color: var(--ras-text-muted); }
.ras .band p { margin: 0; }

/* ---------- Filtros y tabla de productos (LightMix) ------------------------ */
.ras .toolbar { display: grid; gap: 20px; margin-bottom: 24px; align-items: end; }
@media (min-width: 992px) { .ras .toolbar { grid-template-columns: 1fr 360px; } }
.ras .choice-group { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 32px; }
.ras .choice-group legend { float: none; width: auto; font-weight: 400; font-size: 1rem; color: var(--ras-text-subtle); margin-bottom: 4px; padding: 0; }
.ras .choice { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-size: 1.0625rem; cursor: pointer; }
.ras .choice input, .ras .check input { width: 22px; height: 22px; flex: none; margin: 0; accent-color: var(--ras-blue-600); cursor: pointer; }
.ras .check { display: flex; align-items: flex-start; gap: 12px; min-height: 44px; padding-block: 8px; font-size: 1.0625rem; line-height: 1.45; cursor: pointer; }
.ras .check input { margin-top: 2px; }

.ras .table-wrap { overflow-x: auto; }
.ras .table-products { width: 100%; border-collapse: collapse; font-size: 1.0625rem; min-width: 560px; }
.ras .table-products caption { caption-side: top; text-align: left; font-size: 1rem; color: var(--ras-text-subtle); padding: 0 0 12px; }
.ras .table-products th { font-weight: 400; font-size: 1rem; color: var(--ras-text-subtle); text-align: left; padding: 12px 24px 12px 0; border-bottom: 1px solid var(--ras-grey-600); white-space: nowrap; }
.ras .table-products td { padding: 14px 24px 14px 0; border-bottom: 1px solid var(--ras-line); vertical-align: middle; color: var(--ras-text); }
.ras .table-products td.ref { font-variant-numeric: tabular-nums; color: var(--ras-text-muted); white-space: nowrap; }
.ras .table-products tbody tr { transition: background-color var(--ras-ease); }
.ras .table-products tbody tr:hover { background: var(--ras-grey-50); }
.ras .table-products .link-arrow { min-height: 44px; white-space: nowrap; }
.ras .empty { padding: 32px 0; color: var(--ras-text-muted); }
.ras .accordion-button .count { margin-left: auto; font-size: 1rem; color: var(--ras-text-subtle); font-weight: 300; }
.ras .accordion-button::after { margin-left: auto; }
.ras .accordion-button > span:first-child { padding-right: 24px; }
.ras .accordion-button .count + * { margin-left: 0; }
.ras .accordion--products .accordion-body { max-width: none; padding-top: 0; }
.ras .tab-intro { color: var(--ras-text-muted); max-width: 46em; margin-bottom: 40px; }

/* ---------- Contacto ------------------------------------------------------ */
.ras .contact-grid { display: grid; gap: 0; border-top: 1px solid var(--ras-line-strong); }
.ras .contact-item { padding: 32px 0; border-bottom: 1px solid var(--ras-line-strong); }
.ras .contact-item h2 { font-weight: 400; font-size: 1rem; line-height: 1.5; color: var(--ras-text-subtle); margin: 0 0 8px; }
.ras .contact-item p { margin: 0; font-size: 1.25rem; line-height: 1.5; }
.ras .contact-item a.tel { font-weight: 300; font-size: 1.75rem; line-height: 1.3; text-decoration: none; color: var(--ras-text); display: inline-flex; min-height: 44px; align-items: center; }
.ras .contact-item a.tel:hover { color: var(--ras-action); text-decoration: underline; }
@media (min-width: 992px) {
  .ras .contact-grid { grid-template-columns: 45fr 27.5fr 27.5fr; border-bottom: 1px solid var(--ras-line-strong); }
  .ras .contact-item { padding: 40px 48px 40px 0; border-bottom: 0; }
  .ras .contact-item a.tel { font-size: 2rem; }
}

/* Navegación contextual: degradado partido + tarjetas (guía: "Contextual Navigation") */
.ras .discover { display: grid; gap: 32px; }
.ras .discover__list { list-style: none; margin: 0; padding: 0; }
.ras .discover__list li { border-bottom: 1px solid var(--ras-line-strong); }
.ras .discover__list a { display: grid; grid-template-columns: 1fr auto; gap: 4px 24px; padding: 24px 0; text-decoration: none; color: var(--ras-text); }
.ras .discover__list .t { font-weight: 400; font-size: 1.375rem; line-height: 1.35; }
.ras .discover__list .d { grid-column: 1; color: var(--ras-text-muted); font-size: 1.0625rem; }
.ras .discover__list .ico { grid-row: 1; grid-column: 2; align-self: center; color: var(--ras-action); transition: transform var(--ras-ease); }
.ras .discover__list a:hover .t { color: var(--ras-action); }
.ras .discover__list a:hover .ico { transform: translateX(4px); }
@media (min-width: 992px) { .ras .discover { grid-template-columns: 45fr 55fr; gap: 0; } }

/* ---------- Registro ------------------------------------------------------ */
.ras .form-wide { max-width: 960px; }
.ras .form-intro { max-width: 40em; }
.ras .required-note { font-size: 1rem; color: var(--ras-text-muted); }
.ras .req { color: var(--ras-status-red); font-weight: 400; margin-left: 2px; }
.ras .fieldset { border: 0; margin: 0 0 56px; padding: 0; min-width: 0; }
.ras .fieldset legend { float: none; width: 100%; font-weight: 300; font-size: 1.75rem; line-height: 1.3; padding: 0 0 12px; margin: 0 0 28px; border-bottom: var(--ras-keyline-2) solid var(--ras-action); }
@media (min-width: 1200px) { .ras .fieldset legend { font-size: 1.875rem; } }
.ras .form-grid { display: grid; gap: 0 32px; grid-template-columns: 1fr; }
@media (min-width: 768px) { .ras .form-grid { grid-template-columns: 1fr 1fr; } .ras .form-grid .full { grid-column: 1 / -1; } }
.ras .form-select { font-family: inherit; font-weight: 300; font-size: 1.125rem; min-height: 48px; padding: 10px 44px 10px 14px; color: var(--ras-text); border: 1px solid var(--ras-grey-600); border-radius: 2px; background-color: #FFFFFF; transition: border-color var(--ras-ease); }
.ras .form-select:hover { border-color: var(--ras-grey-900); }
.ras .form-select:focus { border-color: var(--ras-action); box-shadow: none; outline: 3px solid var(--ras-focus); outline-offset: 2px; }
.ras .form-select:disabled { background-color: var(--ras-grey-100); border-color: var(--ras-grey-400); color: var(--ras-text-subtle); cursor: not-allowed; }
.ras .interest-row { display: grid; gap: 4px 32px; align-items: center; }
@media (min-width: 768px) { .ras .interest-row { grid-template-columns: 1fr 1fr; } }
.ras .privacy-box { font-size: 1rem; line-height: 1.55; color: var(--ras-text-muted); background: var(--ras-grey-100); padding: 20px 24px; margin: 0 0 24px; }
.ras .form-actions { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 32px; }

.ras .site-utilities a[aria-current="page"] { color: var(--ras-text); font-weight: 400; }

/* Tabla de productos en móvil: cada producto se apila, sin desplazamiento horizontal */
@media (max-width: 575.98px) {
  .ras .table-wrap { overflow-x: visible; }
  .ras .table-products { min-width: 0; }
  .ras .table-products thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .ras .table-products tr { display: block; padding: 16px 0; border-bottom: 1px solid var(--ras-line); }
  .ras .table-products td { display: block; padding: 2px 0; border: 0; }
  .ras .table-products td:first-child { font-weight: 400; }
  .ras .table-products td[data-label]::before { content: attr(data-label) ": "; color: var(--ras-text-subtle); }
}
.ras .tabs-roche.nav { flex-wrap: wrap; }

/* ==========================================================================
   Cabecera de la home: texto (45 %) y fotografía (55 %) dentro del ancho de
   contenido (.wrap), sobre una banda gris a todo lo ancho que envuelve la foto.
   El texto va al lado de la foto, nunca encima (la guía no admite color ni
   gráficos sobre fotografías).
   ========================================================================== */
.ras .hero-photo { background: var(--ras-grey-100); color: var(--ras-text); padding-block: var(--ras-gutter) 0; border-bottom: 1px solid var(--ras-line); }
.ras .hero-photo__inner { display: grid; }
.ras .hero-photo__media { order: -1; aspect-ratio: 16 / 9; overflow: hidden; background: var(--ras-grey-200); }
.ras .hero-photo__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; display: block; }
.ras .hero-photo__card { padding: 32px 0 48px; }
.ras .hero-photo__card h1 { color: inherit; margin: 0 0 24px; }
.ras .hero-photo__card p { color: inherit; }
.ras .hero-photo__card > :last-child { margin-bottom: 0; }
@media (min-width: 992px) {
  .ras .hero-photo { padding-block: 48px; }
  .ras .hero-photo__inner { grid-template-columns: 45fr 55fr; align-items: center; }
  .ras .hero-photo__media { order: 0; aspect-ratio: 3 / 2; }
  .ras .hero-photo__card { padding: 16px 64px 16px 0; }
}

/* ==========================================================================
   Piezas propias de roche-as.es (no estaban en el esbozo)
   ========================================================================== */
.ras { background: #FFFFFF; }
.ras main { display: block; }

/* Variante Biotest de la cabecera: rótulo y logo del distribuidor en lugar del logo Roche */
.ras .biotest-header__inner { grid-area: logo; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 32px; padding-block: 8px; }
.ras .biotest-header__title { margin: 0; font-weight: 300; font-size: 1.5rem; line-height: 1.3; color: var(--ras-text); }
.ras .biotest-header__logo { width: auto; height: 56px; display: block; }
@media (min-width: 1200px) { .ras .biotest-header__title { font-size: 1.875rem; } }
.ras .btn_brown_normal, .ras .btn_brown_normal:focus { background-color: #ad6e03; border-color: #ad6e03; color: #FFFFFF; }
.ras .btn_brown_normal:hover, .ras .btn_brown_normal:active { background-color: #7a4d02; border-color: #7a4d02; color: #FFFFFF; }

/* Mensajes del servidor: error de acceso y aviso de éxito (color de estado + texto) */
.ras .msg { margin: 0 0 24px; padding: 14px 18px; font-size: 1rem; line-height: 1.5; color: var(--ras-text); background: #FFFFFF; border-left: var(--ras-keyline-3) solid var(--ras-grey-600); }
.ras .msg--error { border-left-color: var(--ras-status-red); }
.ras .msg--ok { border-left-color: var(--ras-status-green); }
.ras .msg strong { font-weight: 500; }
.ras .msg ul { margin: 6px 0 0; padding-left: 1.2em; }
.ras .msg-band { padding-block: 24px 0; }
.ras .field__error { display: block; margin-top: 6px; font-size: 1rem; font-weight: 400; color: var(--ras-status-red); }
.ras .card-grid--spaced { margin-top: 72px; }
.ras .benefits-title { margin-bottom: 40px; }

/* El login conserva sus ids (#login, #password_home); addmira.css les deja solo un filete azul inferior */
.ras #loginForm .form-control { border: 1px solid var(--ras-grey-600); border-radius: 2px; background: #FFFFFF; font-size: 1.125rem; color: var(--ras-text); outline: 0; }
.ras #loginForm .form-control:hover { border-color: var(--ras-grey-900); }
.ras #loginForm .form-control:focus { border-color: var(--ras-action); outline: 3px solid var(--ras-focus); outline-offset: 2px; }

/* Utilidades de la cabecera en una sola línea cada una */
.ras .site-utilities a { white-space: nowrap; }
/* Cabecera Biotest: rótulo y logo en la primera fila; utilidades debajo, a la derecha */
.ras .site-header--biotest .biotest-header__inner { justify-content: space-between; width: 100%; }
@media (min-width: 992px) {
  .ras .site-header--biotest .site-header__inner { grid-template-areas: "logo logo" "nav utilities"; padding-bottom: 12px; row-gap: 8px; }
}
.ras .section--notop { padding-top: 0; }
.ras .section-title { margin-bottom: 24px; }
.ras .product__text ul { margin-bottom: 1em; }

/* ---------- LightMix: ajustes sobre DataTables y addmira.css ------------- */
/* addmira.css pinta la cabecera de las tablas DataTables de gris (table.dataTable > thead) */
.ras table.dataTable > thead { background: transparent; }
.ras table.dataTable { margin-top: 0 !important; }
/* Marca *CC junto al enlace del protocolo */
.ras .tag--cc { margin-left: 12px; vertical-align: middle; }
/* Microbiología: subcategorías dentro de la categoría, con sangría y un paso menos de tamaño */
.ras .accordion--nested { margin-left: 24px; }
.ras .accordion--nested .accordion-button { font-size: 1.125rem; min-height: 56px; padding-block: 16px; }
/* dataTables.bootstrap.css centra el contenido en móvil */
.ras div.dataTables_wrapper > div.row > div { text-align: left; }
/* Sin referencia: en móvil no se muestra la etiqueta «Referencia:» vacía */
@media (max-width: 767.98px) {
  .ras .accordion--nested { margin-left: 16px; }
  .ras .tag--cc { margin-left: 8px; }
  .ras .table-products td.ref:empty { display: none; }
}
/* Las cabeceras de acordeón son h2/h3 por jerarquía: sin el margen inferior de los titulares */
.ras .accordion-header { margin: 0; }
.ras .table-products .link-arrow { vertical-align: middle; }

/* ---------- Contacto (versión v5 aprobada el 2026-10-20) ------------------
   Iconos de la biblioteca oficial de Roche (images/ras/icons), bitono azul, sin recolorear
   ni fondo, a 48 px. */

/* Dirección destacada sobre Neutral 4 y los dos teléfonos principales en filas */
.ras .contact-split { display: grid; gap: 32px; }
.ras .contact-place { background: var(--ras-neutral-4); padding: 32px 24px; }
.ras .contact-place__icon { display: block; width: 48px; height: 48px; margin-bottom: 24px; }
.ras .contact-place h2,
.ras .contact-rows h2 { font-weight: 400; font-size: 1.125rem; line-height: 1.4; color: var(--ras-text-subtle); margin: 0 0 8px; }
.ras .contact-place p { margin: 0; font-weight: 300; font-size: 1.25rem; line-height: 1.5; color: var(--ras-text); }
.ras .contact-rows { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ras-line-strong); }
/* el icono ocupa la fila del título y queda centrado con él; el teléfono va debajo, alineado con el título */
.ras .contact-rows li { display: grid; grid-template-columns: 48px 1fr; grid-template-rows: auto auto; column-gap: 20px; align-items: center; padding: 28px 0; border-bottom: 1px solid var(--ras-line-strong); }
.ras .contact-rows__icon { grid-column: 1; grid-row: 1; width: 48px; height: 48px; }
.ras .contact-rows li h2 { grid-column: 2; grid-row: 1; margin: 0; }
.ras .contact-rows li > .contact-rows__datos { grid-column: 2; grid-row: 2; }
.ras .contact-rows a.tel { font-weight: 300; font-size: 1.75rem; line-height: 1.25; color: var(--ras-text); text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; }
.ras .contact-rows a.tel:hover { color: var(--ras-action); text-decoration: underline; }
.ras .contact-rows__datos p { margin: 8px 0 0; font-size: 1.0625rem; line-height: 1.5; }
.ras .contact-rows__nota { color: var(--ras-text-subtle); }

/* Otros contactos: rejilla de bloques con el icono alineado con el título */
.ras .contact-cards__titulo { margin-bottom: 32px; }
.ras .contact-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); column-gap: 48px; }
.ras .contact-card { display: grid; grid-template-columns: 48px 1fr; grid-template-rows: auto auto; column-gap: 20px; align-items: center; align-content: start; padding: 28px 0 32px; border-top: 1px solid var(--ras-line-strong); }
.ras .contact-card__icon { grid-column: 1; grid-row: 1; width: 48px; height: 48px; }
.ras .contact-card h3 { grid-column: 2; grid-row: 1; margin: 0; font-weight: 400; font-size: 1.25rem; line-height: 1.35; color: var(--ras-text); }
.ras .contact-card__cuerpo { grid-column: 2; grid-row: 2; padding-top: 8px; }
.ras .contact-card__cuerpo p { margin: 0 0 8px; font-size: 1.0625rem; line-height: 1.5; color: var(--ras-text-muted); }
.ras .contact-card__datos { list-style: none; margin: 0; padding: 0; font-size: 1.0625rem; line-height: 1.5; }
.ras .contact-card__datos li { display: grid; grid-template-columns: 5.5em minmax(0, 1fr); gap: 12px; padding: 4px 0; }
.ras .contact-card__et { color: var(--ras-text-subtle); }
.ras .contact-card__v { color: var(--ras-text); overflow-wrap: break-word; }
.ras .contact-card__v a { display: inline-flex; align-items: center; min-height: 32px; }
@media (max-width: 575.98px) { .ras .contact-card__datos li { grid-template-columns: 1fr; gap: 0; padding: 6px 0; } }
@media (min-width: 992px) {
  .ras .contact-split { grid-template-columns: 45fr 55fr; gap: 0; align-items: center; }
  .ras .contact-place { padding: 48px; }
  .ras .contact-place p { font-size: 1.625rem; }
  .ras .contact-rows li { padding: 32px 0; column-gap: 24px; }
  .ras .contact-rows a.tel { font-size: 2.5rem; }
  /* dos columnas solo cuando caben los correos largos al lado de su etiqueta */
  .ras .contact-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* mismo reparto que «Otros contactos» para que las líneas de las dos zonas empiecen y acaben en el mismo sitio */
  .ras .contact-split--arriba { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 48px; align-items: start; }
}

/* Accesos con icono en tarjetas blancas sobre gris (Ayuda, Registro) */
.ras .accesos__titulo { margin-bottom: 32px; }
.ras .accesos { list-style: none; margin: 0; padding: 0; display: grid; gap: 24px; }
.ras .acceso { display: grid; grid-template-columns: 1fr auto; gap: 8px 24px; height: 100%; padding: 32px; background: #FFFFFF; color: var(--ras-text); text-decoration: none; border-bottom: 2px solid transparent; transition: border-color var(--ras-ease); }
.ras .acceso__icono { grid-column: 1 / -1; width: 48px; height: 48px; margin-bottom: 16px; }
.ras .acceso__t { font-weight: 400; font-size: 1.375rem; line-height: 1.35; }
.ras .acceso .ico { grid-column: 2; grid-row: 2; align-self: center; color: var(--ras-action); transition: transform var(--ras-ease); }
.ras .acceso__d { grid-column: 1 / -1; color: var(--ras-text-muted); font-size: 1.0625rem; }
.ras .acceso:hover { border-bottom-color: var(--ras-action); }
.ras .acceso:hover .acceso__t { color: var(--ras-action); }
.ras .acceso:hover .ico { transform: translateX(4px); }
.ras .acceso:focus-visible { outline: 3px solid var(--ras-focus); outline-offset: 2px; }
@media (min-width: 768px) { .ras .accesos { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1200px) { .ras .accesos { grid-template-columns: repeat(2, minmax(0, 27.5%)); } }

/* Alineación óptica de los iconos oficiales con el texto: el dibujo no llega al borde de su
   caja (margen interior propio de cada icono, medido a 48 px). Se compensa con margen
   negativo; el fichero del icono no se modifica. */
.ras .icono-optico-2 { margin-left: -2px; }
.ras .icono-optico-5 { margin-left: -5px; }
.ras .icono-optico-8 { margin-left: -8px; }
.ras .icono-optico-9 { margin-left: -9px; }

/* ---------- Ayuda ---------------------------------------------------------- */
.ras .accordion--faq { max-width: 960px; }

/* ---------- Noticias -------------------------------------------------------- */
.ras .news-list__titulo { margin-bottom: 32px; }
.ras .news-row__tipo { display: block; color: var(--ras-text); }

/* ---------- Recuperar contraseña ------------------------------------------ */
.ras .form-corto { max-width: 560px; }
.ras .form-corto .form-control { width: 100%; }
.ras .form-corto__acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 32px; margin-top: 8px; }

/* ---------- Ventana de aviso del formulario (.dgcAlert) ---------------------
   La crea js/addmira_home.js (sustituye a window.alert) y la añade al final del body, fuera de .ras,
   por eso estas reglas no llevan el prefijo .ras. Solo se aplican en las páginas con master_ras.
   Mismo aspecto que los avisos de error de la web (blanco, línea roja a la izquierda). No se toca su JS:
   la posición (top) y la animación las sigue calculando el script. */
.dgcAlert { background: rgba(33, 32, 31, 0.55); font-family: "Roche Sans", "Noto Sans", Arial, sans-serif; text-align: left; }
.dgcAlert .dgcVentana { width: calc(100% - 32px); max-width: 560px; min-height: 0; padding: 32px 32px 28px; border-radius: 0; border-left: var(--ras-keyline-3) solid var(--ras-status-red); color: var(--ras-text); box-shadow: 0 8px 32px rgba(33, 32, 31, 0.24); }
.dgcAlert .dgcVentana .dgcCerrar { position: absolute; top: 8px; right: 8px; float: none; width: 44px; height: 44px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 6l12 12M18 6L6 18' fill='none' stroke='%2321201F' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / 24px 24px; }
.dgcAlert .dgcVentana .dgcMensaje { width: auto; margin: 0; padding: 0 32px 0 0; text-align: left; font-size: 1.0625rem; font-weight: 300; line-height: 1.5; }
.dgcAlert .dgcVentana .dgcMensaje h1 { margin: 0 0 8px; font-family: inherit; font-size: 1.5rem; font-weight: 400; line-height: 1.3; color: var(--ras-text); }
.dgcAlert .dgcVentana .dgcMensaje p { margin: 0 0 8px; }
.dgcAlert .dgcVentana .dgcMensaje > ul { margin: 0 0 16px; padding-left: 1.2em; }
.dgcAlert .dgcVentana .dgcAceptar { display: inline-flex; align-items: center; width: auto; height: auto; min-height: 44px; margin: 8px 0 0; padding: 10px 24px; border: 0; border-radius: 2px; background: var(--ras-blue-600); color: #FFFFFF; font-size: 1rem; font-weight: 500 !important; line-height: 1.2; text-transform: none; }
.dgcAlert .dgcVentana .dgcAceptar:hover { background: var(--ras-blue-900); }
@media (max-width: 575.98px) { .dgcAlert .dgcVentana { padding: 28px 20px 24px; } }

/* ---------- Registro ------------------------------------------------------- */
.ras .form-wide .required-note { margin-bottom: 48px; }
/* Las casillas de áreas llevan .form-check-input (Bootstrap, borde muy claro): mismo aspecto que las demás */
.ras .check .form-check-input { width: 22px; height: 22px; margin: 2px 0 0; flex: none; float: none; border: 1px solid var(--ras-grey-600); border-radius: 2px; cursor: pointer; }
.ras .check .form-check-input:checked { background-color: var(--ras-blue-600); border-color: var(--ras-blue-600); }
.ras .check .form-check-input:focus { box-shadow: none; outline: 3px solid var(--ras-focus); outline-offset: 2px; }

/* ---------- Páginas legales (Aviso legal, Privacidad, Cookies) -------------- */
/* Índice «En esta página» en la cabecera */
.ras .toc__titulo { font-weight: 400; font-size: 1rem; color: var(--ras-text-subtle); margin: 0 0 8px; }
.ras .toc__lista { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ras-line-strong); }
.ras .toc__lista li { border-bottom: 1px solid var(--ras-line); }
.ras .toc__lista a { display: flex; align-items: center; min-height: 40px; padding: 6px 0; font-size: 1rem; line-height: 1.35; color: var(--ras-text); text-decoration: none; }
.ras .toc__lista a:hover { color: var(--ras-action); text-decoration: underline; }
/* Texto legal: una columna de lectura, alineado a la izquierda */
.ras .legal { max-width: 46em; }
.ras .legal h2 { font-weight: 400; font-size: 1.5rem; line-height: 1.3; margin: 56px 0 16px; scroll-margin-top: 24px; }
.ras .legal > h2:first-child { margin-top: 0; }
.ras .legal p { margin: 0 0 1em; color: var(--ras-text); }
.ras .legal ul, .ras .legal ol { margin: 0 0 1.25em; padding-left: 1.4em; }
.ras .legal ol[type="a"] { list-style-type: lower-alpha; }
.ras .legal li { margin-bottom: 0.75em; }
.ras .legal li > p { margin: 0.25em 0 0; }
.ras .legal a { overflow-wrap: anywhere; }
@media (min-width: 1200px) { .ras .legal h2 { font-size: 1.875rem; } }
/* Lista cuyos puntos ya llevan su letra, (a), (b)…: sin viñeta para no duplicar la marca */
.ras .legal .lista-letras { list-style: none; padding-left: 0; }

/* Home, Instrumentación: fotos reales de producto con fondo blanco (2026-10-22).
   Recuadro blanco con línea fina para que no se vea el rectángulo blanco de la foto sobre el gris. */
.ras .hero-card__media--blanco { background: #FFFFFF; border: 1px solid var(--ras-line); }

/* Instrumentación (2026-10-28): lista de enlaces de una ficha sin viñetas ni sangría. */
.ras .product__text .product__links { list-style: none; padding-left: 0; margin: 0; }
.ras .product__text .product__links li { margin-bottom: 0; }
.ras .section-title { scroll-margin-top: 24px; }