/* =====================================================================
   MR FRIO 24/7 — bespoke static site (demo / pitch build)
   Business: compra de equipos de cocina comercial y del hogar,
   especializado en refrigeración · Carolina, Puerto Rico.
   Design: "hielo & chrome" — azul hielo + plata/gris metálico + negro + blanco,
   tono metálico fiel al emblema real del negocio (pendiente de extracción
   de color cuando Carlos suba el logo real — paleta de partida, no definitiva).
   Type: Saira (display, frío/técnico) + Inter (body).
   NOTE: todo el copy usa SOLO datos reales proporcionados. No se inventan
   precios, horario de atención, años de experiencia, certificaciones ni
   reseñas. La dirección (Calle 517, Villa Carolina) está marcada en el código
   como pendiente de confirmar (viene de gráficas promocionales, no de fuente
   oficial). Logo y fotos son placeholders a reemplazar por Carlos.
   ===================================================================== */

:root {
  /* near-black con tinte azul frío ("hielo oscuro") */
  --noche:      #041019;
  --noche-2:    #071a28;
  --tinta:      #0a2132;
  --tinta-2:    #102c41;
  --marino:     #0e2a40;
  --marino-2:   #153a57;

  /* azul hielo */
  --hielo:      #7dd3f2;
  --hielo-2:    #4aa9d9;
  --hielo-luz:  #9fd8f2;
  --hielo-hi:   #c8ecfb;
  --azul:       #17618e;

  /* plata / gris metálico */
  --plata:      #eaf2f7;
  --plata-2:    #c6d5e0;
  --gris:       #8fa3b3;
  --gris-osc:   #5d7180;

  --texto:      #d2e3ee;
  --linea:      rgba(125,211,242,.16);
  --linea-neon: rgba(125,211,242,.42);

  --r-sm: 9px;
  --r-md: 16px;
  --r-lg: 24px;

  --shadow:      0 34px 80px -26px rgba(0,4,12,.9);
  --shadow-ice:  0 24px 54px -18px rgba(74,169,217,.5);
  --shadow-soft: 0 18px 46px -16px rgba(125,211,242,.38);

  --wrap: 1200px;
  --gap: clamp(16px, 3vw, 28px);
  --sp-section: clamp(72px, 10vw, 136px);

  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ---------- reset-ish ---------- */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: "Inter", system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.65;
  color: var(--texto);
  background: var(--noche);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1,h2,h3,h4 { margin: 0; line-height: 1.06; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }

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

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* ---------- shared ---------- */
.wrap { width: min(100% - 40px, var(--wrap)); margin-inline: auto; }

.eyebrow {
  font-weight: 700;
  font-size: .76rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--hielo-luz);
  display: inline-flex;
  align-items: center;
  gap: .7em;
  max-width: 100%;
}
.eyebrow svg { width: 17px; height: 17px; color: var(--hielo); flex: none; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  padding: 15px 26px;
  font-family: "Saira", sans-serif;
  font-weight: 700; font-size: .98rem; letter-spacing: .01em;
  color: #062338;
  background: linear-gradient(180deg, #dff3fc, #a9d9f0);
  border: 1px solid rgba(200,236,251,.75); border-radius: var(--r-sm);
  cursor: pointer;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), filter .2s var(--ease);
  white-space: nowrap;
}
.btn svg { width: 20px; height: 20px; }
.btn:hover { box-shadow: var(--shadow-ice); transform: translateY(-2px); filter: brightness(1.04); }
.btn:active { transform: translateY(0); }

.btn--ghost {
  background: transparent; color: var(--plata);
  border-color: var(--linea);
}
.btn--ghost:hover { background: rgba(125,211,242,.08); box-shadow: none; border-color: var(--linea-neon); }

