/* =========================================================
   TSUNAMIGO DASHBOARD
   Página pública de presentación

   Archivo:
   C:\MAV_2026\GEOPLOT SPA\TsunamiGo_Dashboard\
   assets\css\index.css

   Estructura:
   - Header
   - Hero
   - Qué es TsunamiGo
   - Evacuación
   - Cómo funciona
   - Dashboard Personal
   - Protección Civil
   - Dashboard Institucional
   - Arquitectura LIVE
   - Dos dashboards
   - CTA
   - Footer
========================================================= */


/* =========================================================
   01. VARIABLES GENERALES
========================================================= */

:root {

  /* Tipografía */

  --tsunami-font-family:
    "Inter",
    Arial,
    sans-serif;


  --tsunami-type-eyebrow:
    0.82rem;

  --tsunami-type-hero-title:
    clamp(2rem, 3vw, 3rem);

  --tsunami-type-hero-description:
    clamp(1.12rem, 1.3vw, 1.18rem);

  --tsunami-type-section-title:
    clamp(1.9rem, 3.4vw, 2.85rem);

  --tsunami-type-section-description:
    1.14rem;


  /* Fondos */

  --color-background:
    #030b13;

  --color-background-secondary:
    #071522;

  --color-surface:
    #0a1a28;

  --color-surface-light:
    #ffffff;

  --color-surface-soft:
    #f4f8fb;


  /* Azules */

  --color-primary:
    #22c5f6;

  --color-primary-dark:
    #1188cc;

  --color-primary-deep:
    #075fbb;

  --color-primary-soft:
    rgba(34, 197, 246, 0.12);


  /* Texto oscuro */

  --color-dark-text:
    #071725;

  --color-dark-soft:
    #34495c;

  --color-dark-muted:
    #617487;


  /* Texto claro */

  --color-text:
    #f7fbfd;

  --color-text-soft:
    #c9d6df;

  --color-text-muted:
    #8ca2b2;


  /* Bordes */

  --color-border:
    rgba(255, 255, 255, 0.1);

  --color-border-dark:
    rgba(7, 23, 37, 0.12);


  /* Estados */

  --color-success:
    #4de0a5;


  /* Sombras */

  --shadow-small:
    0 8px 22px
    rgba(7, 23, 37, 0.06);

  --shadow-medium:
    0 16px 38px
    rgba(7, 23, 37, 0.10);

  --shadow-large:
    0 26px 60px
    rgba(0, 0, 0, 0.26);


  /* Radios */

  --radius-small:
    10px;

  --radius-medium:
    16px;

  --radius-large:
    24px;

  --radius-pill:
    999px;


  /* Contenedor */

  --container-width:
    1240px;


  /* Transiciones */

  --transition-fast:
    180ms ease;

  --transition-medium:
    300ms ease;

}


/* =========================================================
   02. REINICIO
========================================================= */

*,
*::before,
*::after {
  box-sizing:
    border-box;
}


html {
  scroll-behavior:
    smooth;

  scroll-padding-top:
    96px;
}


body {
  margin:
    0;

  min-height:
    100%;

  overflow-x:
    hidden;

  background:
    var(--color-background);

  color:
    var(--color-text);

  font-family:
    var(--tsunami-font-family);

  font-size:
    16px;

  line-height:
    1.6;

  text-rendering:
    optimizeLegibility;

  -webkit-font-smoothing:
    antialiased;
}


body,
button,
input,
select,
textarea {
  font:
    inherit;
}


img {
  display:
    block;

  max-width:
    100%;

  height:
    auto;
}


a {
  color:
    inherit;

  text-decoration:
    none;
}


button,
a {
  -webkit-tap-highlight-color:
    transparent;
}


button {
  cursor:
    pointer;
}


figure,
blockquote,
p,
h1,
h2,
h3,
h4 {
  margin-top:
    0;
}


p:last-child {
  margin-bottom:
    0;
}


main {
  display:
    block;
}


section[id] {
  scroll-margin-top:
    96px;
}


/* =========================================================
   03. ACCESIBILIDAD
========================================================= */

.skip-link {
  position:
    fixed;

  top:
    14px;

  left:
    14px;

  z-index:
    9999;

  padding:
    12px 16px;

  border-radius:
    var(--radius-small);

  background:
    var(--color-primary-deep);

  color:
    #ffffff;

  font-size:
    0.95rem;

  font-weight:
    800;

  transform:
    translateY(-160%);

  transition:
    transform
    var(--transition-fast);
}


.skip-link:focus {
  transform:
    translateY(0);
}


a:focus-visible,
button:focus-visible {
  outline:
    3px solid
    rgba(34, 197, 246, 0.58);

  outline-offset:
    4px;
}


/* =========================================================
   04. CONTENEDORES
========================================================= */

.public-container,
.hero__container,
.site-header__container,
.site-footer__container,
.final-cta__container {
  width:
    min(
      calc(100% - 40px),
      var(--container-width)
    );

  margin-inline:
    auto;
}


/* =========================================================
   05. TIPOGRAFÍA GENERAL
========================================================= */

.section-eyebrow {
  margin-bottom:
    10px;

  color:
    var(--color-primary);

  font-size:
    var(--tsunami-type-eyebrow);

  font-weight:
    850;

  line-height:
    1.3;

  letter-spacing:
    0.14em;

  text-transform:
    uppercase;
}


.section-heading {
  max-width:
    860px;

  margin-bottom:
    44px;
}


.section-heading--center {
  margin-right:
    auto;

  margin-left:
    auto;

  text-align:
    center;
}


.section-heading h2 {
  margin-bottom:
    16px;

  font-size:
    var(--tsunami-type-section-title);

  font-weight:
    900;

  line-height:
    1.08;

  letter-spacing:
    -0.045em;
}


.section-heading > p:last-child {
  max-width:
    790px;

  margin-right:
    auto;

  margin-left:
    auto;

  color:
    inherit;

  font-size:
    var(--tsunami-type-section-description);

  font-weight:
    400;

  line-height:
    1.74;

  opacity:
    0.82;
}


/*
 * Iconos superiores de las secciones
 * Personal / Institucional.
 */

.section-heading > img {
  width:
    64px;

  height:
    64px;

  margin:
    0 auto 18px;

  object-fit:
    contain;
}


/* =========================================================
   06. BOTONES
========================================================= */

.button {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    10px;

  min-height:
    52px;

  padding:
    14px 22px;

  border:
    1px solid transparent;

  border-radius:
    var(--radius-small);

  font-size:
    1rem;

  font-weight:
    800;

  line-height:
    1.2;

  transition:
    transform
    var(--transition-fast),
    color
    var(--transition-fast),
    background-color
    var(--transition-fast),
    border-color
    var(--transition-fast),
    box-shadow
    var(--transition-fast);
}


.button:hover {
  transform:
    translateY(-2px);
}


.button--primary {
  border-color:
    rgba(34, 197, 246, 0.38);

  color:
    #ffffff;

  background:
    linear-gradient(
      135deg,
      var(--color-primary-deep),
      #1585db
    );

  box-shadow:
    0 12px 28px
    rgba(7, 95, 187, 0.24);
}


.button--primary:hover {
  color:
    #ffffff;

  box-shadow:
    0 16px 34px
    rgba(7, 95, 187, 0.31);
}


.button--secondary {
  border-color:
    rgba(255, 255, 255, 0.30);

  color:
    var(--color-text);

  background:
    rgba(255, 255, 255, 0.08);

  backdrop-filter:
    blur(10px);

  -webkit-backdrop-filter:
    blur(10px);
}


.button--secondary:hover {
  border-color:
    rgba(255, 255, 255, 0.56);

  background:
    rgba(255, 255, 255, 0.15);

  color:
    #ffffff;
}


/* Botones secundarios dentro de fondos claros */

.public-section--light
.button--secondary {
  border-color:
    rgba(7, 95, 187, 0.22);

  color:
    var(--color-primary-deep);

  background:
    rgba(7, 95, 187, 0.05);
}


