/* ============================================================
   MARCA DE ANGEL — sistema visual del perfil y la propuesta.

   Ojo: los demos NO usan este archivo. Cada demo va vestido del
   negocio que representa, a propósito. Ese es el argumento de
   venta: "tu negocio se va a ver como tu negocio".
   ============================================================ */

@import url("../fonts/fuentes.css");

:root{
  --navy:#1B1F3B;
  --navy-deep:#12152B;
  --navy-soft:#272C52;
  --amber:#FFB238;
  --teal:#33A9A0;        /* solo decorativo: adornos sobre fondo oscuro */
  --teal-texto:#1B6E67;  /* para TEXTO y fondos con texto encima — pasa WCAG AA
                            (6.05:1 sobre blanco). El teal claro no pasaba:
                            se leía mal en la calle, con sol y en un teléfono. */
  --paper:#F7F5F0;
  --ink:#20233F;
  --muted:#5C5F7E;
  --line:#E4E0D5;
  --card:#FFFFFF;

  --display:'Space Grotesk', 'Avenir Next', 'Segoe UI', system-ui, sans-serif;
  --mono:'Space Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --body:'Work Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --ancho:1080px;
  --r:18px;
}

*{box-sizing:border-box; margin:0; padding:0;}

html{scroll-behavior:smooth; -webkit-text-size-adjust:100%;}

body{
  font-family:var(--body);
  background:var(--paper);
  color:var(--ink);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%; display:block;}
a{color:inherit;}

.envoltura{max-width:var(--ancho); margin:0 auto; padding:0 20px;}

/* ---------- Tipografía ------------------------------------- */

.rotulo{
  font-family:var(--mono); font-size:.68rem; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:var(--teal-texto);
  display:inline-block;
}
.rotulo.claro{color:var(--amber);}

h1{font-family:var(--display); font-weight:700; font-size:clamp(1.95rem,7vw,3.4rem); line-height:1.08; letter-spacing:-.02em;}
h2{font-family:var(--display); font-weight:700; font-size:clamp(1.5rem,4.6vw,2.2rem); line-height:1.15; letter-spacing:-.015em; margin-top:8px;}
h3{font-family:var(--display); font-weight:600; font-size:1.12rem; line-height:1.3;}

.entrada{font-size:1rem; color:var(--muted); max-width:56ch; margin-top:14px;}
section > .envoltura > .entrada{margin-bottom:4px;}

/* ---------- Botones ---------------------------------------- */

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-family:var(--body); font-weight:700; font-size:.95rem;
  padding:14px 24px; border-radius:100px; text-decoration:none;
  border:2px solid transparent; cursor:pointer; text-align:center;
  transition:transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.btn:active{transform:translateY(1px);}
.btn-wa{background:#25D366; color:#0B2E19; box-shadow:0 6px 18px rgba(37,211,102,.32);}
.btn-wa:hover{background:#1fbe5b;}
.btn-amber{background:var(--amber); color:var(--navy-deep); box-shadow:0 6px 18px rgba(255,178,56,.3);}
.btn-linea{border-color:currentColor; background:transparent;}
.btn-oscuro{background:var(--navy); color:var(--paper);}
.btn-bloque{display:flex; width:100%;}

.botonera{display:flex; flex-direction:column; gap:11px; margin-top:26px;}
@media (min-width:560px){
  .botonera{flex-direction:row; flex-wrap:wrap;}
  .btn-bloque{display:inline-flex; width:auto;}
}

/* ---------- Secciones -------------------------------------- */

section{padding:52px 0;}
section.oscura{background:var(--navy); color:var(--paper);}
section.oscura h2{color:var(--paper);}
section.oscura .entrada{color:#B9BBD6;}
section.honda{background:var(--navy-deep); color:var(--paper);}
section.honda h2{color:var(--paper);}
section.honda .entrada{color:#B9BBD6;}

.cabecera-seccion{margin-bottom:28px;}

/* ---------- Tarjetas --------------------------------------- */

.rejilla{display:grid; gap:16px; margin-top:26px;}
@media (min-width:700px){
  .rejilla.dos{grid-template-columns:repeat(2,1fr);}
  .rejilla.tres{grid-template-columns:repeat(3,1fr);}
}

.tarjeta{
  background:var(--card); border:1px solid var(--line); border-radius:var(--r);
  padding:22px; display:flex; flex-direction:column;
}
.tarjeta h3{margin-bottom:7px;}
.tarjeta p{font-size:.9rem; color:var(--muted);}
section.oscura .tarjeta, section.honda .tarjeta{
  background:var(--navy-soft); border-color:#39406B; color:var(--paper);
}
section.oscura .tarjeta p, section.honda .tarjeta p{color:#B9BBD6;}

/* ---------- Marcas de dato pendiente ------------------------ */

.pendiente{
  background:var(--amber); color:var(--navy-deep);
  font-family:var(--mono); font-size:.72em; font-weight:700;
  padding:2px 8px; border-radius:5px; letter-spacing:.04em;
  white-space:nowrap; display:inline-block;
}

/* ---------- Barra superior ---------------------------------- */

.barra{
  position:sticky; top:0; z-index:60;
  background:rgba(18,21,43,.94); backdrop-filter:blur(10px);
  border-bottom:1px solid #2C3157;
}
.barra .envoltura{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding-top:11px; padding-bottom:11px;
}
.marca{
  display:flex; align-items:center; gap:9px; text-decoration:none;
  font-family:var(--display); font-weight:700; font-size:1.02rem; color:var(--paper);
  letter-spacing:-.01em;
}
.marca .punto{
  width:11px; height:11px; border-radius:50%; background:var(--amber);
  box-shadow:0 0 0 4px rgba(255,178,56,.2); flex-shrink:0;
}

/* Botón de idioma */
.idioma{
  display:flex; border:1px solid #454B79; border-radius:100px; overflow:hidden;
  font-family:var(--mono); font-size:.7rem; font-weight:700; flex-shrink:0;
}
.idioma button{
  background:transparent; border:0; color:#9BA0C4; cursor:pointer;
  padding:6px 12px; font:inherit; letter-spacing:.06em;
}
.idioma button[aria-pressed="true"]{background:var(--amber); color:var(--navy-deep);}

/* ---------- Pie --------------------------------------------- */

footer.pie{background:var(--navy-deep); color:var(--paper); padding:44px 0 38px;}
footer.pie a{color:var(--amber);}
footer.pie .nota{
  margin-top:26px; padding-top:18px; border-top:1px solid #2C3157;
  font-size:.75rem; color:#7C82A8;
}

/* ---------- Utilidades -------------------------------------- */

.centrado{text-align:center;}
.solo-es[hidden], .solo-en[hidden]{display:none !important;}