/* ============================================================
   RED ONE COMPANY
   Tokens -> layout -> nav -> hero -> secciones -> movil
   El tema se cambia reasignando tokens en [data-theme].
   ============================================================ */

:root{
  /* --- Marca: constante en ambos temas --- */
  --red:#E5271C;
  --red-dark:#B81E15;
  --red-press:#a81b13;

  --sans:'Manrope',system-ui,-apple-system,'Segoe UI',sans-serif;
  --display:'Space Grotesk',system-ui,-apple-system,'Segoe UI',sans-serif;

  --header-h:72px;
  --shell:1240px;
  --gutter:32px;
  --radius:8px;

  /* Curva unica: el movimiento explica, no entretiene. */
  --ease:cubic-bezier(.22,.61,.36,1);

  /* Sol de los Pastos como mascara, para ::before y ::after donde no
     se puede insertar un <use>. Misma geometria que el simbolo SVG:
     dos cuadrados superpuestos, ocho puntas anchas. */
  --sol-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-50 -50 100 100'%3E%3Cpolygon points='0,-47 9.2,-22.2 33.2,-33.2 22.2,-9.2 47,0 22.2,9.2 33.2,33.2 9.2,22.2 0,47 -9.2,22.2 -33.2,33.2 -22.2,9.2 -47,0 -22.2,-9.2 -33.2,-33.2 -9.2,-22.2' fill='%23000' stroke='%23000' stroke-width='1.5' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* --- Tema oscuro (por defecto) --- */
:root,
[data-theme="dark"]{
  --bg:#141414;
  --bg-alt:#191919;
  --surface:#1d1d1d;
  --surface-2:#222;
  --border:#2b2b2b;
  --border-2:#383838;

  --text:#f2f2f3;
  --text-2:#b7babd;
  --text-3:#8c8f92;
  --text-4:#606366;

  --stage:#141414;      /* fondo del hero */
  --wordmark:rgba(255,255,255,.09);
  --shape-shadow:rgba(0,0,0,.5);

  --header-bg:rgba(20,20,20,.86);
  --card-glass:rgba(255,255,255,.04);

  /* Tarjeta del logo: un escalon por encima del fondo, con un
     apunte calido para que el rojo no quede frio sobre gris. */
  --card-logo:#1c1a19;
  --card-logo-line:#2f2b29;

  color-scheme:dark;
}

/* --- Tema claro --- */
[data-theme="light"]{
  --bg:#ffffff;
  --bg-alt:#f7f6f5;
  --surface:#ffffff;
  --surface-2:#fbfbfb;
  --border:#e6e6e7;
  --border-2:#d6d6d7;

  --text:#141516;
  --text-2:#33363a;
  --text-3:#63666a;
  --text-4:#8a8d90;

  --stage:#cfcfcf;
  --wordmark:rgba(4,5,5,.16);
  --shape-shadow:rgba(4,5,5,.2);

  --header-bg:rgba(255,255,255,.86);
  --card-glass:rgba(4,5,5,.03);

  /* En tema claro: hueso muy suave, nunca blanco puro */
  --card-logo:#f2efec;
  --card-logo-line:#dedad6;

  color-scheme:light;
}

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

html{
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
  background-color:var(--bg);
}

body{
  margin:0;
  font-family:var(--sans);
  color:var(--text);
  background-color:var(--bg);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
  transition:background-color .4s var(--ease),color .4s var(--ease);
}

img{max-width:100%;height:auto;display:block}
::selection{background-color:var(--red);color:#fff}

a{color:var(--red);text-decoration:none}
a:hover{color:var(--red-dark)}
[data-theme="dark"] a:hover{color:#ff6a5e}

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

.shell{
  max-width:var(--shell);
  margin:0 auto;
  padding-inline:var(--gutter);
}

section[id]{scroll-margin-top:calc(var(--header-h) + 12px)}

/* ============================================================
   HEADER + NAVEGACION
   ============================================================ */

.site-header{
  position:sticky;
  top:0;
  z-index:100;
  background-color:var(--header-bg);
  backdrop-filter:saturate(160%) blur(14px);
  -webkit-backdrop-filter:saturate(160%) blur(14px);
  border-bottom:1px solid var(--border);
  transition:background-color .4s var(--ease),border-color .4s var(--ease);
}

.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  height:var(--header-h);
}

.brand{display:inline-flex;align-items:center;flex-shrink:0}
.brand img{height:26px;width:auto}

.nav{
  position:relative;
  display:flex;
  align-items:center;
  gap:4px;
  padding:5px;
  border:1px solid var(--border-2);
  border-radius:999px;
  background-color:var(--card-glass);
}

/* Cajon rojo que se desliza detras del enlace activo */
.nav-pill{
  position:absolute;
  top:5px;
  left:0;
  height:calc(100% - 10px);
  border-radius:999px;
  background-color:var(--red);
  transition:transform .42s var(--ease),width .42s var(--ease);
  will-change:transform,width;
  pointer-events:none;
  opacity:0;
}
.nav-pill.is-ready{opacity:1}

.nav-link{
  position:relative;
  z-index:1;
  display:inline-flex;
  align-items:center;
  padding:9px 18px;
  border-radius:999px;
  font-size:14px;
  font-weight:600;
  line-height:1;
  color:var(--text-2);
  white-space:nowrap;
  transition:color .28s var(--ease),transform .12s var(--ease);
}
.nav-link:hover{color:var(--text)}
.nav-link.is-active,
.nav-link.is-active:hover{color:#fff}
.nav-link:active{transform:scale(.94)}

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

/* --- Interruptor de tema --- */
.theme-toggle{
  width:40px;
  height:40px;
  padding:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid var(--border-2);
  border-radius:50%;
  background-color:var(--card-glass);
  color:var(--text-2);
  cursor:pointer;
  flex-shrink:0;
  transition:color .24s var(--ease),border-color .24s var(--ease),transform .12s var(--ease);
}
.theme-toggle:hover{color:var(--red);border-color:var(--red)}
.theme-toggle:active{transform:scale(.9)}
.theme-toggle svg{width:18px;height:18px;display:block}

/* Se muestra el icono del tema al que vas a cambiar */
.icon-sun{display:none}
.icon-moon{display:block}
[data-theme="light"] .icon-sun{display:block}
[data-theme="light"] .icon-moon{display:none}

/* ============================================================
   SELECTOR DE IDIOMA
   ============================================================ */

.lang{position:relative;flex-shrink:0}

.lang-btn{
  display:inline-flex;
  align-items:center;
  gap:7px;
  height:40px;
  padding:0 12px;
  border:1px solid var(--border-2);
  border-radius:999px;
  background-color:var(--card-glass);
  color:var(--text-2);
  font-family:var(--sans);
  font-size:13px;
  font-weight:700;
  letter-spacing:.04em;
  cursor:pointer;
  transition:color .24s var(--ease),border-color .24s var(--ease),transform .12s var(--ease);
}
.lang-btn:hover{color:var(--text);border-color:var(--red)}
.lang-btn:active{transform:scale(.95)}
.lang-btn svg{width:11px;height:11px;transition:transform .3s var(--ease)}
.lang-btn[aria-expanded="true"] svg{transform:rotate(180deg)}

.lang-menu{
  position:absolute;
  top:calc(100% + 8px);
  right:0;
  min-width:168px;
  padding:6px;
  border:1px solid var(--border-2);
  border-radius:14px;
  background-color:var(--surface);
  box-shadow:0 18px 44px rgba(0,0,0,.36);
  display:flex;
  flex-direction:column;
  gap:2px;
  z-index:120;
  /* Oculto pero animable */
  opacity:0;
  visibility:hidden;
  transform:translateY(-6px);
  transition:opacity .22s var(--ease),transform .22s var(--ease),visibility .22s;
}
.lang-menu.is-open{opacity:1;visibility:visible;transform:translateY(0)}

.lang-option{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border:0;
  border-radius:9px;
  background:transparent;
  color:var(--text-2);
  font-family:var(--sans);
  font-size:14px;
  font-weight:600;
  text-align:left;
  width:100%;
  cursor:pointer;
  transition:background-color .2s var(--ease),color .2s var(--ease);
}
.lang-option:hover{background-color:var(--card-glass);color:var(--text)}
.lang-option[aria-current="true"]{color:var(--red)}

.lang-code{
  font-size:11px;
  font-weight:800;
  letter-spacing:.06em;
  color:var(--text-4);
  margin-left:auto;
}
.lang-option[aria-current="true"] .lang-code{color:var(--red)}

/* --- Boton de accion --- */
.btn-nav{
  display:inline-flex;
  align-items:center;
  gap:9px;
  padding:11px 20px;
  border:0;
  border-radius:999px;
  background-color:var(--red);
  color:#fff;
  font-family:var(--sans);
  font-size:14px;
  font-weight:700;
  line-height:1;
  white-space:nowrap;
  cursor:pointer;
  transition:background-color .24s var(--ease),transform .12s var(--ease),box-shadow .24s var(--ease);
}
.btn-nav:hover{background:#c91f16;color:#fff;box-shadow:0 6px 18px rgba(229,39,28,.34)}
.btn-nav:active{background-color:var(--red-press);transform:scale(.95)}

.btn-nav-dot{
  width:7px;height:7px;
  border-radius:50%;
  background:#fff;
  flex-shrink:0;
  animation:pulse 2.4s var(--ease) infinite;
}
@keyframes pulse{
  0%,100%{opacity:1;transform:scale(1)}
  50%    {opacity:.45;transform:scale(.78)}
}

/* --- Hamburguesa --- */
.nav-toggle{
  display:none;
  width:44px;
  height:44px;
  padding:0;
  border:1px solid var(--border-2);
  border-radius:10px;
  background:transparent;
  cursor:pointer;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  transition:transform .12s var(--ease),border-color .2s var(--ease);
}
.nav-toggle:active{transform:scale(.92)}
.nav-toggle:hover{border-color:var(--red)}

.nav-toggle span{
  position:relative;
  display:block;
  width:20px;height:2px;
  background-color:var(--text);
  border-radius:2px;
  transition:background-color .2s var(--ease);
}
.nav-toggle span::before,
.nav-toggle span::after{
  content:'';
  position:absolute;
  left:0;
  width:20px;height:2px;
  background-color:var(--text);
  border-radius:2px;
  transition:transform .32s var(--ease);
}
.nav-toggle span::before{top:-6px}
.nav-toggle span::after{top:6px}
.nav-toggle[aria-expanded="true"] span{background:transparent}
.nav-toggle[aria-expanded="true"] span::before{transform:translateY(6px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span::after{transform:translateY(-6px) rotate(-45deg)}

/* --- Panel movil --- */
.nav-mobile{
  position:fixed;
  inset:var(--header-h) 0 0 0;
  z-index:99;
  background-color:var(--bg);
  padding:28px var(--gutter) 40px;
  display:flex;
  flex-direction:column;
  gap:6px;
  overflow-y:auto;
  overscroll-behavior:contain;
  opacity:0;
  visibility:hidden;
  transform:translateY(-10px);
  transition:opacity .3s var(--ease),transform .3s var(--ease),visibility .3s;
}
.nav-mobile.is-open{opacity:1;visibility:visible;transform:translateY(0)}

.nav-mobile a{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:18px 20px;
  border:1px solid var(--border);
  border-radius:12px;
  font-family:var(--display);
  font-size:20px;
  font-weight:600;
  color:var(--text);
  background-color:var(--surface);
  transition:background-color .24s var(--ease),border-color .24s var(--ease),color .24s var(--ease),transform .12s var(--ease);
}
.nav-mobile a::after{
  content:'';
  width:7px;height:7px;
  border-radius:50%;
  background-color:var(--border-2);
  transition:background-color .24s var(--ease),transform .24s var(--ease);
}
.nav-mobile a:active{transform:scale(.98)}
.nav-mobile a.is-active{background-color:var(--red);border-color:var(--red);color:#fff}
.nav-mobile a.is-active::after{background:#fff;transform:scale(1.25)}

.nav-mobile-foot{
  margin-top:auto;
  padding-top:32px;
  color:var(--text-4);
  font-size:13px;
}
.nav-mobile-foot a{
  display:inline;
  padding:0;border:0;background:none;
  font-family:var(--sans);
  font-size:15px;font-weight:700;
  color:var(--text);
}
.nav-mobile-foot a::after{display:none}

body.menu-open{overflow:hidden}

/* ============================================================
   TIPOGRAFIA
   ============================================================ */

.eyebrow{
  margin:0 0 16px;
  font-size:13px;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--red);
}

.h2{
  margin:0;
  font-family:var(--display);
  font-size:clamp(1.625rem,1.25rem + 1.6vw,2.25rem);
  line-height:1.2;
  font-weight:600;
  color:var(--text);
}
.h2 + .lede{margin-top:20px}

.lede{
  margin:0;
  font-size:clamp(1rem,.95rem + .25vw,1.125rem);
  line-height:1.75;
  color:var(--text-2);
}
.lede + .lede{margin-top:20px}

.section{
  padding-block:clamp(64px,7vw,120px);
  background-color:var(--bg);
  transition:background-color .4s var(--ease);
}
.section.alt{background-color:var(--bg-alt)}

.split{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(340px,100%),1fr));
  gap:clamp(36px,5vw,72px);
  align-items:center;
}
.split.top{align-items:start}

/* Ambas columnas a la misma altura: para cuando una lleva foto
   y la otra una tarjeta que debe terminar a su mismo nivel. */
.split.stretch{align-items:stretch}

/* ============================================================
   HERO
   ============================================================ */

.hero{
  position:relative;
  background-color:var(--stage);
  padding-block:clamp(56px,8vw,104px) clamp(64px,9vw,120px);
  overflow:hidden;
  isolation:isolate;
  text-align:center;
  transition:background-color .4s var(--ease);
}

.hero-kicker{
  position:relative;
  z-index:4;
  margin:0 0 clamp(18px,3vw,28px);
  font-family:var(--display);
  font-size:clamp(.75rem,.7rem + .25vw,.875rem);
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--red);
}

/* --- Cinta infinita con el nombre (solo la Home) --- */
.hero-marquee{
  position:absolute;
  top:50%;
  left:0;
  right:0;
  transform:translateY(-50%);
  z-index:1;
  overflow:hidden;
  pointer-events:none;
  user-select:none;
  /* Se desvanece en los bordes: entra y sale, no aparece cortada */
  -webkit-mask:linear-gradient(to right,transparent,#000 12%,#000 88%,transparent);
          mask:linear-gradient(to right,transparent,#000 12%,#000 88%,transparent);
}

.hero-marquee-track{
  display:flex;
  width:max-content;
  animation:marquee 42s linear infinite;
  will-change:transform;
}

.hero-marquee-track span{
  flex-shrink:0;
  padding-right:.32em;
  font-family:var(--display);
  font-size:clamp(5rem,17vw,15rem);
  font-weight:700;
  line-height:.85;
  letter-spacing:-.03em;
  white-space:nowrap;
  color:var(--wordmark);
  transition:color .4s var(--ease);
}

@keyframes marquee{
  from{transform:translateX(0)}
  to  {transform:translateX(-50%)}
}

/* --- Nombre gigante detras de todo (paginas interiores) --- */
.hero-wordmark{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  z-index:1;
  width:max-content;
  margin:0;
  font-family:var(--display);
  font-size:clamp(5rem,17vw,15rem);
  font-weight:700;
  line-height:.85;
  letter-spacing:-.03em;
  white-space:nowrap;
  color:var(--wordmark);
  user-select:none;
  pointer-events:none;
  transition:color .4s var(--ease);
}

/* --- Sol giratorio detras del logo --- */
.hero-sun{
  position:absolute;
  top:50%;
  left:50%;
  width:clamp(420px,62vw,720px);
  height:clamp(420px,62vw,720px);
  margin:calc(clamp(420px,62vw,720px) / -2) 0 0 calc(clamp(420px,62vw,720px) / -2);
  z-index:2;
  color:var(--red);
  opacity:.085;
  pointer-events:none;
  animation:spin 90s linear infinite;
}
/* Halo suave para separar la tarjeta del fondo */
.hero-sun::after{
  content:'';
  position:absolute;
  inset:22%;
  border-radius:50%;
  background:radial-gradient(circle,rgba(229,39,28,.22),transparent 70%);
}
.hero-sun svg{width:100%;height:100%;display:block}

@keyframes spin{
  from{transform:rotate(0deg)}
  to  {transform:rotate(360deg)}
}

/* --- Tarjeta central --- */
.hero-stage{
  position:relative;
  z-index:4;
  display:flex;
  flex-direction:column;
  align-items:center;
}

/* --- Zona del logo ---
   El blanco puro dominaba toda la pagina. Ahora que el logo lleva
   transparencia, la tarjeta puede ser oscura: el rojo de marca sobre
   casi negro tiene mas presencia y no roba atencion al contenido. */
.hero-card{
  position:relative;
  width:clamp(230px,34vw,340px);
  aspect-ratio:1;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:clamp(28px,4vw,46px);
  border-radius:clamp(28px,4vw,42px);
  overflow:hidden;
  /* Superficie un punto por encima del fondo de pagina, no un gris cualquiera */
  background-color:var(--card-logo);
  border:1px solid var(--card-logo-line);
  box-shadow:
    0 2px 4px rgba(0,0,0,.18),
    0 22px 50px rgba(0,0,0,.34);
}

/* Sin sol grabado en la tarjeta: ya hay uno girando detras y los dos
   se pisaban. La tarjeta queda limpia, solo el logo. */

.hero-card img{
  position:relative;
  z-index:1;
  width:100%;
  height:100%;
  object-fit:contain;
}

.hero-proof{
  display:inline-flex;
  align-items:center;
  gap:12px;
  margin-top:clamp(22px,3vw,30px);
  padding:9px 18px 9px 9px;
  border-radius:999px;
  border:1px solid var(--border);
  background-color:var(--surface);
  font-size:14px;
  font-weight:600;
  color:var(--text-2);
}
.hero-proof b{color:var(--text);font-weight:800}
.hero-proof-dot{
  width:30px;height:30px;
  border-radius:50%;
  background-color:var(--red);
  color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--display);
  font-size:12px;font-weight:700;
  flex-shrink:0;
}

.hero-text{
  position:relative;
  z-index:4;
  margin:clamp(28px,4vw,38px) auto 0;
  font-size:clamp(1.0625rem,1rem + .35vw,1.1875rem);
  line-height:1.6;
  color:var(--text-2);
  max-width:600px;
}

.hero-actions{
  position:relative;
  z-index:4;
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  justify-content:center;
  margin-top:clamp(26px,3vw,34px);
}

/* ============================================================
   FIGURAS FLOTANTES
   3 soles de los Pastos + 3 estrellas
   ============================================================ */

.shapes{
  position:absolute;
  inset:0;
  z-index:3;
  pointer-events:none;
  overflow:hidden;
}

.shape{
  position:absolute;
  animation:float 7s var(--ease) infinite alternate;
  filter:drop-shadow(0 14px 24px var(--shape-shadow));
}
.shape svg{width:100%;height:100%;display:block}

.shape:nth-child(1){width:clamp(58px,7.5vw,110px);height:clamp(58px,7.5vw,110px);top:14%;left:5%;animation-delay:-.4s}
.shape:nth-child(2){width:clamp(46px,5.5vw,84px);height:clamp(46px,5.5vw,84px);top:8%;right:8%;animation-delay:-2.1s}
.shape:nth-child(3){width:clamp(62px,8vw,120px);height:clamp(62px,8vw,120px);bottom:15%;left:10%;animation-delay:-1.2s}
.shape:nth-child(4){width:clamp(50px,6vw,94px);height:clamp(50px,6vw,94px);bottom:9%;right:6%;animation-delay:-3.1s}
.shape:nth-child(5){width:clamp(36px,4.2vw,64px);height:clamp(36px,4.2vw,64px);top:45%;left:13%;animation-delay:-1.8s}
.shape:nth-child(6){width:clamp(40px,4.6vw,72px);height:clamp(40px,4.6vw,72px);top:38%;right:12%;animation-delay:-2.7s}

/* Los soles giran sobre si mismos, mas lento que el de fondo */
.shape.sol svg{animation:spin 26s linear infinite}
.shape.sol:nth-child(3) svg{animation-direction:reverse;animation-duration:34s}

@keyframes float{
  from{transform:translateY(-10px) rotate(-5deg)}
  to  {transform:translateY(12px)  rotate(5deg)}
}

/* ============================================================
   BOTONES
   ============================================================ */

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:15px 30px;
  border:0;
  border-radius:6px;
  background-color:var(--red);
  color:#fff;
  font-family:var(--sans);
  font-size:15px;
  font-weight:700;
  line-height:1;
  cursor:pointer;
  transition:background-color .24s var(--ease),transform .12s var(--ease);
}
.btn:hover{background:#c91f16;color:#fff}
.btn:active{background-color:var(--red-press);transform:scale(.97)}

.btn-ghost{
  background:transparent;
  color:var(--text);
  border:1.5px solid var(--border-2);
}
.btn-ghost:hover{background-color:var(--card-glass);color:var(--text);border-color:var(--red)}
.btn-ghost:active{background-color:var(--card-glass)}

/* ============================================================
   PERSONAS
   ============================================================ */

.people{
  display:flex;
  flex-direction:column;
  gap:12px;
  margin-top:40px;
  padding-top:28px;
  border-top:1px solid var(--border);
}

.person{
  display:flex;
  gap:14px;
  align-items:center;
  padding:14px 16px;
  border:1px solid var(--border);
  border-radius:12px;
  background-color:var(--surface);
  transition:border-color .26s var(--ease),transform .26s var(--ease);
}
.person:hover{border-color:var(--red);transform:translateX(4px)}

.person-avatar{
  width:44px;height:44px;
  border-radius:8px;
  background-color:var(--red);
  color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--display);
  font-weight:600;font-size:15px;
  flex-shrink:0;
}
.person-name{margin:0;font-size:15px;font-weight:700;color:var(--text)}
.person-role{margin:0;font-size:14px;color:var(--text-3)}

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

.section-head{max-width:640px;margin-bottom:clamp(40px,5vw,64px)}

.card-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1px;
  background-color:var(--border);
  border:1px solid var(--border);
  border-radius:var(--radius);
  overflow:hidden;
}
.card{
  background-color:var(--surface);
  padding:clamp(28px,3vw,36px) clamp(24px,3vw,32px);
  transition:background-color .26s var(--ease);
}
.card:hover{background-color:var(--surface-2)}
.card-title{
  margin:0 0 10px;
  font-family:var(--display);
  font-size:17px;
  font-weight:600;
  color:var(--text);
}
.card-text{margin:0;font-size:15px;line-height:1.6;color:var(--text-3)}

.note{margin:24px 0 0;font-size:13px;color:var(--text-4)}

/* ============================================================
   LISTAS
   ============================================================ */

.bullets{
  margin:28px 0 0;
  padding:0;
  list-style:none;
  display:flex;
  flex-direction:column;
  gap:14px;
}
.bullets li{
  display:flex;
  gap:12px;
  align-items:flex-start;
  font-size:16px;
  color:var(--text-2);
}
/* El marcador de lista es el sol, no un punto cualquiera:
   una enumeracion de principios merece la marca de la casa. */
.bullets li::before{
  content:'';
  width:13px;height:13px;
  margin-top:6px;
  flex-shrink:0;
  background-color:var(--red);
  -webkit-mask:var(--sol-mask) center / contain no-repeat;
          mask:var(--sol-mask) center / contain no-repeat;
}

.values{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(160px,100%),1fr));
  gap:clamp(20px,3vw,32px);
}
.values p{margin:0;font-size:16px;font-weight:700;color:var(--text)}

/* ============================================================
   HUECOS DE IMAGEN
   ============================================================ */

.media{
  width:100%;
  aspect-ratio:4/3;
  border-radius:var(--radius);
  overflow:hidden;
  background-color:var(--surface);
  border:1px dashed var(--border-2);
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:24px;
  color:var(--text-4);
  font-size:14px;
}
/* Igual que en la banda: el recorte se ancla abajo para conservar
   el logo y el aviso del proveedor. */
.media img{width:100%;height:100%;object-fit:cover;object-position:50% 100%}
.media.filled{border:0;padding:0}

/* ============================================================
   CONTACTO
   ============================================================ */

.contact{position:relative;overflow:hidden}
.contact::before{
  content:'';
  position:absolute;
  top:-30%;left:-10%;
  width:60vw;height:60vw;
  max-width:820px;max-height:820px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(229,39,28,.16),transparent 66%);
  pointer-events:none;
}
.contact .shell{position:relative;z-index:1}

