:root {
   /* Colores oficiales del logo */
   --brand: #109DEC;
   --brand-soft: #67BED9;

   /* Escala derivada del mismo tono (H 201°) para texto, fondos y acciones */
   --navy: #0D5177;
   --navy-ink: #072C41;
   --navy-mid: #0F78B3;
   --navy-pale: #E7F2F9;
   --brand-deep: #0E72AA;
   --brand-pale: #E1F1F8;
   --brand-light: #67BED9;
   --brand-light-pale: #E8F5FA;
   --paper: #F4F8FB;
   --white: #FFFFFF;
   --ink: #16232B;
   --ink-muted: #55636B;
   --line: #DCE7EF;
   --line-cool: #D2E5F0;

   --font-display: "Space Grotesk", "Segoe UI", sans-serif;
   --font-serif: "Fraunces", "Georgia", serif;
   --font-body: "Inter", "Segoe UI", sans-serif;
   --font-mono: "IBM Plex Mono", monospace;

   --radius: 14px;
   --radius-sm: 10px;
   --shadow: 0 12px 30px -18px rgba(8, 32, 51, 0.35);
   --shadow-lg: 0 20px 45px -20px rgba(8, 32, 51, 0.45);
}

* {
   box-sizing: border-box;
}

html {
   scroll-behavior: smooth;
}

/* El encabezado es fijo: los destinos de ancla no deben quedar debajo de él */
:target,
#vision,
#mision,
#valores,
#organigrama,
#oncologia,
#antiemeticos,
#suplementos,
#preguntas {
   scroll-margin-top: 96px;
}

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

   * {
      animation: none !important;
      transition: none !important;
   }
}

body {
   margin: 0;
   font-family: var(--font-body);
   color: var(--ink);
   background: var(--paper);
   line-height: 1.6;
   -webkit-font-smoothing: antialiased;
   overflow-x: hidden;
}

img {
   max-width: 100%;
   display: block;
}

h1,
h2,
h3 {
   font-family: var(--font-display);
   color: var(--navy);
   line-height: 1.15;
   margin: 0 0 .5em;
}

h1 {
   font-size: clamp(2rem, 3.6vw + 1rem, 2.9rem);
   font-weight: 700;
}

h2 {
   font-size: clamp(1.5rem, 1.8vw + 1rem, 2.1rem);
   font-weight: 600;
}

h3 {
   font-size: 1.05rem;
   font-weight: 600;
}

p {
   margin: 0 0 1em;
   color: var(--ink-muted);
}

a {
   color: var(--navy-mid);
}

:focus-visible {
   outline: 2.5px solid var(--brand);
   outline-offset: 3px;
}

.wrap {
   max-width: 1180px;
   margin: 0 auto;
   padding: 0 22px;
}

.wrap--narrow {
   max-width: 780px;
}

.skip-link {
   position: absolute;
   left: -999px;
   top: 0;
   background: var(--navy);
   color: #fff;
   padding: 10px 16px;
   z-index: 999;
   border-radius: 0 0 8px 0;
}

.skip-link:focus {
   left: 0;
}

/* ===== Encabezado ===== */
.site-header {
   position: fixed;
   top: 14px;
   left: 0;
   right: 0;
   z-index: 60;
   background: transparent;
   border-bottom: none;
}

.site-header__inner {
   display: flex;
   align-items: center;
   justify-content: space-between;

   background: transparent;
   box-shadow: none;
   border: 1px solid transparent;
   padding: 0 30px;

   transition: background .35s ease,
               box-shadow .35s ease,
               border-color .35s ease,
               padding .35s ease,
               border-radius .35s ease;
}

.site-header {
   transition: top .25s ease;
}

.site-header.is-scrolled .site-header__inner {
   background: rgba(255, 255, 255, .9);
   backdrop-filter: blur(10px);
   -webkit-backdrop-filter: blur(10px);
   border-radius: 999px;
   box-shadow: 0 14px 34px -16px rgba(8, 32, 51, .35);
   border: 1px solid rgba(255, 255, 255, .7);
   padding: 8px 16px;
   margin: 5px auto;   /* antes: margin: 5px; */
}

.site-header.is-scrolled .nav {
   backdrop-filter: none;
   -webkit-backdrop-filter: none;
   border: none;
   box-shadow: none;
   padding: 0;
}

.site-header.is-scrolled .icon-btn {
   background: transparent;
   backdrop-filter: none;
   -webkit-backdrop-filter: none;
   box-shadow: none;
}

.brand {
   display: flex;
   align-items: center;
   flex: none;
}

.brand__logo {
   width: auto;
   height: 25px;
}

.nav {
   flex: none;
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 26px;

   background: rgba(255, 255, 255, .55);
   backdrop-filter: blur(14px);
   -webkit-backdrop-filter: blur(14px);
   border: 1px solid rgba(255, 255, 255, .6);
   border-radius: 999px;
   box-shadow: 0 14px 34px -16px rgba(8, 32, 51, .35);
   padding: 10px 26px;

   transition: background .35s ease,
               box-shadow .35s ease,
               border-color .35s ease,
               padding .35s ease,
               backdrop-filter .35s ease;
}

.nav a {
   color: var(--ink);
   text-decoration: none;
   font-size: .93rem;
   font-weight: 500;
   padding: 6px 2px;
   border-bottom: 2px solid transparent;
   white-space: nowrap;
}

.nav a:hover,
.nav a[aria-current="page"] {
   border-color: var(--brand-light);
   color: var(--navy);
}

.header-actions {
   display: flex;
   align-items: center;
   gap: 10px;
   flex: none;
}

.icon-btn {
   width: 38px;
   height: 38px;
   border-radius: 50%;
   border: 1.5px solid rgba(255, 255, 255, .6);
   background: rgba(255, 255, 255, .55);
   backdrop-filter: blur(14px);
   -webkit-backdrop-filter: blur(14px);
   display: flex;
   align-items: center;
   justify-content: center;
   flex: none;
   box-shadow: 0 14px 34px -16px rgba(8, 32, 51, .35);
   transition: border-color .35s ease,
               background .35s ease,
               box-shadow .35s ease,
               backdrop-filter .35s ease;
}

.icon-btn svg {
   width: 16px;
   height: 16px;
   fill: var(--navy);
}

.icon-btn:hover {
   border-color: var(--brand-deep);
   background: var(--brand-pale);
}

.nav-toggle {
   display: none;
   flex-direction: column;
   justify-content: center;
   gap: 5px;
   width: 40px;
   height: 40px;
   background: none;
   border: 1px solid rgba(255, 255, 255, 0%);
   border-radius: 8px;
   cursor: pointer;
   flex: none;
   transition: border-color .35s ease;
}

.nav-toggle span {
   height: 2px;
   background: #fff;
   margin: 0 8px;
   border-radius: 2px;
   transition: background .35s ease;
}

.site-header.is-scrolled .nav-toggle span {
   background: var(--navy);
}