.public-section--light
.button--secondary:hover {
  border-color:
    rgba(7, 95, 187, 0.38);

  color:
    var(--color-primary-deep);

  background:
    rgba(7, 95, 187, 0.10);
}


/* =========================================================
   07. HEADER
========================================================= */

.site-header {
  position:
    sticky;

  top:
    0;

  z-index:
    1000;

  border-bottom:
    1px solid
    var(--color-border);

  background:
    rgba(3, 11, 19, 0.95);

  backdrop-filter:
    blur(18px);

  -webkit-backdrop-filter:
    blur(18px);
}


.site-header__container {
  display:
    flex;

  align-items:
    center;

  gap:
    24px;

  min-height:
    76px;
}


.site-brand {
  display:
    inline-flex;

  align-items:
    center;

  flex-shrink:
    0;
}


.site-brand__logo {
  width:
    172px;

  max-height:
    54px;

  object-fit:
    contain;
}


/* Navegación */

.site-navigation {
  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    23px;

  margin-left:
    auto;
}


.site-navigation a {
  position:
    relative;

  padding:
    27px 0;

  color:
    var(--color-text-soft);

  font-size:
    0.92rem;

  font-weight:
    750;

  white-space:
    nowrap;

  transition:
    color
    var(--transition-fast);
}


.site-navigation a::after {
  content:
    "";

  position:
    absolute;

  right:
    0;

  bottom:
    17px;

  left:
    0;

  height:
    2px;

  border-radius:
    var(--radius-pill);

  background:
    var(--color-primary);

  transform:
    scaleX(0);

  transform-origin:
    center;

  transition:
    transform
    var(--transition-fast);
}


.site-navigation a:hover {
  color:
    var(--color-primary);
}


.site-navigation a:hover::after {
  transform:
    scaleX(1);
}


/* Accesos Personal + Institucional */

.site-header__actions {
  display:
    flex;

  align-items:
    center;

  flex-shrink:
    0;

  gap:
    8px;
}


.site-header__access {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  min-height:
    42px;

  padding:
    9px 14px;

  border:
    1px solid
    rgba(34, 197, 246, 0.42);

  border-radius:
    var(--radius-small);

  background:
    var(--color-primary-soft);

  color:
    var(--color-primary);

  font-size:
    0.88rem;

  font-weight:
    800;

  white-space:
    nowrap;

  transition:
    background
    var(--transition-fast),
    color
    var(--transition-fast),
    transform
    var(--transition-fast),
    border-color
    var(--transition-fast);
}


.site-header__access:hover {
  background:
    var(--color-primary);

  color:
    #03121c;

  transform:
    translateY(-1px);
}


.site-header__access--institutional {
  border-color:
    rgba(77, 224, 165, 0.35);

  color:
    #83f1c4;

  background:
    rgba(77, 224, 165, 0.08);
}


.site-header__access--institutional:hover {
  border-color:
    var(--color-success);

  background:
    var(--color-success);

  color:
    #041711;
}


/* =========================================================
   08. HERO
========================================================= */

.hero {
  position:
    relative;

  overflow:
    hidden;

  border-bottom:
    1px solid
    var(--color-border);

  background:
    linear-gradient(
      90deg,
      rgba(3, 11, 19, 0.97) 0%,
      rgba(3, 11, 19, 0.89) 38%,
      rgba(3, 11, 19, 0.67) 61%,
      rgba(3, 11, 19, 0.38) 100%
    ),
    radial-gradient(
      circle at 82% 28%,
      rgba(34, 197, 246, 0.10),
      transparent 34%
    ),
    var(--color-background);
}


.hero::before {
  content:
    "";

  position:
    absolute;

  inset:
    0;

  pointer-events:
    none;

  opacity:
    0.35;

  background-image:
    linear-gradient(
      rgba(255, 255, 255, 0.025) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.025) 1px,
      transparent 1px
    );

  background-size:
    46px 46px;
}


.hero__container {
  position:
    relative;

  z-index:
    2;

  display:
    grid;

  grid-template-columns:
    minmax(0, 1.05fr)
    minmax(370px, 0.95fr);

  align-items:
    center;

  gap:
    clamp(48px, 6vw, 78px);

  min-height:
    670px;

  padding-top:
    78px;

  padding-bottom:
    78px;
}


.hero__content {
  max-width:
    760px;
}


.hero h1 {
  margin-bottom:
    24px;

  color:
    #ffffff;

  font-size:
    var(--tsunami-type-hero-title);

  font-weight:
    900;

  line-height:
    1.01;

  letter-spacing:
    -0.055em;

  text-wrap:
    balance;
}


.hero__description {
  max-width:
    690px;

  margin-bottom:
    16px;

  color:
    rgba(255, 255, 255, 0.88);

  font-size:
    var(--tsunami-type-hero-description);

  font-weight:
    430;

  line-height:
    1.72;
}


.hero__supporting-text {
  max-width:
    650px;

  margin-bottom:
    30px;

  color:
    var(--color-text-muted);

  font-size:
    1.05rem;

  line-height:
    1.70;
}


.hero__actions {
  display:
    flex;

  align-items:
    center;

  flex-wrap:
    wrap;

  gap:
    12px;

  margin-bottom:
    17px;
}


.hero__access-note {
  color:
    var(--color-text-muted);

  font-size:
    0.90rem;

  line-height:
    1.5;
}


/* Imagen celular */

.hero__media {
  position:
    relative;

  width:
    100%;

  margin:
    0;

  overflow:
    visible;
}


.hero__media img {
  display:
    block;

  width:
    100%;

  height:
    auto;

  max-height:
    520px;

  object-fit:
    contain;

  object-position:
    center;
}


.hero__media figcaption {
  margin-top:
    10px;

  color:
    var(--color-text-muted);

  font-size:
    0.88rem;

  text-align:
    center;
}


/* =========================================================
   09. SECCIONES GENERALES
========================================================= */

.public-section {
  position:
    relative;

  padding:
    88px 0;
}


.public-section--light {
  background:
    var(--color-surface-soft);

  color:
    var(--color-dark-text);
}


.public-section--light
.section-heading > p:last-child {
  color:
    var(--color-dark-soft);

  opacity:
    1;
}


.public-section--dark {
  border-top:
    1px solid
    var(--color-border);

  border-bottom:
    1px solid
    var(--color-border);

  background:
    radial-gradient(
      circle at 15% 50%,
      rgba(34, 197, 246, 0.08),
      transparent 32%
    ),
    var(--color-background-secondary);

  color:
    var(--color-text);
}


.public-section--platform {
  border-top:
    1px solid
    rgba(255, 255, 255, 0.05);

  border-bottom:
    1px solid
    rgba(255, 255, 255, 0.05);

  background:
    radial-gradient(
      circle at 50% 10%,
      rgba(34, 197, 246, 0.11),
      transparent 36%
    ),
    linear-gradient(
      180deg,
      #061522,
      #030b13
    );

  color:
    var(--color-text);
}


/* =========================================================
   10. QUÉ ES / CAPTURA MÓVIL
========================================================= */

.mobile-capture {
  display:
    grid;

  grid-template-columns:
    minmax(340px, 0.86fr)
    minmax(0, 1.14fr);

  align-items:
    center;

  gap:
    clamp(44px, 6vw, 82px);
}


.mobile-capture__media {
  margin:
    0;

  overflow:
    hidden;

  border:
    1px solid
    var(--color-border-dark);

  border-radius:
    var(--radius-large);

  background:
    #dfe8ee;

  box-shadow:
    var(--shadow-medium);
}


.mobile-capture__media img {
  width:
    100%;

  aspect-ratio:
    1 / 1;

  object-fit:
    cover;

  transition:
    transform
    500ms ease;
}


.mobile-capture__media:hover img {
  transform:
    scale(1.025);
}


.mobile-capture__content h3 {
  margin-bottom:
    16px;

  color:
    var(--color-dark-text);

  font-size:
    clamp(1.4rem, 2.4vw, 2rem);

  font-weight:
    900;

  line-height:
    1.1;

  letter-spacing:
    -0.038em;
}