.btn--wa { background: linear-gradient(180deg, #2dd670, #1fae53); color: #04240f; border-color: rgba(31,171,83,.4); font-weight: 700; }
.btn--wa:hover { box-shadow: 0 20px 46px -16px rgba(31,171,83,.55); }

:focus-visible { outline: 3px solid var(--hielo); outline-offset: 3px; border-radius: 3px; }

.section-head { max-width: 820px; margin-bottom: clamp(38px, 6vw, 64px); }
.section-head h2 {
  font-family: "Saira", sans-serif; font-weight: 700;
  font-size: clamp(2rem, 5.2vw, 3.4rem); line-height: 1.08; letter-spacing: -.02em;
  margin-top: 16px; color: #fff;
}
.section-head .lead { margin-top: 18px; color: var(--gris); font-size: 1.08rem; max-width: 62ch; }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head.center .eyebrow { justify-content: center; }
.section-head.center .lead { margin-inline: auto; }

/* hielo gradient for emphasised words */
.section-head em, h1 em, h2 em, .em {
  font-style: normal;
  color: transparent;
  background: linear-gradient(100deg, var(--hielo-hi), var(--hielo), var(--hielo-2));
  -webkit-background-clip: text; background-clip: text;
}
/* chrome/silver gradient (brand-y words) */
.chrome {
  color: transparent;
  background: linear-gradient(180deg, #ffffff 2%, var(--plata) 40%, #aebfd0 58%, #e8f2f9 96%);
  -webkit-background-clip: text; background-clip: text;
}

.skip-link {
  position: absolute; left: 16px; top: -60px; z-index: 200;
  padding: 10px 18px; background: var(--hielo-hi); color: #062338;
  font-weight: 700; border-radius: var(--r-sm); transition: top .2s var(--ease);
}
.skip-link:focus { top: 16px; }

/* =====================================================================
   PLACEHOLDER (foto / logo pendientes)
   ===================================================================== */
.ph {
  position: relative;
  display: grid; place-items: center; align-content: center; gap: 10px;
  text-align: center;
  min-height: 230px;
  padding: 24px;
  border: 1px dashed rgba(125,211,242,.38);
  border-radius: var(--r-md);
  background:
    repeating-linear-gradient(135deg, rgba(125,211,242,.05) 0 16px, rgba(125,211,242,.11) 16px 32px),
    var(--tinta);
}
.ph__ic { width: 34px; height: 34px; color: var(--hielo-2); opacity: .8; }
.ph__txt { font-family: "Saira", sans-serif; font-weight: 600; font-size: .92rem; color: var(--plata-2); letter-spacing: .02em; }
.ph__cat { font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: var(--gris); }

/* =====================================================================
   BRAND LOCKUP (logo placeholder)
   ===================================================================== */
.brand { display: inline-flex; align-items: center; gap: 12px; }
.brand__mark {
  flex: none; width: 48px; height: 48px;
  display: grid; place-items: center;
  border: 1px solid var(--linea-neon);
  border-radius: 50%;
  background: radial-gradient(120% 120% at 30% 25%, var(--tinta-2), var(--noche));
  box-shadow: inset 0 0 18px rgba(125,211,242,.18), 0 4px 16px rgba(74,169,217,.3);
}
.brand__mark svg { width: 26px; height: 26px; color: var(--hielo-hi); filter: drop-shadow(0 0 6px rgba(125,211,242,.55)); }
.nav .brand__mark {
  width: 58px;
  height: 58px;
  border: 0;
  background: transparent;
  box-shadow: none;
}
.nav .brand__mark img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,.35));
}
.brand__txt { display: flex; flex-direction: column; line-height: 1; }
.brand__txt b {
  font-family: "Saira", sans-serif; font-weight: 800; font-size: 1.22rem; letter-spacing: .05em;
  color: transparent; background: linear-gradient(180deg,#fff,var(--plata) 55%,#9fb4c3);
  -webkit-background-clip: text; background-clip: text;
  white-space: nowrap;
}
.brand__txt b span { color: var(--hielo); -webkit-text-fill-color: var(--hielo); }
.brand__txt i { font-style: normal; font-size: .6rem; letter-spacing: .24em; text-transform: uppercase; color: var(--hielo-luz); opacity: .85; margin-top: 5px; white-space: nowrap; }

/* =====================================================================
   NAV
   ===================================================================== */
.nav {
  position: sticky; top: 0; z-index: 60;
  background: rgba(4,16,25,.8);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--linea);
}
.nav__inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; height: 76px; }
.nav__links { display: flex; align-items: center; gap: 28px; }
.nav__links > a, .nav__dropbtn {
  font-family: "Saira", sans-serif; font-weight: 500; font-size: .95rem;
  color: var(--texto); opacity: .86;
  background: none; border: 0; cursor: pointer; padding: 0;
  display: inline-flex; align-items: center; gap: 7px;
  transition: opacity .18s var(--ease), color .18s var(--ease);
}
.nav__links > a:hover, .nav__dropbtn:hover { opacity: 1; color: var(--hielo-hi); }
.nav__links > a[aria-current="page"] { color: var(--hielo); opacity: 1; }
.nav__dropbtn svg { width: 15px; height: 15px; transition: transform .22s var(--ease); }

/* dropdown */
.has-drop { position: relative; }
.drop {
  position: absolute; top: calc(100% + 14px); left: -14px;
  min-width: 248px;
  background: var(--tinta);
  border: 1px solid var(--linea);
  border-radius: var(--r-md);
  padding: 10px;
  box-shadow: var(--shadow);
  opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: opacity .22s var(--ease), transform .22s var(--ease), visibility .22s;
}
.has-drop:hover .drop, .has-drop:focus-within .drop, .has-drop.is-open .drop {
  opacity: 1; visibility: visible; transform: none;
}
.has-drop.is-open .nav__dropbtn svg { transform: rotate(180deg); }
.drop a {
  display: flex; align-items: center; justify-content: space-between;
  padding: 11px 13px; border-radius: var(--r-sm);
  font-family: "Saira", sans-serif; font-weight: 500; font-size: .9rem; color: var(--texto);
  transition: background .16s var(--ease), color .16s var(--ease);
}
.drop a:hover { background: rgba(125,211,242,.09); color: var(--hielo-hi); }
.drop .drop__all { margin-top: 8px; border-top: 1px solid var(--linea); padding-top: 12px; border-radius: 0 0 var(--r-sm) var(--r-sm); color: var(--hielo); font-weight: 600; justify-content: flex-start; gap: 8px; }
.drop .drop__all svg { width: 15px; height: 15px; }

.nav__cta { display: flex; align-items: center; gap: 12px; }
.nav__phone { display: inline-flex; align-items: center; gap: .5em; font-family: "Saira",sans-serif; font-weight: 600; letter-spacing: .01em; color: var(--plata); }
.nav__phone svg { width: 18px; height: 18px; color: var(--hielo); }
.nav__cta .btn { padding: 11px 18px; font-size: .9rem; }
.nav__menu-cta { display: none; }
.nav__toggle { display: none; }

/* =====================================================================
   HERO
   ===================================================================== */
.hero { position: relative; isolation: isolate; overflow: hidden; }
.hero__bg {
  position: absolute; inset: 0; z-index: -2;
  background:
    radial-gradient(90% 100% at 85% -10%, rgba(74,169,217,.32), transparent 55%),
    radial-gradient(70% 90% at 8% 0%, rgba(23,97,142,.38), transparent 60%),
    linear-gradient(180deg, var(--noche), var(--noche-2));
}
.hero__bg::after {
  content: ""; position: absolute; inset: 0;
  background-image: repeating-linear-gradient(135deg, rgba(125,211,242,.04) 0 1px, transparent 1px 14px);
}
.hero__glow {
  position: absolute; z-index: -1; width: 620px; height: 620px; top: -160px; right: -120px;
  background: radial-gradient(circle at center, rgba(125,211,242,.22), transparent 68%);
  filter: blur(8px);
}
.hero__inner { padding: clamp(56px, 9vw, 110px) 0 clamp(52px, 8vw, 96px); }
.hero__grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(32px, 5vw, 64px); align-items: center; }
.hero__lead h1 {
  font-family: "Saira", sans-serif; font-weight: 800;
  font-size: clamp(2.5rem, 6.4vw, 4.4rem); line-height: 1.02; letter-spacing: -.02em;
  color: #fff;
  margin-top: 18px;
}
.hero__sub { margin-top: 22px; color: var(--gris); font-size: 1.13rem; max-width: 54ch; }
.hero__sub b { color: var(--plata); font-weight: 600; }
.hero__actions { margin-top: 30px; display: flex; gap: 14px; flex-wrap: wrap; }
.hero__stats { margin-top: 46px; display: flex; gap: clamp(20px, 4vw, 44px); flex-wrap: wrap; }
.hero__stats > div { display: flex; gap: 12px; align-items: flex-start; }
.hero__stats svg { width: 24px; height: 24px; color: var(--hielo); flex: none; margin-top: 4px; }
.hero__stats dt { font-family: "Saira", sans-serif; font-weight: 700; font-size: 1.05rem; color: #fff; line-height: 1.2; }
.hero__stats dd { margin: 0; font-size: .82rem; color: var(--gris); }
.photo-card { border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--linea); background: var(--tinta); box-shadow: var(--shadow); }