/* ===== Botones ===== */
.btn {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 8px;
   padding: 12px 22px;
   border-radius: 999px;
   text-decoration: none;
   font-weight: 600;
   font-size: .95rem;
   border: 1.5px solid transparent;
   transition: transform .15s ease, background .15s ease, color .15s ease;
   cursor: pointer;
}

.btn--primary {
   background: var(--brand-deep);
   color: #fff;
}

.btn--primary:hover {
   background: #0B5C8B;
   transform: translateY(-1px);
}

.btn--ghost {
   background: transparent;
   border-color: var(--navy);
   color: var(--navy);
}

.btn--ghost:hover {
   background: var(--navy-pale);
}

.btn--light {
   border-color: rgba(255, 255, 255, .7);
   color: #fff;
}

.btn--light:hover {
   background: rgba(255, 255, 255, .12);
}

.btn--sm {
   padding: 9px 16px;
   font-size: .85rem;
}

.btn--block {
   width: 100%;
}

.ic--wa {
   width: 18px;
   height: 18px;
   fill: currentColor;
}

@media (max-width: 940px) {
   .nav-cta {
      display: none;
   }

   /* En móvil el teléfono es la acción más valiosa: el botón de llamar se queda. */
   .header-actions {
      display: flex;
   }

   .icon-btn {
      width: 44px;
      height: 44px;
   }

   .nav-toggle {
      width: 44px;
      height: 44px;
   }
}

/* ===== Utilidades tipográficas ===== */
.eyebrow {
   font-family: var(--font-mono);
   text-transform: uppercase;
   letter-spacing: .12em;
   font-size: .76rem;
   color: var(--brand-deep);
   font-weight: 500;
   margin-bottom: 8px;
}

.eyebrow--light {
   color: var(--brand-soft);
}

.section__lede {
   max-width: 620px;
}

/* ===== Secciones generales ===== */
.section {
   padding: 72px 0;
}

.section--tint {
   background: var(--white);
   border-top: 1px solid var(--line-cool);
   border-bottom: 1px solid var(--line-cool);
}

.section--split {
   display: grid;
   grid-template-columns: .9fr 1.1fr;
   gap: 54px;
   align-items: start;
}

@media (max-width: 860px) {
   .section--split {
      grid-template-columns: 1fr;
   }

   .section {
      padding: 52px 0;
   }
}

/* ===== Hero institucional (foto real + tarjeta de credenciales) ===== */
.hero {
   position: relative;
   padding: 96px 0 76px;
   overflow: hidden;
   color: #fff;
   background: var(--navy-ink);
   min-height: 50rem;
   display: flex;
   align-items: center;
}

.hero__bg {
   position: absolute;
   inset: 0;
   width: 100%;
   height: 100%;
   object-fit: cover;
   z-index: 0;
   object-position: 92%;
}

.hero__scrim {
   position: absolute;
   inset: 0;
   z-index: 1;
   background: linear-gradient(100deg, rgba(8, 32, 51, .96) 0%, rgba(8, 32, 51, .88) 10%, rgba(10, 61, 98, .6) 20%, rgba(10, 61, 98, .28) 70%);
}

.hero__inner {
   z-index: 2;
   position: relative;
   margin: 0;
}

@media (min-width: 1000px) {
   .hero__inner {
      padding-left: 4rem;
   }
}

.badge {
   display: inline-block;
   font-family: var(--font-mono);
   font-size: .74rem;
   letter-spacing: .06em;
   text-transform: uppercase;
   background: rgba(255, 255, 255, .08);
   border: 1px solid rgba(255, 255, 255, .35);
   color: #fff;
   padding: 6px 14px;
   border-radius: 999px;
   margin-bottom: 18px;
}

.hero h1 {
   color: #fff;
   font-size: clamp(1.5rem, 1.9vw + .8rem, 2.25rem);
   line-height: 1.22;
   max-width: 22ch;
}

/* Misma frase oficial, con el complemento en segundo plano tipográfico */
.hero__tail {
   display: block;
   margin-top: .35em;
   font-size: .58em;
   font-weight: 500;
   line-height: 1.35;
   color: #cfe4f2;
}

.hero__lede {
   font-size: 1.05rem;
   max-width: 48ch;
   color: #cfdfe8;
}

.hero__actions {
   display: flex;
   gap: 14px;
   flex-wrap: wrap;
   margin: 26px 0 6px;
}

/* Franja de credenciales — elemento firma, debajo del hero */
.credential-strip {
   background: var(--navy-ink);
   padding: 22px 0;
   overflow: hidden;
}

.credential-strip__inner {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 30px;
   flex-wrap: wrap;
}

.credential-strip__seal {
   flex: none;
   width: 52px;
   height: 52px;
   animation: sealBreathe 5.5s ease-in-out infinite;
   transform-origin: center;
}

.credential-strip__stats {
   margin: 0;
   flex: 0 1 auto;
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   gap: 0;
   min-width: 0;
}

.credential-strip__stat {
   padding: 0 28px;
   border-left: 1px solid rgba(255, 255, 255, .14);
   text-align: center;
   display: flex;
   align-items: baseline;
   gap: 6px;
   opacity: 0;
   transform: translateY(10px);
   animation: stripIn .6s ease forwards;
}

.credential-strip__stat:first-child {
   border-left: none;
   padding-left: 0;
}

.credential-strip__stat:nth-child(1) {
   animation-delay: .05s;
}

.credential-strip__stat:nth-child(2) {
   animation-delay: .18s;
}

.credential-strip__stat:nth-child(3) {
   animation-delay: .31s;
}

.credential-strip__stat:nth-child(4) {
   animation-delay: .44s;
}

.credential-strip__stat dt {
   text-transform: uppercase;
   letter-spacing: .08em;
   color: #8fadbc;
   margin-bottom: 0;
   font-size: 12px;
}

.credential-strip__stat dd {
   margin: 0;
   font-family: var(--font-serif);
   font-weight: 600;
   font-size: 1rem;
   color: #fff;
}

.credential-strip__stat dd.is-placeholder {
   font-family: var(--font-mono);
   font-size: .72rem;
   font-weight: 500;
   font-style: normal;
   color: var(--brand-light);
   background: rgba(103, 190, 217, .18);
   border: 1px solid rgba(103, 190, 217, .6);
   padding: 2px 9px;
   border-radius: 999px;
   display: inline-block;
}

@keyframes stripIn {
   to {
      opacity: 1;
      transform: translateY(0);
   }
}

@keyframes sealBreathe {

   0%,
   100% {
      transform: scale(1) rotate(0deg);
   }

   50% {
      transform: scale(1.07) rotate(3deg);
   }
}

/* Tarjeta de credenciales (reutilizada en nosotros.html vía .credentials-band) */
.credential-card {
   background: var(--paper);
   border-radius: var(--radius);
   padding: 26px 26px 22px;
   box-shadow: var(--shadow-lg);
   position: relative;
   transform: rotate(-1.2deg);
}

.credential-card__top {
   display: flex;
   align-items: flex-start;
   justify-content: space-between;
   gap: 14px;
   margin-bottom: 18px;
   padding-bottom: 16px;
   border-bottom: 1px dashed var(--line);
}

