/*
  GEN-73 · Portal público dkagora.ai — hoja de estilos compartida
  Ejecuta: Linus · Dirige/supervisa: Alán · Revisa: Melissa (PMO)
  Usada por: portal-dkagora_260723_1022.html (fondo Agora 2, canónica),
  portal-dkagora-bg-alt_260723_1042.html (fondo Agora 1, variante — noindex),
  como-funciona.html, por-que-dkagora.html.
  El fondo (.bg-fixed background-image) se fija por página en un <style> corto
  en el propio HTML, ya que es lo único que cambia entre variantes.
*/

:root{
  --verde-principal:#007933;
  --verde-portada:#007A33;
  --verde-brillante:#15FF77;
  --gris-oscuro:#4D4D4D;
  --gris-medio:#A3A3A3;
  --gris-claro:#BFBFBF;
  --blanco:#FFFFFF;
  --negro:#000000;
  --font-heading:'Tw Cen MT Condensed','Century Gothic','Segoe UI',sans-serif;
  --font-body:'Tw Cen MT','Century Gothic','Segoe UI',sans-serif;

  /* tema — claro (default) */
  --text-main:var(--gris-oscuro);
  --text-muted:var(--gris-medio);
  --accent:var(--verde-principal);
  --surface:rgba(255,255,255,0.6);
  --surface-solid:rgba(255,255,255,0.55);
  --surface-strong:rgba(255,255,255,0.78);
  --border-soft:var(--gris-claro);
  --bg-filter:none;
}

html.dark{
  /* tema — oscuro: blancos del fondo pasan a negro (invert + hue-rotate conserva el verde) */
  --text-main:#F2F5F3;
  --text-muted:#B9C4BE;
  --accent:var(--verde-brillante);
  --surface:rgba(8,16,12,0.6);
  --surface-solid:rgba(8,16,12,0.55);
  --surface-strong:rgba(10,18,14,0.78);
  --border-soft:rgba(255,255,255,0.18);
  --bg-filter:invert(1) hue-rotate(180deg);
}

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

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
}

body{
  margin:0;
  font-family:var(--font-body);
  color:var(--text-main);
  line-height:1.5;
  min-height:100vh;
  transition:color .3s ease;
}

/* Fondo estático — fijo, no se mueve al hacer scroll.
   En modo oscuro se invierte + rota el matiz: las zonas blancas
   de la imagen quedan negras y el verde se conserva aproximado.
   background-image se define por página (ver <style> local). */
.bg-fixed{
  position:fixed;
  inset:0;
  z-index:-1;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  filter:var(--bg-filter);
  transition:filter .3s ease;
}

a{ color:inherit; }

/* Header */
header{
  position:sticky;
  top:0;
  z-index:10;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding:0.85rem 1.25rem;
  background:var(--surface);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  border-bottom:1px solid var(--border-soft);
  transition:background-color .3s ease, border-color .3s ease;
}

.logo{
  display:block;
  height:2rem;
  width:auto;
}

.site-nav{
  display:none;
  align-items:center;
  gap:1.5rem;
  margin-right:auto;
  margin-left:1.5rem;
}
.site-nav a{
  font-size:0.9rem;
  font-weight:700;
  text-decoration:none;
  color:var(--text-main);
  transition:color .3s ease;
  white-space:nowrap;
}
.site-nav a:hover{ color:var(--accent); }
.site-nav a[aria-current="page"]{ color:var(--accent); }

@media (min-width:860px){
  .site-nav{ display:flex; }
}

.header-actions{
  display:flex;
  align-items:center;
  gap:0.6rem;
}

.theme-toggle{
  height:2.25rem;
  border-radius:999px;
  border:1px solid var(--border-soft);
  background:transparent;
  font-family:var(--font-body);
  font-weight:700;
  font-size:0.85rem;
  white-space:nowrap;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  padding:0 1rem;
  line-height:1;
  color:var(--text-main);
  transition:background-color .15s ease, border-color .3s ease, color .3s ease;
}
.theme-toggle:hover{ background:rgba(0,0,0,0.06); }
html.dark .theme-toggle:hover{ background:rgba(255,255,255,0.1); }