.mobile-capture__content >
p:not(.section-eyebrow) {
  margin-bottom:
    30px;

  color:
    var(--color-dark-soft);

  font-size:
    1.10rem;

  line-height:
    1.78;
}


.capture-data-grid {
  display:
    grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap:
    13px;
}


.capture-data-card {
  display:
    flex;

  align-items:
    flex-start;

  gap:
    14px;

  min-height:
    118px;

  padding:
    18px;

  border:
    1px solid
    var(--color-border-dark);

  border-radius:
    var(--radius-medium);

  background:
    rgba(255, 255, 255, 0.78);

  box-shadow:
    var(--shadow-small);

  transition:
    transform
    var(--transition-fast),
    border-color
    var(--transition-fast),
    box-shadow
    var(--transition-fast);
}


.capture-data-card:hover {
  border-color:
    rgba(7, 95, 187, 0.28);

  box-shadow:
    var(--shadow-medium);

  transform:
    translateY(-3px);
}


.capture-data-card img {
  width:
    42px;

  height:
    42px;

  flex:
    0 0 42px;

  object-fit:
    contain;
}


.capture-data-card h4 {
  margin-bottom:
    5px;

  color:
    var(--color-dark-text);

  font-size:
    1.06rem;

  font-weight:
    850;

  line-height:
    1.25;
}


.capture-data-card p {
  margin-bottom:
    0;

  color:
    var(--color-dark-muted);

  font-size:
    0.97rem;

  line-height:
    1.58;
}


/* =========================================================
   11. EVACUACIÓN PEATONAL
========================================================= */

.evacuation-layout {
  display:
    grid;

  grid-template-columns:
    minmax(330px, 0.90fr)
    minmax(0, 1.10fr);

  align-items:
    center;

  gap:
    clamp(44px, 6vw, 80px);
}


.evacuation-layout__media {
  position:
    relative;

  margin:
    0;

  overflow:
    hidden;

  border:
    1px solid
    rgba(34, 197, 246, 0.22);

  border-radius:
    var(--radius-large);

  box-shadow:
    var(--shadow-large);
}


.evacuation-layout__media img {
  width:
    100%;

  aspect-ratio:
    1 / 1;

  object-fit:
    cover;
}


.evacuation-layout__content h2 {
  margin-bottom:
    18px;

  color:
    #ffffff;

  font-size:
    var(--tsunami-type-section-title);

  font-weight:
    900;

  line-height:
    1.08;

  letter-spacing:
    -0.045em;
}


.evacuation-layout__content >
p:not(.section-eyebrow) {
  color:
    var(--color-text-soft);

  font-size:
    1.10rem;

  line-height:
    1.76;
}


.evacuation-benefits {
  display:
    flex;

  flex-direction:
    column;

  gap:
    12px;

  margin-top:
    28px;
}


.evacuation-benefit {
  display:
    grid;

  grid-template-columns:
    46px
    minmax(0, 1fr);

  gap:
    15px;

  padding:
    16px;

  border:
    1px solid
    var(--color-border);

  border-radius:
    var(--radius-small);

  background:
    rgba(255, 255, 255, 0.025);

  transition:
    border-color
    var(--transition-fast),
    background
    var(--transition-fast),
    transform
    var(--transition-fast);
}


.evacuation-benefit:hover {
  border-color:
    rgba(34, 197, 246, 0.35);

  background:
    rgba(34, 197, 246, 0.055);

  transform:
    translateX(3px);
}


.evacuation-benefit > span {
  display:
    grid;

  place-items:
    center;

  width:
    42px;

  height:
    42px;

  border:
    1px solid
    rgba(34, 197, 246, 0.3);

  border-radius:
    50%;

  background:
    var(--color-primary-soft);

  color:
    var(--color-primary);

  font-size:
    0.80rem;

  font-weight:
    900;
}


.evacuation-benefit h3,
.evacuation-benefit h4 {
  margin-bottom:
    5px;

  color:
    var(--color-text);

  font-size:
    1.06rem;

  font-weight:
    850;

  line-height:
    1.25;
}


.evacuation-benefit p {
  margin-bottom:
    0;

  color:
    var(--color-text-muted);

  font-size:
    0.97rem;

  line-height:
    1.58;
}
/* =========================================================
   12. FLUJO TECNOLÓGICO
========================================================= */

.technology-flow {
  display:
    grid;

  grid-template-columns:
    minmax(0, 1fr)
    32px
    minmax(0, 1fr)
    32px
    minmax(0, 1fr)
    32px
    minmax(0, 1fr);

  align-items:
    stretch;

  gap:
    12px;
}


/*
 * La sección Arquitectura LIVE tiene 5 tarjetas.
 * El navegador reajusta automáticamente cuando
 * existen cinco .technology-step.
 */

#arquitectura-live
.technology-flow {
  grid-template-columns:
    minmax(0, 1fr)
    26px
    minmax(0, 1fr)
    26px
    minmax(0, 1fr)
    26px
    minmax(0, 1fr)
    26px
    minmax(0, 1fr);
}


.technology-step {
  position:
    relative;

  display:
    flex;

  align-items:
    center;

  flex-direction:
    column;

  min-width:
    0;

  min-height:
    300px;

  padding:
    24px 20px;

  border:
    1px solid
    var(--color-border-dark);

  border-radius:
    var(--radius-medium);

  background:
    rgba(255, 255, 255, 0.80);

  text-align:
    center;

  box-shadow:
    var(--shadow-small);

  transition:
    transform
    var(--transition-fast),
    border-color
    var(--transition-fast),
    box-shadow
    var(--transition-fast);
}


.technology-step:hover {
  border-color:
    rgba(7, 95, 187, 0.30);

  box-shadow:
    var(--shadow-medium);

  transform:
    translateY(-5px);
}


.technology-step__number {
  position:
    absolute;

  top:
    15px;

  right:
    16px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  min-width:
    34px;

  min-height:
    26px;

  padding:
    4px 8px;

  border-radius:
    var(--radius-pill);

  background:
    rgba(7, 95, 187, 0.08);

  color:
    var(--color-primary-deep);

  font-size:
    0.78rem;

  font-weight:
    900;

  letter-spacing:
    0.08em;
}


.technology-step__icon {
  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  width:
    96px;

  height:
    96px;

  margin:
    18px auto 20px;

  padding:
    12px;

  border:
    1px solid
    rgba(7, 95, 187, 0.12);

  border-radius:
    var(--radius-medium);

  background:
    linear-gradient(
      145deg,
      #f4f9fe,
      #ffffff
    );
}


.technology-step__icon img {
  width:
    100%;

  height:
    100%;

  max-width:
    none;

  object-fit:
    contain;

  object-position:
    center;
}


.technology-step h3 {
  margin-bottom:
    11px;

  color:
    var(--color-dark-text);

  font-size:
    1.10rem;

  font-weight:
    850;

  line-height:
    1.3;

  letter-spacing:
    -0.02em;
}


.technology-step p {
  margin-bottom:
    0;

  color:
    var(--color-dark-muted);

  font-size:
    0.97rem;

  line-height:
    1.62;
}


.technology-flow__arrow {
  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  color:
    var(--color-primary-dark);

  font-size:
    1.8rem;

  font-weight:
    700;
}


/* Resumen tecnológico */

.technology-summary {
  display:
    grid;

  grid-template-columns:
    minmax(0, 0.72fr)
    minmax(0, 1.28fr);

  align-items:
    center;

  gap:
    50px;

  margin-top:
    38px;

  padding:
    30px;

  border:
    1px solid
    var(--color-border-dark);

  border-radius:
    var(--radius-medium);

  background:
    linear-gradient(
      135deg,
      rgba(34, 197, 246, 0.09),
      rgba(255, 255, 255, 0.84)
    );

  box-shadow:
    var(--shadow-small);
}


.technology-summary h3 {
  margin-bottom:
    0;

  color:
    var(--color-dark-text);

  font-size:
    1.35rem;

  font-weight:
    900;

  line-height:
    1.2;

  letter-spacing:
    -0.03em;
}


