@charset "utf-8";
/* Estilos globales de Contigo Seguro. */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap');
@import url('https://cdn-uicons.flaticon.com/4.0.0/uicons-thin-straight/css/uicons-thin-straight.css');
@import url('https://cdn-uicons.flaticon.com/4.0.0/uicons-brands/css/uicons-brands.css');

:root {
  /* Marca y tema */
  --primary-color: #152f5a;
  --primary-hover: #102547;
  --secondary-color: #e16715;
  --secondary-hover: #ba4f0b;
  --tertiary-color: #2b6389;
  --bg-color: #f4f7fa;
  --bg-navbar: rgb(255 255 255 / 97%);
  --surface-color: #ffffff;
  --surface-hover: #eaf0f5;
  --text-color: #273b51;
  --heading-color: #152f5a;
  --text-muted: #52647a;
  --border-color: rgb(24 32 30 / 16%);
  --hero-h1-color: #152f5a;
  --hero-text-color: #4d5753;
  --hero-overlay: linear-gradient(135deg, rgb(245 241 232 / 20%), rgb(245 241 232 / 80%));

  /* Contexto claro / estado normal */
  --light-bg: #ffffff;
  --light-surface: #f4f7fa;
  --light-heading: #152f5a;
  --light-text: #273b51;
  --light-muted: #52647a;
  --light-border: rgb(24 32 30 / 16%);
  --light-link: #2b6389;
  --light-accent: #2b6389;

  /* Contexto oscuro / alto contraste */
  --dark-bg: #152f5a;
  --dark-surface: #e16715;
  --dark-heading: #ffffff;
  --dark-text: #e6ede9;
  --dark-muted: #b7c5c0;
  --dark-border: rgb(255 255 255 / 22%);
  --dark-link: #2b6389;
  --dark-accent: #2b6389;

  /* Tipografía */
  --font-sans: 'DM Sans', system-ui, -apple-system, sans-serif;
  --font-heading: 'Outfit', sans-serif;
  --font-serif: 'Outfit', sans-serif;
  --font-size-xs: .75rem;
  --font-size-sm: .875rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.25rem;
  --font-size-xl: 1.5rem;
  --font-size-xxl: clamp(2rem, 4vw, 3.5rem);
  --font-size-3xl: clamp(3.25rem, 7vw, 6.8rem);
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --line-height-tight: 1.02;
  --line-height-normal: 1.55;
  --line-height-relaxed: 1.75;

  /* Espaciado y forma */
  --space-xs: .25rem;
  --space-small: .5rem;
  --space-medium: 1rem;
  --space-large: 2rem;
  --space-xl: 4rem;
  --space-xxl: 7rem;
  --radius-sm: .35rem;
  --radius-md: .75rem;
  --radius-lg: 1.25rem;
  --radius-xl: 2rem;
  --radius-full: 9999px;
  --shadow-sm: 0 2px 10px rgb(18 32 29 / 6%);
  --shadow-md: 0 16px 38px rgb(18 32 29 / 10%);
  --shadow-lg: 0 24px 70px rgb(18 32 29 / 18%);
  --transition-fast: 150ms ease;
  --transition-normal: 300ms ease;
  --transition-slow: 600ms cubic-bezier(.2,.8,.2,1);

  /* Estructura global */
  --container-max-width: 77.5rem;
  --container-padding: clamp(1.25rem, 4vw, 3rem);
  --column-gap: clamp(1rem, 2.5vw, 2rem);
  --section-padding: clamp(5rem, 10vw, 9rem);
  --navbar-height: 5.5rem;
  --navbar-logo-height: 2.75rem;
  --navbar-max-width: var(--container-max-width);
  --navbar-menu-width: 20rem;
  --navbar-z-index: 1000;
  --navbar-toggle-z-index: 1100;
  --nav-alignment: flex-end;
  --footer-bg-color: #152f5a;
  --footer-text-color: #f7f3ea;
  --footer-min-height: 8rem;
  --button-text-color: #fff;
  --button-padding-y: .9rem;
  --button-padding-x: 1.4rem;
  --button-gap: .55rem;
  --button-min-height: 3rem;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 100%; scroll-behavior: smooth; scroll-padding-top: var(--navbar-height); }