.channels{
  display:flex;
  flex-direction:column;
  gap:12px;
  margin-top:36px;
}

.channel{
  display:flex;
  align-items:center;
  gap:16px;
  padding:18px 20px;
  border:1px solid var(--border);
  border-radius:14px;
  background-color:var(--surface);
  color:inherit;
  transition:border-color .26s var(--ease),background-color .26s var(--ease),transform .26s var(--ease);
}
.channel:hover{
  border-color:var(--red);
  background-color:var(--surface-2);
  color:inherit;
  transform:translateX(5px);
}
.channel:active{transform:translateX(5px) scale(.99)}

.channel-icon{
  width:44px;height:44px;
  border-radius:11px;
  background-color:var(--red);
  color:#fff;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
}
.channel-icon svg{width:20px;height:20px;display:block}

.channel-body{min-width:0}
.channel-label{
  display:block;
  margin:0 0 3px;
  font-size:12px;
  font-weight:700;
  letter-spacing:.07em;
  text-transform:uppercase;
  color:var(--text-3);
}
.channel-value{
  display:block;
  margin:0;
  font-family:var(--display);
  font-size:16px;
  font-weight:600;
  color:var(--text);
  word-break:break-word;
}
.channel-arrow{
  margin-left:auto;
  color:var(--text-4);
  flex-shrink:0;
  transition:color .26s var(--ease),transform .26s var(--ease);
}
.channel:hover .channel-arrow{color:var(--red);transform:translateX(3px)}