.btn{
  display:inline-block;
  font-family:var(--font-body);
  font-weight:700;
  text-decoration:none;
  padding:0.65rem 1.3rem;
  border-radius:999px;
  font-size:0.95rem;
  white-space:nowrap;
  transition:transform .15s ease, background-color .15s ease, box-shadow .15s ease;
}
.btn-primary{
  background:var(--verde-principal);
  color:var(--blanco);
  box-shadow:0 6px 18px rgba(0,121,51,0.3);
}
.btn-primary:hover{ background:#006129; transform:translateY(-1px); }

/* Hero — mobile first: columna, imagen no fija, fluye con el scroll */
.hero{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:2.5rem;
  padding:2.5rem 1.25rem 3.5rem;
  max-width:1200px;
  margin:0 auto;
  min-height:calc(100svh - 64px);
  justify-content:center;
}

.hero-content{
  max-width:34rem;
  text-align:center;
  margin-left:0.75rem;
  margin-top:-1.25rem;
}

.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:0.6rem;
  color:var(--accent);
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:1.5px;
  font-size:1.2rem;
  margin-bottom:1rem;
  transition:color .3s ease;
}
.eyebrow-icon{
  height:1.8rem;
  width:auto;
  display:block;
}
html.dark .eyebrow-icon{
  filter:invert(1) hue-rotate(180deg);
}

h1{
  font-family:var(--font-heading);
  font-weight:700;
  font-size:clamp(2.1rem, 7vw, 3.4rem);
  line-height:1.05;
  margin:0 0 1rem;
  color:var(--text-main);
  transition:color .3s ease;
}
h1 em{
  font-style:normal;
  color:var(--accent);
  transition:color .3s ease;
}

.subtitle{
  font-size:1.05rem;
  color:var(--text-main);
  margin:0 0 1.75rem;
  transition:color .3s ease;
}

.cta-group{
  display:flex;
  flex-wrap:wrap;
  gap:0.75rem;
  justify-content:center;
}

.hero-image-wrap{
  width:100%;
  max-width:420px;
  display:flex;
  justify-content:center;
  animation:fadeInUp .9s ease both;
  animation-delay:.15s;
}
.hero-photo{
  /* tamaño por contención (max-width + max-height), no por ancho fijo,
     para que la foto (retrato, alta) quepa entera en una pantalla junto al texto */
  width:auto;
  height:auto;
  max-width:100%;
  max-height:72svh;
  display:block;
  border-radius:1.25rem;
  box-shadow:0 24px 48px rgba(0,0,0,0.18);
}

@keyframes fadeInUp{
  from{ opacity:0; transform:translateY(20px); }
  to{ opacity:1; transform:translateY(0); }
}
@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; }
}

/* ===== Contenido de página interior (hero corto para sub-páginas) ===== */
.page-hero{
  max-width:760px;
  margin:0 auto;
  padding:3rem 1.25rem 1rem;
  text-align:center;
}
.page-hero h1{
  font-size:clamp(1.8rem, 5vw, 2.6rem);
}
.page-hero .subtitle{ margin:0 auto; }

.skeleton-badge{
  display:inline-block;
  font-size:0.75rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.5px;
  padding:0.3rem 0.7rem;
  border-radius:999px;
  background:rgba(255,180,0,0.18);
  color:#8a5b00;
  margin-bottom:1rem;
}
html.dark .skeleton-badge{
  background:rgba(255,200,80,0.18);
  color:#ffcf6b;
}

/* ===== Secciones 2-9 (copy literal GEN-34 §5.2-§5.9) ===== */

.section{
  max-width:960px;
  margin:0 auto;
  padding:2.5rem 1.25rem;
}
.section-narrow{ max-width:740px; }

.panel{
  background:var(--surface-strong);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  border-radius:1.25rem;
  padding:2rem;
  box-shadow:0 12px 32px rgba(0,0,0,0.08);
  transition:background-color .3s ease;
}

.section-title{
  font-family:var(--font-heading);
  font-weight:700;
  font-size:clamp(1.4rem, 3.2vw, 2.1rem);
  line-height:1.2;
  color:var(--text-main);
  margin:0 0 1rem;
  transition:color .3s ease;
}
.section-title.center{ text-align:center; }