.technology-summary > p {
  margin-bottom:
    0;

  color:
    var(--color-dark-soft);

  font-size:
    1.04rem;

  line-height:
    1.72;
}


/* =========================================================
   13. DOS MODALIDADES
========================================================= */

.monitoring-modes {
  display:
    grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap:
    18px;

  margin-top:
    34px;

  margin-bottom:
    34px;
}


.monitoring-mode {
  display:
    flex;

  flex-direction:
    column;

  min-width:
    0;

  padding:
    27px;

  border:
    1px solid
    var(--color-border);

  border-radius:
    var(--radius-medium);

  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.040),
      rgba(34, 197, 246, 0.025)
    );

  box-shadow:
    var(--shadow-small);

  transition:
    transform
    var(--transition-fast),
    border-color
    var(--transition-fast),
    box-shadow
    var(--transition-fast);
}


.monitoring-mode:hover {
  transform:
    translateY(-4px);

  border-color:
    rgba(34, 197, 246, 0.30);

  box-shadow:
    var(--shadow-medium);
}


.monitoring-mode > img {
  width:
    62px;

  height:
    62px;

  margin-bottom:
    18px;

  object-fit:
    contain;
}


.monitoring-mode h3 {
  margin-bottom:
    10px;

  color:
    var(--color-text);

  font-size:
    1.24rem;

  font-weight:
    850;

  line-height:
    1.2;
}


.monitoring-mode >
p:not(.section-eyebrow) {
  margin-bottom:
    22px;

  color:
    var(--color-text-muted);

  font-size:
    1.02rem;

  line-height:
    1.67;
}


.monitoring-mode > .button {
  align-self:
    flex-start;

  margin-top:
    auto;
}


/*
 * En la sección clara "Cómo funciona"
 * estas tarjetas necesitan texto oscuro.
 */

#como-funciona
.monitoring-mode {
  border-color:
    var(--color-border-dark);

  background:
    #ffffff;
}


#como-funciona
.monitoring-mode h3 {
  color:
    var(--color-dark-text);
}


#como-funciona
.monitoring-mode >
p:not(.section-eyebrow) {
  color:
    var(--color-dark-muted);
}


/* =========================================================
   14. PREVISUALIZACIÓN DE DASHBOARDS
========================================================= */

.dashboard-preview {
  position:
    relative;

  display:
    block;

  width:
    min(100%, 1120px);

  margin:
    0 auto 45px;

  overflow:
    hidden;

  border:
    1px solid
    rgba(34, 197, 246, 0.24);

  border-radius:
    var(--radius-large);

  background:
    var(--color-surface);

  box-shadow:
    var(--shadow-large);

  transition:
    transform
    var(--transition-medium),
    border-color
    var(--transition-medium),
    box-shadow
    var(--transition-medium);
}


.dashboard-preview:hover {
  border-color:
    rgba(34, 197, 246, 0.55);

  box-shadow:
    0 34px 78px
    rgba(0, 0, 0, 0.38);

  transform:
    translateY(-5px);
}


.dashboard-preview__media {
  margin:
    0;

  background:
    #071522;
}


.dashboard-preview__media img {
  display:
    block;

  width:
    100%;

  height:
    auto;

  object-fit:
    contain;

  object-position:
    center;

  transition:
    transform
    600ms ease,
    filter
    600ms ease;
}


/*
 * Dashboard Personal:
 * conserva proporción horizontal.
 */

#dashboard-personal
.dashboard-preview__media img {
  aspect-ratio:
    16 / 8.2;

  object-fit:
    cover;
}


/*
 * Dashboard Institucional:
 * 1893 × 901.
 *
 * IMPORTANTE:
 * Se muestra COMPLETO.
 * No se recorta con object-fit: cover.
 */

.dashboard-preview--institutional {
  width:
    min(100%, 1200px);
}


.dashboard-preview--institutional
.dashboard-preview__media {
  padding:
    0;

  background:
    #eef4f8;
}


.dashboard-preview--institutional
.dashboard-preview__media img {
  width:
    100%;

  height:
    auto;

  aspect-ratio:
    auto;

  object-fit:
    contain;

  object-position:
    center;
}


.dashboard-preview:hover
.dashboard-preview__media img {
  filter:
    brightness(0.82);

  transform:
    scale(1.008);
}


.dashboard-preview__overlay {
  position:
    absolute;

  right:
    24px;

  bottom:
    24px;

  left:
    24px;

  display:
    grid;

  grid-template-columns:
    auto
    minmax(0, 1fr)
    auto;

  align-items:
    center;

  gap:
    14px;

  padding:
    15px 18px;

  border:
    1px solid
    rgba(255, 255, 255, 0.13);

  border-radius:
    var(--radius-small);

  background:
    rgba(3, 11, 19, 0.88);

  backdrop-filter:
    blur(14px);

  -webkit-backdrop-filter:
    blur(14px);
}


.dashboard-preview__label {
  color:
    var(--color-primary);

  font-size:
    0.82rem;

  font-weight:
    850;

  letter-spacing:
    0.12em;

  text-transform:
    uppercase;
}


.dashboard-preview__overlay strong {
  color:
    #ffffff;

  font-size:
    1.04rem;

  font-weight:
    850;
}


.dashboard-preview__arrow {
  display:
    grid;

  place-items:
    center;

  width:
    36px;

  height:
    36px;

  border-radius:
    50%;

  background:
    var(--color-primary);

  color:
    #03121c;

  font-weight:
    900;

  transition:
    transform
    var(--transition-fast);
}


.dashboard-preview:hover
.dashboard-preview__arrow {
  transform:
    translateX(3px);
}


/* =========================================================
   15. FUNCIONES DE LOS DASHBOARDS
========================================================= */

.platform-features {
  display:
    grid;

  grid-template-columns:
    repeat(3, minmax(0, 1fr));

  gap:
    15px;

  margin-bottom:
    38px;
}


.platform-feature {
  min-width:
    0;

  padding:
    22px;

  border:
    1px solid
    var(--color-border);

  border-radius:
    var(--radius-medium);

  background:
    rgba(255, 255, 255, 0.028);

  transition:
    transform
    var(--transition-fast),
    background
    var(--transition-fast),
    border-color
    var(--transition-fast),
    box-shadow
    var(--transition-fast);
}


.platform-feature:hover {
  border-color:
    rgba(34, 197, 246, 0.35);

  background:
    rgba(34, 197, 246, 0.055);

  box-shadow:
    var(--shadow-small);

  transform:
    translateY(-3px);
}


.platform-feature img {
  width:
    52px;

  height:
    52px;

  margin-bottom:
    16px;

  object-fit:
    contain;
}


.platform-feature h3 {
  margin-bottom:
    7px;

  color:
    var(--color-text);

  font-size:
    1.10rem;

  font-weight:
    850;

  line-height:
    1.25;
}


.platform-feature p {
  margin-bottom:
    0;

  color:
    var(--color-text-muted);

  font-size:
    0.98rem;

  line-height:
    1.62;
}


/* Acceso inferior */

.platform-access {
  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  flex-wrap:
    wrap;

  gap:
    17px;

  padding-top:
    8px;
}


.platform-access span {
  color:
    var(--color-text-muted);

  font-size:
    0.90rem;

  line-height:
    1.5;
}


/* =========================================================
   16. PROTECCIÓN CIVIL
========================================================= */

.civil-protection {
  display:
    grid;

  grid-template-columns:
    minmax(0, 1.12fr)
    minmax(330px, 0.88fr);

  align-items:
    center;

  gap:
    clamp(44px, 6vw, 80px);
}


.civil-protection__content h2 {
  margin-bottom:
    18px;

  color:
    var(--color-dark-text);

  font-size:
    var(--tsunami-type-section-title);

  font-weight:
    900;

  line-height:
    1.08;

  letter-spacing:
    -0.045em;
}


.civil-protection__content >
p:not(.section-eyebrow) {
  color:
    var(--color-dark-soft);

  font-size:
    1.10rem;

  line-height:
    1.75;
}