.field input,
.field input:focus,
.field input::placeholder,

/* ============================================================
   PIE
   ============================================================ */

.site-footer{
  background-color:var(--bg-alt);
  padding-block:48px;
  border-top:1px solid var(--border);
  transition:background-color .4s var(--ease);
}
.footer-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:24px;
}
.footer-inner img{height:20px;width:auto}
.footer-nav{display:flex;gap:28px;flex-wrap:wrap}
.footer-nav a{font-size:13px;color:var(--text-3)}
.footer-nav a:hover{color:var(--red)}
.copyright{margin:0;font-size:13px;color:var(--text-4)}

/* ============================================================
   APARICION AL HACER SCROLL
   ============================================================ */

.reveal{
  opacity:0;
  transform:translateY(16px);
  transition:opacity .6s var(--ease),transform .6s var(--ease);
}
.reveal.is-in{opacity:1;transform:none}

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

@media (max-width:900px){
  :root{--gutter:20px}

  .nav{display:none}
  .nav-toggle{display:inline-flex}
  .btn-nav{padding:10px 16px;font-size:13px}

  .card-grid{grid-template-columns:repeat(2,1fr)}

  .footer-inner{flex-direction:column;align-items:flex-start;gap:20px}
}

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

@media (max-width:480px){
  .btn{width:100%}
  .btn-nav{padding:9px 13px;font-size:12px}
  .values{grid-template-columns:repeat(2,1fr)}
  .bullets li{font-size:15px}
  .hero-actions{flex-direction:column}
  /* Menos figuras: no deben competir con la tarjeta */
  .shape:nth-child(5),.shape:nth-child(6){display:none}
}

