/* ============ PALETA (neutros) ============ */
/* Ajusta cualquier color aquí para afinar tu marca */
:root{
  /* Base del mock */
  --olive:    #6f6b5c; /* header/hero fondo */
  --khaki:    #6b705c;
  --beige:    #d8c2a6;
  --nude:     #e6d1c4;
  --sand:     #d8cbb8;
  --cream:    #efe2cf;
  --ivory:    #f6f1e7;

  --mocha:    #8c7264;
  --taupe:    #7f7269;
  --tan:      #c19a6b;
  --camel:    #b97745;

  --black:    #1a1a1a;
  --charcoal: #3f4547;
  --grey:     #bec4c9;
  --white:    #ffffff;

  /* Texto en fondos oscuros/claros */
  --on-olive: #e6d6c9;      /* beige/nude para header/nav */
  --on-light: #222222;

  /* Botones */
  --cta:        var(--nude);      /* botón 'Regístrate' del header */
  --cta-text:   #1e1712;
  --accent:     #f1c232;          /* acento tipo 'amarillo suave' (puedes apagarlo) */
  --accent-txt: #1b1200;

  /* Layout */
  --container: 1200px;
}

/* ============ RESETEOS BÁSICOS ============ */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
img { max-width: 100%; display: block; }
a { color: inherit; }

body{
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--on-light);
  background: var(--ivory);
  line-height: 1.45;
}

.container{ max-width: var(--container); margin: 0 auto; padding: 0 24px; }

/* ============ HEADER ============ */
.rw-header{
  position: sticky; top:0; z-index:100;
  background: var(--olive);
  color: var(--on-olive);
}
.rw-bar{
  display: grid; align-items: center; gap: 24px;
  grid-template-columns: 1fr auto 1fr; /* redes | centro | derecha */
  padding: 22px clamp(16px,3vw,32px);
}
.rw-left{ display:flex; gap:18px; align-items:center; }
.rw-social{ display:inline-flex; width:26px; height:26px; opacity:.95; }
.rw-social svg{ width:100%; height:100%; stroke:var(--on-olive); fill:none; stroke-width:1.6; }
.rw-social svg [fill="currentColor"]{ fill:var(--on-olive); }

.rw-center{ display:flex; flex-direction:column; align-items:center; gap:14px; }
.rw-brand{
  font-family: Cinzel, serif; letter-spacing:.14em; font-weight:400;
  font-size: clamp(26px, 2.2vw, 36px); text-decoration:none; color:var(--on-olive);
}
.rw-nav{ list-style:none; padding:0; margin:0; display:flex; gap:36px; }
.rw-nav a{ text-decoration:none; opacity:.95; }
.rw-nav a:hover{ opacity:1; text-decoration:underline; text-underline-offset:4px; }

.rw-right{ display:flex; align-items:center; gap:28px; justify-self:end; }
.rw-login{ text-decoration:none; }
.rw-cta{
  display:inline-block; background:var(--cta); color:var(--cta-text);
  padding: 12px 20px; border-radius: 3px; text-decoration:none; font-weight:800;
  box-shadow: 0 0 0 1px #ffffff25 inset;
}
.rw-cta:hover{ filter:brightness(1.04); }

@media (max-width: 980px){
  .rw-bar{
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "left right" "center center";
    row-gap: 12px;
  }
  .rw-left{ grid-area:left; }
  .rw-right{ grid-area:right; justify-self:end; }
  .rw-center{ grid-area:center; }
  .rw-nav{ flex-wrap:wrap; row-gap:10px; column-gap:20px; justify-content:center; }
}