.section-body{
  font-size:1rem;
  line-height:1.65;
  color:var(--text-main);
  margin:0;
  transition:color .3s ease;
}
.section-body + .section-body{ margin-top:1rem; }

/* Las 4 ventajas */
.advantages-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:1.25rem;
}
.advantage-card{
  background:var(--surface-strong);
  border-radius:1rem;
  padding:1.5rem;
  transition:background-color .3s ease;
}
.advantage-num{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:2.25rem;
  height:2.25rem;
  border-radius:50%;
  background:var(--verde-principal);
  color:var(--blanco);
  font-family:var(--font-heading);
  font-weight:700;
  margin-bottom:0.85rem;
}
.advantage-card h3{
  font-family:var(--font-heading);
  font-size:1.1rem;
  margin:0 0 0.4rem;
  color:var(--text-main);
  transition:color .3s ease;
}
.advantage-card p{
  margin:0;
  font-size:0.95rem;
  line-height:1.55;
  color:var(--text-main);
  transition:color .3s ease;
}
.advantage-card .example{
  margin-top:0.6rem;
  font-size:0.85rem;
  font-style:italic;
  color:var(--text-muted);
}

/* Tabla comparativa */
.compare-wrap{
  overflow-x:auto;
  border-radius:1rem;
  background:var(--surface-strong);
  transition:background-color .3s ease;
}
table.compare{
  width:100%;
  border-collapse:collapse;
  min-width:560px;
  font-size:0.92rem;
}
table.compare th, table.compare td{
  padding:0.85rem 1rem;
  text-align:left;
  border-bottom:1px solid var(--border-soft);
}
table.compare thead th{
  font-family:var(--font-heading);
  color:var(--text-main);
  font-size:0.95rem;
}
table.compare tbody th{
  color:var(--text-main);
  font-weight:600;
  white-space:nowrap;
}
table.compare td{ color:var(--text-main); }
table.compare .col-dk{ color:var(--accent); font-weight:700; }
table.compare tr:last-child td, table.compare tr:last-child th{ border-bottom:none; }

/* Cómo funciona / pasos */
.steps{
  display:flex;
  flex-direction:column;
  gap:1.25rem;
}
.step{
  background:var(--surface-strong);
  border-radius:1rem;
  padding:1.5rem;
  display:flex;
  gap:1rem;
  align-items:flex-start;
  transition:background-color .3s ease;
}
.step-num{
  flex:0 0 auto;
  width:2.5rem;
  height:2.5rem;
  border-radius:50%;
  background:var(--verde-principal);
  color:var(--blanco);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-family:var(--font-heading);
  font-weight:700;
  font-size:1.1rem;
}
.step h3{
  font-family:var(--font-heading);
  margin:0 0 0.35rem;
  font-size:1.05rem;
  color:var(--text-main);
  transition:color .3s ease;
}
.step p{
  margin:0;
  font-size:0.95rem;
  line-height:1.55;
  color:var(--text-main);
  transition:color .3s ease;
}

/* Objeciones (por-que-dkagora) */
.objection{
  background:var(--surface-strong);
  border-radius:1rem;
  padding:1.5rem;
  transition:background-color .3s ease;
}
.objection + .objection{ margin-top:1.25rem; }
.objection .q{
  font-family:var(--font-heading);
  font-size:1.05rem;
  margin:0 0 0.5rem;
  color:var(--text-main);
}
.objection .a{
  margin:0;
  font-size:0.95rem;
  line-height:1.6;
  color:var(--text-main);
}