@media (min-width:901px){
  .nav-mobile{display:none}
}

/* ============================================================
   ACCESIBILIDAD
   ============================================================ */

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .reveal{opacity:1;transform:none}
}

/* ============================================================
   CABECERA DE PAGINA INTERIOR
   Las paginas que no son Home no tienen hero: llevan esta banda.
   ============================================================ */

.page-hero{
  position:relative;
  background-color:var(--stage);
  padding-block:clamp(56px,7vw,104px) clamp(48px,6vw,84px);
  border-bottom:1px solid var(--border);
  overflow:hidden;
  isolation:isolate;
  transition:background-color .4s var(--ease);
}

/* Mismo nombre gigante que la Home, alineado a la izquierda */
.page-hero .hero-wordmark{
  top:auto;
  bottom:-.18em;
  left:var(--gutter);
  transform:none;
  font-size:clamp(4rem,13vw,11rem);
  opacity:.55;   /* --wordmark ya trae su propia alfa */
}

/* Sol girando: mismo motivo que la Home, desplazado al margen */
.page-hero .hero-sun{
  top:50%;
  left:auto;
  right:-14%;
  width:clamp(320px,42vw,560px);
  height:clamp(320px,42vw,560px);
  margin:calc(clamp(320px,42vw,560px) / -2) 0 0 0;
  opacity:.11;
}