.credential-card__eyebrow {
   font-family: var(--font-mono);
   text-transform: uppercase;
   letter-spacing: .1em;
   font-size: .66rem;
   color: var(--ink-muted);
}

.credential-card__title {
   font-family: var(--font-serif);
   font-size: 1.05rem;
   font-weight: 600;
   color: var(--navy);
   margin-top: 2px;
}

.seal {
   flex: none;
   width: 62px;
   height: 62px;
   transform: rotate(8deg);
}

.seal circle.seal__ring {
   fill: none;
   stroke: var(--brand-light);
   stroke-width: 1.4;
}

.seal circle.seal__ring--dash {
   stroke-dasharray: 2.4 3;
}

.seal text {
   font-family: var(--font-mono);
   font-size: 5.4px;
   letter-spacing: .12em;
   fill: var(--brand-light);
}

.seal path.seal__check {
   fill: none;
   stroke: var(--brand-light);
   stroke-width: 3;
   stroke-linecap: round;
   stroke-linejoin: round;
}

.credential-card__list {
   margin: 0;
   display: grid;
   gap: 13px;
}

.credential-card__list div {
   display: flex;
   align-items: baseline;
   justify-content: space-between;
   gap: 12px;
}

.credential-card__list dt {
   font-family: var(--font-body);
   font-size: .84rem;
   color: var(--ink-muted);
   font-weight: 500;
}

.credential-card__list dd {
   margin: 0;
   font-family: var(--font-serif);
   font-size: 1rem;
   color: var(--ink);
   text-align: right;
   font-weight: 600;
}

.credential-card__list dd.is-placeholder {
   font-family: var(--font-mono);
   font-size: .76rem;
   font-weight: 500;
   font-style: normal;
   color: var(--brand-light);
   background: var(--brand-light-pale);
   padding: 3px 9px;
   border-radius: 999px;
}

@media (max-width: 900px) {
   .hero__scrim {
      background: linear-gradient(190deg, rgba(8, 32, 51, .93) 0%, rgba(8, 32, 51, .88) 55%, rgba(10, 61, 98, .72) 100%);
   }
}

@media (max-width: 640px) {
   .hero {
      padding: 108px 0 56px;
      min-height: 80vh;
   }

   .credential-card {
      transform: none;
   }
}
/* ===== Nosotros — texto arriba, cards compactas abajo ===== */
#nosotros{
    overflow: visible;
}

.about-intro{
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
}

.about-intro__head{
    max-width: 62ch;
}

.about-intro__head h2{
    margin-bottom: 14px;
}

.about-intro__copy{
    font-size: 1rem;
    margin: 0 0 18px;
}

.about-intro__head .link-more{
    display: inline-block;
    font-weight: 600;
    text-decoration: none;
}

.about-intro__title .link-more:hover{
    color: var(--navy);
}

/* ---- Composición Misión / Visión / Valores (editorial, sin apilado de tarjetas) ---- */
.about-intro__visual{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
    align-items: stretch;   /* antes: start — ahora las 3 tarjetas igualan altura */
}

.mv-values{
    background: var(--white);
    border: 1px solid var(--line-cool);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 26px 28px;
    transition: transform .2s ease, box-shadow .2s ease;
}

.mv-values:hover{
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

.mv-values .values-label{
    margin-bottom: 14px;
}

@media (max-width: 860px){
    .about-intro{
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .about-intro__visual{
        grid-template-columns: 1fr;   /* mismo ancho en cualquier breakpoint, nunca mitad/mitad */
    }
}

@media (max-width: 620px){
    .about-intro__visual{
        grid-template-columns: 1fr;
    }
}

/* ---- Tarjetas grandes Misión / Visión / Valores con pill flotante recortada ---- */
.mvv-grid{
    gap: 26px;
}

.mvv-card{
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--white);
    border-radius: 30px;
    padding: 36px 30px 78px;
    overflow: visible;
    isolation: isolate;
    box-shadow: 0 26px 54px -32px rgba(8, 32, 51, .32);
    transition: transform .25s ease, box-shadow .25s ease;
}

.mvv-card:hover{
    transform: translateY(-6px);
    box-shadow: 0 34px 64px -30px rgba(8, 32, 51, .38);
}

.mvv-card__head{
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 26px;
}

.mvv-card__icon{
    width: 46px;
    height: 46px;
    flex: none;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--navy);
    background: var(--navy-pale);
}

.mvv-card__icon svg{
    width: 22px;
    height: 22px;
}

.mvv-card--brand-deep .mvv-card__icon{
    color: var(--brand-deep);
    background: var(--brand-pale);
}

.mvv-card--brand-light .mvv-card__icon{
    color: var(--navy);
    background: var(--brand-light-pale);
}

.mvv-card__num{
    font-family: var(--font-mono);
    font-size: .74rem;
    letter-spacing: .12em;
    color: var(--ink-muted);
}

.mvv-card__title{
    font-family: var(--font-display);
    font-size: 1.55rem;
    font-weight: 700;
    color: var(--navy);
    margin: 0 0 12px;
}

.mvv-card--brand-deep .mvv-card__title{
    color: var(--brand-deep);
}

.mvv-card--brand-light .mvv-card__title{
    color: var(--navy);
}

.mvv-card__text{
    font-family: var(--font-serif);
    font-size: .98rem;
    line-height: 1.6;
    color: var(--ink-muted);
    margin: 0;
}

/* Los valores son una lista en el documento oficial, no un párrafo */
.mvv-card__values{
    list-style: none;
    margin: 0;
    padding: 0;
    columns: 2;
    column-gap: 22px;
    font-family: var(--font-serif);
    font-size: .95rem;
    line-height: 1.55;
    color: var(--ink-muted);
}

.mvv-card__values li{
    break-inside: avoid;
    padding-left: 15px;
    position: relative;
    margin-bottom: 4px;
}

.mvv-card__values li::before{
    content: "";
    position: absolute;
    left: 0;
    top: .62em;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--brand);
}

/* Recorte: un bloque del color de la página, con esquinas redondeadas,
   se posa sobre el borde inferior de la tarjeta blanca. Sus esquinas
   convexas leen como una curva cóncava tallada en la tarjeta, dejando
   un margen de "aire" alrededor del botón para que se sienta encajado,
   no simplemente superpuesto. */
/* El botón queda encajado en la esquina inferior izquierda de la tarjeta:
   los bordes del color de la página abren un canal alrededor y las esquinas
   convexas de ese canal leen como un corte cóncavo tallado en la tarjeta. */
.mvv-card__socket{
    display: none;
}

.mvv-card__cta{
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 24px 14px 28px;
    border-top: 10px solid var(--paper);
    border-right: 10px solid var(--paper);
    border-radius: 0 30px 0 30px;
    background: var(--navy);
    background-clip: padding-box;
    color: #fff;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: .86rem;
    text-decoration: none;
    white-space: nowrap;
    transition: gap .15s ease, background .15s ease;
}

/* Filete cóncavo donde el canal se encuentra con el borde izquierdo de la tarjeta */
.mvv-card__cta::before{
    content: "";
    position: absolute;
    top: -10px;
    left: -10px;
    width: 14px;
    height: 14px;
    border-top-left-radius: 14px;
    box-shadow: -7px -7px 0 7px var(--paper);
    pointer-events: none;
}