/* Lista de acompañamiento (como-funciona) */
.accompaniment-list{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:1rem;
}
.accompaniment-list li{
  font-size:0.95rem;
  line-height:1.6;
  color:var(--text-main);
}
.accompaniment-list strong{ display:block; margin-bottom:0.2rem; }
.accompaniment-list em{ color:var(--text-muted); font-style:italic; }
.draft-pending{
  display:inline-block;
  font-size:0.75rem;
  font-weight:700;
  font-style:normal;
  color:#b8860b;
  margin-right:0.4rem;
}
html.dark .draft-pending{ color:#ffcf6b; }

/* CTA final */
.final-cta{
  text-align:center;
  background:var(--verde-principal);
  border-radius:1.25rem;
  padding:3rem 1.5rem;
  color:var(--blanco);
}
.final-cta h2{
  font-family:var(--font-heading);
  font-size:clamp(1.6rem, 4vw, 2.3rem);
  margin:0 0 0.75rem;
  color:var(--blanco);
}
.final-cta p{
  margin:0 0 1.5rem;
  font-size:1.05rem;
  color:rgba(255,255,255,0.92);
}
.final-cta .btn-primary{
  background:var(--blanco);
  color:var(--verde-principal);
  box-shadow:none;
}
.final-cta .btn-primary:hover{ background:#eafff0; }

/* Tablet / desktop — imagen grande a la derecha al abrir la página */
@media (min-width:860px){
  .hero{
    flex-direction:row;
    align-items:center;
    justify-content:space-between;
    text-align:left;
    gap:3rem;
  }
  .hero-content{
    text-align:left;
    flex:1 1 46%;
    max-width:34rem;
    margin-left:2rem;
    margin-top:-2rem;
  }
  .cta-group{ justify-content:flex-start; }
  .hero-image-wrap{
    flex:1 1 50%;
    max-width:520px;
    display:flex;
    justify-content:center;
  }

  .section{ padding:3.5rem 1.25rem; }
  .advantages-grid{ grid-template-columns:repeat(2,1fr); }
  .steps{ flex-direction:row; }
  .step{ flex:1; flex-direction:column; align-items:center; text-align:center; }
}

@media (min-width:1100px){
  .advantages-grid{ grid-template-columns:repeat(4,1fr); }
}

/* ===== Formulario de contacto (§5/§7) ===== */

#contacto{ scroll-margin-top:80px; }

.contact-form{
  display:flex;
  flex-direction:column;
  gap:1.1rem;
  margin-top:1.5rem;
}
.form-row{
  display:flex;
  flex-direction:column;
  gap:1.1rem;
}
.contact-form label{
  display:flex;
  flex-direction:column;
  gap:0.4rem;
  font-size:0.9rem;
  font-weight:700;
  color:var(--text-main);
  transition:color .3s ease;
}
.contact-form label .opt{
  font-weight:400;
  color:var(--text-muted);
}
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="tel"],
.contact-form select,
.contact-form textarea{
  font-family:var(--font-body);
  font-size:0.95rem;
  padding:0.65rem 0.85rem;
  border-radius:0.6rem;
  border:1px solid var(--border-soft);
  background:var(--blanco);
  color:var(--gris-oscuro);
  outline:none;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus{
  border-color:var(--verde-principal);
  box-shadow:0 0 0 3px rgba(0,121,51,0.15);
}
.contact-form textarea{
  resize:vertical;
  min-height:5rem;
  font-family:inherit;
}
.contact-form .checkbox-row{
  flex-direction:row;
  align-items:flex-start;
  gap:0.6rem;
  font-weight:400;
  font-size:0.85rem;
}
.contact-form .checkbox-row input{ margin-top:0.2rem; }
.contact-form .checkbox-row a{ color:var(--accent); text-decoration:underline; }
.hp-field{
  position:absolute;
  left:-9999px;
  width:1px;
  height:1px;
  overflow:hidden;
  opacity:0;
}
.contact-form .form-note{
  font-size:0.8rem;
  color:var(--text-muted);
  margin:0;
}
.contact-form .form-error{
  display:none;
  font-size:0.85rem;
  font-weight:700;
  color:#c0392b;
  margin:-0.5rem 0 0;
}
.contact-form .form-error.show{ display:block; }
html.dark .contact-form .form-error{ color:#ff8a80; }
.contact-form .form-success{
  display:none;
  font-size:0.85rem;
  font-weight:700;
  color:var(--verde-principal);
  margin:-0.5rem 0 0;
}
.contact-form .form-success.show{ display:block; }
.contact-form button[type="submit"]{
  align-self:flex-start;
  border:none;
  cursor:pointer;
}

@media (min-width:600px){
  .form-row{ flex-direction:row; }
  .form-row label{ flex:1; }
}

/* Footer minimo de sub-paginas */
.site-footer{
  text-align:center;
  padding:2rem 1.25rem 3rem;
  font-size:0.85rem;
  color:var(--text-muted);
}
.site-footer a{ color:var(--accent); text-decoration:underline; }