/* =====================================================================
   TRUST STRIP
   ===================================================================== */
.trust { border-bottom: 1px solid var(--linea); background: var(--noche-2); }
.trust__inner { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; padding: 40px 0; }
.trust__item { display: flex; gap: 16px; align-items: flex-start; }
.trust__item svg { width: 26px; height: 26px; color: var(--hielo); flex: none; }
.trust__item b { display: block; font-family: "Saira", sans-serif; font-weight: 700; font-size: 1.05rem; color: #fff; }
.trust__item span { display: block; color: var(--gris); font-size: .92rem; }

/* =====================================================================
   CATEGORY GRID (index)
   ===================================================================== */
.lineas { padding: var(--sp-section) 0; }
.cat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); }
.cat-card {
  display: flex; flex-direction: column;
  border: 1px solid var(--linea); border-radius: var(--r-lg);
  background: var(--tinta); overflow: hidden;
  transition: transform .25s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.cat-card a { display: flex; flex-direction: column; height: 100%; }
.cat-card:hover { transform: translateY(-5px); border-color: var(--linea-neon); box-shadow: var(--shadow-soft); }
.cat-card__media .ph { min-height: 180px; border: 0; border-radius: 0; border-bottom: 1px solid var(--linea); }
.cat-card__body { display: flex; flex-direction: column; gap: 10px; padding: 22px 24px 24px; flex: 1; }
.cat-card__body h3 { font-family: "Saira", sans-serif; font-weight: 700; font-size: 1.3rem; color: #fff; }
.cat-card__body p { color: var(--gris); font-size: .95rem; }
.cat-card__link {
  margin-top: auto; padding-top: 12px;
  display: inline-flex; align-items: center; gap: 7px;
  font-family: "Saira", sans-serif; font-weight: 600; font-size: .9rem; color: var(--hielo);
}
.cat-card__link svg { width: 16px; height: 16px; transition: transform .2s var(--ease); }
.cat-card:hover .cat-card__link svg { transform: translateX(3px); }

.cat-card--cta {
  border-style: dashed; border-color: var(--linea-neon);
  background: radial-gradient(120% 120% at 50% 0%, rgba(125,211,242,.12), transparent 60%), var(--tinta);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; gap: 14px; padding: 34px 28px;
}
.cat-card--cta svg { width: 34px; height: 34px; color: var(--hielo); }
.cat-card--cta h3 { font-family: "Saira", sans-serif; font-weight: 700; font-size: 1.3rem; color: #fff; }
.cat-card--cta p { color: var(--gris); font-size: .95rem; max-width: 30ch; }

/* =====================================================================
   SOBRE (resumen en index)
   ===================================================================== */
.sobre { padding: var(--sp-section) 0; background: radial-gradient(120% 100% at 0% 0%, rgba(23,97,142,.34), transparent 55%), var(--noche-2); }
.sobre__grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(32px, 5vw, 64px); align-items: center; }
.sobre__lead h2 { margin-top: 16px; font-family: "Saira", sans-serif; font-weight: 700; font-size: clamp(1.95rem, 5vw, 3.2rem); line-height: 1.08; letter-spacing: -.02em; color: #fff; }
.sobre__txt { margin-top: 18px; color: var(--gris); font-size: 1.06rem; max-width: 54ch; }
.sobre__txt + p { margin-top: 14px; }
.sobre__actions { margin-top: 28px; display: flex; gap: 14px; flex-wrap: wrap; }

.loc-card { border: 1px solid var(--linea); border-radius: var(--r-md); background: var(--tinta); padding: 26px; }
.loc-card__badge { display: inline-flex; align-items: center; gap: 10px; font-family: "Saira", sans-serif; font-weight: 700; font-size: 1.05rem; color: #fff; }
.loc-card__badge svg { width: 22px; height: 22px; color: var(--hielo); }
.loc-card p { margin-top: 12px; color: var(--gris); }
.loc-card .note { display: flex; gap: 10px; align-items: flex-start; margin-top: 16px; padding: 14px 16px; border-radius: var(--r-sm); background: rgba(125,211,242,.08); border: 1px solid var(--linea); font-size: .86rem; color: var(--hielo-luz); }
.loc-card .note svg { width: 18px; height: 18px; color: var(--hielo); flex: none; margin-top: 2px; }

/* =====================================================================
   PAGE HERO (subpáginas)
   ===================================================================== */
.page-hero { position: relative; overflow: hidden; border-bottom: 1px solid var(--linea); }
.page-hero::before { content: ""; position: absolute; inset: 0; background:
  radial-gradient(80% 110% at 80% -20%, rgba(74,169,217,.3), transparent 55%),
  linear-gradient(180deg, var(--noche), var(--noche-2)); }
.page-hero__inner { position: relative; padding: clamp(44px, 7vw, 76px) 0; }
.page-hero h1 { font-family: "Saira", sans-serif; font-weight: 800; font-size: clamp(2.3rem, 6vw, 4rem); line-height: 1.02; letter-spacing: -.02em; color: #fff; margin-top: 14px; }
.page-hero .lead { margin-top: 18px; color: var(--gris); font-size: 1.12rem; max-width: 62ch; }

/* =====================================================================
   CATEGORY TOC (productos.html)
   ===================================================================== */
.cat-toc { position: sticky; top: 76px; z-index: 45; background: rgba(4,16,25,.84); backdrop-filter: blur(12px); border-bottom: 1px solid var(--linea); }
.cat-toc__inner { display: flex; gap: 10px; overflow-x: auto; padding: 13px 0; scrollbar-width: none; }
.cat-toc__inner::-webkit-scrollbar { display: none; }
.cat-toc a { flex: none; padding: 8px 17px; border: 1px solid var(--linea); border-radius: 100px; font-family: "Saira", sans-serif; font-weight: 500; font-size: .86rem; color: var(--texto); transition: border-color .18s var(--ease), background .18s var(--ease), color .18s var(--ease); }
.cat-toc a:hover { color: #fff; border-color: var(--linea-neon); background: rgba(125,211,242,.08); }

/* =====================================================================
   PRODUCTS (categorías desarrolladas)
   ===================================================================== */
.prod { padding: var(--sp-section) 0; }
.prod:nth-of-type(even) { background: var(--noche-2); }
.prod__inner { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 64px); align-items: center; }
.prod__no { font-family: "Saira", sans-serif; font-weight: 700; font-size: .78rem; letter-spacing: .2em; text-transform: uppercase; color: var(--hielo); }
.prod__copy h2 { margin-top: 12px; font-family: "Saira", sans-serif; font-weight: 700; font-size: clamp(1.9rem, 4.6vw, 3rem); line-height: 1.06; letter-spacing: -.02em; color: #fff; }
.prod__lead { margin-top: 18px; color: var(--gris); font-size: 1.08rem; }
.prod__bullets { margin-top: 22px; display: grid; gap: 12px; }
.prod__bullets li { display: flex; gap: 12px; align-items: flex-start; color: var(--texto); font-size: .98rem; }
.prod__bullets svg { width: 20px; height: 20px; color: var(--hielo); flex: none; margin-top: 3px; }
.prod__actions { margin-top: 28px; display: flex; gap: 12px; flex-wrap: wrap; }

.prod__media { display: grid; gap: 14px; }
.prod__media .ph { min-height: 220px; }
.prod__media.ph--two { grid-template-columns: 1fr 1fr; }
.prod__media.ph--three { grid-template-columns: 1fr 1fr; }
.prod__media.ph--three .ph:first-child { grid-column: 1 / -1; }

.prod--flip .prod__copy { order: 2; }
.prod--flip .prod__media { order: 1; }

/* =====================================================================
   CONTACTO
   ===================================================================== */
.contact { padding: var(--sp-section) 0; }
.contact__grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(32px, 5vw, 64px); align-items: start; }

.contact__primary { display: grid; gap: 18px; }
.wa-card {
  border: 1px solid rgba(31,171,83,.4); border-radius: var(--r-lg);
  background: radial-gradient(120% 120% at 50% 0%, rgba(31,171,83,.22), transparent 60%), var(--tinta);
  padding: 30px 28px;
}
.wa-card__label { display: flex; align-items: center; gap: 10px; font-family: "Saira", sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: .14em; font-size: .74rem; color: #6ee7a1; }
.wa-card__label svg { width: 20px; height: 20px; }
.wa-card h2 { margin-top: 12px; font-family: "Saira", sans-serif; font-weight: 700; font-size: clamp(1.6rem, 3.4vw, 2.2rem); color: #fff; line-height: 1.1; }
.wa-card p { margin-top: 12px; color: var(--gris); }
.wa-card .btn { margin-top: 22px; width: 100%; }

.contact__card { border: 1px solid var(--linea); border-radius: var(--r-md); background: var(--tinta); padding: 24px 26px; }
.contact__card h3 { font-family: "Saira", sans-serif; font-weight: 700; font-size: 1.05rem; color: #fff; margin-bottom: 14px; }
.contact__list li { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 13px; color: var(--texto); font-size: .95rem; }
.contact__list li:last-child { margin-bottom: 0; }
.contact__list svg { width: 19px; height: 19px; color: var(--hielo); flex: none; margin-top: 4px; }
.contact__list a:hover { color: var(--hielo-hi); }
.contact__note { display: flex; gap: 10px; align-items: flex-start; margin-top: 14px; padding: 13px 15px; border-radius: var(--r-sm); background: rgba(125,211,242,.08); border: 1px solid var(--linea); font-size: .85rem; color: var(--hielo-luz); }
.contact__note svg { width: 17px; height: 17px; color: var(--hielo); flex: none; margin-top: 2px; }

/* form */
.contact__form { border: 1px solid var(--linea); border-radius: var(--r-lg); background: var(--tinta); padding: clamp(24px, 4vw, 38px); }
.contact__form > .eyebrow { margin-bottom: 8px; }
.contact__form h2 { font-family: "Saira", sans-serif; font-weight: 700; font-size: clamp(1.6rem, 3.4vw, 2.1rem); color: #fff; }
.contact__form > p { margin-top: 10px; color: var(--gris); font-size: .96rem; }
.form__grid { margin-top: 24px; display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field { display: flex; flex-direction: column; gap: 7px; }
.field--full { grid-column: 1 / -1; }
.field label { font-family: "Saira", sans-serif; font-weight: 600; font-size: .88rem; color: var(--plata-2); }
.field label b { color: var(--hielo); font-weight: 700; }
.field input, .field select, .field textarea {
  width: 100%; padding: 13px 15px;
  font-family: "Inter", sans-serif; font-size: 1rem; color: #fff;
  background: var(--noche-2);
  border: 1px solid var(--linea); border-radius: var(--r-sm);
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.field textarea { resize: vertical; min-height: 130px; }
.field input::placeholder, .field textarea::placeholder { color: var(--gris-osc); }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--linea-neon); box-shadow: 0 0 0 3px rgba(125,211,242,.16); }
.field select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--hielo) 50%), linear-gradient(135deg, var(--hielo) 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%; background-size: 6px 6px; background-repeat: no-repeat; }
.form__note { margin-top: 16px; display: flex; gap: 9px; align-items: flex-start; font-size: .85rem; color: var(--gris); }
.form__note svg { width: 17px; height: 17px; color: var(--hielo); flex: none; margin-top: 2px; }
.form__err { margin-top: 14px; padding: 12px 15px; border-radius: var(--r-sm); background: rgba(244,110,110,.12); border: 1px solid rgba(244,110,110,.4); color: #ffb4b4; font-size: .9rem; }
.contact__form .btn { margin-top: 20px; width: 100%; }

/* =====================================================================
   CTA FINAL
   ===================================================================== */
.cta { position: relative; overflow: hidden; padding: var(--sp-section) 0; border-top: 1px solid var(--linea); background: linear-gradient(180deg, var(--noche), var(--marino)); }
.cta::before { content: ""; position: absolute; inset: 0;
  background: radial-gradient(70% 120% at 50% 0%, rgba(125,211,242,.26), transparent 60%),
              radial-gradient(50% 80% at 50% 110%, rgba(23,97,142,.3), transparent 60%); }
.cta__inner { position: relative; text-align: center; max-width: 840px; margin-inline: auto; }
.cta__inner .eyebrow { justify-content: center; }
.cta h2 { margin-top: 16px; font-family: "Saira", sans-serif; font-weight: 800; font-size: clamp(2.3rem, 6.5vw, 4.2rem); line-height: 1.03; letter-spacing: -.03em; color: #fff; }
.cta__sub { margin: 20px auto 0; max-width: 54ch; color: var(--texto); font-size: 1.12rem; }
.cta__phone { margin-top: 28px; font-family: "Saira", sans-serif; font-weight: 800; font-size: clamp(1.9rem, 6vw, 3rem); letter-spacing: -.01em;
  color: transparent; background: linear-gradient(100deg, var(--hielo-hi), var(--hielo)); -webkit-background-clip: text; background-clip: text; }
.cta__phone a { display: inline-flex; align-items: center; gap: 14px; }
.cta__phone svg { width: 32px; height: 32px; color: var(--hielo); }
.cta__actions { margin-top: 32px; display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }

/* =====================================================================
   FOOTER
   ===================================================================== */
.footer { background: var(--noche); padding: clamp(54px, 8vw, 82px) 0 34px; border-top: 1px solid var(--linea); }
.footer__grid { display: grid; grid-template-columns: 1.5fr 1fr 1.2fr; gap: 44px; }
.brand--footer { margin-bottom: 18px; }
.brand--footer .brand__mark { width: 56px; height: 56px; }
.brand--footer .brand__txt b { font-size: 1.34rem; }
.footer__brand > p { color: var(--gris); max-width: 42ch; }
.footer__tag { margin-top: 16px !important; font-family: "Saira", sans-serif; font-weight: 600; font-style: italic;
  color: var(--hielo-luz) !important; letter-spacing: .005em; font-size: 1.02rem; }
.footer h4 { font-family: "Saira",sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: .14em; font-size: .76rem; color: var(--hielo); margin: 0 0 18px; }
.footer__list li { margin-bottom: 12px; }
.footer__list a, .footer__contact a { color: var(--gris); display: inline-flex; align-items: center; gap: 10px; transition: color .18s var(--ease); }
.footer__list a:hover, .footer__contact a:hover { color: var(--hielo-hi); }
.footer__contact svg { width: 18px; height: 18px; color: var(--hielo); flex: none; }
.footer__contact .loc { display: flex; gap: 10px; color: var(--gris); }
.footer__contact .loc svg { width: 18px; height: 18px; color: var(--hielo); flex: none; margin-top: 2px; }
.footer__bottom { margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--linea);
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; color: var(--gris-osc); font-size: .84rem; }
.footer__isla { display: inline-flex; align-items: center; gap: 8px; }
.footer__isla svg { width: 16px; height: 16px; color: var(--hielo); }

/* =====================================================================
   REVEAL ANIMATION
   ===================================================================== */
.js .reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.js .reveal.is-visible { opacity: 1; transform: none; }

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width: 980px) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero__aside { order: -1; }
  .photo-card { margin-inline: auto; max-width: 400px; }
  .cat-grid { grid-template-columns: 1fr 1fr; }
  .sobre__grid { grid-template-columns: 1fr; }
  .prod__inner { grid-template-columns: 1fr; }
  .prod--flip .prod__copy { order: 1; }
  .prod--flip .prod__media { order: 2; }
  .contact__grid { grid-template-columns: 1fr; }
  .trust__inner { grid-template-columns: 1fr; gap: 24px; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  body { font-size: 16px; }
  .nav__links { display: none; }
  .nav__phone { display: none; }
  .nav__cta .nav__quote { display: none; }
  .nav__wa { display: none; }
  .brand__txt i { display: none; }
  .nav__toggle { display: inline-grid; place-items: center; width: 44px; height: 44px; background: none; border: 1px solid var(--linea); border-radius: var(--r-sm); cursor: pointer; }
  .nav__toggle svg { width: 22px; height: 22px; color: var(--plata); }

  .nav__links.is-open { display: flex; position: absolute; top: 76px; left: 0; right: 0; flex-direction: column; gap: 0; align-items: stretch;
    max-height: calc(100vh - 76px); overflow-y: auto;
    background: var(--tinta); border-bottom: 1px solid var(--linea); padding: 8px 20px 20px; }
  .nav__links.is-open > a, .nav__links.is-open .nav__dropbtn { padding: 14px 2px; border-bottom: 1px solid var(--linea); width: 100%; font-size: 1.02rem; justify-content: space-between; }

  .nav__links.is-open .has-drop { position: relative; }
  .nav__links.is-open .drop { position: static; opacity: 1; visibility: visible; transform: none; min-width: 0; border: 0; box-shadow: none; padding: 0 0 0 14px; display: none; background: transparent; }
  .nav__links.is-open .has-drop.is-open .drop { display: block; }
  .nav__links.is-open .drop a { border-bottom: 1px solid var(--linea); border-radius: 0; }
  .nav__links.is-open .drop .drop__all { border-bottom: 0; }

  .nav__links.is-open .nav__menu-cta { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 12px;
    padding: 14px 18px; border-radius: var(--r-sm); border: 1px solid var(--linea);
    font-family: "Saira", sans-serif; font-weight: 700; color: #062338;
    background: linear-gradient(180deg, #dff3fc, #a9d9f0); }
  .nav__links.is-open .nav__menu-cta svg { width: 20px; height: 20px; }
  .nav__links.is-open .nav__menu-cta--wa { background: linear-gradient(180deg, #2dd670, #1fae53); color: #04240f; border-color: rgba(31,171,83,.4); }

  .hero__actions .btn, .cta__actions .btn { flex: 1 1 100%; }
  .hero__stats { gap: 18px; }
  .cat-grid { grid-template-columns: 1fr; }
  .prod__media.ph--two, .prod__media.ph--three { grid-template-columns: 1fr; }
  .prod__media.ph--three .ph:first-child { grid-column: auto; }
  .form__grid { grid-template-columns: 1fr; }
  .field--full { grid-column: auto; }
  .footer__grid { grid-template-columns: 1fr; }
}

/* =====================================================================
   2026 PROFESSIONAL REDESIGN — light B2B catalogue
   ===================================================================== */
:root {
  --noche:#071e2d; --noche-2:#f5f8fa; --tinta:#fff; --tinta-2:#eaf4f9;
  --marino:#0b2c42; --marino-2:#153a57; --hielo:#4aa9d9;
  --hielo-2:#17618e; --hielo-luz:#17618e; --hielo-hi:#0f527c;
  --plata:#fff; --plata-2:#344652; --gris:#566574; --gris-osc:#687986;
  --texto:#17212b; --linea:#d8e1e7; --linea-neon:#9bbccc;
  --r-sm:4px; --r-md:8px; --r-lg:12px;
  --shadow:0 12px 32px rgba(12,38,55,.1);
  --shadow-ice:0 8px 24px rgba(21,53,72,.09);
  --shadow-soft:0 8px 24px rgba(21,53,72,.09);
  --sp-section:clamp(64px,8vw,108px);
}
body { background:#fff; color:var(--texto); font-size:16px; }
[hidden] { display:none !important; }
.eyebrow { color:var(--hielo-2); font-size:.75rem; letter-spacing:.15em; }
.eyebrow svg { width:16px; height:16px; color:var(--hielo-2); }
.btn { min-height:48px; padding:12px 24px; border:1px solid var(--hielo-2); border-radius:var(--r-sm); background:var(--hielo-2); color:#fff; transition:background .18s var(--ease),border-color .18s var(--ease); }
.btn:hover { background:#0f527c; border-color:#0f527c; box-shadow:none; transform:none; filter:none; }
.btn--wa { background:#168342; border-color:#168342; color:#fff; }
.btn--wa:hover { background:#106b35; border-color:#106b35; box-shadow:none; }
.btn--ghost { background:transparent; border-color:rgba(255,255,255,.55); color:#fff; }
.btn--ghost:hover { background:#fff; border-color:#fff; color:var(--noche); }
:focus-visible { outline-color:#69c3ef; }
.section-head h2,.sobre__lead h2 { color:#17212b; font-weight:700; letter-spacing:-.025em; }
.section-head .lead,.sobre__txt { color:#566574; }
.section-head em,h1 em,h2 em,.em,.chrome,.cta__phone,.brand__txt b { background:none; color:inherit; -webkit-text-fill-color:currentColor; }

.ph { min-height:230px; gap:8px; border:1px solid #cbd7de; border-radius:var(--r-md); background:#edf2f5; }
.ph__ic { width:32px; height:32px; color:#8093a0; opacity:1; }
.ph__txt { color:#566574; font-size:.9rem; }
.ph__cat { color:#657784; font-size:.7rem; letter-spacing:.15em; }

.brand__mark { width:46px; height:46px; border:1px solid rgba(255,255,255,.3); background:var(--marino); box-shadow:none; }
.brand__mark svg { width:25px; height:25px; color:#a9def5; filter:none; }
.brand__txt b { color:#fff; font-size:1.18rem; }
.brand__txt b span { color:#8fd2ef; -webkit-text-fill-color:#8fd2ef; }
.brand__txt i { color:#c5d9e4; opacity:1; }
.nav { background:var(--noche); backdrop-filter:none; border-bottom:1px solid rgba(255,255,255,.14); }
.nav__links { gap:25px; }
.nav__links > a,.nav__dropbtn { min-height:44px; color:#dbe7ed; opacity:1; }
.nav__links > a:hover,.nav__dropbtn:hover,.nav__links > a[aria-current="page"] { color:#fff; }
.nav__links > a[aria-current="page"] { box-shadow:inset 0 -3px #55add8; }
.drop { top:calc(100% + 7px); background:#fff; border-color:#d8e1e7; border-radius:var(--r-sm); box-shadow:var(--shadow); }
.drop a { color:#344552; border-radius:3px; }
.drop a:hover { color:#0f527c; background:#eaf4f9; }
.drop .drop__all { border-color:#d8e1e7; color:#17618e; }
.nav__phone { min-height:44px; color:#fff; }
.nav__phone svg { color:#91d2ee; }
.nav__cta .btn { min-height:42px; background:#fff; border-color:#fff; color:var(--noche); }
.nav__cta .btn:hover { background:#eaf3f7; border-color:#eaf3f7; }

.hero { background:var(--noche); }
/* El poster va de fondo en el contenedor, no sólo en el atributo `poster`: así queda
   como capa de respaldo si el navegador bloquea el autoplay (iOS en bajo consumo),
   si el video no carga, o si el usuario pide menos movimiento. */
.hero__media { position:absolute; z-index:-3; inset:0; overflow:hidden; background:var(--noche) url("assets/hero-poster.jpg") center/cover no-repeat; }
.hero__video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 52%; border:0; pointer-events:none; }
.hero__bg { background:linear-gradient(90deg,rgba(7,30,45,.91) 0%,rgba(7,30,45,.78) 48%,rgba(7,30,45,.64) 100%); }
.hero__bg::after,.hero__glow { display:none; }
.hero__inner { padding:clamp(58px,8vw,96px) 0; }
.hero .eyebrow,.page-hero .eyebrow,.cta .eyebrow { color:#9bd6ef; }
.hero .eyebrow svg,.page-hero .eyebrow svg,.cta .eyebrow svg { color:#9bd6ef; }
.hero__lead h1 { color:#fff; font-weight:700; letter-spacing:-.035em; }
.hero__sub { color:#c9d8e0; }
.hero__sub b { color:#fff; }
.hero__stats { margin-top:42px; padding-top:27px; border-top:1px solid rgba(255,255,255,.18); }
.hero__stats svg { width:21px; height:21px; color:#8fd2ef; }
.hero__stats dt { color:#fff; font-size:.98rem; }
.hero__stats dd { color:#aebfca; }
.photo-card { border-color:rgba(255,255,255,.2); border-radius:var(--r-md); background:#dfe8ed; box-shadow:0 18px 40px rgba(0,0,0,.22); }
.photo-card .ph { border:0; border-radius:0; background:#e8eef1; }

.trust { background:#fff; border-color:#d8e1e7; }
.trust__inner { padding:32px 0; gap:34px; }
.trust__item { gap:13px; }
.trust__item svg { width:22px; height:22px; color:#17618e; }
.trust__item b { color:#17212b; font-size:.98rem; }
.trust__item span { color:#566574; font-size:.86rem; }
.lineas { background:#f5f8fa; }
.cat-card { background:#fff; border-color:#d8e1e7; border-radius:var(--r-md); transition:border-color .18s var(--ease),box-shadow .18s var(--ease); }
.cat-card:hover { transform:none; border-color:#a9bdc9; box-shadow:var(--shadow-soft); }
.cat-card__media .ph { min-height:190px; border-bottom-color:#d8e1e7; }
.cat-card__body h3 { color:#17212b; }
.cat-card__body p { color:#566574; }
.cat-card__link { color:#17618e; }
.cat-card:hover .cat-card__link svg { transform:none; }
.cat-card--cta { align-items:flex-start; text-align:left; border:1px solid #17618e; background:#0b2c42; }
.cat-card--cta > svg { color:#9bd6ef; }
.cat-card--cta h3 { color:#fff; }
.cat-card--cta p { color:#c7d7e0; }

.sobre { background:#fff; border-top:1px solid #d8e1e7; }
.loc-card,.contact__card { background:#f5f8fa; border-color:#d8e1e7; border-radius:var(--r-md); }
.loc-card__badge,.contact__card h3 { color:#17212b; }
.loc-card__badge svg,.contact__list svg { color:#17618e; }
.loc-card p,.contact__list li { color:#566574; }
.loc-card .note,.contact__note { border:0; border-left:3px solid #17618e; border-radius:0; background:#e9f2f7; color:#395568; }
.loc-card .note svg,.contact__note svg { color:#17618e; }

.page-hero { background:var(--noche); border-color:rgba(255,255,255,.14); }
.page-hero::before { background:linear-gradient(90deg,#071e2d,#0c324a); }
.page-hero h1 { color:#fff; font-weight:700; letter-spacing:-.03em; }
.page-hero .lead { color:#c9d8e0; }
.cat-toc { background:#fff; backdrop-filter:none; border-color:#d8e1e7; box-shadow:0 4px 12px rgba(15,42,58,.05); }
.cat-toc a { min-height:42px; padding:9px 14px; border:0; border-bottom:2px solid transparent; border-radius:0; color:#465966; }
.cat-toc a:hover { background:transparent; border-color:#17618e; color:#17618e; }
.prod { background:#fff; }
.prod:nth-of-type(even) { background:#f5f8fa; }
.prod__no { color:#17618e; }
.prod__copy h2 { color:#17212b; }
.prod__lead { color:#566574; }
.prod__bullets li { color:#354551; }
.prod__bullets svg { color:#17618e; }

.contact { background:#f5f8fa; }
.wa-card { background:#edf8f1; border-color:#b7d9c3; border-radius:var(--r-md); }
.wa-card__label { color:#116b35; }
.wa-card h2 { color:#17212b; }
.wa-card p { color:#466151; }
.contact__card { background:#fff; }
.contact__list a:hover { color:#17618e; }
.contact__form { background:#fff; border-color:#d8e1e7; border-radius:var(--r-md); box-shadow:0 10px 30px rgba(15,45,62,.07); }
.contact__form h2 { color:#17212b; }
.contact__form > p,.form__note { color:#566574; }
.field label { color:#344652; }
.field label b { color:#9b2e28; }
.field input,.field select,.field textarea { color:#17212b; background-color:#fff; border-color:#b8c5cd; }
.field input::placeholder,.field textarea::placeholder { color:#687986; }
.field input:focus,.field select:focus,.field textarea:focus { border-color:#17618e; box-shadow:0 0 0 3px rgba(23,97,142,.14); }
.field select { background-image:linear-gradient(45deg,transparent 50%,#506773 50%),linear-gradient(135deg,#506773 50%,transparent 50%); }
.form__note svg { color:#17618e; }
.form__err { background:#fff1f0; border-color:#d8aaa6; color:#7f211d; }

.cta { background:#0f527c; border:0; }
.cta::before { display:none; }
.cta h2,.cta__phone { color:#fff; }
.cta__sub { color:#d5e5ed; }
.cta__phone svg { color:#a9def5; }
.footer { background:var(--noche); border-color:rgba(255,255,255,.12); }
.footer__brand > p,.footer__list a,.footer__contact a,.footer__contact .loc { color:#b7c8d2; }
.footer__tag { color:#d8e7ee !important; }
.footer h4 { color:#9ed6ed; }
.footer__contact svg,.footer__contact .loc svg,.footer__isla svg { color:#91d2ee; }
.footer__bottom { border-color:rgba(255,255,255,.18); color:#91a6b2; }
.js .reveal { transform:translateY(16px); transition-duration:.55s; }

@media (max-width:1080px) {
  .nav__links { gap:17px; }
  .nav__phone span { display:none; }
}
@media (max-width:840px) {
  .nav__links { display:none; }
  .nav__phone,.nav__cta .nav__quote { display:none; }
  .nav__toggle { display:inline-grid; place-items:center; width:44px; height:44px; background:transparent; border:1px solid rgba(255,255,255,.35); border-radius:var(--r-sm); }
  .nav__toggle svg { width:22px; height:22px; color:#fff; }
  .nav__links.is-open { display:flex; max-height:calc(100dvh - 76px); background:#fff; border-color:#d8e1e7; box-shadow:var(--shadow); }
  .nav__links.is-open > a,.nav__links.is-open .nav__dropbtn { color:#17212b; border-color:#d8e1e7; box-shadow:none; }
  .nav__links.is-open .drop a { border-color:#d8e1e7; }
  .nav__links.is-open .nav__menu-cta { background:#17618e; border-color:#17618e; color:#fff; }
  .nav__links.is-open .nav__menu-cta--wa { background:#168342; border-color:#168342; color:#fff; }
  .hero__aside .ph { min-height:280px !important; }
}
@media (max-width:600px) {
  .wrap { width:min(100% - 32px,var(--wrap)); }
}

/* Measured QA corrections */
body > svg[width="0"][height="0"] { display:none; }
.ph__cat { color:#50636f; }
.btn--ghost { border-color:#17618e; color:#17618e; }
.btn--ghost:hover { background:#17618e; border-color:#17618e; color:#fff; }
.hero .btn--ghost,.cta .btn--ghost { border-color:rgba(255,255,255,.65); color:#fff; }
.hero .btn--ghost:hover,.cta .btn--ghost:hover { background:#fff; border-color:#fff; color:#071e2d; }
.footer .loc em { color:#9ed6ed; }
.footer__list a,.footer__contact a { min-height:44px; padding-block:8px; }
.footer__list li { margin-bottom:0; }
.contact__list a { display:inline-flex; min-height:44px; align-items:center; padding-block:8px; }
.contact__list li { margin-bottom:0; }
.cat-toc a { min-height:44px; }
.nav__links .nav__menu-cta { display:none; }
.nav__links.is-open .nav__menu-cta { display:flex; }
.footer .loc em[style] { color:#9ed6ed !important; }
.footer h3 { margin:0 0 17px; color:#9ed6ed; font-family:"Saira",sans-serif; font-size:.74rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase; }

/* Decorative snowfall, kept behind hero content and out of the accessibility tree. */
.snowfall { position:absolute; z-index:-1; inset:0; overflow:hidden; pointer-events:none; }
.hero .snowfall { z-index:-1; }
.page-hero .snowfall { z-index:1; }
.snowfall__flake { position:absolute; top:-30px; left:var(--x); color:rgba(207,237,249,.48); font-size:var(--size); line-height:1; filter:drop-shadow(0 1px 1px rgba(0,0,0,.12)); animation:snowfall-drift var(--duration) linear var(--delay) infinite; will-change:transform,opacity; }
.page-hero__inner { z-index:2; }
@keyframes snowfall-drift {
  0% { transform:translate3d(0,-32px,0) rotate(0deg); opacity:0; }
  10% { opacity:.75; }
  88% { opacity:.55; }
  100% { transform:translate3d(var(--drift),110vh,0) rotate(300deg); opacity:0; }
}
@media (prefers-reduced-motion:reduce) { .snowfall { display:none; } }
/* Sin movimiento: se oculta el video y queda visible el poster de .hero__media. */
@media (prefers-reduced-motion:reduce) { .hero__video { display:none; } }

/* ============ Tarjeta del video del negocio (hero aside) ============
   Reemplaza el placeholder "Foto pendiente". Poster + botón de play; al hacer clic
   se activan los controles nativos y el sonido original. */
.video-card { margin:0; overflow:hidden; border:1px solid rgba(255,255,255,.22); border-radius:var(--r-md); background:#071e2d; box-shadow:0 18px 40px rgba(0,0,0,.28); }
.video-card__frame { position:relative; aspect-ratio:720 / 404; background:#04121c; }
.video-card__vid { display:block; width:100%; height:100%; object-fit:cover; background:#04121c; }
.video-card__play { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; width:100%; padding:18px; border:0; background:linear-gradient(180deg,rgba(4,18,28,.34) 0%,rgba(4,18,28,.72) 100%); color:#fff; font:inherit; text-align:center; cursor:pointer; transition:background .18s var(--ease); }
.video-card__play:hover { background:linear-gradient(180deg,rgba(4,18,28,.20) 0%,rgba(4,18,28,.62) 100%); }
.video-card__play:focus-visible { outline:3px solid #9bd6ef; outline-offset:-4px; }
.video-card__ic { display:grid; place-items:center; width:62px; height:62px; border-radius:50%; background:#fff; color:#0f527c; box-shadow:0 8px 22px rgba(0,0,0,.38); transition:transform .18s var(--ease); }
.video-card__play:hover .video-card__ic { transform:scale(1.07); }
.video-card__ic svg { width:25px; height:25px; margin-left:3px; }
.video-card__label { display:grid; gap:5px; font-family:"Saira",sans-serif; font-size:1.02rem; font-weight:700; letter-spacing:.005em; text-shadow:0 1px 8px rgba(0,0,0,.55); }
.video-card__label b { display:inline-flex; align-items:center; justify-content:center; gap:6px; color:#d6ebf6; font-family:"Inter",sans-serif; font-size:.76rem; font-weight:600; letter-spacing:.09em; text-transform:uppercase; }
.video-card__label b svg { width:14px; height:14px; color:#9bd6ef; }
.video-card.is-playing .video-card__play { display:none; }
.video-card__cap { display:flex; gap:9px; align-items:flex-start; padding:12px 15px; background:#0b2c42; color:#c0d5e2; font-size:.81rem; line-height:1.45; }
.video-card__cap svg { flex:none; width:15px; height:15px; margin-top:2px; color:#8fd2ef; }

/* En móvil el aside iba arriba (`order:-1`) cuando era un placeholder de foto. Ahora que
   es un video con su botón de play y su pie, dejarlo primero empujaba el H1 y los dos CTA
   fuera de pantalla: el titular va primero y el video queda justo debajo. */
@media (max-width:840px) {
  .hero__aside { order: 0; }
  .hero__grid { gap:30px; }
}