/* ================== HERO ================== */
.hero{
  background: linear-gradient(#00000008,#00000005);
  padding: 80px 0 64px;
}
.eyebrow{ color:var(--muted); letter-spacing:.2em; margin:0 0 10px; font-weight:600 }
.hero-title{
  font-family: Cinzel, serif; font-size: clamp(34px, 6vw, 72px);
  line-height:1.1; margin:0; letter-spacing:.02em;
}
.hero-inner{ text-align:center }

/* ================== SPLIT ================== */
.split{ padding: 64px 0; }
.split-grid{
  display:grid; grid-template-columns: 1.1fr 1fr; gap:36px; align-items:center;
}
.split-copy .display{ font-size: clamp(24px, 3.2vw, 44px); margin:0 0 12px; font-weight:800; letter-spacing:-.01em }
.split-copy .lead{ font-size:18px; color:#353535 }
.split-media img{ width:100%; border-radius:18px; display:block }

.btn{ display:inline-block; padding:12px 18px; border-radius:12px; text-decoration:none; font-weight:700; }
.btn.ghost{ border:1px solid var(--line); color:var(--ink); background:var(--paper) }
.btn.accent{ background:var(--accent); color:var(--accent-ink); border:1px solid #e5b700 }
.btn.dark{ background:#000; color:#fff }

/* ================== BAND ================== */
.band{ position:relative; padding: 68px 0; color:#fff; overflow:hidden }
.band-bg{ position:absolute; inset:0; filter:saturate(.9) }
.band-inner{ position:relative }
.band-title{ text-align:center; font-size: clamp(28px, 4vw, 60px); margin:0 0 26px; font-weight:800; letter-spacing:.01em }
.band-grid{
  display:grid; gap:28px;
  grid-template-columns: repeat(4, 1fr);
}
.band-grid article{
  background: #ffffff16; border:1px solid #ffffff30; border-radius:16px; padding:18px 16px;
  text-align:center
}
.band-grid h3{ margin:0 0 8px; color:#fff }
.band-grid p{ margin:0; opacity:.9 }

/* ================== COVER CTA ================== */
.cover-cta{ position:relative; padding: 96px 0; color:#fff }
.cover-bg{ position:absolute; inset:0 }
.cover-inner{ position:relative; text-align:center }
.cover-title{ font-size: clamp(28px, 4.6vw, 64px); margin:0 0 20px; font-weight:800 }

/* ================== PRICING ================== */
.pricing{ padding: 70px 0; }
.pricing-title{ text-align:center; font-size: clamp(26px, 3.6vw, 48px); margin:0 }
.pricing-sub{ text-align:center; color:var(--muted); margin:6px 0 30px }
.pricing-grid{ display:grid; gap:22px; grid-template-columns: repeat(3, 1fr); }
.plan{
  background:var(--paper); border:1px solid var(--line); border-radius:16px; padding:18px
}
.plan.highlight{ border-width:2px }
.plan h3{ margin:8px 0 6px }
.plan .price{ font-size:20px; margin:8px 0 12px }
.plan .price span{ font-size:28px; font-weight:800 }
.plan ul{ padding-left:18px; margin:0 0 16px }
.plan li{ margin:6px 0 }

/* ================== QUOTE ================== */
.quote-hero{ position:relative; padding: 90px 0; color:#fff }
.quote-bg{ position:absolute; inset:0 }
.quote-inner{ position:relative; text-align:center; }
.quote{ font-size: clamp(28px, 4.8vw, 72px); line-height:1.1; margin:0 0 16px; font-weight:800 }
.sub{ margin:0 0 18px }

/* ================== FOOTER SIMPLE ================== */
.footer{ padding: 28px 0; color:#444 }
.footer .container{ text-align:center }
/* ================== MODAL LOGIN ================== */
.rw-modal{ position:fixed; inset:0; display:none; z-index: 1000; }
.rw-modal.is-open{ display:block; }
.rw-modal__overlay{ position:absolute; inset:0; background: rgba(0,0,0,.55); backdrop-filter: blur(2px); }
.rw-modal__content{
  position: relative;
  width:min(560px, 92vw);
  margin: 6vh auto;
  background: var(--paper);
  color: var(--ink);
  border-radius: 16px;
  border: 1px solid var(--line);
  padding: 24px 22px 26px;
  box-shadow: 0 15px 60px rgba(0,0,0,.25);
}
.rw-modal__title{ margin:0 0 6px; font-size: clamp(22px,2.4vw,28px); font-weight:800; letter-spacing:-.01em }
.rw-auth__hint{ margin:4px 0 16px; color: var(--muted) }
.rw-auth__link{ color:var(--ink); text-underline-offset:2px }
.rw-modal__close{
  position:absolute; right:10px; top:8px; border:none; background:transparent;
  font-size:24px; cursor:pointer; color:#6b6b6b;
}
.rw-modal__close:hover{ color:#000 }
body.rw-no-scroll{ overflow:hidden }

/* campos / botones */
.rw-field{ display:block; margin: 10px 0 6px; }
.rw-field > span{ display:block; font-size:14px; margin-bottom:6px; color:var(--muted); }
.rw-field input{
  width:100%; height:46px; border-radius:12px; border:1px solid var(--line);
  background: var(--paper); padding: 0 12px; font-size:16px; color: var(--ink);
}
.rw-field input:focus{ outline:2px solid #d8cfc3; border-color:#d8cfc3; }
.rw-pass{ position:relative }
.rw-eye{
  position:absolute; right:8px; top:50%; transform:translateY(-50%);
  border:none; background:transparent; cursor:pointer; padding:6px; opacity:.75;
}
.rw-eye:hover{ opacity:1 }
.rw-check{ display:flex; align-items:center; gap:8px; margin: 8px 0 14px; color:var(--ink) }
.rw-check input{ width:18px; height:18px; accent-color:#6f6c5d }
.rw-err{ color:#b74141; min-height:18px; display:block; margin-top:6px }

.rw-btn{
  display:flex; align-items:center; justify-content:center; gap:10px;
  width:100%; border:1px solid var(--line); background: var(--paper);
  padding: 12px 14px; border-radius: 12px; color: var(--ink); font-weight:600; cursor:pointer;
}
.rw-btn:hover{ background:#faf9f7 }
.rw-btn--primary{ background:var(--accent); border-color:#e5b700; color:var(--accent-ink) }

/* ===== FIX layout social + separador (parche pedido) ===== */
.rw-modal__content{ max-width:560px; padding:28px 24px 26px }
.rw-social{ display:flex; flex-direction:column; gap:12px; margin:12px 0 10px }
.rw-btn{ min-height:52px }
.rw-btn--social{ justify-content:flex-start; padding-inline:14px }
.rw-btn--social .rw-ico{ width:22px; height:22px; flex:0 0 22px; margin-right:12px; display:grid; place-items:center }
.rw-btn--social .rw-ico svg{ width:20px; height:20px; display:block }
.rw-btn--social .rw-label{ flex:1; text-align:center; white-space:nowrap }
.rw-sep{ display:flex; align-items:center; justify-content:center; gap:14px; margin:12px 0 10px; color:var(--muted) }
.rw-sep::before,.rw-sep::after{ content:""; height:1px; background:var(--line); flex:1 }
.rw-sep span{ min-width:22px; text-align:center }

/* ================== RESPONSIVE ================== */
@media (max-width: 960px){
  .split-grid{ grid-template-columns: 1fr; }
  .band-grid{ grid-template-columns: 1fr 1fr; }
  .pricing-grid{ grid-template-columns: 1fr; }
}
@media (max-width: 480px){
  .rw-nav{ display:none } /* móvil: deja solo marca y CTAs */
  .rw-bar{ min-height:74px }
}
/* ===== ICONOS DEL HEADER (antes estaba .rw-social a secas) ===== */
.rw-header .rw-social{
  display:inline-flex;
  width:26px;
  height:26px;
  opacity:.95;
}
.rw-header .rw-social svg{
  width:100%;
  height:100%;
  stroke:var(--on-olive);
  fill:none;
  stroke-width:1.6;
}
.rw-header .rw-social svg [fill="currentColor"]{ fill:var(--on-olive); }

/* ===== BLOQUE SOCIAL EN EL MODAL (evita que se aplaste) ===== */
.rw-modal .rw-social{
  display:flex;
  flex-direction:column;
  gap:12px;
  width:100%;
  height:auto;
  margin:12px 0 10px;
}
.rw-modal .rw-btn{ min-height:54px; }
.rw-modal .rw-btn--social{ justify-content:flex-start; padding-inline:14px; }
.rw-modal .rw-btn--social .rw-ico{
  width:22px; height:22px; flex:0 0 22px;
  margin-right:12px; display:grid; place-items:center;
}
.rw-modal .rw-btn--social .rw-ico svg{ width:20px; height:20px; display:block; }
.rw-modal .rw-btn--social .rw-label{ flex:1; text-align:center; white-space:nowrap; }

/* opcional: asegura el ancho del cuadro del modal */
.rw-modal__content{ max-width:560px; }
/* ===== Dropdown accesible para "Acerca de" ===== */
.rw-nav > li { position: relative; }

.rw-has-sub > .rw-nav-label{
  display:inline-flex; align-items:center; gap:6px;
  cursor:pointer; opacity:.95;
}
.rw-has-sub > .rw-nav-label::after{ content:"▾"; font-size:.8em; }

.rw-sub{
  position:absolute;
  top:100%;           /* ← SIN GAP: pega el menú al botón */
  left:0;
  display:none;       /* se muestra con .is-open / hover / focus */
  min-width:220px;
  padding:10px;
  background: var(--accent);
  color:#fff;
  border-radius:12px;
  box-shadow:0 10px 24px rgba(0,0,0,.18);
  z-index:300;        /* por encima del header (header ~100), debajo del modal (1000) */
}

.rw-sub li{ list-style:none; }
.rw-sub a{
  display:block;
  padding:10px 14px;
  color:#fff;
  text-decoration:none;
  border-radius:8px;
}
.rw-sub a:hover, .rw-sub a:focus{ background: rgba(255,255,255,.12); }

/* Mostrar el menú en hover/focus/estado abierto */
.rw-has-sub:hover .rw-sub,
.rw-has-sub:focus-within .rw-sub,
.rw-has-sub.is-open .rw-sub{ display:block; }
/* caret bien centrado respecto al texto */
.rw-has-sub > .rw-nav-label::after{
  content:"▾";
  margin-left:6px;
  transform: translateY(1px);
}

/* evita desplazamientos por márgenes inesperados */
.rw-nav > li{ margin:0; position:relative; }