.civil-protection__audiences {
  display:
    grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap:
    12px;

  margin-top:
    28px;
}


.civil-protection__audiences article {
  display:
    grid;

  grid-template-columns:
    38px
    minmax(0, 1fr);

  gap:
    12px;

  padding:
    16px;

  border:
    1px solid
    var(--color-border-dark);

  border-radius:
    var(--radius-small);

  background:
    rgba(255, 255, 255, 0.78);

  box-shadow:
    var(--shadow-small);
}


.civil-protection__audiences
article > span {
  display:
    grid;

  place-items:
    center;

  width:
    36px;

  height:
    36px;

  border-radius:
    50%;

  background:
    rgba(7, 95, 187, 0.08);

  color:
    var(--color-primary-deep);

  font-size:
    0.78rem;

  font-weight:
    900;
}


.civil-protection__audiences h3 {
  margin-bottom:
    4px;

  color:
    var(--color-dark-text);

  font-size:
    1.06rem;

  font-weight:
    850;
}


.civil-protection__audiences p {
  margin-bottom:
    0;

  color:
    var(--color-dark-muted);

  font-size:
    0.96rem;

  line-height:
    1.55;
}


.civil-protection__media {
  margin:
    0;

  overflow:
    hidden;

  border:
    1px solid
    var(--color-border-dark);

  border-radius:
    var(--radius-large);

  background:
    #dfe8ee;

  box-shadow:
    var(--shadow-medium);
}


.civil-protection__media img {
  width:
    100%;

  aspect-ratio:
    1 / 1;

  object-fit:
    cover;
}


.civil-protection__media figcaption {
  padding:
    13px 17px;

  color:
    var(--color-dark-muted);

  font-size:
    0.88rem;

  text-align:
    center;
}


.territorial-purpose {
  max-width:
    900px;

  margin:
    65px auto 0;

  padding:
    31px;

  border-left:
    4px solid
    var(--color-primary-deep);

  border-radius:
    0
    var(--radius-medium)
    var(--radius-medium)
    0;

  background:
    linear-gradient(
      90deg,
      rgba(34, 197, 246, 0.10),
      rgba(255, 255, 255, 0.80)
    );

  box-shadow:
    var(--shadow-small);
}


.territorial-purpose blockquote {
  margin-bottom:
    0;

  color:
    var(--color-dark-text);

  font-size:
    clamp(1.15rem, 2vw, 1.55rem);

  font-weight:
    700;

  line-height:
    1.52;
}


/* =========================================================
   17. DASHBOARD INSTITUCIONAL
========================================================= */

/*
 * Separación visual suave:
 * no cambiamos la paleta maestra,
 * pero el bloque institucional recibe
 * un acento de verde asociado a conexión LIVE.
 */

#dashboard-institucional {
  background:
    radial-gradient(
      circle at 83% 8%,
      rgba(77, 224, 165, 0.08),
      transparent 28%
    ),
    radial-gradient(
      circle at 18% 24%,
      rgba(34, 197, 246, 0.09),
      transparent 34%
    ),
    linear-gradient(
      180deg,
      #061522,
      #030b13
    );
}


#dashboard-institucional
.section-heading > img {
  width:
    70px;

  height:
    70px;
}


#dashboard-institucional
.platform-feature:nth-child(2) {
  border-color:
    rgba(77, 224, 165, 0.18);
}


/* =========================================================
   18. ARQUITECTURA LIVE
========================================================= */

#arquitectura-live {
  overflow:
    hidden;

  background:
    radial-gradient(
      circle at 90% 12%,
      rgba(21, 133, 219, 0.06),
      transparent 29%
    ),
    var(--color-surface-soft);
}


#arquitectura-live
.section-heading {
  max-width:
    900px;
}


#arquitectura-live
.technology-step {
  min-height:
    295px;

  padding-inline:
    16px;
}


#arquitectura-live
.technology-step__icon {
  width:
    82px;

  height:
    82px;
}


#arquitectura-live
.technology-step h3 {
  font-size:
    1.08rem;
}


#arquitectura-live
.technology-step p {
  font-size:
    0.96rem;
}


/* =========================================================
   19. DOS DASHBOARDS, UNA PLATAFORMA
========================================================= */

#dashboards {
  background:
    radial-gradient(
      circle at 50% 0%,
      rgba(34, 197, 246, 0.10),
      transparent 34%
    ),
    var(--color-background-secondary);
}


#dashboards
.monitoring-modes {
  margin-top:
    0;
}


#dashboards
.monitoring-mode {
  padding:
    32px;
}


#dashboards
.monitoring-mode > img {
  width:
    72px;

  height:
    72px;
}


#dashboards
.evacuation-benefits {
  margin:
    8px 0 28px;
}


#dashboards
.evacuation-benefit {
  min-height:
    92px;
}


#dashboards
.monitoring-mode > .button {
  width:
    100%;

  margin-top:
    auto;
}


/* =========================================================
   20. CTA FINAL
========================================================= */

.final-cta {
  position:
    relative;

  overflow:
    hidden;

  padding:
    78px 0;

  border-top:
    1px solid
    var(--color-border);

  border-bottom:
    1px solid
    var(--color-border);

  background:
    radial-gradient(
      circle at 88% 16%,
      rgba(21, 133, 219, 0.15),
      transparent 34%
    ),
    linear-gradient(
      135deg,
      #071725,
      #03101a
    );
}


.final-cta::before {
  content:
    "";

  position:
    absolute;

  inset:
    0;

  pointer-events:
    none;

  opacity:
    0.38;

  background-image:
    linear-gradient(
      rgba(255, 255, 255, 0.025) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.025) 1px,
      transparent 1px
    );

  background-size:
    44px 44px;
}


.final-cta__container {
  position:
    relative;

  z-index:
    1;

  display:
    grid;

  grid-template-columns:
    minmax(0, 1fr)
    minmax(280px, auto);

  align-items:
    center;

  gap:
    clamp(32px, 5vw, 60px);
}


.final-cta__content {
  max-width:
    760px;
}


.final-cta__content h2 {
  margin-bottom:
    16px;

  color:
    #ffffff;

  font-size:
    clamp(1.7rem, 2.8vw, 2.45rem);

  font-weight:
    900;

  line-height:
    1.09;

  letter-spacing:
    -0.042em;
}


.final-cta__content p:last-child {
  max-width:
    720px;

  color:
    var(--color-text-soft);

  font-size:
    1.10rem;

  line-height:
    1.72;
}


.final-cta__actions {
  display:
    flex;

  flex-direction:
    column;

  gap:
    10px;

  min-width:
    275px;
}


.final-cta__actions
.button {
  width:
    100%;
}


.final-cta__note {
  grid-column:
    2;

  margin:
    -30px 0 0;

  color:
    var(--color-text-muted);

  font-size:
    0.90rem;

  line-height:
    1.5;

  text-align:
    center;
}


/* =========================================================
   21. FOOTER
========================================================= */

.site-footer {
  background:
    #02080e;

  color:
    var(--color-text);
}


.site-footer__container {
  display:
    grid;

  grid-template-columns:
    minmax(260px, 1.35fr)
    minmax(170px, 0.75fr)
    minmax(170px, 0.70fr)
    minmax(220px, 0.90fr);

  gap:
    clamp(30px, 4vw, 58px);

  padding-top:
    60px;

  padding-bottom:
    52px;
}


.site-footer__brand img {
  width:
    168px;

  max-height:
    54px;

  margin-bottom:
    17px;

  object-fit:
    contain;
}


.site-footer__brand p {
  max-width:
    420px;

  color:
    var(--color-text-muted);

  font-size:
    0.96rem;

  line-height:
    1.67;
}


.site-footer h2 {
  margin-bottom:
    15px;

  color:
    var(--color-text);

  font-size:
    0.88rem;

  font-weight:
    850;

  letter-spacing:
    0.10em;

  text-transform:
    uppercase;
}