.mvv-card--brand-deep .mvv-card__cta{
    background: var(--brand-deep);
}

.mvv-card--brand-light .mvv-card__cta{
    background: var(--brand-light);
    color: var(--navy-ink);
}

.mvv-card__cta:hover{
    gap: 12px;
}

.mvv-card__cta-ic{
    width: 15px;
    height: 15px;
    flex: none;
}

@media (max-width: 860px){
    .mvv-grid{
        gap: 20px;
    }
}

/* ===== Fortalezas — con imagen de fondo tipo parallax ===== */

#fortalezas{
    position: relative;
    padding-top: 72px;
    padding-bottom: 72px;
    background: var(--navy-ink) url('images/fachada1.webp') center / cover no-repeat fixed;
    border-top: none;
    border-bottom: none;
    isolation: isolate;
}

#fortalezas::before{
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background: linear-gradient(180deg, rgba(8,32,51,.92) 0%, rgba(8,32,51,.85) 45%, rgba(10,61,98,.88) 100%);
}

#fortalezas .wrap{
    position: relative;
    z-index: 1;
}

#fortalezas .eyebrow{
    color: var(--brand-soft);
}

#fortalezas h2{
    color: #fff;
}

.feature-card {
   background: rgba(255,255,255,.97);
   border: 1px solid rgba(255,255,255,.5);
   border-radius: var(--radius);
   padding: 26px 22px;
   text-align: left;
   box-shadow: var(--shadow-lg);
}

.feature-card p {
   font-size: .92rem;
   margin-bottom: 0;
}

@media (max-width: 900px){
    #fortalezas{
        padding-top: 52px;
        background-attachment: scroll; 
    }
}

.feature-grid--icon {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 22px;
   margin-top: 30px;
}


.feature-card__icon {
   width: 44px;
   height: 44px;
   object-fit: contain;
   margin-bottom: 14px;
}

@media (max-width: 860px) {
   .feature-grid--icon {
      grid-template-columns: 1fr 1fr;
   }
}

@media (max-width: 560px) {
   .feature-grid--icon {
      grid-template-columns: 1fr;
   }
}

/* ===== Bloque de credibilidad regulatoria (nosotros.html) ===== */
.credentials-band {
   background: var(--navy-ink);
   border-radius: var(--radius);
   padding: 32px 30px;
   color: #fff;
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 24px;
   margin-top: 30px;
}

.credentials-band__item {
   display: flex;
   gap: 14px;
   align-items: flex-start;
}

.credentials-band__item .seal {
   width: 42px;
   height: 42px;
   flex: none;
   transform: rotate(6deg);
}

.credentials-band__item h3 {
   color: #fff;
   font-size: .95rem;
   margin-bottom: 4px;
}

.credentials-band__item p {
   color: #b8cbd6;
   font-size: .84rem;
   margin: 0;
}

.credentials-band__item .is-placeholder-tag {
   display: inline-block;
   margin-top: 6px;
   font-family: var(--font-mono);
   font-size: .68rem;
   color: var(--brand-light);
   background: rgba(103, 190, 217, .18);
   border: 1px solid rgba(103, 190, 217, .6);
   padding: 2px 9px;
   border-radius: 999px;
}

@media (max-width: 860px) {
   .credentials-band {
      grid-template-columns: 1fr;
   }
}

.lab-partners {
   margin-top: 30px;
   display: flex;
   flex-wrap: wrap;
   gap: 14px;
   align-items: center;
}

.lab-partners__tile {
   border: 1px solid var(--line-cool);
   border-radius: var(--radius-sm);
   background: var(--white);
   padding: 14px 22px;
   font-family: var(--font-serif);
   font-weight: 600;
   color: var(--navy);
   font-size: .95rem;
}

.lab-partners__tile--placeholder {
   color: var(--ink-muted);
   font-family: var(--font-mono);
   font-size: .74rem;
   font-weight: 500;
   border-style: dashed;
}

/* ===== Productos ===== */
.swipe-hint {
   display: none;
   align-items: center;
   gap: 6px;
   font-family: var(--font-mono);
   font-size: .78rem;
   color: var(--brand-deep);
   margin: -6px 0 18px;
}

.swipe-hint svg {
   width: 15px;
   height: 15px;
   fill: none;
   stroke: currentColor;
   stroke-width: 2;
   stroke-linecap: round;
   stroke-linejoin: round;
}

.product-grid {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 20px;
   margin-top: 24px;
}

.product {
   background: var(--white);
   border: 1px solid var(--line-cool);
   border-radius: var(--radius);
   overflow: hidden;
   display: flex;
   flex-direction: column;
   text-decoration: none;
   transition: box-shadow .15s ease, transform .15s ease;
}

.product:hover {
   box-shadow: var(--shadow);
   transform: translateY(-2px);
}

.product img {
   width: 100%;
   aspect-ratio: 4/3;
   object-fit: cover;
   background: var(--paper);
}

.product__body {
   padding: 16px 18px 20px;
   display: flex;
   flex-direction: column;
   gap: 4px;
   flex: 1;
}

.product__tag {
   font-family: var(--font-mono);
   font-size: .66rem;
   text-transform: uppercase;
   letter-spacing: .08em;
   color: var(--brand-deep);
   background: var(--brand-pale);
   align-self: flex-start;
   padding: 3px 9px;
   border-radius: 999px;
   margin: 0 0 4px;
}

.product h3 {
   font-size: 1rem;
   margin-bottom: 4px;
}

.product p {
   font-size: .87rem;
   margin-bottom: 0;
}

.product--cta {
   background: var(--navy);
   border-color: var(--navy);
   color: #fff;
   justify-content: center;
   align-items: flex-start;
}

.product--cta .product__body {
   justify-content: center;
   padding: 24px 22px;
}

.product--cta h3 {
   color: #fff;
}

.product--cta p {
   color: #cfe3ee;
}

.product--cta .btn {
   margin-top: 8px;
   align-self: flex-start;
}

@media (max-width: 980px) and (min-width: 561px) {
   .product-grid {
      grid-template-columns: 1fr 1fr;
   }
}

/* En móvil los productos no se esconden en un carrusel: se listan como
   filas compactas (miniatura + texto) escaneables de arriba abajo. */
@media (max-width: 560px) {
   .product-grid {
      display: flex;
      grid-template-columns: none;
      flex-direction: column;
      gap: 12px;
      margin-top: 20px;
   }

   .product {
      flex-direction: row;
      align-items: stretch;
   }

   .product img {
      width: 108px;
      aspect-ratio: auto;
      height: auto;
      min-height: 108px;
      flex: none;
      border-right: 1px solid var(--line-cool);
   }

   .product__body {
      padding: 12px 14px 14px;
      justify-content: center;
   }

   .product h3 {
      font-size: .97rem;
      margin-bottom: 2px;
   }

   .product p {
      font-size: .84rem;
   }

   .product__tag {
      font-size: .62rem;
   }

   .product--cta {
      flex-direction: column;
   }

   .product--cta .product__body {
      padding: 20px 18px;
   }

   .product--cta .btn {
      align-self: stretch;
      min-height: 48px;
   }
}