.page-hero .shapes{z-index:2}

/* Solo tres figuras aqui: acompanan, no compiten con el titulo */
.page-hero .shape:nth-child(1){width:clamp(44px,5vw,78px);height:clamp(44px,5vw,78px);top:18%;right:16%;left:auto;bottom:auto}
.page-hero .shape:nth-child(2){width:clamp(34px,3.6vw,58px);height:clamp(34px,3.6vw,58px);bottom:18%;right:8%;left:auto;top:auto}
.page-hero .shape:nth-child(3){width:clamp(28px,3vw,46px);height:clamp(28px,3vw,46px);top:24%;right:32%;left:auto;bottom:auto}

.page-hero .shell{position:relative;z-index:4}

.page-title{
  margin:0;
  font-family:var(--display);
  font-size:clamp(2rem,1.5rem + 2.2vw,3rem);
  line-height:1.12;
  font-weight:600;
  color:var(--text);
  max-width:820px;
  text-wrap:pretty;
}
.page-title + .lede{margin-top:18px;max-width:680px}

/* Migas de pan */
.crumbs{
  display:flex;
  align-items:center;
  gap:8px;
  margin:0 0 18px;
  font-size:13px;
  color:var(--text-4);
}
.crumbs a{color:var(--text-3);font-weight:600}
.crumbs a:hover{color:var(--red)}