.site-footer__navigation nav {
  display:
    flex;

  align-items:
    flex-start;

  flex-direction:
    column;

  gap:
    9px;
}


.site-footer__navigation a,
.site-footer__contact a {
  color:
    var(--color-text-muted);

  font-size:
    0.92rem;

  line-height:
    1.5;

  transition:
    color
    var(--transition-fast);
}


.site-footer__navigation a:hover,
.site-footer__contact a:hover {
  color:
    var(--color-primary);
}


.site-footer__contact p {
  margin-bottom:
    8px;

  color:
    var(--color-text-muted);

  font-size:
    0.92rem;

  line-height:
    1.62;
}


.site-footer__contact a {
  color:
    var(--color-primary);

  font-weight:
    800;
}


.site-footer__bottom {
  border-top:
    1px solid
    var(--color-border);
}


.site-footer__bottom > div {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    30px;

  width:
    min(
      calc(100% - 40px),
      var(--container-width)
    );

  margin-inline:
    auto;

  padding:
    18px 0;
}


.site-footer__bottom p {
  margin-bottom:
    0;

  color:
    var(--color-text-muted);

  font-size:
    0.82rem;
}


.site-footer__bottom nav {
  display:
    flex;

  flex-wrap:
    wrap;

  gap:
    18px;
}


.site-footer__bottom a {
  color:
    var(--color-text-muted);

  font-size:
    0.82rem;

  transition:
    color
    var(--transition-fast);
}


.site-footer__bottom a:hover {
  color:
    var(--color-primary);
}
/* =========================================================
   22. TABLET GRANDE
========================================================= */

@media (max-width: 1180px) {

  .site-header__container {
    gap:
      16px;
  }


  .site-navigation {
    gap:
      16px;
  }


  .site-navigation a {
    font-size:
      0.92rem;
  }


  .site-header__access {
    padding-inline:
      11px;

    font-size:
      0.88rem;
  }


  #arquitectura-live
  .technology-flow {
    grid-template-columns:
      repeat(3, minmax(0, 1fr));

    gap:
      16px;
  }


  #arquitectura-live
  .technology-flow__arrow {
    display:
      none;
  }


  .site-footer__container {
    grid-template-columns:
      minmax(0, 1.2fr)
      repeat(3, minmax(150px, 0.70fr));

    gap:
      34px;
  }

}


/* =========================================================
   23. TABLET
========================================================= */

@media (max-width: 980px) {

  html {
    scroll-padding-top:
      120px;
  }


  .site-header__container {
    flex-wrap:
      wrap;

    padding-top:
      10px;

    padding-bottom:
      10px;
  }


  .site-brand {
    margin-right:
      auto;
  }


  .site-header__actions {
    margin-left:
      auto;
  }


  .site-navigation {
    order:
      3;

    width:
      100%;

    margin-left:
      0;

    overflow-x:
      auto;

    justify-content:
      flex-start;

    scrollbar-width:
      thin;
  }


  .site-navigation a {
    flex-shrink:
      0;

    padding:
      10px 0 12px;
  }


  .site-navigation a::after {
    bottom:
      3px;
  }


  .hero__container,
  .mobile-capture,
  .evacuation-layout,
  .civil-protection {
    grid-template-columns:
      1fr;
  }


  .hero__container {
    min-height:
      auto;

    padding-top:
      70px;

    padding-bottom:
      70px;
  }


  .hero__content {
    max-width:
      760px;
  }


  .hero__media {
    width:
      min(560px, 100%);

    margin-inline:
      auto;
  }


  .mobile-capture,
  .evacuation-layout,
  .civil-protection {
    gap:
      40px;
  }


  .mobile-capture__media,
  .evacuation-layout__media,
  .civil-protection__media {
    width:
      min(600px, 100%);

    margin-inline:
      auto;
  }


  .technology-flow {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));

    gap:
      16px;
  }


  .technology-flow__arrow {
    display:
      none;
  }


  .technology-step {
    min-height:
      270px;
  }


  #arquitectura-live
  .technology-flow {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }


  .platform-features {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }


  .technology-summary {
    grid-template-columns:
      1fr;

    gap:
      18px;
  }


  .final-cta__container {
    grid-template-columns:
      1fr;
  }


  .final-cta__actions {
    align-items:
      stretch;

    flex-direction:
      row;

    flex-wrap:
      wrap;

    min-width:
      0;
  }


  .final-cta__actions
  .button {
    flex:
      1 1 220px;
  }


  .final-cta__note {
    grid-column:
      1;

    margin:
      0;

    text-align:
      left;
  }


  .site-footer__container {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }


  .site-footer__brand {
    grid-column:
      1 / -1;
  }

}


/* =========================================================
   24. MÓVIL Y TABLET PEQUEÑA
========================================================= */

@media (max-width: 720px) {

  html {
    scroll-padding-top:
      126px;
  }


  .public-container,
  .hero__container,
  .site-header__container,
  .site-footer__container,
  .final-cta__container,
  .site-footer__bottom > div {
    width:
      min(
        calc(100% - 28px),
        var(--container-width)
      );
  }


  .public-section {
    padding:
      62px 0;
  }


  .section-heading {
    margin-bottom:
      32px;
  }


  .section-heading h2 {
    font-size:
      clamp(1.65rem, 7vw, 2.2rem);
  }


  .section-heading >
  p:last-child {
    font-size:
      0.98rem;

    line-height:
      1.68;
  }


  /* Header */

  .site-brand__logo {
    width:
      148px;
  }


  .site-header__actions {
    gap:
      6px;
  }


  .site-header__access {
    min-height:
      38px;

    padding:
      7px 10px;

    font-size:
      0.88rem;
  }


  /* Hero */

  .hero__container {
    padding-top:
      58px;

    padding-bottom:
      58px;
  }


  .hero h1 {
    font-size:
      clamp(2.05rem, 10vw, 3.05rem);
  }


  .hero__description {
    font-size:
      0.97rem;

    line-height:
      1.62;
  }


  .hero__supporting-text {
    font-size:
      1.05rem;
  }


  .hero__actions {
    align-items:
      stretch;

    flex-direction:
      column;
  }


  .hero__actions
  .button {
    width:
      100%;
  }


  /* Grids */

  .capture-data-grid,
  .platform-features,
  .monitoring-modes,
  .civil-protection__audiences,
  .technology-flow,
  #arquitectura-live
  .technology-flow {
    grid-template-columns:
      1fr;
  }


  .technology-step {
    display:
      grid;

    grid-template-columns:
      92px
      minmax(0, 1fr);

    gap:
      17px;

    align-items:
      center;

    min-height:
      auto;

    padding:
      18px;

    text-align:
      left;
  }


  .technology-step__number {
    top:
      12px;

    right:
      12px;
  }


  .technology-step__icon {
    width:
      92px;

    height:
      92px;

    margin:
      0;

    grid-row:
      1 / span 2;
  }


  .technology-step h3 {
    margin:
      0 38px 5px 0;
  }


  .technology-summary {
    padding:
      20px;
  }


  /* Dashboards */

  .dashboard-preview {
    margin-bottom:
      34px;

    border-radius:
      var(--radius-medium);
  }


  .dashboard-preview__media img,
  #dashboard-personal
  .dashboard-preview__media img,
  .dashboard-preview--institutional
  .dashboard-preview__media img {
    min-height:
      0;

    aspect-ratio:
      auto;

    object-fit:
      contain;
  }


  .dashboard-preview__overlay {
    right:
      12px;

    bottom:
      12px;

    left:
      12px;

    grid-template-columns:
      1fr
      auto;

    gap:
      8px;

    padding:
      12px 14px;
  }


  .dashboard-preview__label {
    grid-column:
      1 / -1;
  }


  .dashboard-preview__overlay strong {
    font-size:
      1.04rem;
  }


  .monitoring-mode {
    padding:
      22px;
  }


  .monitoring-mode > img {
    width:
      56px;

    height:
      56px;
  }


  .platform-access {
    align-items:
      stretch;

    flex-direction:
      column;

    text-align:
      center;
  }


  .platform-access
  .button {
    width:
      100%;
  }


  /* Protección Civil */

  .territorial-purpose {
    margin-top:
      42px;

    padding:
      24px 20px;
  }


  /* CTA */

  .final-cta {
    padding:
      62px 0;
  }


  .final-cta__content h2 {
    font-size:
      clamp(1.65rem, 7vw, 2.2rem);
  }


  .final-cta__actions {
    flex-direction:
      column;
  }


  .final-cta__actions
  .button {
    width:
      100%;
  }


  .final-cta__note {
    text-align:
      center;
  }


  /* Footer */

  .site-footer__container {
    grid-template-columns:
      1fr;

    gap:
      34px;
  }


  .site-footer__brand {
    grid-column:
      auto;
  }


  .site-footer__bottom > div {
    align-items:
      flex-start;

    flex-direction:
      column;

    gap:
      12px;
  }

}