/* ===== FAQ ===== */
.faq {
   margin-top: 26px;
   display: grid;
   gap: 10px;
}

.faq details {
   background: var(--white);
   border: 1px solid var(--line-cool);
   border-radius: 12px;
   padding: 4px 18px;
}

.faq summary {
   cursor: pointer;
   padding: 13px 0;
   font-weight: 600;
   color: var(--navy);
   list-style: none;
   display: flex;
   justify-content: space-between;
   align-items: center;
   gap: 16px;
   font-size: .95rem;
}

.faq summary::-webkit-details-marker {
   display: none;
}

.faq summary::after {
   content: "+";
   font-family: var(--font-mono);
   font-size: 1.25rem;
   color: var(--brand-deep);
   flex: none;
}

.faq details[open] summary::after {
   content: "–";
}

.faq details p {
   padding-bottom: 15px;
   margin: 0;
   font-size: .9rem;
}

/* ===== Banda de contacto corta (home) ===== */
.section--dark {
   background: var(--navy-ink);
}

.h2--light {
   color: #fff;
}

.p--light {
   color: #cfdfe8;
   max-width: 46ch;
}

.contact-band__inner {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   justify-content: space-between;
   gap: 28px;
}

.contact-band__quick {
   display: flex;
   flex-wrap: wrap;
   gap: 22px;
   margin-top: 4px;
}

.contact-band__quick div {
   display: flex;
   flex-direction: column;
   gap: 2px;
}

.contact-band__quick dt {
   font-family: var(--font-mono);
   font-size: .68rem;
   text-transform: uppercase;
   letter-spacing: .1em;
   color: #8fadbc;
}

.contact-band__quick dd {
   margin: 0;
   color: #fff;
   font-size: .92rem;
   font-weight: 500;
}

.contact-band__quick a {
   color: #fff;
}

/* ===== Contacto completo (contacto.html) ===== */
.contact-list {
   list-style: none;
   margin: 22px 0;
   padding: 0;
   display: grid;
   gap: 14px;
}

.contact-list__label {
   display: block;
   font-family: var(--font-mono);
   font-size: .68rem;
   text-transform: uppercase;
   letter-spacing: .1em;
   color: var(--brand-soft);
   margin-bottom: 3px;
}

.contact-list li{
   font-size: .93rem;
   color: #fff;
}

.contact-list a {
   color: #fff;
}

.social-row {
   display: flex;
   gap: 12px;
   margin-bottom: 22px;
}

.social-row a {
   width: 36px;
   height: 36px;
   border-radius: 50%;
   border: 1px solid rgba(255, 255, 255, .3);
   display: flex;
   align-items: center;
   justify-content: center;
}

.social-row svg {
   width: 16px;
   height: 16px;
   fill: #fff;
}

.social-row a:hover {
   background: var(--brand-deep);
   border-color: var(--brand-deep);
}

.map-embed {
   border-radius: var(--radius);
   overflow: hidden;
   border: 1px solid rgba(255, 255, 255, .15);
}

.map-embed iframe {
   width: 100%;
   height: 220px;
   border: 0;
   display: block;
}

.contact-form {
   background: #fff;
   border-radius: var(--radius);
   padding: 26px;
   box-shadow: var(--shadow-lg);
   display: flex;
   flex-direction: column;
   gap: 13px;
}

.contact-form__title {
   font-family: var(--font-display);
   font-weight: 600;
   color: var(--navy);
   font-size: 1.08rem;
   margin: 0;
}

.contact-form__row {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 13px;
}

.contact-form label {
   font-size: .83rem;
   color: var(--ink-muted);
   display: flex;
   flex-direction: column;
   gap: 6px;
}

.contact-form input,
.contact-form textarea {
   font-family: inherit;
   font-size: 16px;
   padding: 11px 12px;
   border: 1.5px solid var(--line-cool);
   border-radius: 8px;
   color: var(--ink);
   background: var(--paper);
   resize: vertical;
}

.contact-form input:focus,
.contact-form textarea:focus {
   outline: none;
   border-color: var(--brand-deep);
   background: #fff;
}

.contact-form__note {
   font-size: .84rem;
   color: var(--brand-deep);
   min-height: 1.2em;
   margin: 0;
}

.contact-form__note--error {
   color: #B4232A;
}

/* Señuelo antispam: invisible para personas, visible para robots */
.hp {
   position: absolute;
   width: 1px;
   height: 1px;
   overflow: hidden;
   clip: rect(0 0 0 0);
   clip-path: inset(50%);
   white-space: nowrap;
}

.contact-form button[disabled] {
   opacity: .7;
   cursor: progress;
}

@media (max-width: 480px) {
   .contact-form__row {
      grid-template-columns: 1fr;
   }
}

@media (max-width: 600px) {
   .social-row a {
      width: 44px;
      height: 44px;
   }
}

/* ===== Página interior — hero secundario ===== */
.page-hero {
   background: linear-gradient(180deg, var(--navy-pale) 0%, var(--paper) 100%);
   padding: 100px 0 44px;
   border-bottom: 1px solid var(--line-cool);
}

.breadcrumb {
   display: inline-block;
   font-size: .85rem;
   color: var(--navy-mid);
   text-decoration: none;
   margin-bottom: 16px;
}

.breadcrumb:hover {
   color: var(--navy);
}

.page-hero .badge {
   background: var(--brand-pale);
   border-color: var(--brand-deep);
   color: var(--brand-deep);
}

.page-hero h1 {
   margin-top: 10px;
   max-width: 22ch;
}

.page-hero__lede {
   max-width: 55ch;
   font-size: 1.02rem;
}

.prose h2 {
   margin-top: 0;
}

.prose p {
   font-size: .97rem;
   color: var(--ink);
}

/* Lectura por capas: el primer párrafo queda visible y el detalle se despliega */
.prose-more {
   margin-top: 6px;
   border-top: 1px solid var(--line-cool);
}

.prose-more summary {
   cursor: pointer;
   list-style: none;
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 16px;
   padding: 16px 0;
   min-height: 48px;
   font-family: var(--font-body);
   font-weight: 600;
   font-size: .95rem;
   color: var(--navy);
}

.prose-more summary::-webkit-details-marker {
   display: none;
}

.prose-more summary::after {
   content: "+";
   font-family: var(--font-mono);
   font-size: 1.25rem;
   color: var(--brand-deep);
   flex: none;
}

.prose-more[open] summary::after {
   content: "–";
}

.prose-more h3 {
   font-size: 1rem;
   margin: 4px 0 8px;
}

.prose-more > p:last-child {
   margin-bottom: 20px;
}

.cta-band {
   background: var(--navy);
}

.cta-band__inner {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   justify-content: space-between;
   gap: 24px;
}

.cta-band__inner h2 {
   margin-bottom: 6px;
}