/* ============================================================
   PIE DE PAGINA: SIGUIENTE PASO
   ============================================================ */

.next-step{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:24px;
  padding:clamp(28px,4vw,40px);
  border:1px solid var(--border);
  border-radius:18px;
  background-color:var(--surface);
}
.next-step p{margin:0}
.next-step-label{
  font-size:12px;
  font-weight:700;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--text-4);
  margin-bottom:6px !important;
}
.next-step-title{
  font-family:var(--display);
  font-size:clamp(1.25rem,1.1rem + .7vw,1.5rem);
  font-weight:600;
  color:var(--text);
}

/* ============================================================
   SOL COMO ELEMENTO DE ESTRUCTURA
   Aparece donde marca una transicion o una enumeracion,
   no como relleno decorativo.
   ============================================================ */

/* --- Separador entre secciones --- */
.sol-divider{
  display:flex;
  align-items:center;
  gap:20px;
  max-width:var(--shell);
  margin-inline:auto;
  padding-inline:var(--gutter);
}
.sol-divider::before,
.sol-divider::after{
  content:'';
  flex:1;
  height:1px;
  background:linear-gradient(to right,transparent,var(--border),transparent);
}
.sol-divider span{
  width:20px;
  height:20px;
  flex-shrink:0;
  background-color:var(--red);
  opacity:.62;
  -webkit-mask:var(--sol-mask) center / contain no-repeat;
          mask:var(--sol-mask) center / contain no-repeat;
}

/* --- Marca de agua en el bloque de siguiente paso --- */
.next-step{
  position:relative;
  overflow:hidden;
}
/* Marca de agua: se asoma por el borde, no se planta en el centro.
   Debe notarse al segundo vistazo, no al primero. */
.next-step::after{
  content:'';
  position:absolute;
  top:50%;
  right:-86px;
  width:168px;
  height:168px;
  margin-top:-84px;
  background-color:var(--red);
  opacity:.045;
  pointer-events:none;
  -webkit-mask:var(--sol-mask) center / contain no-repeat;
          mask:var(--sol-mask) center / contain no-repeat;
  animation:spin 120s linear infinite;
}
.next-step > *{position:relative;z-index:1}

/* --- Punta del hilo de migas --- */
.crumbs::before{
  content:'';
  width:11px;
  height:11px;
  flex-shrink:0;
  background-color:var(--red);
  -webkit-mask:var(--sol-mask) center / contain no-repeat;
          mask:var(--sol-mask) center / contain no-repeat;
}

/* La cinta tampoco debe moverse si el sistema pide menos movimiento */
@media (prefers-reduced-motion:reduce){
  .hero-marquee-track{animation:none}
}


/* Trampa antibots: fuera de pantalla, nunca oculta con display:none
   (algunos bots detectan display:none y saltan el campo). */

/* ============================================================
   BLOQUE "ESCRIBENOS"
   Sustituye al formulario: una sola via, clara, con el plazo visible.
   ============================================================ */

