/* ==========================================================================
   Seiscuatro — estilos compartidos
   Color: blanco + azul de base. Naranja solo sobre fondo azul.
   Tipo: Arial Black para marca/titulares, Arial para cuerpo.
   ========================================================================== */

:root{
  --blue:#334FB4;
  --orange:#FF9933;   /* solo sobre fondo azul */
  --white:#ffffff;
  --ink:#111111;
  --line:#e7e6e2;
  --muted:#8a8a86;

  --font-brand:'Arial Black','Arial Bold',Arial,sans-serif;
  --font-body:Arial,'Helvetica Neue',Helvetica,sans-serif;

  --ease-menu:cubic-bezier(.4,0,.2,1);
  --ease-curtain:cubic-bezier(.77,0,.175,1);

  --radius-btn:2px;

  color-scheme:light;
}

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0}
body{
  min-height:100vh;
  display:flex;
  flex-direction:column;
  background:var(--white);
  color:var(--ink);
  font-family:var(--font-body);
  font-weight:400;
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:var(--blue)}

/* ===== Header ===== */
.site-header{
  position:sticky;
  top:0;
  z-index:50;
  /* logo a la izquierda · menú en el centro · Precios a la derecha */
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:16px;
  padding:calc(14px + env(safe-area-inset-top,0px)) 24px 14px;
  background:var(--white);
  border-bottom:1px solid var(--line);
}
.brand{display:flex;align-items:center;justify-self:start}
.brand img{height:30px;width:auto}

.cta{
  justify-self:end;
  font-family:var(--font-brand);
  font-weight:900;
  font-size:12.5px;
  color:var(--white);
  background:var(--blue);
  padding:10px 18px;
  border-radius:var(--radius-btn);
  text-decoration:none;
  letter-spacing:.01em;
}
/* Botón de menú: la palabra + una flechita. Al pasar por encima la flecha
   se mueve hacia donde se abre y la barrita (la del menú) se desliza bajo
   el texto. */
.menu-btn{
  display:flex;
  align-items:center;
  gap:8px;
  background:none;
  border:none;
  cursor:pointer;
  font-family:var(--font-brand);
  font-weight:900;
  font-size:15px;
  color:var(--blue);
  padding:6px 4px;
}
.menu-arrow{
  width:12px;height:8px;overflow:visible;
  fill:none;stroke:currentColor;stroke-width:2.4;
  stroke-linecap:round;stroke-linejoin:round;
  transition:transform .4s cubic-bezier(.3,1.6,.5,1);
}
.close-btn .menu-arrow{transform:rotate(180deg)}
.menu-label{position:relative}
.menu-label::after{
  content:'';position:absolute;left:0;right:100%;bottom:-5px;
  height:3px;border-radius:999px;background:currentColor;
  transition:right .3s var(--ease-menu);
}
.menu-btn:hover .menu-arrow,
.menu-btn:focus-visible .menu-arrow{transform:translateY(3px)}
.close-btn:hover .menu-arrow,
.close-btn:focus-visible .menu-arrow{transform:rotate(180deg) translateY(3px)}
.menu-btn:hover .menu-label::after,
.menu-btn:focus-visible .menu-label::after{right:0}
.menu-btn:focus-visible{outline:none}

/* ===== Menú overlay fullscreen ===== */
#overlay{
  position:fixed;
  inset:0;
  background:var(--blue);
  z-index:100;
  display:flex;
  flex-direction:column;
  padding:calc(14px + env(safe-area-inset-top,0px)) 24px calc(24px + env(safe-area-inset-bottom,0px));
  transform:translateY(-100%);
  transition:transform .5s var(--ease-curtain);
  overflow-y:auto;
}
#overlay.open{transform:translateY(0)}

/* misma rejilla que el header: "Cerrar" queda justo donde estaba "Menú" */
.ov-top{
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;
  min-height:44px;margin-bottom:8px;
}
.ov-mark{width:26px;height:auto;opacity:.9}
.close-btn{color:var(--white)}
.close-btn .menu-label::after{background:var(--orange)}
.close-btn:hover .menu-label{color:var(--orange)}

.ov-body{
  flex:1;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:34px;
  padding:30px 0;
}
.ov-grid{display:grid;grid-template-columns:1.3fr 1.3fr 1fr;gap:28px}

.group-label{
  font-family:var(--font-body);
  font-weight:400;
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:rgba(255,255,255,.5);
  margin-bottom:10px;
}

.links{display:flex;flex-direction:column}
.link-row{
  position:relative;
  display:flex;
  align-items:baseline;
  gap:16px;
  padding:9px 0;
  border-bottom:1px solid rgba(255,255,255,.12);
  text-decoration:none;
  color:var(--white);
  transition:padding-left .3s var(--ease-menu);
}
.link-row:last-child{border-bottom:none}
.link-num{
  font-family:var(--font-brand);
  font-weight:900;
  font-style:italic;
  font-size:13px;
  color:rgba(255,255,255,.4);
  width:26px;
  flex-shrink:0;
  transition:color .3s ease;
}
.link-label{
  font-family:var(--font-brand);
  font-weight:900;
  font-size:clamp(20px,4.6vw,28px);
  letter-spacing:-0.01em;
  position:relative;
  transition:color .25s ease;
}
.link-row::after{
  content:'';
  position:absolute;
  left:0;right:100%;bottom:-2px;
  height:3px;
  background:var(--orange);
  border-radius:999px;
  transition:right .3s var(--ease-menu);
}
.link-row:hover,
.link-row:focus-visible{padding-left:14px;outline:none}
.link-row:hover .link-num,
.link-row:hover .link-label,
.link-row:focus-visible .link-num,
.link-row:focus-visible .link-label{color:var(--orange)}
.link-row:hover::after,
.link-row:focus-visible::after{right:0}
/* página actual: solo el número en naranja */
.link-row[aria-current="page"] .link-num{color:var(--orange)}