/* ===== Pie de página — claro, para no encadenar dos bloques azules ===== */
.footer{
   background: var(--white);
   color: var(--ink-muted);
   padding: 0 0 0;
   border-top: 1px solid var(--line-cool);
   position: relative;
}

.footer::before{
   content: "";
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   height: 3px;
   background: linear-gradient(90deg, var(--navy) 0%, var(--brand-deep) 55%, var(--brand-light) 100%);
}

.footer__inner{
   padding-top: 56px;
   padding-bottom: 44px;
   display: grid;
   grid-template-columns: 1.5fr 1fr 1fr 1.3fr;
   gap: 40px;
   align-items: start;
}

.footer__logo{
   height: 34px;
   margin-bottom: 16px;
}

.footer p{
   color: var(--ink-muted);
   font-size: .9rem;
   max-width: 34ch;
}

.footer__col-title{
   font-family: var(--font-mono);
   text-transform: uppercase;
   letter-spacing: .1em;
   font-size: .68rem;
   color: var(--brand-deep);
   margin-bottom: 16px;
}

.footer__col{
   display: flex;
   flex-direction: column;
   gap: 11px;
}

.footer__col a{
   color: var(--navy);
   text-decoration: none;
   font-size: .92rem;
   font-weight: 500;
   width: fit-content;
   border-bottom: 1px solid transparent;
}

.footer__col a:hover{
   border-bottom-color: var(--brand-light);
}

.footer__col p{
   margin: 0;
   font-size: .87rem;
}

/* Bloque de contacto destacado: la información útil, no un CTA repetido */
.footer__col--contact{
   background: var(--navy-pale);
   border: 1px solid var(--line-cool);
   border-radius: var(--radius);
   padding: 22px 24px;
   gap: 9px;
}

.footer__col--contact .footer__col-title{
   margin-bottom: 12px;
}

.footer__col--contact a{
   font-family: var(--font-display);
   font-size: 1rem;
   font-weight: 600;
}

.social-row--footer{
   margin-top: 20px;
   margin-bottom: 0;
}

.social-row--footer a{
   border-color: var(--line-cool);
   background: var(--paper);
}

.social-row--footer svg{
   fill: var(--navy);
}

.social-row--footer a:hover{
   background: var(--brand-deep);
   border-color: var(--brand-deep);
}

.social-row--footer a:hover svg{
   fill: #fff;
}

.footer__legal-bar{
   margin-top: 0;
   padding-top: 18px;
   padding-bottom: 18px;
   border-top: 1px solid var(--line-cool);
   background: var(--paper);
}

.footer__legal-inner{
   display: flex;
   justify-content: space-between;
   flex-wrap: wrap;
   gap: 8px;
   font-family: var(--font-mono);
   font-size: .74rem;
   color: var(--ink-muted);
}

@media (max-width: 940px){
   .footer__inner{
      grid-template-columns: 1fr 1fr;
      gap: 34px;
   }

   .footer__col--contact{
      grid-column: span 2;
   }
}

@media (max-width: 560px){
   .footer{
      padding-bottom: 0;
   }

   .footer__inner{
      grid-template-columns: 1fr;
      gap: 30px;
      padding-top: 44px;
      padding-bottom: 36px;
   }

   .footer__col--contact{
      grid-column: auto;
   }

   .footer__legal-inner{
      flex-direction: column;
   }
}

/* ===== Botón flotante de WhatsApp ===== */
.fab-whatsapp {
   position: fixed;
   right: 20px;
   bottom: 20px;
   z-index: 70;
   width: 56px;
   height: 56px;
   border-radius: 50%;
   background: var(--brand-deep);
   display: flex;
   align-items: center;
   justify-content: center;
   box-shadow: var(--shadow-lg);
   transition: transform .15s ease;
}

.fab-whatsapp:hover {
   transform: scale(1.06);
}

.fab-whatsapp svg {
   width: 28px;
   height: 28px;
   fill: #fff;
}

/* ===== Menú móvil: panel a pantalla completa ===== */
.nav__actions,
.nav__meta {
   display: none;
}