.write-card{
  /* Ocupa todo el alto de su columna y reparte el contenido:
     asi termina a la misma altura que la foto de al lado. */
  display:flex;
  flex-direction:column;
  height:100%;
  padding:clamp(28px,4vw,44px);
  border:1px solid var(--border);
  border-radius:18px;
  background-color:var(--surface);
  box-shadow:0 24px 60px rgba(0,0,0,.24);
}

/* El plazo de respuesta se separa del texto y baja: el aire sobrante
   se reparte ahi, no se acumula al final. */
.write-card .write-sla{margin-top:auto}

.write-label{
  margin:0 0 14px;
  font-size:12px;
  font-weight:700;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--text-4);
}

.write-mail{
  display:inline-block;
  margin:0 0 20px;
  font-family:var(--display);
  /* Baja a 22px en movil para que no desborde */
  font-size:clamp(1.375rem,1rem + 1.6vw,2rem);
  font-weight:600;
  line-height:1.2;
  color:var(--text);
  word-break:break-word;
  border-bottom:2px solid var(--red);
  padding-bottom:3px;
  transition:color .24s var(--ease);
}
.write-mail:hover{color:var(--red)}

.write-text{
  margin:0 0 28px;
  font-size:16px;
  line-height:1.7;
  color:var(--text-2);
}

/* --- Plazo de respuesta --- */
.write-sla{
  display:flex;
  align-items:center;
  gap:14px;
  margin-bottom:28px;
  padding:16px 18px;
  border:1px solid var(--border);
  border-radius:12px;
  background-color:var(--bg);
}
.write-sla-icon{
  width:38px;
  height:38px;
  border-radius:10px;
  background-color:var(--red);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}
.write-sla-icon svg{width:19px;height:19px;display:block}

.write-sla-label{
  display:block;
  font-size:12px;
  font-weight:700;
  letter-spacing:.07em;
  text-transform:uppercase;
  color:var(--text-4);
  margin-bottom:2px;
}
.write-sla-value{
  display:block;
  font-family:var(--display);
  font-size:16px;
  font-weight:600;
  color:var(--text);
}

@media (max-width:480px){
  .write-card .btn{width:100%}
}

/* ============================================================
   BANDA DE IMAGEN A TODO EL ANCHO
   Para las fotos que acompanan una seccion entera, no una columna.
   ============================================================ */

.media-band{
  width:100%;
  /* 16:9 y no 21:9: las fotos son 4:3, y una banda mas estrecha
     recortaria casi la mitad de la composicion. */
  aspect-ratio:16/9;
  border-radius:var(--radius);
  overflow:hidden;
  background-color:var(--surface);
  border:1px dashed var(--border-2);
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:24px;
  color:var(--text-4);
  font-size:14px;
}

/* El logo y el aviso del proveedor van en el borde INFERIOR de la foto.
   Anclando el recorte abajo, nunca se pierden. */
.media-band img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:50% 100%;
  display:block;
}
.media-band.filled{border:0;padding:0}

/* En movil una banda 16:9 se estrecha demasiado: la abrimos a 3:2 */
@media (max-width:700px){
  .media-band{aspect-ratio:3/2}
}

/* ============================================================
   TIRA DE FOTOS EN BUCLE
   Mismo principio que la marquesina del nombre: el contenido va
   duplicado y la animacion recorre justo la mitad, asi el reinicio
   cae sobre la copia siguiente y no se ve el salto.
   ============================================================ */