body { min-height: 100vh; overflow-x: hidden; color: var(--text-color); background: var(--bg-color); font-family: var(--font-sans); font-size: var(--font-size-base); line-height: var(--line-height-normal); }
main { width: 100%; padding-top: var(--navbar-height); }
img { display: block; max-width: 100%; height: auto; }
button, input, textarea { font: inherit; }
a { color: inherit; text-decoration: none; transition: color var(--transition-fast), background var(--transition-fast), transform var(--transition-fast); }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible { outline: 3px solid var(--tertiary-color); outline-offset: 3px; }
h1, h2, h3, h4, h5, h6 { color: var(--heading-color); line-height: var(--line-height-tight); letter-spacing: -.04em; }
h1 { font-size: var(--font-size-3xl); }
h2 { font-size: var(--font-size-xxl); }
h3 { font-size: var(--font-size-xl); }
h4 { font-size: 1.125rem; }
h5 { font-size: 1rem; }
h6 { font-size: var(--font-size-sm); letter-spacing: .08em; text-transform: uppercase; }
p + p { margin-top: var(--space-medium); }
em { color: var(--primary-color); font-family: var(--font-serif); font-weight: 600; }
.skip-link { position: fixed; top: .5rem; left: .5rem; z-index: 2000; padding: .75rem 1rem; background: #fff; transform: translateY(-150%); }
.skip-link:focus { transform: translateY(0); }

/* Contenedores y sistema de columnas conservado */
.col { width: min(100% - (var(--container-padding) * 2), var(--container-max-width)); margin-inline: auto; }
.grid-stretch { display: flex; gap: var(--column-gap); align-items: stretch; }
.two-column, .hero-layout, .contact-layout { display: flex; gap: clamp(2rem, 6vw, 6rem); align-items: center; }
.col-20 { width: 20%; }.col-25 { width: 25%; }.col-30 { width: 30%; }.col-33 { width: 33.333%; }.col-40 { width: 40%; }.col-50 { width: 50%; }.col-60 { width: 60%; }.col-70 { width: 70%; }.col-75 { width: 75%; }.col-80 { width: 80%; }.col-100 { width: 100%; }
.izquierda { text-align: left; }.centrado { text-align: center; }.derecha { text-align: right; }
.section { padding-block: var(--section-padding); }
.section-alt { background: var(--surface-color); }
.section-dark { color: #d7ded9; background: var(--secondary-color); }
.section-dark h1, .section-dark h2, .section-dark h3, .section-dark h4, .section-dark h5, .section-dark h6 { color: #fff; }
.theme-light, .theme-dark { color: var(--theme-text); background: var(--theme-bg); }
.theme-light { --theme-bg: var(--light-bg); --theme-surface: var(--light-surface); --theme-heading: var(--light-heading); --theme-text: var(--light-text); --theme-muted: var(--light-muted); --theme-border: var(--light-border); --theme-link: var(--light-link); --theme-accent: var(--light-accent); --theme-button-text: #fff; }
.theme-dark { --theme-bg: var(--dark-bg); --theme-surface: var(--dark-surface); --theme-heading: var(--dark-heading); --theme-text: var(--dark-text); --theme-muted: var(--dark-muted); --theme-border: var(--dark-border); --theme-link: var(--dark-link); --theme-accent: var(--dark-accent); --theme-button-text: var(--dark-bg); color-scheme: dark; }
.theme-light h1, .theme-light h2, .theme-light h3, .theme-light h4, .theme-light h5, .theme-light h6, .theme-dark h1, .theme-dark h2, .theme-dark h3, .theme-dark h4, .theme-dark h5, .theme-dark h6 { color: var(--theme-heading); }
.theme-light .lead, .theme-light .text-muted, .theme-dark .lead, .theme-dark .text-muted { color: var(--theme-muted); }
.theme-light .inline-link, .theme-dark .inline-link { color: var(--theme-link); }
.theme-light .theme-surface, .theme-dark .theme-surface { border-color: var(--theme-border); background: var(--theme-surface); }
.theme-light .btn-secondary, .theme-dark .btn-secondary { border-color: var(--theme-border); color: var(--theme-text); background: transparent; }
.theme-light .btn-secondary:hover, .theme-dark .btn-secondary:hover { color: var(--theme-bg); background: var(--theme-text); }
.theme-light .btn-primary, .theme-dark .btn-primary { color: var(--theme-button-text); background: var(--theme-accent); }
.theme-dark .text-link { color: var(--theme-link); }
.eyebrow, .kicker { margin-bottom: 1.5rem; color: var(--primary-color); font-size: var(--font-size-xs); font-weight: var(--font-weight-bold); letter-spacing: .18em; text-transform: uppercase; }
.section-heading { display: grid; grid-template-columns: 1fr 2fr 1fr; gap: var(--column-gap); align-items: end; margin-bottom: clamp(3rem, 6vw, 5rem); }
.section-heading p:last-child { color: #acbbb5; }
.lead { margin-block: 1.5rem 2rem; color: var(--text-muted); font-size: clamp(1.15rem, 2vw, 1.45rem); line-height: 1.7; }

/* Botones */
.button-row { display: flex; flex-wrap: wrap; gap: var(--button-gap); margin-top: 2rem; }
.btn, .btn-contact { display: inline-flex; min-height: var(--button-min-height); align-items: center; justify-content: center; gap: .6rem; padding: var(--button-padding-y) var(--button-padding-x); border: 1px solid transparent; border-radius: var(--radius-full); font-weight: var(--font-weight-semibold); cursor: pointer; }
.btn-primary { color: var(--button-text-color); background: var(--primary-color); }
.btn-primary:hover { color: #fff; background: var(--primary-hover); transform: translateY(-2px); }
.btn-secondary { border-color: var(--border-color); background: rgb(255 255 255 / 55%); }
.btn-secondary:hover { background: #fff; }
.text-link { display: inline-flex; gap: .65rem; align-items: center; padding-bottom: .35rem; border-bottom: 1px solid currentColor; font-weight: 600; }
.text-link:hover { color: var(--primary-color); }

/* Navegación compartida */
.navbar { position: fixed; inset: 0 0 auto; z-index: var(--navbar-z-index); height: var(--navbar-height); border-bottom: 1px solid var(--border-color); background: var(--bg-navbar); backdrop-filter: blur(14px); }
.nav-container { display: flex; width: min(100% - (var(--container-padding) * 2), var(--navbar-max-width)); height: 100%; margin-inline: auto; align-items: center; }
.nav-logo, .footer-brand { display: inline-flex; align-items: center; gap: .65rem; font-size: 1.25rem; font-weight: 700; letter-spacing: -.04em; }
.logo-mark { display: inline-grid; width: 2rem; height: 2rem; place-items: center; border-radius: 50%; color: #fff; background: var(--primary-color); font-size: .9rem; }
.nav-menu-wrapper { display: flex; flex: 1; align-items: center; justify-content: var(--nav-alignment); gap: 2.5rem; }
.nav-menu { display: flex; gap: 2rem; align-items: center; list-style: none; }
.nav-link { position: relative; padding-block: 1rem; font-size: var(--font-size-sm); font-weight: 500; }
.nav-link::after { position: absolute; right: 0; bottom: .7rem; left: 0; height: 2px; content: ''; background: var(--primary-color); transform: scaleX(0); transition: transform var(--transition-normal); }
.nav-link:hover::after, .nav-link[aria-current="page"]::after { transform: scaleX(1); }
.nav-link[aria-current="page"] { color: var(--primary-color); }
.btn-contact { color: #fff; background: var(--secondary-color); font-size: var(--font-size-sm); }
.btn-contact:hover { color: #fff; background: var(--primary-color); }
.menu-toggle { display: none; margin-left: auto; padding: .8rem; border: 0; background: transparent; cursor: pointer; }
.hamburger, .hamburger::before, .hamburger::after { display: block; width: 1.5rem; height: 2px; content: ''; background: currentColor; transition: var(--transition-normal); }
.hamburger::before { transform: translateY(-.45rem); }.hamburger::after { transform: translateY(.35rem); }

/* Hero */
.hero { position: relative; display: flex; min-height: calc(100svh - var(--navbar-height)); flex-direction: column; justify-content: center; overflow: hidden; padding-top: clamp(4rem, 8vw, 7rem); background: var(--bg-color); }
.hero::before { position: absolute; inset: 0; pointer-events: none; content: ''; background-image: linear-gradient(rgb(24 32 30 / 5%) 1px, transparent 1px), linear-gradient(90deg, rgb(24 32 30 / 5%) 1px, transparent 1px); background-size: 4rem 4rem; mask-image: linear-gradient(to bottom, #000, transparent 85%); }
.hero-layout { position: relative; flex: 1; padding-bottom: 5rem; }
.hero h1 { max-width: 12ch; color: var(--hero-h1-color); }
.hero-intro { max-width: 41rem; margin-top: 1.75rem; color: var(--hero-text-color); font-size: clamp(1.05rem, 1.8vw, 1.3rem); }
.hero-visual { position: relative; min-height: 28rem; }
.orb { position: absolute; border-radius: 50%; filter: saturate(1.1); }
.orb-one { top: 2%; right: 0; width: min(27vw, 22rem); aspect-ratio: 1; background: var(--tertiary-color); }
.orb-two { right: 35%; bottom: 0; width: min(20vw, 15rem); aspect-ratio: 1; background: #b4c9ff; }
.hero-card { position: absolute; right: 2rem; bottom: 1rem; display: flex; width: min(24rem, 90%); min-height: 18rem; flex-direction: column; justify-content: space-between; padding: 2rem; border-radius: var(--radius-xl); color: #fff; background: var(--primary-color); box-shadow: var(--shadow-lg); transform: rotate(-5deg); }
.hero-card span { font-size: .7rem; letter-spacing: .2em; }.hero-card strong { font-size: clamp(2rem, 4vw, 3.4rem); line-height: 1; letter-spacing: -.05em; }.hero-card i { align-self: flex-end; font-size: 2rem; }
.hero-marquee { position: relative; display: flex; width: 100%; gap: clamp(1.5rem, 4vw, 4rem); align-items: center; justify-content: center; padding: 1.25rem var(--container-padding); color: #fff; background: var(--secondary-color); font-size: var(--font-size-sm); font-weight: 700; letter-spacing: .15em; white-space: nowrap; }
.hero-marquee i { color: var(--tertiary-color); font-style: normal; }

/* Tarjetas y secciones demo */
.intro-section h2 { max-width: 17ch; }
.service-grid { display: grid; grid-template-columns: repeat(3, 1fr); }
.card { position: relative; padding: clamp(1.5rem, 3vw, 2.5rem); border: 1px solid rgb(255 255 255 / 18%); border-radius: var(--radius-lg); background: rgb(255 255 255 / 5%); }
.service-card { display: flex; min-height: 25rem; flex-direction: column; }
.service-card.featured { color: var(--text-color); background: var(--tertiary-color); transform: translateY(-1.5rem); }
.service-card.featured h3 { color: var(--heading-color); }.service-card.featured p { color: #3f4a3f; }
.card-number { align-self: flex-end; font-size: var(--font-size-xs); opacity: .65; }
.service-icon { margin-block: auto 1.5rem; font-size: 2.5rem; }
.service-card p { margin-top: 1rem; color: #acbbb5; }
.card-link { display: grid; width: 2.8rem; aspect-ratio: 1; margin-top: 1.5rem; place-items: center; border: 1px solid currentColor; border-radius: 50%; }
.card-link:hover { color: var(--secondary-color); background: #fff; transform: rotate(45deg); }
.process-section { background: var(--surface-color); }
.process-section .section-heading { grid-template-columns: 1fr 3fr; }
.process-list { border-top: 1px solid var(--border-color); }
.process-item { display: grid; grid-template-columns: .5fr 1.3fr 2fr auto; gap: var(--column-gap); align-items: center; padding: 2rem 0; border-bottom: 1px solid var(--border-color); transition: padding var(--transition-normal), background var(--transition-normal); }
.process-item:hover { padding-inline: 1.25rem; background: var(--bg-color); }
.process-item span { color: var(--primary-color); font-size: var(--font-size-sm); }.process-item p { color: var(--text-muted); }.process-item > i { font-size: 1.5rem; }
.stats-section { padding-block: 4rem; color: #fff; background: var(--primary-color); }
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.stat { display: flex; flex-direction: column; padding-left: 2rem; border-left: 1px solid rgb(255 255 255 / 35%); }
.stat strong { font-size: clamp(2.5rem, 5vw, 4.5rem); line-height: 1; letter-spacing: -.06em; }.stat span { margin-top: .75rem; font-size: var(--font-size-sm); }
.contact-section { color: #d7ded9; background: var(--secondary-color); }
.contact-section h2 { color: #fff; }.contact-section > .col { align-items: flex-start; }
.contact-section .col-50 > p:not(.eyebrow) { max-width: 32rem; margin-top: 1.5rem; color: #acbbb5; }
.contact-email { margin-top: 2rem; color: var(--tertiary-color); font-size: clamp(1.2rem, 2vw, 1.6rem); border-bottom: 1px solid; }
.contact-form { display: flex; flex-direction: column; gap: 1.5rem; padding: 2rem; border-radius: var(--radius-lg); background: #fff; box-shadow: var(--shadow-md); }
.field { display: flex; flex-direction: column; gap: .55rem; }.field label { color: var(--heading-color); font-size: var(--font-size-sm); font-weight: 600; }
.field input, .field textarea { width: 100%; padding: .9rem 0; border: 0; border-bottom: 1px solid var(--border-color); border-radius: 0; color: var(--text-color); background: transparent; resize: vertical; }
.contact-form .btn { align-self: flex-start; border: 0; }

/* Pie compartido */
footer { min-height: var(--footer-min-height); padding: 5rem 0 2rem; color: var(--footer-text-color); background: var(--footer-bg-color); }
.footer-main { display: flex; padding-bottom: 4rem; }.footer-main .col-40 { padding-right: 7%; }.footer-main p { max-width: 30rem; margin-top: 1.25rem; color: #9eaaa6; }
.footer-main h4 { margin-bottom: 1.25rem; color: #fff; font-size: .8rem; letter-spacing: .15em; text-transform: uppercase; }
.footer-main .col-20 a { display: block; margin-bottom: .65rem; color: #b9c3bf; }.footer-main a:hover { color: var(--tertiary-color); }
.social-links { display: flex; flex-direction: column; gap: .65rem; }
.social-links a { display: flex !important; align-items: center; gap: .65rem; margin: 0 !important; }
.social-links i { display: grid; width: 2rem; aspect-ratio: 1; place-items: center; border: 1px solid rgb(255 255 255 / 18%); border-radius: 50%; }
.footer-bottom { display: flex; justify-content: space-between; padding-top: 2rem; border-top: 1px solid rgb(255 255 255 / 14%); color: #7f8d88; font-size: var(--font-size-xs); }

/* Volver arriba */
#arriba { position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 900; display: grid; width: 3rem; aspect-ratio: 1; place-items: center; border: 0; border-radius: 50%; color: #fff; background: var(--primary-color); box-shadow: var(--shadow-md); cursor: pointer; opacity: 0; visibility: hidden; transform: translateY(.75rem); transition: var(--transition-normal); }
#arriba.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.whatsapp-float { position: fixed; right: 1.25rem; bottom: 5rem; z-index: 900; display: flex; min-height: 3rem; align-items: center; gap: .55rem; padding: .75rem 1rem; border-radius: var(--radius-full); color: #fff; background: #25d366; box-shadow: var(--shadow-md); font-size: var(--font-size-sm); font-weight: 700; }
.whatsapp-float i { display: inline-flex; font-size: 1.35rem; }
.whatsapp-float:hover { color: #fff; background: #1eaf55; transform: translateY(-2px); }

/* Páginas interiores de demostración */
.page-hero { position: relative; overflow: hidden; padding-block: clamp(6rem, 12vw, 10rem); background: var(--surface-color); }
.page-hero::after { position: absolute; top: -8rem; right: -6rem; width: min(40vw, 32rem); aspect-ratio: 1; border-radius: 50%; content: ''; background: var(--tertiary-color); opacity: .7; }
.page-hero .col { position: relative; z-index: 1; }
.page-hero h1 { max-width: 14ch; }
.page-intro { max-width: 42rem; margin-top: 2rem; color: var(--text-muted); font-size: clamp(1.1rem, 2vw, 1.35rem); }
.page-hero-dark { color: #d7ded9; background: var(--secondary-color); }.page-hero-dark h1 { color: #fff; }.page-hero-dark::after { background: #b4c9ff; }
.page-hero-contact::after { background: var(--primary-color); opacity: .85; }
.abstract-panel { display: flex; min-height: 30rem; flex-direction: column; justify-content: flex-end; padding: 2rem; border-radius: var(--radius-xl); color: #fff; background: var(--primary-color); transform: rotate(-2deg); }
.abstract-panel span { font-size: clamp(5rem, 10vw, 9rem); font-weight: 700; line-height: .8; letter-spacing: -.08em; }.abstract-panel p { margin-top: 1.5rem; font-weight: 600; }
.values-grid { display: grid; grid-template-columns: repeat(3, 1fr); }
.value-card { min-height: 18rem; padding: 2rem; border: 1px solid var(--border-color); border-radius: var(--radius-lg); background: var(--bg-color); }
.value-card span { color: var(--primary-color); font-size: var(--font-size-sm); }.value-card h3 { margin-top: 5rem; }.value-card p { margin-top: 1rem; color: var(--text-muted); }
.mini-cta { color: #fff; background: var(--secondary-color); }.mini-cta h2 { margin-bottom: 2rem; color: #fff; }.mini-cta .eyebrow { color: var(--tertiary-color); }
.detail-list { border-top: 1px solid var(--border-color); }
.detail-row { display: grid; grid-template-columns: .35fr .5fr 3fr; gap: var(--column-gap); padding-block: 3.5rem; border-bottom: 1px solid var(--border-color); }
.detail-row > span { color: var(--primary-color); }.detail-row > i { font-size: 2.25rem; }.detail-row h2 { margin-bottom: 1rem; }.detail-row p { max-width: 43rem; color: var(--text-muted); }
.detail-row ul { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.5rem; list-style: none; }.detail-row li { padding: .55rem .9rem; border: 1px solid var(--border-color); border-radius: var(--radius-full); font-size: var(--font-size-sm); }
.process-page { background: var(--surface-color); }.timeline-item { display: grid; grid-template-columns: .7fr 2.5fr .5fr; gap: var(--column-gap); align-items: center; padding-block: 4rem; border-bottom: 1px solid var(--border-color); }
.timeline-number { color: var(--primary-color); font-size: clamp(2.8rem, 6vw, 5rem); font-weight: 700; letter-spacing: -.07em; }.timeline-item > i { color: var(--secondary-color); font-size: 3rem; }.timeline-item .lead { max-width: 42rem; margin-bottom: 0; }
.contact-page { background: var(--bg-color); }.contact-data { display: flex; flex-direction: column; gap: 2rem; margin-top: 3rem; }.contact-data > div { display: grid; grid-template-columns: auto 1fr; gap: .2rem 1rem; }.contact-data i { grid-row: 1 / 3; color: var(--primary-color); font-size: 1.5rem; }.contact-data span { color: var(--text-muted); font-size: var(--font-size-xs); text-transform: uppercase; letter-spacing: .1em; }.contact-data a, .contact-data p { font-weight: 600; }
.field select { width: 100%; padding: .9rem 0; border: 0; border-bottom: 1px solid var(--border-color); color: var(--text-color); background: transparent; }

/* Biblioteca de componentes frecuentes */
.breadcrumbs { margin-bottom: 3rem; }.breadcrumbs ol { display: flex; flex-wrap: wrap; gap: .6rem; color: var(--text-muted); font-size: var(--font-size-sm); list-style: none; }.breadcrumbs li + li::before { margin-right: .6rem; content: '/'; opacity: .5; }.breadcrumbs a:hover { color: var(--primary-color); }
.component-section { border-bottom: 1px solid var(--border-color); }.component-heading { display: grid; grid-template-columns: 5rem 1fr; gap: var(--column-gap); margin-bottom: 3rem; }.component-heading > span { color: var(--primary-color); font-size: var(--font-size-sm); }.component-heading .eyebrow { margin-bottom: .75rem; }.component-stage { padding: clamp(1.5rem, 4vw, 3rem); border: 1px dashed var(--border-color); border-radius: var(--radius-lg); background: var(--surface-color); }
.foundation-block { padding: clamp(1.5rem, 4vw, 3rem); border: 1px solid var(--border-color); border-radius: var(--radius-lg); background: var(--surface-color); }.foundation-title { margin-bottom: 2rem; font-size: 1rem; letter-spacing: .08em; text-transform: uppercase; }.foundation-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--column-gap); margin-top: var(--column-gap); }.type-scale { border-top: 1px solid var(--border-color); }.type-sample { display: grid; grid-template-columns: 4rem 1fr; gap: 1rem; align-items: baseline; padding-block: 1.5rem; border-bottom: 1px solid var(--border-color); }.type-sample > span { color: var(--text-muted); font-size: var(--font-size-xs); font-weight: 700; letter-spacing: .12em; }.type-sample h1 { font-size: clamp(2.5rem, 5vw, 5rem); }.type-sample h2 { font-size: clamp(2rem, 4vw, 3.5rem); }.text-samples { display: grid; gap: 1.5rem; }.text-samples .lead { margin: 0; }.text-small { font-size: var(--font-size-sm); }.text-muted { color: var(--text-muted); }.inline-link { color: var(--primary-color); text-decoration: underline; text-underline-offset: .2em; }.text-samples .eyebrow { margin: 0; }.color-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }.color-swatch { display: grid; grid-template-columns: 3.5rem 1fr; grid-template-rows: repeat(3, auto); column-gap: .8rem; align-items: center; }.color-swatch > span { grid-row: 1 / 4; width: 3.5rem; aspect-ratio: 1; border: 1px solid var(--border-color); border-radius: var(--radius-md); background: var(--swatch); }.color-swatch small, .color-swatch code { color: var(--text-muted); font-size: .7rem; }.color-swatch code { font-family: ui-monospace, monospace; }
.contrast-foundation { margin-top: var(--column-gap); }.contrast-intro { max-width: 48rem; margin: -1rem 0 2rem; }.contrast-intro code { padding: .15rem .35rem; border-radius: var(--radius-sm); background: var(--surface-hover); font-family: ui-monospace, monospace; font-size: .85em; }.contrast-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--column-gap); }.theme-preview { overflow: hidden; padding: clamp(1.25rem, 3vw, 2rem); border: 1px solid var(--theme-border); border-radius: var(--radius-lg); }.theme-label { display: block; margin-bottom: 1rem; color: var(--theme-muted); font-size: var(--font-size-xs); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }.theme-palette { display: flex; gap: .45rem; margin-bottom: 2rem; }.theme-palette i { width: 2.25rem; aspect-ratio: 1; border: 1px solid var(--theme-border); border-radius: 50%; background: var(--swatch); }.theme-preview .theme-surface { padding: clamp(1.25rem, 3vw, 2rem); border: 1px solid; border-radius: var(--radius-md); }.theme-preview .eyebrow { margin-bottom: 1rem; color: var(--theme-accent); }.theme-preview h3 { margin-bottom: 1rem; }.theme-preview p + p { margin-top: 1rem; }.theme-preview .button-row { margin-top: 1.5rem; }
.button-showcase { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; }.btn-dark { color: #fff; background: var(--secondary-color); }.btn-dark:hover { color: #fff; background: var(--secondary-hover); }.btn:disabled { cursor: not-allowed; opacity: .45; transform: none; }
.alert-stack { display: grid; gap: 1rem; }.alert { display: grid; grid-template-columns: auto 1fr auto; gap: 1rem; align-items: start; padding: 1.2rem; border: 1px solid; border-radius: var(--radius-md); }.alert > i { margin-top: .15rem; font-size: 1.25rem; }.alert p { margin-top: .2rem; font-size: var(--font-size-sm); }.alert-info { color: #164e63; border-color: #a5e5ef; background: #ecfeff; }.alert-success { color: #14532d; border-color: #a7e4bc; background: #f0fdf4; }.alert-warning { color: #713f12; border-color: #f5d48b; background: #fffbeb; }.alert-close { border: 0; color: currentColor; background: transparent; font-size: 1.5rem; cursor: pointer; }
.general-card-grid { display: grid; grid-template-columns: 1fr 1.5fr; gap: var(--column-gap); }.general-card { overflow: hidden; border: 1px solid var(--border-color); border-radius: var(--radius-lg); background: var(--surface-color); box-shadow: var(--shadow-sm); }.card-placeholder { display: grid; min-height: 13rem; place-items: center; color: var(--secondary-color); background: linear-gradient(135deg, var(--tertiary-color), #b4c9ff); font-size: 2rem; }.general-card-body { padding: 1.5rem; }.general-card-body h3 { margin-block: 1rem .75rem; }.general-card-body p { margin-bottom: 1.5rem; color: var(--text-muted); }.tag { display: inline-flex; padding: .35rem .7rem; border-radius: var(--radius-full); color: var(--secondary-color); background: rgb(201 255 86 / 45%); font-size: var(--font-size-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }.horizontal-card { display: grid; grid-template-columns: 1fr 1.2fr; }.horizontal-card .card-placeholder { min-height: 100%; }
.testimonial { max-width: 60rem; margin-inline: auto; }.testimonial blockquote { color: #fff; font-size: clamp(1.8rem, 4vw, 3.5rem); line-height: 1.25; letter-spacing: -.04em; }.testimonial figcaption { display: flex; gap: 1rem; align-items: center; margin-top: 2.5rem; }.testimonial figcaption div { display: flex; flex-direction: column; }.testimonial small { color: #acbbb5; }.avatar { display: grid; width: 3.25rem; aspect-ratio: 1; place-items: center; border-radius: 50%; color: var(--secondary-color); background: var(--tertiary-color); font-weight: 700; }
.accordion { border-top: 1px solid var(--border-color); }.accordion-item { border-bottom: 1px solid var(--border-color); }.accordion-trigger { display: flex; width: 100%; align-items: center; justify-content: space-between; padding-block: 1.5rem; border: 0; color: var(--heading-color); background: transparent; font-size: var(--font-size-lg); font-weight: 600; text-align: left; cursor: pointer; }.accordion-trigger i { transition: transform var(--transition-normal); }.accordion-trigger[aria-expanded="true"] i { transform: rotate(45deg); }.accordion-panel { max-width: 50rem; padding: 0 3rem 1.5rem 0; color: var(--text-muted); }
.modal { width: min(90%, 35rem); padding: clamp(1.5rem, 4vw, 3rem); border: 0; border-radius: var(--radius-lg); color: var(--text-color); background: var(--surface-color); box-shadow: var(--shadow-lg); }.modal::backdrop { background: rgb(13 31 27 / 72%); backdrop-filter: blur(5px); }.modal h2 { margin-bottom: 1.25rem; }.modal-close { position: absolute; top: 1rem; right: 1rem; display: grid; width: 2.5rem; aspect-ratio: 1; place-items: center; border: 1px solid var(--border-color); border-radius: 50%; background: transparent; font-size: 1.4rem; cursor: pointer; }
.cookie-banner { position: fixed; right: 1.25rem; bottom: 1.25rem; left: 1.25rem; z-index: 1200; display: flex; width: min(calc(100% - 2.5rem), 70rem); margin-inline: auto; align-items: center; justify-content: space-between; gap: 2rem; padding: 1.25rem; border: 1px solid var(--border-color); border-radius: var(--radius-lg); background: var(--surface-color); box-shadow: var(--shadow-lg); }.cookie-banner[hidden] { display: none; }.cookie-banner p { margin-top: .3rem; color: var(--text-muted); font-size: var(--font-size-sm); }.cookie-actions { display: flex; flex-shrink: 0; gap: .5rem; }

/* Páginas legales y estados estructurales */
.legal-hero { padding-block: clamp(4rem, 8vw, 7rem); background: var(--surface-color); }.legal-hero-inner { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; }.legal-hero h1 { max-width: 15ch; }.legal-hero-inner > i { color: var(--primary-color); font-size: clamp(4rem, 10vw, 8rem); opacity: .9; }.legal-section { background: var(--bg-color); }.legal-layout { display: grid; grid-template-columns: minmax(12rem, 1fr) minmax(0, 3fr); gap: clamp(2rem, 7vw, 7rem); align-items: start; }.legal-nav { position: sticky; top: calc(var(--navbar-height) + 2rem); display: flex; flex-direction: column; gap: .8rem; padding: 1.25rem; border-left: 2px solid var(--primary-color); }.legal-nav strong { margin-bottom: .5rem; }.legal-nav a { color: var(--text-muted); font-size: var(--font-size-sm); }.legal-nav a:hover { color: var(--primary-color); }.legal-content { max-width: 52rem; }.legal-content > section { padding-block: 2.5rem; border-bottom: 1px solid var(--border-color); scroll-margin-top: calc(var(--navbar-height) + 2rem); }.legal-content h2 { margin-bottom: 1.25rem; font-size: clamp(1.65rem, 3vw, 2.3rem); }.legal-content p, .legal-content li { color: #4f5955; line-height: var(--line-height-relaxed); }.legal-content ul { display: grid; gap: .5rem; margin: 1.25rem 0 0 1.25rem; }.legal-content a { color: var(--primary-color); text-decoration: underline; text-underline-offset: .2em; }.legal-note { display: grid; grid-template-columns: auto 1fr; gap: 1rem; padding: 1.25rem; border: 1px solid #f5d48b; border-radius: var(--radius-md); color: #713f12; background: #fffbeb; }.legal-note i { font-size: 1.25rem; }.legal-note p { color: inherit; }.cookie-types { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 1.5rem; }.cookie-types article { padding: 1.25rem; border: 1px solid var(--border-color); border-radius: var(--radius-md); background: var(--surface-color); }.cookie-types p { margin-top: .5rem; font-size: var(--font-size-sm); }.table-wrapper { overflow-x: auto; margin-top: 1.5rem; border: 1px solid var(--border-color); border-radius: var(--radius-md); }.legal-content table { width: 100%; border-collapse: collapse; min-width: 38rem; }.legal-content th, .legal-content td { padding: 1rem; border-bottom: 1px solid var(--border-color); text-align: left; }.legal-content th { background: var(--surface-hover); font-size: var(--font-size-sm); }.legal-content td { color: #4f5955; font-size: var(--font-size-sm); }
.status-page { position: relative; display: grid; min-height: calc(100svh - var(--navbar-height)); place-items: center; overflow: hidden; padding-block: clamp(5rem, 10vw, 8rem); background: var(--surface-color); }.status-content { position: relative; z-index: 1; text-align: center; }.status-content h1 { max-width: 14ch; margin-inline: auto; }.status-content .page-intro { margin-inline: auto; }.status-content .button-row { justify-content: center; }.status-code { color: var(--primary-color); font-size: clamp(6rem, 18vw, 14rem); font-weight: 700; line-height: .72; letter-spacing: -.1em; opacity: .14; }.status-orb { position: absolute; top: 10%; right: -8rem; width: min(40vw, 30rem); aspect-ratio: 1; border-radius: 50%; background: var(--tertiary-color); }.success-page .status-orb { right: auto; left: -8rem; background: #b4c9ff; }.success-icon { display: grid; width: 5rem; aspect-ratio: 1; margin: 0 auto 2rem; place-items: center; border-radius: 50%; color: #fff; background: var(--primary-color); font-size: 2rem; box-shadow: var(--shadow-md); }.next-steps { display: grid; grid-template-columns: repeat(3, 1fr); max-width: 52rem; margin: 3rem auto; text-align: left; }.next-steps > div { padding: 1.25rem; border-left: 1px solid var(--border-color); }.next-steps span { color: var(--primary-color); font-size: var(--font-size-sm); font-weight: 700; }.next-steps p { margin-top: .5rem; color: var(--text-muted); }

/* Documentación web */
.docs-hero { padding-block: clamp(6rem, 11vw, 9rem); }.docs-hero h1 { max-width: 15ch; }.docs-hero .page-intro { color: var(--dark-muted); }.docs-hero .breadcrumbs { color: var(--dark-muted); }.docs-meta { display: flex; flex-wrap: wrap; gap: 1rem 2rem; margin-top: 3rem; color: var(--dark-muted); font-size: var(--font-size-sm); }.docs-meta span { display: flex; align-items: center; gap: .55rem; }.docs-meta i { color: var(--dark-link); }
.docs-section { background: var(--bg-color); }.docs-layout { display: grid; grid-template-columns: 15rem minmax(0, 1fr); gap: clamp(2rem, 6vw, 6rem); align-items: start; }.docs-nav { position: sticky; top: calc(var(--navbar-height) + 1.5rem); display: flex; max-height: calc(100svh - var(--navbar-height) - 3rem); flex-direction: column; gap: .35rem; overflow-y: auto; padding: 1.25rem; border: 1px solid var(--border-color); border-radius: var(--radius-lg); background: var(--surface-color); }.docs-nav strong { margin-bottom: .75rem; }.docs-nav a { padding: .45rem .65rem; border-radius: var(--radius-sm); color: var(--text-muted); font-size: var(--font-size-sm); }.docs-nav a:hover { color: var(--primary-color); background: var(--surface-hover); }
.docs-content { min-width: 0; max-width: 57rem; }.docs-content > section { padding-block: 1rem 5rem; scroll-margin-top: calc(var(--navbar-height) + 2rem); }.docs-content > section + section { padding-top: 5rem; border-top: 1px solid var(--border-color); }.docs-content h2 { margin-bottom: 1.5rem; }.docs-content h3 { margin-block: 2rem 1rem; }.docs-content p { max-width: 48rem; }.docs-content code { padding: .15rem .35rem; border-radius: .25rem; color: #b52f13; background: #f2eae0; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: .88em; }.docs-overline { margin-bottom: .75rem; color: var(--primary-color); font-size: var(--font-size-xs); font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.docs-principles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 2.5rem; }.docs-principles article { padding: 1.5rem; border: 1px solid var(--border-color); border-radius: var(--radius-md); background: var(--surface-color); }.docs-principles span { color: var(--primary-color); font-size: var(--font-size-sm); font-weight: 700; }.docs-principles h3 { margin: 2.5rem 0 .75rem; }.docs-principles p { color: var(--text-muted); font-size: var(--font-size-sm); }
.docs-callout { display: grid; grid-template-columns: auto 1fr; gap: 1rem; margin-top: 2rem; padding: 1.25rem; border-left: 3px solid var(--tertiary-color); border-radius: 0 var(--radius-md) var(--radius-md) 0; background: var(--secondary-color); color: #e6ede9; }.docs-callout i { color: var(--tertiary-color); font-size: 1.4rem; }.docs-callout-dark { border-color: var(--primary-color); background: var(--footer-bg-color); }.docs-callout-dark i { color: var(--primary-color); }
.docs-steps { display: grid; gap: 0; margin-top: 2rem; list-style: none; }.docs-steps li { display: grid; grid-template-columns: 3rem 1fr; gap: 1rem; padding: 1.25rem 0; border-bottom: 1px solid var(--border-color); }.docs-steps li > span { display: grid; width: 2.25rem; aspect-ratio: 1; place-items: center; border-radius: 50%; color: var(--secondary-color); background: var(--tertiary-color); font-weight: 700; }.docs-steps p { margin-top: .3rem; color: var(--text-muted); }
.docs-config-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-block: 2rem 3rem; }.docs-config-grid article { display: flex; flex-direction: column; padding: 1.25rem; border: 1px solid var(--border-color); border-radius: var(--radius-md); background: var(--surface-color); }.docs-config-grid i { margin-bottom: 1rem; color: var(--primary-color); font-size: 1.5rem; }.docs-config-grid h3 { margin: 0 0 .75rem; }.docs-config-grid code { align-self: flex-start; margin-top: .35rem; }
.docs-code { overflow: hidden; margin-block: 1.5rem; border: 1px solid rgb(255 255 255 / 12%); border-radius: var(--radius-md); background: #10231f; box-shadow: var(--shadow-sm); }.docs-code-head { display: flex; justify-content: space-between; padding: .75rem 1rem; border-bottom: 1px solid rgb(255 255 255 / 12%); color: #aebdb8; font-size: var(--font-size-xs); }.docs-code pre { overflow-x: auto; padding: 1.25rem; }.docs-code code { padding: 0; color: #dce8e3; background: transparent; font-size: var(--font-size-sm); line-height: 1.65; white-space: pre; }
.docs-table-wrap { overflow-x: auto; margin-block: 2rem; border: 1px solid var(--border-color); border-radius: var(--radius-md); }.docs-table { width: 100%; min-width: 40rem; border-collapse: collapse; background: var(--surface-color); }.docs-table th, .docs-table td { padding: 1rem; border-bottom: 1px solid var(--border-color); text-align: left; vertical-align: top; }.docs-table th { background: var(--surface-hover); font-size: var(--font-size-sm); }.docs-table td { color: var(--text-muted); }
.docs-tree { display: flex; flex-direction: column; margin-block: 2rem; padding: 1.5rem; border-radius: var(--radius-md); color: #dce8e3; background: #10231f; }.docs-tree code { padding: .12rem 0; color: inherit; background: transparent; }.docs-file-list { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }.docs-file-list article { padding: 1.25rem; border-left: 2px solid var(--primary-color); background: var(--surface-color); }.docs-file-list p { margin-top: .4rem; color: var(--text-muted); font-size: var(--font-size-sm); }
.docs-numbered { display: grid; gap: .8rem; margin: 1.5rem 0 2rem 1.25rem; }.docs-numbered li { padding-left: .5rem; }.docs-tags { display: flex; flex-wrap: wrap; gap: .6rem; margin-block: 2rem; }.docs-tags span { padding: .55rem .9rem; border: 1px solid var(--border-color); border-radius: var(--radius-full); background: var(--surface-color); font-size: var(--font-size-sm); }
.docs-check-list { display: grid; gap: .75rem; list-style: none; }.docs-check-list li { display: grid; grid-template-columns: auto 1fr; gap: .75rem; align-items: start; padding-bottom: .75rem; border-bottom: 1px solid var(--border-color); }.docs-check-list i { color: var(--primary-color); }
.docs-check-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }.docs-check-grid article { display: flex; flex-direction: column; gap: .75rem; padding: 1.25rem; border: 1px solid var(--border-color); border-radius: var(--radius-md); background: var(--surface-color); }.docs-check-grid h3 { margin: 0 0 .5rem; }.docs-check-grid label { display: flex; gap: .6rem; align-items: flex-start; color: var(--text-muted); font-size: var(--font-size-sm); }.docs-check-grid input { width: 1rem; height: 1rem; margin-top: .15rem; accent-color: var(--primary-color); }
.docs-flow { display: flex; align-items: center; gap: .75rem; margin-block: 2rem; }.docs-flow span { padding: .8rem 1rem; border: 1px solid var(--border-color); border-radius: var(--radius-full); background: var(--surface-color); font-size: var(--font-size-sm); text-align: center; }.docs-flow i { color: var(--primary-color); }.docs-ending { margin-top: 3rem; font-size: var(--font-size-xl); }

@media (max-width: 64rem) {
  .menu-toggle { display: block; }
  .nav-menu-wrapper { position: fixed; top: var(--navbar-height); right: 0; display: flex; width: min(100%, var(--navbar-menu-width)); height: calc(100dvh - var(--navbar-height)); flex-direction: column; align-items: stretch; justify-content: flex-start; padding: 2rem; background: var(--surface-color); box-shadow: var(--shadow-lg); transform: translateX(105%); transition: transform var(--transition-normal); }
  .nav-menu-wrapper.active { transform: translateX(0); }.nav-menu { flex-direction: column; align-items: stretch; gap: .5rem; }.nav-link { width: 100%; font-size: 1.2rem; }
  .menu-toggle[aria-expanded="true"] .hamburger { background: transparent; }.menu-toggle[aria-expanded="true"] .hamburger::before { transform: translateY(0) rotate(45deg); }.menu-toggle[aria-expanded="true"] .hamburger::after { transform: translateY(-2px) rotate(-45deg); }
  .hero-copy { width: 62%; }.hero-visual { width: 38%; }.hero-card { right: 0; }.orb-one { width: 20rem; }
  .section-heading { grid-template-columns: 1fr 2fr; }.section-heading p:last-child { grid-column: 2; }
  .docs-layout { grid-template-columns: 12rem minmax(0, 1fr); gap: 2.5rem; }.docs-principles { grid-template-columns: 1fr; }.docs-flow { align-items: stretch; flex-direction: column; }.docs-flow i { align-self: center; transform: rotate(90deg); }
}

@media (max-width: 40rem) {
  :root { --navbar-height: 4.75rem; --section-padding: 5rem; }
  .two-column, .hero-layout, .contact-layout, .grid-stretch, .footer-main { flex-direction: column; }
  .col-20, .col-25, .col-30, .col-33, .col-40, .col-50, .col-60, .col-70, .col-75, .col-80 { width: 100%; }
  .hero { min-height: auto; padding-top: 4rem; }.hero-layout { display: block; }.hero h1 { font-size: clamp(3.2rem, 15vw, 5rem); }.hero-visual { min-height: 22rem; margin-top: 3rem; }.orb-one { width: 17rem; }.orb-two { width: 11rem; }.hero-card { right: 1rem; width: 16rem; min-height: 14rem; }.hero-marquee { justify-content: flex-start; overflow: hidden; }
  .section-heading, .process-section .section-heading { display: block; }.section-heading h2 { margin-bottom: 1rem; }
  .service-grid { grid-template-columns: 1fr; }.service-card { min-height: 21rem; }.service-card.featured { transform: none; }
  .process-item { grid-template-columns: auto 1fr auto; }.process-item p { grid-column: 2 / -1; }.process-item > i { grid-row: 1; grid-column: 3; }
  .stats-grid { grid-template-columns: 1fr 1fr; gap: 2.5rem 1rem; }.stat { padding-left: 1rem; }
  .contact-form { padding: 1.5rem; }.footer-main { gap: 2.5rem; }.footer-main .col-40 { padding-right: 0; }.footer-bottom { gap: 1rem; flex-direction: column; }
  .whatsapp-float { width: 3rem; padding: 0; justify-content: center; }.whatsapp-float span { display: none; }
  .page-hero::after { top: auto; right: -5rem; bottom: -7rem; width: 18rem; }.page-hero h1 { font-size: clamp(3.1rem, 14vw, 5rem); }
  .values-grid { grid-template-columns: 1fr; }.value-card { min-height: 14rem; }.value-card h3 { margin-top: 3rem; }
  .detail-row { grid-template-columns: auto 1fr; }.detail-row > i { grid-row: 1; grid-column: 2; }.detail-row > div { grid-column: 1 / -1; }
  .timeline-item { grid-template-columns: 1fr auto; }.timeline-item > div:nth-child(2) { grid-column: 1 / -1; grid-row: 2; }.timeline-item > i { grid-row: 1; grid-column: 2; }
  .component-heading { grid-template-columns: 2.5rem 1fr; }.general-card-grid { grid-template-columns: 1fr; }.horizontal-card { grid-template-columns: 1fr; }.horizontal-card .card-placeholder { min-height: 13rem; }.cookie-banner { flex-direction: column; align-items: stretch; }.cookie-actions { flex-direction: column; }.cookie-actions .btn { width: 100%; }
  .foundation-grid { grid-template-columns: 1fr; }.type-sample { grid-template-columns: 2.5rem 1fr; }.color-grid { grid-template-columns: 1fr; }
  .contrast-grid { grid-template-columns: 1fr; }
  .legal-hero-inner { align-items: flex-start; }.legal-hero-inner > i { font-size: 3.5rem; }.legal-layout { grid-template-columns: 1fr; }.legal-nav { position: static; display: none; }.cookie-types { grid-template-columns: 1fr; }.next-steps { grid-template-columns: 1fr; }.status-orb { width: 18rem; }
  .docs-layout { grid-template-columns: 1fr; }.docs-nav { position: static; display: none; }.docs-content > section { padding-bottom: 4rem; }.docs-content > section + section { padding-top: 4rem; }.docs-config-grid, .docs-file-list, .docs-check-grid { grid-template-columns: 1fr; }.docs-principles { grid-template-columns: 1fr; }.docs-meta { flex-direction: column; gap: .75rem; }
}


/* Contigo Seguro: primera composición de inicio. */
h1, h2, h3, h4 { font-family: var(--font-heading); font-weight: 600; letter-spacing: -.025em; line-height: 1.12; }
.nav-logo img { width: 13rem; height: auto; max-height: 4.3rem; object-fit: contain; }
.nav-menu { gap: 1.25rem; }
.nav-menu-wrapper { gap: 1.5rem; }
.nav-link { font-size: .83rem; }
.btn-contact { color: #fff; background: var(--primary-color); border-radius: .35rem; }
.btn-contact:hover { background: var(--tertiary-color); }
.cs-home .btn { border-radius: .35rem; }
.cs-home section[id], .cs-home article[id] { scroll-margin-top: calc(var(--navbar-height) + 1.5rem); }
.cs-eyebrow { margin-bottom: 1.25rem; font-size: .78rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--tertiary-color); }
.cs-hero { padding: clamp(3.5rem, 7vw, 7rem) 0; background-color: #fff; background-image: linear-gradient(90deg, rgb(255 255 255 / 65%), rgb(255 255 255 / 10%)), url("../assets/images/hero-inicio.webp"); background-position: center; background-size: cover; background-repeat: no-repeat; border-bottom: 1px solid #dce4ec; }
.cs-hero-grid { display: grid; grid-template-columns: 1.35fr 1fr; align-items: center; gap: clamp(2rem, 6vw, 6rem); }
.cs-hero h1 { max-width: 14ch; font-size: clamp(2.65rem, 4.8vw, 4.6rem); line-height: 1.04; }
.cs-hero h1 span { color: var(--tertiary-color); }
.cs-hero-intro { max-width: 32rem; margin: 1.75rem 0 2rem; color: var(--text-muted); font-size: 1.2rem; }
.cs-text-link { display: inline-flex; gap: .75rem; align-items: center; padding: .75rem 0; color: var(--primary-color); font-weight: 600; text-decoration: underline; text-underline-offset: .3em; }
.cs-text-link:hover { color: var(--tertiary-color); }
.cs-hero-panel { color: #fff; background: var(--primary-color); padding: 2.25rem; border-top: 6px solid var(--secondary-color); }
.cs-panel-label { color: #d2dfed; font-size: .75rem; text-transform: uppercase; letter-spacing: .18em; }
.cs-hero-panel > a { display: grid; grid-template-columns: 1fr auto; gap: 1rem; padding: 2rem 0; border-bottom: 1px solid #ffffff30; }
.cs-panel-number { grid-column: 1 / -1; color: #b8cfe2; font-size: .8rem; }
.cs-hero-panel h2 { color: #fff; font-size: clamp(1.65rem, 2.5vw, 2.5rem); }
.cs-panel-arrow { align-self: end; color: #ffb47f; font-size: 2rem; }
.cs-hero-panel a:hover h2 { color: #d5e5f2; }
.cs-panel-bottom { margin-top: 1.5rem; font-size: .75rem; color: #d2dfed; }
.cs-panel-bottom span { padding: 0 .5rem; color: #ffb47f; }
.cs-section-heading { display: grid; grid-template-columns: 1fr 2fr; gap: 2rem; margin-bottom: 3rem; }
.cs-section-heading h2 { max-width: 22ch; font-size: clamp(2rem, 3.6vw, 3.2rem); }
.cs-service-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; }
.cs-service { padding: 2.5rem; border: 1px solid #d9e2eb; background: white; border-top: 3px solid var(--secondary-color); }
.cs-service-number { display: block; margin-bottom: 2rem; color: var(--tertiary-color); font-family: var(--font-heading); }
.cs-service h3 { font-size: 1.9rem; margin-bottom: 1rem; }
.cs-service p { max-width: 36ch; color: var(--text-muted); margin-bottom: 1rem; }
.cs-brands { padding: 4rem 0; background: #fff; border-block: 1px solid #dce4ec; }
.cs-brands h2 { font-size: 2rem; }
.cs-brand-list { display: flex; flex-wrap: wrap; gap: 1.5rem 3rem; list-style: none; margin: 2.5rem 0; font-family: var(--font-heading); font-size: 1.8rem; font-weight: 600; color: var(--primary-color); }
.cs-all-brands summary { cursor: pointer; font-weight: 600; color: var(--tertiary-color); }
.cs-all-brands p { margin-top: 1rem; max-width: 65rem; line-height: 1.9; }
.cs-coverage { background-color: var(--primary-color); background-image: linear-gradient(90deg, rgb(21 47 90 / 94%), rgb(21 47 90 / 82%)), url('../assets/images/bg-cobertura.webp'); background-position: center; background-size: cover; background-repeat: no-repeat; color: #d5e1ed; }
.cs-coverage-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; }
.cs-coverage h2 { color: #fff; margin-bottom: 1.5rem; }
.cs-coverage .cs-eyebrow { color: #ffb47f; }
.cs-coverage p { max-width: 35ch; }
.cs-location-list { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 0 2rem; }
.cs-location-list li { padding: .75rem 0; border-bottom: 1px solid #ffffff30; }
.cs-contact { background: #fff; }
.cs-contact h2 { margin-bottom: 1.5rem; }
.cs-contact p:last-child { max-width: 48rem; color: var(--text-muted); }
.cs-footer-layout { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 3rem; padding-bottom: 3rem; }
.cs-footer-logo { background: transparent; padding: 0; border-radius: 0; }
.cs-footer-logo img { width: 14rem; max-width: 100%; height: auto; }
.cs-footer-brand-column { min-width: 0; text-align: center; }
.cs-footer-brand-column .cs-footer-logo { max-width: 100%; justify-content: center; }
.cs-footer-layout .cs-footer-brand-column p { max-width: 26ch; margin: 1rem auto 0; color: #fff; font-family: var(--font-heading); font-size: 1.125rem; font-weight: 600; line-height: 1.5; }
.cs-footer-layout h4 { color: #fff; margin-bottom: 1.25rem; }
.cs-footer-layout p { color: #d5e1ed; margin-top: 1.5rem; }
.cs-footer-layout > div > a:not(.footer-brand) { display: block; margin-bottom: .75rem; color: #d5e1ed; }
.cs-footer-layout a:hover { text-decoration: underline; }
.footer-bottom { color: #b7cbe0; }
.footer-bottom { flex-wrap: wrap; gap: 1rem 2rem; }
.cs-footer-legal { display: flex; flex-wrap: wrap; gap: .75rem 1.25rem; }
.cs-footer-legal a { color: inherit; text-underline-offset: .2em; }
.cs-footer-legal a:hover, .cs-footer-legal a:focus-visible { color: #fff; text-decoration: underline; }
@media (max-width: 64rem) { .nav-link { display: block; font-size: 1rem; } .cs-hero-grid { gap: 2rem; } .cs-coverage-grid { gap: 2rem; } .nav-menu-wrapper { visibility: hidden; } .nav-menu-wrapper.active { visibility: visible; } }
@media (max-width: 48rem) { .cs-hero-grid, .cs-section-heading, .cs-service-grid, .cs-coverage-grid, .cs-footer-layout { grid-template-columns: 1fr; } .cs-hero h1 { max-width: 19ch; } .cs-hero-panel { padding: 1.5rem; } .cs-service { padding: 1.75rem; } .cs-section-heading { gap: .5rem; } .cs-location-list { gap: 0 1rem; } }
/* Ajustes para el copy completo de inicio y las cuatro especialidades. */
.cs-home h2 + p { margin-top: 1.5rem; }
.cs-prose { max-width: 65ch; margin-top: 2rem; }
.cs-hero h1 { font-size: clamp(2.6rem, 4.2vw, 4.1rem); max-width: 20ch; }
.cs-hero-panel > a { padding: 1.1rem 0; gap: .5rem; }
.cs-hero-panel h2 { font-size: 1.6rem; }
.cs-service-grid { margin-top: 2.5rem; }
.cs-service p { max-width: none; }
.cs-detail-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 2.5rem; margin-top: 3rem; }
.cs-detail-grid article { border-top: 2px solid var(--secondary-color); padding-top: 1.5rem; }
.cs-detail-grid h3 { margin-bottom: 1rem; }
.cs-differences, .cs-process { background: white; }
.cs-sector-list { display: grid; grid-template-columns: repeat(2,1fr); gap: 1rem 2rem; margin-top: 2rem; padding-left: 1.2rem; }
.cs-coverage p { max-width: 65ch; }
.cs-coverage-more { margin-top: 2rem; }
.cs-coverage-more summary { cursor: pointer; text-decoration: underline; text-underline-offset: .25rem; }
.cs-location-list { margin-top: 1.5rem; }
.cs-contact .button-row { margin-top: 2rem; }
.cs-contact-info { display: flex; flex-wrap: wrap; gap: 1rem 2rem; margin-top: 2rem; }
.cs-contact-info a { text-decoration: underline; overflow-wrap: anywhere; }
.cs-footer-layout { grid-template-columns: 1.2fr .7fr 1fr 1.2fr; gap: 2rem; }
.cs-footer-layout a { overflow-wrap: anywhere; }
.has-submenu { position: relative; }
.cs-service-nav { display: flex; align-items: center; gap: .3rem; }
.submenu-toggle { border: 0; background: transparent; color: var(--primary-color); padding: .7rem; cursor: pointer; }
.cs-submenu { display: none; list-style: none; position: absolute; top: 100%; left: 0; min-width: 17rem; padding: .75rem; background: white; border: 1px solid var(--border-color); box-shadow: var(--shadow-md); }
.has-submenu.is-open .cs-submenu { display: block; }
.cs-submenu a { display: block; padding: .7rem; font-size: .9rem; }
.cs-submenu a:hover, .cs-submenu a:focus-visible { background: var(--bg-color); }
@media(max-width:64rem) { .cs-submenu { position: static; min-width: 0; box-shadow: none; } .nav-menu-wrapper { overflow-y: auto; } .cs-footer-layout { grid-template-columns: repeat(2,1fr); } }
@media(max-width:48rem) { .cs-detail-grid, .cs-sector-list, .cs-footer-layout { grid-template-columns: 1fr; } }



/* Presentación de la empresa con imagen lateral. */
.cs-about-layout { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: center; gap: clamp(2rem, 5vw, 5rem); }
.cs-about-image { margin: 0; }
.cs-about-image img { width: 100%; height: auto; border-radius: var(--radius-lg); }
@media (max-width: 48rem) { .cs-about-layout { grid-template-columns: 1fr; } }

/* Iconografía Flaticon: Thin Straight para interfaz y Brands para WhatsApp. */
.cs-inline-icon { display: inline-block; margin-inline-end: .55em; font-size: 1.15em; vertical-align: -.12em; line-height: 1; flex-shrink: 0; }
.cs-feature-icon { display: inline-flex; align-items: center; justify-content: center; width: 3.25rem; height: 3.25rem; margin-bottom: 1.25rem; border-radius: .65rem; background: #eaf0f5; color: var(--tertiary-color); font-size: 1.8rem; line-height: 1; }
.cs-service .cs-service-number { margin-bottom: 1rem; }
.cs-eyebrow .fi { color: var(--secondary-color); }
.cs-coverage .cs-eyebrow .fi { color: #ffb47f; }
.cs-hero-panel h2 .fi { color: #ffb47f; }
.cs-panel-arrow .fi { display: inline-block; font-size: 1.5rem; line-height: 1; }
.cs-sector-list { list-style: none; padding-left: 0; }
.cs-sector-list li, .cs-location-list li { display: flex; align-items: baseline; gap: .8rem; }
.cs-sector-list .fi { flex-shrink: 0; color: var(--tertiary-color); font-size: 1.4rem; }
.cs-location-list .fi { flex-shrink: 0; color: #ffb47f; }
.button-row .cs-inline-icon { margin-inline-end: 0; }
.submenu-toggle .fi { display: inline-block; transition: transform var(--transition-fast); }
.submenu-toggle[aria-expanded="true"] .fi { transform: rotate(180deg); }

/* Metodología: cuatro pasos en una misma fila en escritorio. */
.cs-process .cs-detail-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1.25rem, 2.5vw, 2.5rem); }
.cs-process .cs-detail-grid h3 { font-size: 1.25rem; }
@media (max-width: 64rem) { .cs-process .cs-detail-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 40rem) { .cs-process .cs-detail-grid { grid-template-columns: 1fr; } }

/* Movimiento sutil en tarjetas e iconos. */
  .cs-home .cs-service { transition: box-shadow 250ms ease, border-color 250ms ease; }
  .cs-home .cs-feature-icon, .cs-home .cs-panel-arrow { transition: transform 250ms ease; }
  .cs-home .cs-hero-panel > a { transition: background-color 250ms ease; }
@media (hover: hover) {
  .cs-home .cs-service:hover { box-shadow: 0 12px 28px rgb(21 47 90 / 9%); border-color: var(--tertiary-color); }
  .cs-home .cs-service:hover .cs-feature-icon, .cs-home .cs-detail-grid article:hover .cs-feature-icon { transform: translateY(-3px); }
  .cs-home .cs-hero-panel > a:hover .cs-panel-arrow { transform: translate(2px, -2px); }
  .cs-home .cs-hero-panel > a:hover { background-color: rgb(255 255 255 / 4%); }
}

.cs-hero-secondary { background: var(--secondary-color); color: #fff; }
.cs-hero-secondary:hover { background: #ef7b2d; color: #fff; transform: translateY(-2px); }


/* Diferenciadores: contenido 70 % e imagen 30 % del espacio disponible. */
.cs-differences-layout { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 3fr); align-items: start; gap: clamp(2rem, 4vw, 4rem); margin-top: 3rem; }
.cs-differences-layout > .cs-detail-grid { grid-template-columns: minmax(0, 1fr); margin-top: 0; gap: 1.75rem; }
.cs-differences-layout article { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 1.25rem; }
.cs-differences-layout article > .cs-feature-icon { grid-column: 1; grid-row: 1 / 3; margin-bottom: 0; }
.cs-differences-layout article > h3, .cs-differences-layout article > p { grid-column: 2; }
.cs-differences-layout article > h3 { margin-bottom: .6rem; }
.cs-differences-visual { margin: 0; overflow: hidden; border-radius: var(--radius-lg); background: var(--primary-color); }
.cs-differences-visual img { width: 100%; height: auto; }
.cs-differences-visual figcaption { padding: 1.5rem; border-top: 4px solid var(--secondary-color); color: #fff; font-family: var(--font-heading); font-size: clamp(1.1rem, 1.7vw, 1.5rem); font-weight: 600; line-height: 1.35; }
@media (max-width: 48rem) { .cs-differences-layout { grid-template-columns: minmax(0, 1fr); } .cs-differences-visual { width: 100%; max-width: 28rem; justify-self: center; } }

/* Mapa regional de cobertura. */
.cs-map-block { margin-top: 2.5rem; }
.cs-map-heading { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; margin-bottom: 1rem; }
.cs-map-heading h3 { color: white; }
#coverage-map-reset { border: 1px solid #ffffff70; border-radius: .35rem; padding: .6rem 1rem; background: transparent; color: white; cursor: pointer; font: inherit; }
#coverage-map-reset:hover { background: #ffffff15; }
#coverage-map { height: clamp(22rem, 48vw, 32rem); width: 100%; border-radius: var(--radius-md); background: #eaf0f5; color: #152f5a; isolation: isolate; z-index: 0; }
#coverage-map-fallback { padding: 2rem; }
#coverage-map-fallback a { text-decoration: underline; }
.cs-map-pin span { display: block; width: 24px; height: 24px; border-radius: 50%; border: 3px solid white; background: var(--secondary-color); box-shadow: 0 2px 8px #152f5a70; }
.cs-map-pin:focus-visible { outline: 3px solid var(--primary-color); outline-offset: 4px; }
#coverage-map .leaflet-popup-content { font-family: var(--font-sans); font-size: .9rem; line-height: 1.5; }
#coverage-map .leaflet-popup-content p { margin: .5rem 0 0; }
#coverage-map .leaflet-control-attribution { font-size: .7rem; color: #24394d; }
.cs-coverage .cs-map-caption { max-width: none; margin-top: .85rem; font-size: .85rem; }
.cs-map-status:empty { display: none; }
.cs-map-zone { border: 0; padding: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; text-decoration: underline; text-underline-offset: .2em; }
.cs-map-zone:hover { color: #ffb47f; }

/* Cobertura: localidades a la izquierda y mapa a la derecha. */
.cs-coverage-layout { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 7fr); gap: clamp(1.5rem, 3vw, 3rem); align-items: start; margin-top: 3rem; }
.cs-coverage-places h3 { color: #fff; }
.cs-coverage-layout .cs-location-list { grid-template-columns: minmax(0, 1fr); margin-top: 1rem; }
.cs-coverage-layout .cs-location-list li { padding-block: .6rem; }
.cs-coverage-layout .cs-map-block { margin-top: 0; min-width: 0; }
.cs-coverage-layout #coverage-map { height: 35rem; }
@media (max-width: 48rem) {
  .cs-coverage-layout { grid-template-columns: minmax(0, 1fr); }
  .cs-coverage-layout .cs-location-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cs-coverage-layout #coverage-map { height: 25rem; }
}
@media (max-width: 30rem) { .cs-coverage-layout .cs-location-list { grid-template-columns: minmax(0, 1fr); } }

/* Páginas de servicios: componentes compartidos con inicio. */
.cs-service-page section[id] { scroll-margin-top: calc(var(--navbar-height) + 1.5rem); }
.cs-service-page .btn { border-radius: .35rem; }
.cs-service-hero { padding: 2rem 0 5rem; background: linear-gradient(90deg, #fffffff0, #ffffffa6), url('../assets/images/hero-inicio.webp') center / cover; }
.cs-service-hero.cs-maintenance-hero { background-image: linear-gradient(90deg, #fffffff0, #ffffffa6), url('../assets/images/bg-mantenimiento.webp'); }
.cs-breadcrumbs { display: flex; flex-wrap: wrap; gap: .65rem; font-size: .85rem; color: var(--text-muted); margin-bottom: 3rem; }
.cs-breadcrumbs a { text-decoration: underline; text-underline-offset: .2em; }
.cs-service-hero-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.cs-service-hero h1 { font-size: clamp(2.4rem, 4.5vw, 4.4rem); max-width: 22ch; }
.cs-service-lead { font-size: 1.2rem; color: var(--text-muted); margin-top: 1.5rem; }
.cs-service-hero .button-row { margin-top: 2rem; }
.cs-service-intro { padding: 2rem; background: var(--primary-color); color: #e2eaf3; border-top: 4px solid var(--secondary-color); border-radius: .4rem; }
.cs-service-intro > .fi { display: inline-block; font-size: 3rem; color: #ffb47f; margin-bottom: 1.25rem; }
.cs-service-heading { max-width: 65rem; margin-bottom: 2rem; }
.cs-service-heading h2 { font-size: clamp(1.9rem, 3.3vw, 3rem); }
.cs-service-content { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem 2rem; }
.cs-service-content > p, .cs-service-content > .button-row, .cs-service-content > ul, .cs-service-content > .cs-contact-info { grid-column: 1 / -1; margin-top: 0; }
.cs-service-content > p { max-width: 78ch; }
.cs-service-item { border-top: 2px solid var(--secondary-color); padding: 1.5rem; background: #fff; border-radius: 0 0 .6rem .6rem; }
.cs-service-item > .fi { display: inline-block; font-size: 1.7rem; color: var(--tertiary-color); margin-bottom: 1rem; }
.cs-service-item h3 { font-size: 1.4rem; margin-bottom: 1rem; }
.cs-service-item p { color: var(--text-muted); }
.cs-service-tint { background: #eaf0f5; }
.cs-service-list { padding-left: 1.25rem; }
.cs-service-list li + li { margin-top: .65rem; }
.cs-service-content .cs-sector-list { margin-top: 0; }
.cs-service-page .cs-contact .cs-contact-info { margin-top: 0; }
.cs-service-page .cs-coverage .btn { background: #fff; color: var(--primary-color); }
.cs-related { background: #fff; }
.cs-related-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; margin-top: 2rem; }
.cs-related-grid a { display: flex; align-items: center; gap: 1rem; padding: 1.5rem; border: 1px solid #d6e0ea; border-radius: .5rem; font-family: var(--font-heading); font-size: 1.2rem; }
.cs-related-grid a:hover { background: #eaf0f5; }
.cs-related-grid .fi { color: var(--tertiary-color); }
.cs-submenu a[aria-current="page"] { background: var(--primary-color); color: #fff; }
.cs-service-nav .nav-link.is-active::after { transform: scaleX(1); }
@media (max-width: 48rem) { .cs-service-hero-grid, .cs-service-content, .cs-related-grid { grid-template-columns: minmax(0, 1fr); } .cs-service-hero { padding-bottom: 3rem; } }

/* Contacto y solicitud de cotización. */
.cs-contact-layout { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.cs-contact-description { margin-top: 1.5rem; }
.cs-direct-contact { margin-top: 3rem; padding-top: 2rem; border-top: 3px solid var(--secondary-color); }
.cs-direct-contact h3, .cs-direct-contact > p { margin-bottom: 1.25rem; }
.cs-direct-contact > a { display: flex; gap: .8rem; align-items: baseline; padding-block: .8rem; overflow-wrap: anywhere; }
.cs-direct-contact .fi { color: var(--tertiary-color); flex-shrink: 0; }
.cs-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; margin-bottom: 1.5rem; }
.cs-field-wide { grid-column: 1 / -1; }
#quotation-fields { border: 0; min-width: 0; }
#quotation-form { min-width: 0; }
#quotation-form input, #quotation-form select, #quotation-form textarea { width: 100%; min-width: 0; font: inherit; }
#quotation-form textarea { resize: vertical; }
#quotation-form .cs-form-note, #form-help { font-size: .875rem; color: var(--text-muted); }
#quotation-preview { border-top: 1px solid var(--border-color); padding-top: 1.5rem; }
#quotation-preview h4, #quotation-preview textarea, #quotation-preview a { margin-bottom: 1rem; }
#quotation-preview label { display: block; margin-block: .75rem; }
#quotation-preview textarea { border: 1px solid var(--border-color); border-radius: .35rem; padding: .8rem; }
#quotation-status:empty { display: none; }
.cs-visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.cs-contact-page .cs-coverage .button-row { margin-top: 2rem; }
.cs-contact-page .cs-service-hero { background-image: linear-gradient(90deg, #fffffff0, #ffffffa6), url('../assets/images/hero-nosotros.webp'); }
@media (max-width: 64rem) { .cs-contact-layout { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 40rem) { .cs-form-grid { grid-template-columns: minmax(0, 1fr); } }

/* Preguntas frecuentes: acordeones nativos y navegación por tema. */
.cs-faq-layout { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,2.5fr); gap:clamp(2rem,5vw,5rem); align-items:start; }
.cs-faq-index { display:grid; gap:1rem; }
.cs-faq-index a { display:flex; justify-content:space-between; gap:1rem; padding:1rem 0; border-bottom:1px solid #dce3eb; color:var(--primary-color); }
.cs-faq-group { scroll-margin-top:8rem; margin-bottom:3.5rem; }
.cs-faq-group h2 { font-size:clamp(1.6rem,3vw,2.25rem); margin-bottom:1.5rem; }
.cs-faq-item { border-bottom:1px solid #dce3eb; }
.cs-faq-item summary { display:flex; justify-content:space-between; align-items:center; gap:1.25rem; list-style:none; cursor:pointer; padding:1.4rem 0; font-weight:700; color:var(--primary-color); }
.cs-faq-item summary::-webkit-details-marker { display:none; }
.cs-faq-item summary i { flex-shrink:0; color:var(--secondary-color); transition:transform .3s ease; }
.cs-faq-item[open] summary i { transform:rotate(180deg); }
.cs-faq-item summary:focus-visible { outline:2px solid var(--secondary-color); outline-offset:4px; }
.cs-faq-answer { padding:0 1.5rem 1rem 0; }
.cs-faq-answer a { text-decoration:underline; text-underline-offset:3px; }
@media(max-width:64rem) { .cs-faq-layout { grid-template-columns:minmax(0,1fr); } }

.cs-service-hero-image { margin: 0; min-width: 0; }
.cs-service-hero-image img { display: block; width: 100%; height: auto; border-radius: var(--radius-lg); }

/* Selector numerado de beneficios de seguridad industrial. */
.cs-benefits { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.25fr); gap:clamp(1.5rem,4vw,4rem); margin-top:2rem; align-items:start; }
.cs-benefits-options { display:grid; gap:.75rem; }
.cs-benefits-options button { display:flex; align-items:center; gap:1rem; width:100%; text-align:left; padding:1.15rem; border:1px solid #dce3eb; border-radius:.6rem; background:#fff; color:var(--primary-color); font:inherit; font-weight:600; cursor:pointer; transition:background .25s,color .25s,border-color .25s; }
.cs-benefits-options button > .fi { margin-left:auto; }
.cs-benefit-number { flex-shrink:0; font-family:'Outfit',sans-serif; font-size:1.5rem; color:var(--secondary-color); }
.cs-benefits-options button:hover { border-color:var(--secondary-color); }
.cs-benefits-options button[aria-selected="true"] { background:var(--primary-color); color:#fff; border-color:var(--primary-color); }
.cs-benefits-options button[aria-selected="true"] .cs-benefit-number { color:#ffb47f; }
.cs-benefits-options button:focus-visible, .cs-benefit-panel:focus-visible { outline:3px solid var(--secondary-color); outline-offset:4px; }
.cs-benefit-panel { background:#fff; border-top:4px solid var(--secondary-color); border-radius:.6rem; padding:clamp(1.5rem,4vw,3rem); min-height:24rem; }
.cs-benefit-panel[hidden] { display:none; }
.cs-benefit-display { display:block; font-family:'Outfit',sans-serif; font-size:clamp(4rem,7vw,6rem); line-height:1; color:var(--secondary-color); margin-bottom:2rem; }
.cs-benefit-panel h3 { font-size:clamp(1.5rem,3vw,2rem); margin-bottom:1rem; }
.cs-benefit-panel p { margin-bottom:0; }
@media(max-width:48rem) { .cs-benefits { grid-template-columns:minmax(0,1fr); } .cs-benefit-panel { min-height:0; } }

.cs-about-divisions { display:grid; gap:1rem; min-width:0; }
.cs-division-card { display:flex; align-items:center; gap:1.15rem; padding:1.5rem; border:1px solid #d6e0ea; border-left:3px solid var(--secondary-color); border-radius:.6rem; background:#fff; color:var(--primary-color); text-decoration:none; transition:background .3s,border-color .3s; }
.cs-division-card > .fi:first-child { font-size:2rem; color:var(--secondary-color); flex-shrink:0; }
.cs-division-card > .fi:last-child { margin-left:auto; flex-shrink:0; }
.cs-division-card h3 { font-size:1.2rem; margin:0 0 .4rem; }
.cs-division-card p { font-size:.95rem; line-height:1.5; margin:0; }
.cs-division-card:hover { background:#eaf0f5; border-color:var(--tertiary-color); }
.cs-division-card:focus-visible { outline:3px solid var(--secondary-color); outline-offset:4px; }
@media(max-width:40rem) { .cs-division-card { padding:1.1rem; gap:.8rem; } }

/* Fondo exclusivo del hero de Nosotros. */
.cs-about-page .cs-service-hero { background-image: linear-gradient(90deg, #fffffff0, #ffffffa6), url('../assets/images/hero-nosotros.webp'); }

/* Valores de la empresa: tres columnas en escritorio. */
.cs-service-content.cs-values-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 64rem) { .cs-service-content.cs-values-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 40rem) { .cs-service-content.cs-values-grid { grid-template-columns: minmax(0, 1fr); } }

/* Mayor protagonismo visual en la sección de experiencia. */
.cs-about-layout.cs-experience-layout { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: clamp(1.5rem, 3vw, 3rem); }
@media (max-width: 48rem) { .cs-about-layout.cs-experience-layout { grid-template-columns: minmax(0, 1fr); } }

/* Metodología: línea de tiempo horizontal y vertical en pantallas pequeñas. */
.cs-method-timeline { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); list-style:none; padding:0; margin:3rem 0 0; }
.cs-advisory-timeline { grid-template-columns:repeat(4,minmax(0,1fr)); }
.cs-method-timeline > li { position:relative; min-width:0; padding-right:1.5rem; }
.cs-method-timeline > li:not(:last-child)::before { content:''; position:absolute; top:1.65rem; left:0; width:100%; height:2px; background:#d7e2ec; }
.cs-timeline-number { position:relative; display:flex; align-items:center; justify-content:center; width:3.4rem; height:3.4rem; border-radius:50%; background:var(--primary-color); border:3px solid var(--secondary-color); color:#fff; font-family:var(--font-heading); font-size:1.25rem; font-weight:600; margin-bottom:1.5rem; }
.cs-timeline-copy h3 { font-size:1.25rem; margin:0 0 .75rem; }
.cs-timeline-copy p { margin:0; }
@media(max-width:64rem) { .cs-method-timeline { grid-template-columns:minmax(0,1fr); } .cs-method-timeline > li { display:grid; grid-template-columns:3.4rem minmax(0,1fr); gap:1.25rem; padding:0 0 2rem; } .cs-method-timeline > li:not(:last-child)::before { top:0; left:1.65rem; height:100%; width:2px; } .cs-timeline-number { margin:0; } .cs-timeline-copy { padding-top:.4rem; } .cs-method-timeline > li:last-child { padding-bottom:0; } }

/* Servicios de seguridad industrial: cuatro especialidades. */
.cs-service-content.cs-security-services-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; }
.cs-security-services-grid > .cs-service-item { min-width: 0; padding: 1.25rem; }
.cs-security-service-image { display: block; width: 100%; height: auto; border-radius: .4rem; margin: 1.25rem 0; }
@media (max-width: 64rem) { .cs-service-content.cs-security-services-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 40rem) { .cs-service-content.cs-security-services-grid { grid-template-columns: minmax(0, 1fr); } }

.cs-sanitary-intro { margin-bottom: 3rem; }

/* Protección sanitaria: contenido e imagen en un bloque 60/40. */
.cs-sanitary-block { display:grid; grid-template-columns:minmax(0,6fr) minmax(0,4fr); gap:clamp(1.5rem,3vw,3rem); align-items:start; padding:clamp(1.25rem,3vw,2.5rem); background:#f2f6f9; border:1px solid #dce4ec; border-radius:var(--radius-lg); }
.cs-sanitary-copy { min-width:0; }
.cs-sanitary-cards { gap:1rem; margin:2rem 0; }
.cs-sanitary-cards .cs-service-item { display:grid; grid-template-columns:2rem minmax(0,1fr); gap:.65rem .8rem; padding:1.25rem; border:1px solid #dce4ec; border-radius:.6rem; }
.cs-sanitary-cards .cs-service-item > .fi { margin:0; color:var(--secondary-color); }
.cs-sanitary-cards .cs-service-item h3 { margin:0; font-size:1.15rem; align-self:center; }
.cs-sanitary-cards .cs-service-item p { grid-column:1 / -1; margin:0; font-size:.95rem; }
.cs-sanitary-block > .cs-about-image { align-self:start; }
@media(max-width:64rem) { .cs-sanitary-cards { grid-template-columns:minmax(0,1fr); } }
@media(max-width:48rem) { .cs-sanitary-block { grid-template-columns:minmax(0,1fr); } }

/* Botón de WhatsApp en el cierre de Seguridad Industrial. */
.cs-service-page .btn.cs-whatsapp-cta { background: #128c4a; color: #fff; border: 1px solid #128c4a; }
.cs-service-page .btn.cs-whatsapp-cta:hover { background: #0d703b; border-color: #0d703b; color: #fff; transform: translateY(-2px); }
.cs-whatsapp-cta > .fi { font-size: 1.25rem; }
.cs-whatsapp-cta:focus-visible { outline: 3px solid #ffb47f; outline-offset: 4px; }

/* Soluciones integrales destacadas en Seguridad Industrial. */
.cs-related.cs-related-featured { background: #f4f7f9 url('../assets/images/bg-soluciones.webp') center center / cover no-repeat; border-block:1px solid #dce4ec; }
.cs-related-featured > .col > .cs-eyebrow, .cs-related-featured > .col > h2 { text-align:center; }
.cs-related-featured .cs-related-grid a { background:rgb(255 255 255 / 94%); color:var(--primary-color); border-color:#d6e0ea; box-shadow:0 8px 24px rgb(21 47 90 / 8%); transition:background .3s,color .3s,border-color .3s,box-shadow .3s; }
.cs-related-featured .cs-related-grid a:hover, .cs-related-featured .cs-related-grid a:focus-visible { background:var(--secondary-color); color:#fff; border-color:var(--secondary-color); box-shadow:0 10px 28px rgb(21 47 90 / 15%); }
.cs-related-featured .cs-related-grid a:hover .fi, .cs-related-featured .cs-related-grid a:focus-visible .fi { color:#fff; }
.cs-related-featured .cs-related-grid a:focus-visible { outline:3px solid var(--primary-color); outline-offset:4px; }

.cs-service-content.cs-maintenance-services-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 64rem) { .cs-service-content.cs-maintenance-services-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 40rem) { .cs-service-content.cs-maintenance-services-grid { grid-template-columns: minmax(0, 1fr); } }

/* Color de los encabezados de cuarto nivel. */
h4, .section-dark h4, .theme-light h4, .theme-dark h4, .footer-main h4, .cs-footer-layout h4 { color: var(--tertiary-color); }

.cs-maintenance-intro { margin-bottom: 3rem; }

/* Experiencia en mantenimiento: panel editorial y beneficios numerados. */
.cs-project-layout { display:grid; grid-template-columns:minmax(0, .9fr) minmax(0, 1.1fr); gap:clamp(2rem,5vw,5rem); align-items:start; }
.cs-project-message { padding:clamp(1.5rem,3vw,3rem); border-radius:var(--radius-lg); border-top:4px solid var(--secondary-color); background:var(--primary-color); color:#e2eaf3; }
.cs-project-message h2 { color:#fff; font-size:clamp(1.8rem,3vw,2.7rem); }
.cs-project-message .cs-eyebrow, .cs-project-message .cs-eyebrow .fi { color:#ffb47f; }
.cs-project-message .cs-service-heading { margin-bottom:1.5rem; }
.cs-project-message .cs-prose p { color:#e2eaf3; margin-bottom:0; }
.cs-project-benefits { list-style:none; padding:0; margin:0; }
.cs-project-benefits li { display:grid; grid-template-columns:3rem minmax(0,1fr); gap:1.25rem; padding:1.5rem 0; border-bottom:1px solid #dce4ec; }
.cs-project-benefits li:first-child { padding-top:0; }
.cs-project-number { font-family:var(--font-heading); font-size:2rem; line-height:1.2; color:var(--secondary-color); }
.cs-project-benefit h3 { margin:0 0 .65rem; font-size:1.3rem; }
.cs-project-benefit p { margin:0; }
@media(max-width:48rem) { .cs-project-layout { grid-template-columns:minmax(0,1fr); } }

.cs-contact-centered { text-align: center; }
.cs-contact-centered .cs-service-heading, .cs-contact-centered .cs-service-content > p { margin-inline: auto; }
.cs-contact-centered .button-row, .cs-contact-centered .cs-contact-info { justify-content: center; }

/* CTA compartido: mensaje centrado, dos acciones y contacto compacto. */
.cs-contact-centered .cs-service-content { grid-template-columns:minmax(0,1fr); }
.cs-contact-centered .cs-service-content > p, .cs-contact-centered .cs-service-content > ul { max-width:78ch; margin-inline:auto; }
.cs-contact-centered .cs-service-list { list-style:none; padding-left:0; }
.cs-contact-centered .button-row { justify-content:center; }
.cs-contact-centered .btn.cs-whatsapp-cta { background:#128c4a; color:#fff; border:1px solid #128c4a; }
.cs-contact-centered .btn.cs-whatsapp-cta:hover { background:#0d703b; border-color:#0d703b; color:#fff; }
.cs-contact-centered .cs-contact-info { justify-content:center; gap:.75rem; }
.cs-contact-centered .cs-contact-small { display:inline-flex; align-items:center; justify-content:center; gap:.5rem; padding:.6rem .85rem; border:1px solid currentColor; border-radius:.35rem; font-size:.9rem; text-decoration:none; max-width:100%; }
.cs-contact-small span { min-width:0; overflow-wrap:anywhere; }
.cs-contact-centered .cs-contact-small:hover { background:rgb(255 255 255 / 12%); }
.cs-contact-centered .cs-contact-small:focus-visible { outline:3px solid var(--secondary-color); outline-offset:3px; }

/* Inicio conserva la cobertura sobre azul sólido. */
.cs-home .cs-coverage { background-image: none; background-color: var(--primary-color); }

/* Fondo exclusivo del hero de Abastecimiento Industrial. */
.cs-supply-page .cs-service-hero { background-image: linear-gradient(90deg, #fffffff0, #ffffffa6), url('../assets/images/bg-mantenimiento.webp'); }

/* Aliado patrimonial: imagen editorial y beneficios con iconos. */
.cs-patrimony-partner { background: #f2f6f9; }
.cs-patrimony-partner-heading { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(2rem, 4vw, 4rem); align-items: center; margin-bottom: 2.5rem; }
.cs-patrimony-partner-heading .cs-service-heading, .cs-patrimony-partner-heading .cs-prose p:last-child { margin-bottom: 0; }
.cs-patrimony-partner-layout { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.cs-patrimony-partner-image { margin: 0; padding: 0 0 .75rem .75rem; border-left: 3px solid var(--secondary-color); border-bottom: 3px solid var(--secondary-color); border-radius: 0 0 0 1rem; }
.cs-patrimony-partner-image img { display: block; width: 100%; height: auto; border-radius: .75rem; }
.cs-patrimony-values { list-style: none; padding: 0; margin: 0; }
.cs-patrimony-value { display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: 1.25rem; padding: 1.4rem 0; border-bottom: 1px solid #d5dfe8; }
.cs-patrimony-value:first-child { padding-top: 0; }
.cs-patrimony-value:last-child { border-bottom: 0; padding-bottom: 0; }
.cs-patrimony-value > .fi { display: grid; place-items: center; height: 3rem; border-radius: .6rem; background: #fff; color: var(--tertiary-color); font-size: 1.6rem; }
.cs-patrimony-value h3 { font-size: 1.3rem; margin: 0 0 .6rem; }
.cs-patrimony-value p { margin: 0; color: var(--text-muted); }
@media (max-width: 48rem) { .cs-patrimony-partner-heading, .cs-patrimony-partner-layout { grid-template-columns: minmax(0, 1fr); } .cs-patrimony-partner-image { width: min(100%, 28rem); margin-inline: auto; } }

/* Agradecimiento con identidad y navegación del sitio. */
.cs-thanks-message { max-width: 58rem; margin: 2rem auto 0; text-align: center; }
.cs-thanks-icon { display: grid; place-items: center; width: 5rem; height: 5rem; margin: 0 auto 1.5rem; border-radius: 50%; color: #fff; background: var(--primary-color); border: 3px solid var(--secondary-color); font-size: 2rem; }
.cs-thanks-message h1 { font-size: clamp(2.2rem, 5vw, 4rem); }
.cs-thanks-message .cs-service-lead, .cs-thanks-message .cs-prose { max-width: 65ch; margin-inline: auto; }
.cs-thanks-message .button-row { justify-content: center; }
.cs-related-grid.cs-thanks-services { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 64rem) { .cs-related-grid.cs-thanks-services { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 40rem) { .cs-related-grid.cs-thanks-services { grid-template-columns: minmax(0, 1fr); } }

/* Catálogo de EPP por área de protección. */
.cs-epp-heading { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 4vw, 4rem); align-items: center; margin-bottom: 2rem; }
.cs-epp-heading .cs-service-heading, .cs-epp-heading .cs-prose p { margin-bottom: 0; }
.cs-epp-layout { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(2rem, 4vw, 4rem); align-items: center; }
.cs-epp-image { margin: 0; }
.cs-epp-image img { display: block; width: 100%; height: auto; border-radius: var(--radius-lg); }
.cs-epp-icon { display: block; width: 2rem; height: 2rem; color: var(--tertiary-color); margin-bottom: .85rem; }
.cs-epp-products { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem 2rem; list-style: none; margin: 0; padding: 0; }
.cs-epp-products li { padding: 1.25rem 0 0 1rem; border-top: 1px solid #d5dfe8; border-left: 3px solid var(--secondary-color); }
.cs-epp-products h3 { font-size: 1.25rem; margin: 0 0 .65rem; }
.cs-epp-products p { color: var(--text-muted); margin: 0; }
.cs-epp-quote { display: flex; align-items: center; justify-content: space-between; gap: 2rem; margin-top: 2.5rem; padding: 1.5rem; background: #f2f6f9; border-radius: .6rem; }
.cs-epp-quote > p { max-width: 65ch; margin: 0; }
.cs-epp-quote .button-row { flex-shrink: 0; margin: 0; }
@media (max-width: 64rem) { .cs-epp-products { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cs-epp-quote { align-items: flex-start; flex-direction: column; gap: 1rem; } }
@media (max-width: 40rem) { .cs-epp-heading, .cs-epp-products { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 48rem) { .cs-epp-layout { grid-template-columns: minmax(0, 1fr); } .cs-epp-image { width: min(100%, 28rem); margin-inline: auto; } }

/* Hero de Protección Patrimonial. */
.cs-protection-page .cs-service-hero { background-image: linear-gradient(90deg, #fffffff0, #ffffffa6), url('../assets/images/bg-proteccion-patrimonial.webp'); }

/* Respaldo empresarial: bloque azul y beneficios abiertos. */
.cs-protection-backing { background: var(--primary-color); color: #e2eaf3; }
.cs-protection-backing-layout { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(2.5rem, 6vw, 6rem); align-items: start; }
.cs-protection-backing-intro { padding-top: 1.5rem; border-top: 4px solid var(--secondary-color); }
.cs-protection-backing .cs-eyebrow, .cs-protection-backing .cs-eyebrow .fi { color: #ffb47f; }
.cs-protection-backing h2, .cs-protection-backing h3 { color: #fff; }
.cs-protection-backing .cs-prose p { color: #e2eaf3; margin-bottom: 0; }
.cs-protection-benefits { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem; }
.cs-protection-benefit { min-width: 0; padding-top: 1.25rem; border-top: 1px solid #ffffff40; }
.cs-protection-benefit > .fi { display: inline-block; font-size: 1.8rem; color: #ffb47f; margin-bottom: 1rem; }
.cs-protection-benefit h3 { font-size: 1.3rem; margin: 0 0 .75rem; }
.cs-protection-benefit p { color: #e2eaf3; margin: 0; }
.cs-protection-benefit:last-child { grid-column: 1 / -1; }
@media (max-width: 56rem) { .cs-protection-backing-layout { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 36rem) { .cs-protection-benefits { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; } }

/* Perfil de riesgos: introducción editorial y filas de protección. */
.cs-risk-profile-intro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; margin-bottom: 2.5rem; }
.cs-risk-profile-intro .cs-service-heading { margin-bottom: 0; }
.cs-risk-profile-intro .cs-prose { border-left: 3px solid var(--secondary-color); padding-left: 1.5rem; }
.cs-risk-profile-intro .cs-prose p:last-child { margin-bottom: 0; }
.cs-risk-profile-list { list-style: none; padding: 0; margin: 0; border-top: 2px solid var(--primary-color); }
.cs-risk-profile-row { display: grid; grid-template-columns: 3.5rem minmax(0, .8fr) minmax(0, 1.2fr); gap: 1.5rem; align-items: center; padding: 1.5rem; border-bottom: 1px solid #d5dfe8; }
.cs-risk-profile-row:nth-child(odd) { background: #f2f6f9; }
.cs-risk-profile-row > .fi { display: grid; place-items: center; width: 3.5rem; height: 3.5rem; border-radius: 50%; background: var(--primary-color); color: #fff; font-size: 1.5rem; }
.cs-risk-profile-row h3 { margin: 0; font-size: 1.3rem; }
.cs-risk-profile-row p { margin: 0; color: var(--text-muted); }
@media (max-width: 48rem) { .cs-risk-profile-intro { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; } .cs-risk-profile-row { grid-template-columns: 3.5rem minmax(0, 1fr); gap: .75rem 1rem; padding: 1.25rem 1rem; } .cs-risk-profile-row p { grid-column: 2; } }
@media (max-width: 25rem) { .cs-risk-profile-row p { grid-column: 1 / -1; } }

/* Seguros y fianzas: tres columnas en escritorio. */
.cs-service-content.cs-protection-risks-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cs-protection-risks-grid > .cs-service-item { min-width: 0; }
.cs-protection-risks-grid h4 { margin: 0 0 1rem; line-height: 1.4; }
@media (max-width: 64rem) { .cs-service-content.cs-protection-risks-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 40rem) { .cs-service-content.cs-protection-risks-grid { grid-template-columns: minmax(0, 1fr); } }

/* Atención centralizada: panel de marca y recorrido de beneficios. */
.cs-supply-simplify { background: #f0f4f7; }
.cs-supply-simplify-layout { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.cs-supply-summary { padding: clamp(1.5rem, 3vw, 3rem); background: var(--primary-color); border-radius: 1rem; border-bottom: 5px solid var(--secondary-color); color: #e2eaf3; }
.cs-supply-summary h2 { color: #fff; }
.cs-supply-summary .cs-eyebrow, .cs-supply-summary .cs-eyebrow .fi { color: #ffb47f; }
.cs-supply-summary .cs-prose p { color: #e2eaf3; }
.cs-supply-summary .cs-prose p:last-child { margin-bottom: 0; }
.cs-supply-benefits { position: relative; }
.cs-supply-benefits::before { content: ''; position: absolute; left: 1.6rem; top: 1.5rem; bottom: 2rem; width: 1px; background: #c6d3df; }
.cs-supply-benefit { position: relative; display: grid; grid-template-columns: 3.25rem minmax(0, 1fr); gap: 1.25rem; padding-bottom: 1.75rem; }
.cs-supply-benefit:last-child { padding-bottom: 0; }
.cs-supply-step { display: grid; place-items: center; height: 3.25rem; border: 1px solid #c6d3df; border-radius: 50%; background: #fff; color: var(--tertiary-color); font-family: var(--font-heading); font-size: 1.2rem; font-weight: 600; }
.cs-supply-benefit:last-child .cs-supply-step { background: var(--primary-color); color: #fff; border-color: var(--primary-color); }
.cs-supply-benefit-copy { padding: .35rem 0 1.5rem; border-bottom: 1px solid #d5dfe8; }
.cs-supply-benefit-copy h3 { font-size: 1.3rem; margin: 0 0 .6rem; }
.cs-supply-benefit-copy p { margin: 0; color: var(--text-muted); }
.cs-supply-benefit:last-child .cs-supply-benefit-copy { border-bottom: 0; padding-bottom: 0; }
@media (max-width: 56rem) { .cs-supply-simplify-layout { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 30rem) { .cs-supply-benefit { gap: .85rem; } }

/* Áreas de abastecimiento: imagen y lista de aplicaciones. */
.cs-supply-areas-layout { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.cs-supply-areas-image { margin: 0; }
.cs-supply-areas-image img { display: block; width: 100%; height: auto; border-radius: .75rem; }
.cs-supply-areas-list { margin: 1.5rem 0 0; padding-left: 1.25rem; list-style: disc; }
.cs-supply-areas-list li { padding: 1rem 0 1rem .5rem; border-bottom: 1px solid #d5dfe8; }
.cs-supply-areas-list li::marker { color: var(--secondary-color); }
.cs-supply-areas-list li:last-child { border-bottom: 0; padding-bottom: 0; }
.cs-supply-areas-list h3 { margin: 0 0 .5rem; font-size: 1.3rem; }
.cs-supply-areas-list p { margin: 0; color: var(--text-muted); }
@media (max-width: 48rem) { .cs-supply-areas-layout { grid-template-columns: minmax(0, 1fr); } .cs-supply-areas-image { width: min(100%, 28rem); margin-inline: auto; } }

/* Categorías de abastecimiento: cuatro columnas en escritorio. */
.cs-service-content.cs-supply-categories-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; }
.cs-supply-categories-grid > .cs-service-item { min-width: 0; padding: 1rem; }
.cs-supply-categories-grid h4 { margin: 0 0 .6rem; line-height: 1.4; }
.cs-supply-category-image { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: contain; margin: 0 0 .6rem; border-radius: .4rem; background: #fff; }
.cs-supply-summary { color: var(--tertiary-color); font-family: var(--font-heading); font-size: 1.125rem; font-weight: 600; letter-spacing: -.025em; line-height: 1.12; }
@media (max-width: 64rem) { .cs-service-content.cs-supply-categories-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 40rem) { .cs-service-content.cs-supply-categories-grid { grid-template-columns: minmax(0, 1fr); } }
/* Logotipos de marcas de Abastecimiento Industrial. */
.cs-supply-brand-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1rem; list-style: none; padding: 0; margin: 0; }
.cs-supply-brand-grid > li { min-width: 0; overflow: hidden; border: 1px solid #dce4ec; border-radius: .6rem; background: #fff; }
.cs-supply-brand-grid img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: contain; }
@media (max-width: 64rem) { .cs-supply-brand-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 48rem) { .cs-supply-brand-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 32rem) { .cs-supply-brand-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; } }