.ov-bottom{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:14px;
  padding-top:18px;
  border-top:1px solid rgba(255,255,255,.15);
}
.ov-cta{
  font-family:var(--font-brand);
  font-weight:900;
  font-size:13px;
  color:var(--blue);
  background:var(--white);
  padding:12px 22px;
  border-radius:var(--radius-btn);
  text-decoration:none;
}
.ov-mail{font-size:13px;color:rgba(255,255,255,.75)}
.ov-mail a{color:var(--white);font-weight:700;text-decoration:none}

@media (max-width:720px){
  .ov-grid{grid-template-columns:1fr;gap:26px}
  .ov-body{padding:16px 0;gap:26px}
}

body.menu-open{overflow:hidden}

/* ===== Cursor personalizado (solo desktop con ratón) ===== */
html.has-cursor,
html.has-cursor *{cursor:none !important}
#cur6{
  position:fixed;top:0;left:0;
  width:30px;height:30px;
  pointer-events:none;
  z-index:10000;
  opacity:0;
  will-change:transform;
}
#cur6.on{opacity:1}
#cur6 img{width:100%;height:100%;display:block;transition:filter .18s}
#cur6.on-dark img{filter:brightness(0) invert(1)}

/* ===== Placeholder de página ===== */
.page{padding:80px 24px;max-width:960px;margin:0 auto}
.page-num{
  font-family:var(--font-brand);
  font-weight:900;
  font-style:italic;
  font-size:14px;
  color:var(--blue);
  margin:0 0 12px;
}
.page-title{
  font-family:var(--font-brand);
  font-weight:900;
  font-size:clamp(36px,7vw,72px);
  line-height:1;
  letter-spacing:-0.02em;
  color:var(--blue);
  margin:0 0 18px;
}
.page-note{color:var(--muted);font-size:15px;margin:0}

/* ===== Botones ===== */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--font-brand);font-weight:900;font-size:14px;
  padding:15px 26px;border-radius:var(--radius-btn);text-decoration:none;
  transition:transform .3s var(--ease-menu),background .25s ease,color .25s ease;
}
.btn:hover{transform:translateY(-2px)}
.btn-blue{background:var(--blue);color:var(--white)}
.btn-line{border:2px solid var(--blue);color:var(--blue);padding:13px 24px}
.btn-line:hover{background:var(--blue);color:var(--white)}
/* sobre fondo azul el naranja sí está permitido */
.btn-orange{background:var(--orange);color:var(--ink)}
.btn-white{background:var(--white);color:var(--blue)}

/* ===== Huecos de foto =====
   Para poner la foto real: meter un <img> dentro del <figure class="ph">
   y el placeholder desaparece solo. */
.ph{
  position:relative;
  margin:0;
  overflow:hidden;
  background:#eef0f7;
  border-radius:4px;
}
.ph::before{
  content:attr(data-label);
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  padding:16px;text-align:center;
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(51,79,180,.45);
  background-image:
    linear-gradient(45deg,transparent 49.6%,rgba(51,79,180,.08) 50%,transparent 50.4%),
    linear-gradient(-45deg,transparent 49.6%,rgba(51,79,180,.08) 50%,transparent 50.4%);
}
.ph:has(img)::before{display:none}
.ph img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease-menu)}
.ph-4x5{aspect-ratio:4/5}
.ph-1x1{aspect-ratio:1/1}
.ph-16x9{aspect-ratio:16/9}
.ph-3x4{aspect-ratio:3/4}

/* ===== Aparición al hacer scroll ===== */
.rv{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s var(--ease-menu)}
.rv.vis{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;transition:none}
}

/* ===== Etiqueta de sección ===== */
.eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--blue);margin:0 0 18px;
}
.eyebrow::before{content:'';width:22px;height:2px;border-radius:999px;background:currentColor}

/* ===== Footer ===== */
.site-footer{
  background:var(--blue);
  color:rgba(255,255,255,.7);
  padding:56px 24px calc(28px + env(safe-area-inset-bottom,0px));
  font-size:13px;
}
.ft-top{
  display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;gap:24px;
  padding-bottom:28px;border-bottom:1px solid rgba(255,255,255,.15);
}
.ft-word{height:clamp(34px,6vw,64px);width:auto;filter:brightness(0) invert(1)}
.ft-mail{font-family:var(--font-brand);font-weight:900;font-size:clamp(16px,2.4vw,22px);color:var(--white);text-decoration:none}
.ft-mail:hover{color:var(--orange)}
.ft-bottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;padding-top:20px}

/* el contenido ocupa el alto disponible: el footer siempre queda abajo */
body > main{flex:1 0 auto;width:100%}

/* ===== Bloques comunes de contenido ===== */
.wrap{max-width:1240px;margin:0 auto;padding:0 24px}

.h2{
  font-family:var(--font-brand);font-weight:900;
  font-size:clamp(34px,5.4vw,64px);
  line-height:.98;letter-spacing:-0.02em;
  color:var(--blue);margin:0;
}
.lead{font-size:clamp(16px,1.5vw,18px);line-height:1.6;color:#444;max-width:440px;margin:0}

/* header en móviles estrechos: que quepan logo, menú y Precios */
@media (max-width:440px){
  .site-header,.ov-top{gap:10px}
  .site-header{padding-left:16px;padding-right:16px}
  #overlay{padding-left:16px;padding-right:16px}
  .brand img{height:24px}
  .menu-btn{font-size:14px;gap:7px}
  .cta{padding:9px 13px}
}