.strip{
  position:relative;
  overflow:hidden;
  /* A todo el ancho de la ventana, saliendo del contenedor centrado */
  width:100vw;
  margin-inline:calc(50% - 50vw);
  /* Se desvanece en los extremos: las fotos entran y salen */
  -webkit-mask:linear-gradient(to right,transparent,#000 6%,#000 94%,transparent);
          mask:linear-gradient(to right,transparent,#000 6%,#000 94%,transparent);
}

.strip-track{
  display:flex;
  /* Sin 'gap': flex no lo aplica tras el ultimo elemento, y entonces
     la mitad del carril no equivale a 4 fotos + 4 separaciones,
     con lo que el bucle salta. Con margin-right cada foto lleva
     su separacion incorporada y la cuenta cuadra. */
  width:max-content;
  animation:strip-left 46s linear infinite;
  will-change:transform;
}

/* La segunda tira corre al reves: el contraste da sensacion
   de profundidad, como dos planos a distinta distancia. */
.strip.reverse .strip-track{animation-name:strip-right}

.strip-item{
  flex-shrink:0;
  width:clamp(220px,26vw,360px);
  aspect-ratio:4/3;          /* igual que la foto: no se recorta nada */
  margin:0 14px 0 0;         /* la separacion viaja con cada foto */
  border-radius:var(--radius);
  overflow:hidden;
  background-color:var(--surface);
}
.strip-item img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:50% 100%;   /* conserva logo y aviso del borde inferior */
  display:block;
}

@keyframes strip-left{
  from{transform:translateX(0)}
  to  {transform:translateX(-50%)}
}
@keyframes strip-right{
  from{transform:translateX(-50%)}
  to  {transform:translateX(0)}
}

/* Al pasar el cursor se detiene, para poder mirar una foto */
.strip:hover .strip-track{animation-play-state:paused}

@media (prefers-reduced-motion:reduce){
  .strip-track{animation:none}
}

/* ============================================================
   SOL COMO MARCA DE AGUA EN LAS TARJETAS
   Asoma por la esquina inferior derecha, muy tenue.
   Debe leerse al segundo vistazo, nunca competir con el texto.
   ============================================================ */

.card{position:relative;overflow:hidden}

.card::after{
  content:'';
  position:absolute;
  right:-26px;
  bottom:-26px;
  width:104px;
  height:104px;
  background-color:var(--red);
  opacity:.055;
  pointer-events:none;
  -webkit-mask:var(--sol-mask) center / contain no-repeat;
          mask:var(--sol-mask) center / contain no-repeat;
  transition:opacity .3s var(--ease),transform .5s var(--ease);
}

/* Al pasar el cursor respira un poco: confirma que es parte del sistema */
.card:hover::after{opacity:.10;transform:rotate(22deg)}

.card > *{position:relative;z-index:1}

/* En el tema claro el rojo sobre blanco tira mas: se baja */
[data-theme="light"] .card::after{opacity:.045}
[data-theme="light"] .card:hover::after{opacity:.08}

/* ============================================================
   IMAGEN SIN RECORTE
   No fija proporcion ni usa object-fit: la foto conserva la suya
   y su presencia se controla con el ancho maximo, no recortandola.
   Para composiciones que se romperian al recortar (dipticos,
   escenas con elementos en los bordes).
   ============================================================ */

.media-free{
  border-radius:var(--radius);
  overflow:hidden;
  line-height:0;              /* sin hueco fantasma bajo la imagen */
}
.media-free img{
  width:100%;
  height:auto;                /* la foto decide su alto */
  display:block;
}

/* Anchos: la escala es lo que gradua cuanto pesa en la pagina */
.media-free.sm{max-width:340px}
.media-free.md{max-width:560px}
.media-free.lg{max-width:760px}

/* Colocacion asimetrica dentro del contenedor centrado */
.media-free.push-right{margin-left:auto}
.media-free.push-left {margin-right:auto}

@media (max-width:700px){
  /* En movil no hay sitio para asimetrias: centrada y a su ancho */
  .media-free.sm,
  .media-free.md,
  .media-free.lg{max-width:100%;margin-inline:auto}
}

/* --- Lista y nota dentro del bloque "Escribenos" --- */

.write-list{
  margin:0 0 24px;
  padding:0;
  list-style:none;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.write-list li{
  display:flex;
  gap:11px;
  align-items:flex-start;
  font-size:15px;
  line-height:1.6;
  color:var(--text-2);
}
/* Marcador: el sol, igual que en el resto de enumeraciones */
.write-list li::before{
  content:'';
  width:11px;
  height:11px;
  margin-top:6px;
  flex-shrink:0;
  background-color:var(--red);
  -webkit-mask:var(--sol-mask) center / contain no-repeat;
          mask:var(--sol-mask) center / contain no-repeat;
}

.write-note{
  margin:0 0 26px;
  padding-top:18px;
  border-top:1px solid var(--border);
  font-size:14px;
  line-height:1.6;
  color:var(--text-3);
}

/* El segundo parrafo va mas pegado a la lista que introduce */
.write-text + .write-text{margin-bottom:16px}

/* --- Pie de foto --- */
.media-caption{
  margin:14px 2px 0;
  font-size:13px;
  line-height:1.55;
  color:var(--text-4);
  /* .media-free pone line-height:0 para eliminar el hueco bajo la
     imagen; aqui hay que devolverselo al texto. */
}
.media-free .media-caption{line-height:1.55}

/* ============================================================
   BLOQUE DE TEXTO CORRIDO
   Ancho de lectura limitado: una linea muy larga cansa la vista.
   ============================================================ */

.prose{max-width:68ch}

/* ============================================================
   DIRECCION / EQUIPO
   Dos fichas con retrato. Mientras no haya foto se muestran las
   iniciales, asi la pagina nunca queda con un hueco roto.
   ============================================================ */

.team{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(380px,100%),1fr));
  gap:clamp(20px,3vw,28px);
}

.member{
  display:flex;
  align-items:stretch;
  margin:0;
  border:1px solid var(--border);
  border-radius:16px;
  overflow:hidden;
  background-color:var(--surface);
  transition:border-color .28s var(--ease),transform .28s var(--ease);
}
.member:hover{border-color:var(--red);transform:translateY(-3px)}

.member-photo{
  position:relative;
  flex-shrink:0;
  width:clamp(132px,15vw,168px);
  aspect-ratio:4/5;
  background-color:var(--bg-alt);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.member-photo img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:50% 22%;     /* la cara suele estar en el tercio superior */
  display:block;
}

/* Iniciales: lo que se ve mientras no llega el retrato */
.member-initials{
  font-family:var(--display);
  font-size:clamp(2rem,5vw,2.75rem);
  font-weight:600;
  letter-spacing:.02em;
  color:var(--red);
  opacity:.55;
}

.member figcaption{
  display:flex;
  flex-direction:column;
  justify-content:center;
  flex:1;
  min-width:0;
  padding:20px 22px;
  border-top:0;
  border-left:1px solid var(--border);
}
.member-name{
  margin:0 0 3px;
  font-family:var(--display);
  font-size:17px;
  font-weight:600;
  color:var(--text);
}
.member-role{
  margin:0;
  font-size:14px;
  line-height:1.5;
  color:var(--text-3);
}

/* ============================================================
   IMAGEN QUE OCUPA EL ALTO DE SU COLUMNA
   Para emparejar una foto con un bloque de texto: arranca y
   termina justo donde el texto. Recorte anclado abajo para
   conservar el logo y el aviso del borde inferior.
   ============================================================ */

.media-fill{
  position:relative;
  min-height:280px;            /* si el texto es corto, no colapsa */
  border-radius:var(--radius);
  overflow:hidden;
  background-color:var(--surface);
  border:1px dashed var(--border-2);
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:24px;
  color:var(--text-4);
  font-size:14px;
}
.media-fill img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:50% 100%;
  display:block;
}
.media-fill.filled{border:0;padding:0}

/* En movil las columnas se apilan: alto propio, no estirado */
@media (max-width:700px){
  .media-fill{
    min-height:0;
    aspect-ratio:3/2;
  }
}