/* =========================================================
   25. MÓVIL PEQUEÑO
========================================================= */

@media (max-width: 480px) {

  .public-container,
  .hero__container,
  .site-header__container,
  .site-footer__container,
  .final-cta__container,
  .site-footer__bottom > div {
    width:
      min(
        calc(100% - 22px),
        var(--container-width)
      );
  }


  .site-header__container {
    gap:
      10px;
  }


  .site-brand__logo {
    width:
      130px;
  }


  .site-header__actions {
    width:
      100%;

    order:
      2;

    display:
      grid;

    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }


  .site-header__access {
    width:
      100%;

    min-height:
      38px;

    padding-inline:
      7px;

    font-size:
      0.88rem;
  }


  .site-navigation {
    order:
      3;
  }


  .hero__container {
    padding-top:
      48px;

    padding-bottom:
      48px;
  }


  .hero h1 {
    font-size:
      clamp(1.9rem, 9.5vw, 2.75rem);
  }


  .capture-data-card {
    min-height:
      auto;
  }


  .technology-step {
    grid-template-columns:
      82px
      minmax(0, 1fr);

    gap:
      14px;

    padding:
      15px;
  }


  .technology-step__icon {
    width:
      82px;

    height:
      82px;
  }


  .technology-step h3 {
    font-size:
      1.10rem;
  }


  .technology-step p {
    font-size:
      0.97rem;

    line-height:
      1.52;
  }


  .evacuation-benefit {
    grid-template-columns:
      38px
      minmax(0, 1fr);

    padding:
      13px;
  }


  .evacuation-benefit > span {
    width:
      36px;

    height:
      36px;
  }


  .dashboard-preview__overlay strong {
    font-size:
      1.04rem;
  }


  .dashboard-preview__arrow {
    width:
      32px;

    height:
      32px;
  }


  .territorial-purpose {
    padding:
      22px 18px;
  }

}


/* =========================================================
   26. PANTALLAS GRANDES
========================================================= */

@media (min-width: 1600px) {

  .hero__content {
    max-width:
      820px;
  }


  .dashboard-preview--institutional {
    width:
      min(100%, 1240px);
  }

}


/* =========================================================
   27. MOVIMIENTO REDUCIDO
========================================================= */

@media (prefers-reduced-motion: reduce) {

  html {
    scroll-behavior:
      auto;
  }


  *,
  *::before,
  *::after {
    scroll-behavior:
      auto !important;

    transition-duration:
      0.01ms !important;

    animation-duration:
      0.01ms !important;

    animation-iteration-count:
      1 !important;
  }

}


/* =========================================================
   28. IMPRESIÓN
========================================================= */

@media print {

  .site-header,
  .final-cta,
  .site-footer,
  .dashboard-preview__overlay {
    display:
      none !important;
  }


  body {
    color:
      #000000;

    background:
      #ffffff;
  }


  .hero,
  .public-section,
  .public-section--dark,
  .public-section--platform,
  .public-section--light {
    color:
      #000000;

    background:
      #ffffff;
  }


  .public-section {
    padding:
      32px 0;
  }


  .dashboard-preview,
  .technology-step,
  .platform-feature,
  .monitoring-mode,
  .capture-data-card {
    break-inside:
      avoid;

    box-shadow:
      none;
  }

}


/* =========================================================
   10. APLICACIÓN MÓVIL TSUNAMIGO
   Descarga APK / Google Play
   FONDO BLANCO
========================================================= */

.app-download {
  width: 100%;
  min-height: 700px;

  background: #ffffff;

  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;

  border-top: 1px solid #e4e9ed;
  border-bottom: 1px solid #e4e9ed;

  padding: 55px 24px;
}


/* =========================================================
   CONTENEDOR
========================================================= */

.app-download__container {
  width: min(1360px, 100%);
  min-height: 580px;

  margin: 0 auto;

  display: grid;
  grid-template-columns: minmax(360px, 0.9fr) minmax(520px, 1.1fr);
  align-items: center;

  gap: clamp(50px, 6vw, 100px);
}


/* =========================================================
   IMAGEN CELULAR
========================================================= */

.app-download__media {
  width: 100%;
  height: 100%;

  margin: 0;

  display: flex;
  align-items: center;
  justify-content: center;

  position: relative;
}


.app-download__media::before {
  content: "";

  position: absolute;

  width: 420px;
  height: 420px;

  max-width: 90%;

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(30, 174, 222, 0.12) 0%,
      rgba(30, 174, 222, 0.04) 50%,
      transparent 72%
    );
}


.app-download__media img {
  display: block;

  width: min(520px, 100%);
  max-height: 540px;

  object-fit: contain;

  position: relative;
  z-index: 1;
}


/* =========================================================
   CONTENIDO DERECHO
========================================================= */

.app-download__content {
  width: 100%;
  max-width: 700px;
}


/* EYEBROW */

.app-download__content > .section-eyebrow {
  margin: 0 0 12px;

  color: #149dcc;

  font-size:
    0.82rem;

  font-weight: 700;

  line-height: 1.2;

  letter-spacing: 0.14em;
  text-transform: uppercase;
}


/* TÍTULO */

.app-download__content h2 {
  margin: 0 0 20px;

  max-width: 650px;

  color: #0a1822;

  font-size: clamp(2rem, 3vw, 3rem);
  font-weight: 700;

  line-height: 1.08;
  letter-spacing: -0.025em;
}


/* TEXTO DESTACADO */

.app-download__lead {
  max-width: 680px;

  margin: 0 0 16px;

  color: #263b49 !important;

  font-size:
    1.12rem !important;

  line-height: 1.7 !important;
}


/* TEXTO NORMAL */

.app-download__content > p:not(.section-eyebrow):not(.app-download__lead) {
  max-width: 680px;

  margin: 0 0 13px;

  color: #536875;

  font-size:
    1.04rem;

  line-height: 1.65;
}


/* =========================================================
   OPCIONES GOOGLE PLAY / APK
========================================================= */

.app-download__options {
  width: 100%;

  margin-top: 30px;

  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));

  gap: 16px;
}


/* =========================================================
   TARJETAS
========================================================= */

.app-download__option {
  min-height: 150px;

  display: grid;
  grid-template-columns: 72px 1fr;
  align-items: center;

  gap: 16px;

  padding: 20px;

  border: 1px solid #dce4e9;
  border-radius: 14px;

  background: #f8fafb;

  box-shadow: 0 5px 18px rgba(13, 41, 58, 0.05);

  text-decoration: none;

  transition:
    transform 0.22s ease,
    border-color 0.22s ease,
    background 0.22s ease,
    box-shadow 0.22s ease;
}


/* =========================================================
   ICONOS
========================================================= */

.app-download__option-icon {
  width: 72px;
  height: 72px;

  display: flex;
  align-items: center;
  justify-content: center;

  flex-shrink: 0;
}


.app-download__option-icon img {
  display: block;

  width: 62px;
  height: 62px;

  object-fit: contain;
}


/* =========================================================
   CONTENIDO DE TARJETAS
========================================================= */

.app-download__option-content {
  min-width: 0;
}