@media (max-width: 940px) {
   .nav {
      position: fixed;
      inset: 0;
      z-index: 55;
      background: linear-gradient(175deg, var(--navy-ink) 0%, #0B3C58 100%);
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
      border: none;
      border-radius: 0;
      box-shadow: none;
      margin: 0;
      padding: calc(86px + env(safe-area-inset-top)) 22px calc(24px + env(safe-area-inset-bottom));
      flex-direction: column;
      align-items: stretch;
      justify-content: flex-start;
      gap: 0;
      opacity: 0;
      visibility: hidden;
      transform: translateY(-10px);
      transition: opacity .25s ease, transform .25s ease, visibility 0s linear .25s;
      overflow-y: auto;
   }

   .nav--open {
      opacity: 1;
      visibility: visible;
      transform: translateY(0);
      transition: opacity .25s ease, transform .25s ease;
   }

   .nav a {
      color: #fff;
      font-family: var(--font-display);
      font-size: 1.55rem;
      font-weight: 600;
      padding: 16px 4px;
      border-bottom: 1px solid rgba(255, 255, 255, .12);
      display: flex;
      align-items: center;
      justify-content: space-between;
   }

   .nav a:hover,
   .nav a[aria-current="page"] {
      color: #fff;
      border-bottom-color: rgba(255, 255, 255, .12);
   }

   .nav a[aria-current="page"]::after {
      content: "";
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: var(--brand-light);
      flex: none;
   }

   .nav__actions {
      display: grid;
      gap: 12px;
      margin-top: auto;
      padding-top: 30px;
   }

   .nav__actions .btn {
      min-height: 54px;
      font-size: 1rem;
      width: 100%;
      padding: 14px 22px;
   }

   .nav__meta {
      display: block;
      margin-top: 18px;
      font-size: .82rem;
      color: #8fadbc;
      text-align: center;
   }

   .nav__meta a {
      display: inline;
      padding: 0;
      border: none;
      font-family: var(--font-body);
      font-size: inherit;
      font-weight: 500;
      color: #cfdfe8;
   }

   .nav-toggle {
      display: flex;
      position: relative;
      z-index: 61;
   }

   /* El nav pasa a position:fixed, así que el header se reequilibra:
      marca a la izquierda, teléfono y menú agrupados a la derecha. */
   .site-header__inner {
      justify-content: flex-start;
      gap: 8px;
   }

   .header-actions {
      margin-left: auto;
   }

   /* Logo y botón de llamar por encima del panel del menú */
   .brand,
   .header-actions {
      position: relative;
      z-index: 61;
   }

   /* Con el menú abierto, el FAB es redundante con el botón del panel */
   body.menu-open .fab-whatsapp {
      opacity: 0;
      pointer-events: none;
   }

   .nav-toggle span {
      transition: transform .25s ease, opacity .2s ease, background .35s ease;
   }

   .nav-toggle.is-open span:nth-child(1) {
      transform: translateY(7px) rotate(45deg);
   }

   .nav-toggle.is-open span:nth-child(2) {
      opacity: 0;
   }

   .nav-toggle.is-open span:nth-child(3) {
      transform: translateY(-7px) rotate(-45deg);
   }

   body.menu-open {
      overflow: hidden;
   }

   body.menu-open .site-header .site-header__inner {
      background: transparent;
      box-shadow: none;
      border-color: transparent;
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
   }

   body.menu-open .nav-toggle span {
      background: #fff;
   }

   body.menu-open .icon-btn {
      border-color: rgba(255, 255, 255, .35);
      background: rgba(255, 255, 255, .1);
   }

   body.menu-open .icon-btn svg {
      fill: #fff;
   }
}

.page-hero--photo {
   position: relative;
   color: #fff;
   overflow: hidden;
   background: var(--navy-ink) url('images/fachada3.webp') center / cover no-repeat;
}

.page-hero--photo::before {
   content: "";
   position: absolute;
   inset: 0;
   z-index: 0;
   background: linear-gradient(100deg, rgba(8, 32, 51, .95) 0%, rgba(8, 32, 51, .88) 40%, rgba(10, 61, 98, .6) 72%, rgba(10, 61, 98, .3) 100%);
}

.page-hero--photo .wrap {
   position: relative;
   z-index: 1;
}

.page-hero--photo h1 { color: #fff; }
.page-hero--photo .page-hero__lede { color: #cfdfe8; }
.page-hero--photo .breadcrumb { color: var(--brand-soft); }
.page-hero--photo .breadcrumb:hover { color: #fff; }

@media (max-width: 900px) {
   .page-hero--photo { background-attachment: scroll; }
}

.mv-grid {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 22px;
   margin-top: 28px;
}

.mv-grid--wide { max-width: 1090px; }

.mv-card {
   position: relative;
   background: var(--white);
   border: 1px solid var(--line-cool);
   border-radius: var(--radius);
   padding: 30px 28px 26px;
   box-shadow: var(--shadow);
   overflow: hidden;
   transition: transform .2s ease, box-shadow .2s ease;
}

.mv-card:hover {
   transform: translateY(-4px);
   box-shadow: var(--shadow-lg);
}

.mv-card::before {
   content: "";
   position: absolute;
   top: 0; left: 0; right: 0;
   height: 5px;
   background: var(--navy-mid);
}

.mv-card--accent::before { background: var(--brand-deep); }

.mv-card::after {
   content: "\201C";
   position: absolute;
   top: -14px;
   right: 20px;
   font-family: var(--font-serif);
   font-size: 5.5rem;
   font-weight: 600;
   color: var(--navy-pale);
   line-height: 1;
   z-index: 0;
}

.mv-card--accent::after { color: var(--brand-pale); }

.mv-card__label,
.mv-card__text {
   position: relative;
   z-index: 1;
}

.mv-card__label {
   font-family: var(--font-mono);
   text-transform: uppercase;
   letter-spacing: .1em;
   font-size: .74rem;
   font-weight: 600;
   color: var(--navy-mid);
   margin-bottom: 12px;
}

.mv-card--accent .mv-card__label { color: var(--brand-deep); }

.mv-card__text {
   font-family: var(--font-serif);
   font-size: 1.02rem;
   line-height: 1.55;
   color: var(--ink);
   margin: 0;
}

.values-label {
   font-family: var(--font-mono);
   text-transform: uppercase;
   letter-spacing: .1em;
   font-size: .76rem;
   font-weight: 600;
   color: var(--brand-deep);
}

.chip-list {
   list-style: none;
   margin: 14px 0 0;
   padding: 0;
   display: flex;
   flex-wrap: wrap;
   gap: 10px;
}

.chip-list li {
   font-size: .85rem;
   font-weight: 500;
   padding: 8px 16px;
   border-radius: 999px;
   background: var(--navy-pale);
   border: 1px solid var(--line-cool);
   color: var(--navy);
   transition: transform .15s ease, background .15s ease, color .15s ease;
}

.chip-list li:hover {
   background: var(--brand-deep);
   color: #fff;
   transform: translateY(-2px);
}

@media (max-width: 700px) {
   .mv-grid { grid-template-columns: 1fr; }
}

.org-flow {
   margin-top: 34px;
   display: flex;
   flex-direction: column;
   align-items: center;
}

.org-pill {
   padding: 15px 30px;
   border-radius: 999px;
   font-family: var(--font-display);
   font-weight: 600;
   text-align: center;
   box-shadow: var(--shadow);
}

.org-pill--l1 {
   background: var(--navy-ink);
   color: #fff;
   font-size: .95rem;
}

.org-pill--l2 {
   background: var(--brand-deep);
   color: #fff;
   font-size: .88rem;
}

.org-stem {
   width: 2px;
   height: 26px;
   background: var(--line-cool);
}

.org-flow__split {
   display: flex;
   justify-content: space-around;
   width: 100%;
   max-width: 620px;
   position: relative;
   margin-top: 0;
}

.org-flow__split::before {
   content: "";
   position: absolute;
   top: 0;
   left: 16%;
   right: 16%;
   height: 2px;
   background: var(--line-cool);
}

.org-flow__branch {
   width: 2px;
   height: 28px;
   background: var(--line-cool);
}

.org-departments {
   width: 100%;
   max-width: 780px;
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 26px;
   margin-top: -2px;
}

.org-dept {
   background: var(--white);
   border: 1px solid var(--line-cool);
   border-radius: var(--radius);
   box-shadow: var(--shadow);
   padding: 24px 24px 26px;
   position: relative;
   overflow: hidden;
   transition: transform .2s ease, box-shadow .2s ease;
}

.org-dept::before {
   content: "";
   position: absolute;
   top: 0; left: 0; right: 0;
   height: 4px;
   background: var(--brand-deep);
}

.org-dept:hover {
   transform: translateY(-4px);
   box-shadow: var(--shadow-lg);
}

.org-dept__title {
   font-family: var(--font-display);
   font-size: 1.05rem;
   color: var(--navy);
   margin-bottom: 18px;
   padding-bottom: 14px;
   border-bottom: 1px dashed var(--line);
}

.org-dept__body {
   display: flex;
   flex-direction: column;
   gap: 16px;
}

.org-step__lead {
   display: inline-block;
   margin: 0 0 6px;
   font-family: var(--font-body);
   font-weight: 600;
   font-size: .84rem;
   color: var(--navy);
   background: var(--navy-pale);
   padding: 6px 13px;
   border-radius: 999px;
}

.org-step__sub {
   margin: 0 0 0 20px;
   font-size: .8rem;
   color: var(--ink-muted);
   padding-left: 12px;
   border-left: 2px solid var(--line-cool);
   position: relative;
}

.org-step__sub::before {
   content: "";
   position: absolute;
   left: -2px;
   top: .6em;
   width: 8px;
   height: 2px;
   background: var(--line-cool);
}

@media (max-width: 700px) {
   .org-departments {
      grid-template-columns: 1fr;
   }

   .org-flow__split {
      max-width: 200px;
   }

   .org-flow__split::before {
      left: 0;
      right: 0;
   }
}
/* ============================================================
   CAPA MÓVIL — la página se piensa primero para teléfono.
   Estas reglas rediseñan componentes, no solo los encogen.
   ============================================================ */

/* --- Acciones rápidas de contacto (llamar / WhatsApp) --- */
.contact-quick {
   display: none;
}

/* --- Interacción táctil: sin efectos hover pegajosos --- */
@media (hover: none) {

   .product:hover,
   .mv-card:hover,
   .mvv-card:hover,
   .mv-values:hover,
   .org-dept:hover,
   .chip-list li:hover,
   .btn--primary:hover,
   .fab-whatsapp:hover,
   .mvv-card__cta:hover {
      transform: none;
   }

   .chip-list li:hover {
      background: var(--navy-pale);
      color: var(--navy);
   }
}

@media (max-width: 640px) {

   /* --- Ritmo general: menos aire muerto, misma jerarquía --- */
   .wrap {
      padding: 30px 20px;
   }

   .section {
      padding: 44px 0;
   }

   h2 {
      margin-bottom: .4em;
   }

   /* --- Header: pastilla flotante, marca a la izquierda y acciones juntas
          a la derecha (el teléfono ya no queda suelto en el centro) --- */
   .site-header {
      top: calc(10px + env(safe-area-inset-top));
   }

   .site-header__inner {
      padding: 6px 6px 6px 16px;
      border-radius: 999px;
      gap: 10px;
   }

   .site-header.is-scrolled .site-header__inner {
      border-radius: 999px;
      margin: 0 auto;
      padding: 6px 6px 6px 16px;
   }

   /* --- Hero: pantalla casi completa, degradado vertical, CTAs anchos --- */
   .hero {
      min-height: 95svh;
      padding: calc(104px + env(safe-area-inset-top)) 0 46px;
      align-items: flex-end;
   }

   .hero__scrim {
      background: linear-gradient(180deg, rgba(8, 32, 51, .3) 0%, rgba(8, 32, 51, .65) 48%, rgba(8, 32, 51, .80) 100%);
   }

   .hero .badge {
      font-size: .7rem;
      margin-bottom: 16px;
   }

   .hero h1 {
      font-size: 1.72rem;
      line-height: 1.24;
      letter-spacing: -.01em;
      margin-bottom: 0;
      max-width: none;
   }

   .hero__tail {
      font-size: .62em;
   }

   .hero__actions {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
      margin-top: 26px;
   }

   .hero__actions .btn {
      width: 100%;
      min-height: 52px;
      font-size: .95rem;
      padding: 12px 10px;
   }

   /* --- Misión / Visión / Valores: tarjetas compactas, un solo CTA --- */
   .about-intro {
      gap: 28px;
   }

   .mvv-grid {
      gap: 14px;
   }

   .mvv-card {
      border-radius: 22px;
      padding: 22px 20px 68px;
      box-shadow: 0 14px 30px -22px rgba(8, 32, 51, .3);
   }

   .mvv-card__head {
      margin-bottom: 14px;
   }

   .mvv-card__icon {
      width: 40px;
      height: 40px;
   }

   .mvv-card__num {
      display: none;
   }

   .mvv-card__title {
      font-size: 1.25rem;
   }

   .mvv-card__text {
      font-size: .95rem;
   }

   .mvv-card__cta {
      padding: 13px 20px 13px 22px;
      border-radius: 0 24px 0 22px;
      font-size: .84rem;
   }

   /* --- Fortalezas --- */
   #fortalezas {
      padding-top: 44px;
      padding-bottom: 44px;
   }

   .feature-grid--icon {
      gap: 12px;
      margin-top: 22px;
   }

   .feature-card {
      padding: 20px 18px;
      display: grid;
      grid-template-columns: 40px 1fr;
      column-gap: 14px;
      align-items: start;
   }

   .feature-card__icon {
      width: 40px;
      height: 40px;
      margin: 2px 0 0;
      grid-row: 1 / span 2;
   }

   .feature-card h3 {
      margin-bottom: 4px;
   }

   /* --- FAQ: área táctil generosa --- */
   .faq details {
      padding: 4px 16px;
   }

   .faq summary {
      padding: 15px 0;
      min-height: 48px;
   }

   /* --- Contacto: acciones rápidas primero, formulario después --- */
   .contact-quick {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
      margin: 6px 0 20px;
   }

   .contact-quick .btn {
      min-height: 52px;
      padding: 12px 10px;
      font-size: .93rem;
   }

   .contact-form {
      padding: 22px 18px;
      border-radius: 16px;
   }

   .contact-form input,
   .contact-form textarea {
      padding: 13px 14px;
      border-radius: 10px;
   }

   .contact-form .btn {
      min-height: 52px;
      font-size: 1rem;
   }

   .map-embed iframe {
      height: 240px;
   }

   /* --- Heros interiores --- */
   .page-hero {
      padding: calc(92px + env(safe-area-inset-top)) 0 36px;
   }

   .page-hero--photo::before {
      background: linear-gradient(180deg, rgba(8, 32, 51, .9) 0%, rgba(8, 32, 51, .82) 60%, rgba(10, 61, 98, .72) 100%);
   }

   .page-hero__lede {
      font-size: .98rem;
   }

   /* --- Bandas de CTA: botones apilados de ancho completo --- */
   .cta-band__inner,
   .footer__cta-inner {
      flex-direction: column;
      align-items: stretch;
   }

   .cta-band__inner .hero__actions,
   .footer__cta-actions {
      flex-direction: column;
      width: 100%;
      gap: 10px;
      margin: 0;
   }

   .cta-band__inner .btn,
   .footer__cta-actions .btn {
      width: 100%;
      min-height: 52px;
   }

   /* --- Organigrama: flujo vertical simple, sin ramas bifurcadas --- */
   .org-flow__split {
      display: none;
   }

   .org-departments {
      grid-template-columns: 1fr;
      gap: 0;
      margin-top: 0;
   }

   .org-dept {
      margin-top: 0;
   }

   .org-dept+.org-dept {
      margin-top: 26px;
      position: relative;
   }

   .org-dept+.org-dept::after {
      content: "";
      position: absolute;
      top: -26px;
      left: 50%;
      transform: translateX(-50%);
      width: 2px;
      height: 26px;
      background: var(--line-cool);
   }

   .org-departments::before {
      content: "";
      width: 2px;
      height: 26px;
      background: var(--line-cool);
      justify-self: center;
   }

   /* --- Footer: enlaces con área táctil real --- */
   .footer__col a {
      padding: 9px 0;
      width: 100%;
      border-bottom: 1px solid var(--line-cool);
      font-size: .95rem;
   }

   .footer__col--contact a {
      border-bottom: none;
      padding: 4px 0;
   }

   .footer__legal-bar {
      padding-bottom: calc(80px + env(safe-area-inset-bottom));
   }

   /* --- Botón flotante de WhatsApp con safe-area --- */
   .fab-whatsapp {
      right: 16px;
      bottom: calc(16px + env(safe-area-inset-bottom));
   }
}

/* Pantallas muy pequeñas */
@media (max-width: 360px) {
   .wrap {
      padding: 0 18px;
   }

   .contact-quick {
      grid-template-columns: 1fr;
   }
}