.app-download__status {
  display: inline-flex;

  margin: 0 0 6px;

  color: #149dcc;

  font-size:
    0.78rem;

  font-weight: 700;

  line-height: 1;

  letter-spacing: 0.10em;
  text-transform: uppercase;
}


.app-download__option-content h3 {
  margin: 0 0 7px;

  color: #0b1d29;

  font-size:
    1.14rem;

  font-weight: 700;

  line-height: 1.25;
}


.app-download__option-content p {
  margin: 0;

  color: #687d89;

  font-size:
    0.96rem;

  line-height: 1.45;
}


/* =========================================================
   GOOGLE PLAY — PRÓXIMAMENTE
========================================================= */

.app-download__option--coming {
  opacity: 1;

  cursor: default;

  border-color: #dde4e8;

  background: #f5f7f8;
}


.app-download__option--coming .app-download__status {
  color: #7d8e98;
}


/* =========================================================
   APK — DISPONIBLE
========================================================= */

.app-download__option--active {
  border-color: rgba(19, 166, 216, 0.48);

  background: #f2fbfe;
}


.app-download__option--active:hover {
  transform: translateY(-3px);

  border-color: #13a7d8;

  background: #eaf9fe;

  box-shadow:
    0 12px 28px rgba(17, 106, 143, 0.12);
}


.app-download__option--active .app-download__status {
  color: #079bd0;
}


.app-download__download-text {
  display: inline-flex;
  align-items: center;

  gap: 8px;

  margin-top: 9px;

  color: #079bd0;

  font-size:
    0.96rem;

  font-weight: 700;
}


/* =========================================================
   NOTA DISPONIBILIDAD TERRITORIAL
========================================================= */

.app-download__notice {
  width: 100%;

  margin-top: 22px;
  padding: 16px 18px;

  border-left: 3px solid #17addd;

  background: #f1f9fc;

  border-radius: 0 8px 8px 0;
}


.app-download__notice strong {
  display: block;

  margin-bottom: 5px;

  color: #153746;

  font-size:
    0.98rem;

  font-weight: 700;
}


.app-download__notice p {
  margin: 0;

  color: #607783;

  font-size:
    0.94rem;

  line-height: 1.5;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1100px) {

  .app-download {
    min-height: auto;

    padding:
      65px
      clamp(24px, 5vw, 50px);
  }


  .app-download__container {
    grid-template-columns: 0.85fr 1.15fr;

    gap: 45px;
  }


  .app-download__media img {
    width: min(430px, 100%);
    max-height: 470px;
  }


  .app-download__options {
    grid-template-columns: 1fr;
  }


  .app-download__option {
    min-height: 125px;
  }

}


/* =========================================================
   MÓVIL
========================================================= */

@media (max-width: 760px) {

  .app-download {
    min-height: auto;

    padding:
      48px
      20px;
  }


  .app-download__container {
    display: flex;
    flex-direction: column;

    min-height: 0;

    gap: 34px;
  }


  .app-download__media {
    width: 100%;
    min-height: 330px;
  }


  .app-download__media::before {
    width: 320px;
    height: 320px;
  }


  .app-download__media img {
    width: min(390px, 100%);
    max-height: 410px;
  }


  .app-download__content {
    max-width: none;
  }


  .app-download__content h2 {
    font-size: clamp(1.8rem, 8vw, 2.35rem);
  }


  .app-download__lead {
    font-size:
      1.12rem !important;
  }


  .app-download__options {
    grid-template-columns: 1fr;

    gap: 12px;

    margin-top: 25px;
  }


  .app-download__option {
    min-height: 120px;

    grid-template-columns: 58px 1fr;

    gap: 14px;

    padding: 17px;
  }


  .app-download__option-icon {
    width: 58px;
    height: 58px;
  }


  .app-download__option-icon img {
    width: 52px;
    height: 52px;
  }

}


/* =========================================================
   MÓVIL PEQUEÑO
========================================================= */

@media (max-width: 430px) {

  .app-download {
    padding: 42px 16px;
  }


  .app-download__media {
    min-height: 285px;
  }


  .app-download__media img {
    width: min(330px, 100%);
    max-height: 350px;
  }


  .app-download__option {
    grid-template-columns: 52px 1fr;

    padding: 15px;
  }


  .app-download__option-icon {
    width: 52px;
    height: 52px;
  }


  .app-download__option-icon img {
    width: 46px;
    height: 46px;
  }


  .app-download__notice {
    padding: 14px;
  }

}
/* =========================================================
   COLORES DE ACCESO
   Personal = naranja
   Institucional = azul
========================================================= */


/* =========================================================
   1. HEADER — BOTÓN PERSONAL NARANJA
========================================================= */

.site-header__access:not(.site-header__access--institutional) {
  color: #ff9f1c;

  border-color: rgba(255, 159, 28, 0.55);

  background: rgba(255, 159, 28, 0.10);
}


.site-header__access:not(.site-header__access--institutional):hover {
  color: #ffffff;

  border-color: #ff9f1c;

  background: #ff9f1c;
}


/* =========================================================
   2. HEADER — BOTÓN INSTITUCIONAL AZUL
========================================================= */

.site-header__access--institutional {
  color: #22c5f6;

  border-color: rgba(34, 197, 246, 0.55);

  background: rgba(34, 197, 246, 0.10);
}


.site-header__access--institutional:hover {
  color: #03121c;

  border-color: #22c5f6;

  background: #22c5f6;
}


/* =========================================================
   3. HERO — BOTÓN "MI DASHBOARD" NARANJA
========================================================= */

.hero__actions .button--primary:first-child {
  color: #ffffff;

  border-color: #ff9f1c;

  background:
    linear-gradient(
      135deg,
      #ff9f1c,
      #f57c00
    );

  box-shadow:
    0 12px 28px
    rgba(245, 124, 0, 0.28);
}


.hero__actions .button--primary:first-child:hover {
  color: #ffffff;

  border-color: #ffad33;

  background:
    linear-gradient(
      135deg,
      #ffad33,
      #ff8c00
    );

  box-shadow:
    0 16px 34px
    rgba(245, 124, 0, 0.34);
}


/* =========================================================
   4. HERO — BOTÓN "DASHBOARD INSTITUCIONAL" AZUL
========================================================= */

.hero__actions .button--primary:nth-child(2) {
  color: #ffffff;

  border-color: rgba(34, 197, 246, 0.60);

  background:
    linear-gradient(
      135deg,
      #075fbb,
      #1585db
    );

  box-shadow:
    0 12px 28px
    rgba(7, 95, 187, 0.24);
}


.hero__actions .button--primary:nth-child(2):hover {
  color: #ffffff;

  border-color: #22c5f6;

  background:
    linear-gradient(
      135deg,
      #086bc8,
      #22a5eb
    );

  box-shadow:
    0 16px 34px
    rgba(7, 95, 187, 0.31);
}
/* =========================================================
   CTA FINAL
   Dashboard Personal = naranja
========================================================= */

.final-cta__actions .button--primary:first-child {
  color: #ffffff;

  border-color: #ff9f1c;

  background:
    linear-gradient(
      135deg,
      #ff9f1c,
      #f57c00
    );

  box-shadow:
    0 12px 28px
    rgba(245, 124, 0, 0.28);
}


.final-cta__actions .button--primary:first-child:hover {
  color: #ffffff;

  border-color: #ffad33;

  background:
    linear-gradient(
      135deg,
      #ffad33,
      #ff8c00
    );

  box-shadow:
    0 16px 34px
    rgba(245, 124, 0, 0.36);

  transform:
    translateY(-2px);
}
/* =========================================================
   FOOTER - CONTACTO
   Web y correo en líneas separadas
========================================================= */

.site-footer__contact {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}


.site-footer__contact p {
  margin-bottom: 10px;
}


.site-footer__contact a {
  display: block;

  width: fit-content;

  margin-bottom: 6px;

  color: var(--color-primary);

  font-size: 0.92rem;
  font-weight: 800;

  line-height: 1.5;
}


.site-footer__contact a:last-child {
  margin-bottom: 0;
}