/* ================== PALETA REWIND (SERVICES LIGHT) ================== */
:root{
  --olive:#6f6b5c; --khaki:#6b705c;
  --beige:#e6d6c9; --nude:#e5cfc0;
  --ivory:#f6f1e7; --paper:#ffffff;
  --ink:#1f2224; --muted:#606468; --line:#e9e3da;
  --accent:#f1c232; --accent-txt:#1b1200;
}

/* ============ RESET ============ */
*{box-sizing:border-box} html,body{margin:0;padding:0}
img{max-width:100%;display:block} a{text-decoration:none;color:inherit}

/* ============ BASE ============ */
body{font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;background:var(--ivory);color:var(--ink);line-height:1.45}
.container{max-width:1200px;margin:0 auto;padding:0 24px}

/* ============ HEADER (igual al landing) ============ */
.rw-header{position:sticky;top:0;z-index:100;background:var(--olive);color:var(--beige)}
.rw-bar{display:grid;align-items:center;gap:24px;grid-template-columns:1fr auto 1fr;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(--beige);fill:none;stroke-width:1.6}
.rw-social svg [fill="currentColor"]{fill:var(--beige)}
.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);color:var(--beige)}
.rw-nav{list-style:none;display:flex;gap:36px;margin:0;padding:0}
.rw-nav a:hover{text-decoration:underline;text-underline-offset:4px}
.rw-right{display:flex;align-items:center;gap:28px;justify-self:end}
.rw-cta{display:inline-block;background:var(--nude);color:#221a15;padding:12px 20px;border-radius:3px;font-weight:800;box-shadow:0 0 0 1px #ffffff25 inset}
@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}
}

/* ============ BOTONES ============ */
.btn{display:inline-block;padding:12px 18px;border-radius:8px;font-weight:800}
.btn.accent{background:var(--accent);color:var(--accent-txt)}
.btn.ghost{border:1px solid #222;color:#222;background:transparent}

/* ============ 1) HERO CLARO ============ */
.svc-hero{background:var(--ivory);color:var(--ink);padding:clamp(48px,10vw,110px) 0 28px}
.svc-title{margin:0;text-align:center;line-height:1.05;font-size:clamp(34px,6.2vw,72px);font-weight:800}

/* === TARJETAS (imagen fija + overlay gris y texto que desaparecen en hover) === */
.svc-card{
  /* La imagen va como fondo del propio bloque (no en pseudo-elemento) */
  background: var(--img) center/cover no-repeat;

  position: relative;
  display: flex;                   /* para centrar verticalmente el texto */
  align-items: center;             /* centrado vertical */
  justify-content: flex-start;     /* pegado a la izquierda */
  padding-left: clamp(16px, 4vw, 32px);
  border-radius: 16px;
  overflow: hidden;
  color: #fff;
  aspect-ratio: 16/9;              /* todas con el mismo alto */
}

/* Capa gris semitransparente (solo overlay) */
.svc-card::after{
  content: "";
  position: absolute; inset: 0; border-radius: inherit;
  background: rgba(60,60,60,.45);
  opacity: 1;
  transition: opacity .25s ease;
  pointer-events: none;            /* no bloquea el hover */
}

/* Texto */
.svc-card span{
  position: relative; z-index: 1;
  font-size: clamp(22px, 3vw, 44px);
  font-weight: 800;
  text-align: left;
  transition: opacity .25s ease;
}

/* Hover: se va el overlay y el texto; la imagen queda */
.svc-card:hover::after{ opacity: 0; }
.svc-card:hover span{   opacity: 0; }

/* Accesibilidad: al navegar con teclado, mantén visible el contenido */
.svc-card:focus-visible::after,
.svc-card:focus-visible span{ opacity: 1; }

/* ============ 2) CUADRÍCULA 2×2 (las cuatro secciones) ============ */
.svc-quad{background:var(--ivory);padding:18px 0 42px}
.svc-quad-grid{display:grid;gap:22px;grid-template-columns:repeat(2,1fr)}
@media (max-width:900px){ .svc-quad-grid{grid-template-columns:1fr} }

/* ============ 3) PRICING (claro) ============ */
.svc-pricing{background:var(--ivory);color:var(--ink);padding:clamp(48px,8vw,100px) 0}
.svc-pricing-title{text-align:center;margin:0 0 24px;font-size:clamp(30px,5.2vw,64px);font-weight:800}
.svc-price-grid{display:grid;gap:28px;grid-template-columns:1fr 1fr}
.svc-plan{background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:22px}
.svc-plan h3{margin:0 0 6px;font-size:clamp(20px,2.6vw,28px)}
.svc-price{margin:0 0 10px;font-size:22px}
.svc-price span{font-weight:800}
.svc-desc{color:var(--muted)}
@media (max-width:900px){ .svc-price-grid{grid-template-columns:1fr} }

/* ============ 4) FREE & TESTIMONIAL CLAROS ============ */
.svc-free{background:var(--ivory);color:var(--ink);text-align:center;padding:48px 0 64px}
.svc-free h3{margin:0 0 6px;font-size:clamp(28px,4vw,48px)}
.svc-free .tag{letter-spacing:.2em;margin:0 0 10px;color:var(--muted)}
.svc-free .mini{margin:0 0 16px;color:var(--muted)}
.svc-testimonial{background:var(--ivory);padding:22px 0 56px}
.svc-testi-grid{display:grid;gap:24px;grid-template-columns:1.2fr 1fr;align-items:center}
.svc-testi-grid .pic img{width:100%;border-radius:10px}
.quote-card{background:#fff;color:#111;border-radius:12px;padding:22px 24px;box-shadow:0 10px 40px #00000014}
.quote-card blockquote{margin:0 0 12px;font-size:clamp(18px,2.6vw,32px);line-height:1.2;font-weight:700}
.quote-card .meta{margin:0;color:#333}
@media (max-width:980px){ .svc-testi-grid{grid-template-columns:1fr} }

/* ============ 5) CONTACTO ============ */
.svc-contact{background:var(--ivory);color:var(--ink);text-align:center;padding:42px 0 72px}
.svc-contact .pre{margin:0 0 12px;color:var(--muted)}
.svc-contact h3{margin:0;font-size:clamp(26px,3.4vw,42px)}

/* ============ FOOTER ============ */
.footer{background:var(--olive);color:var(--beige)}
.footer .container{padding:20px 24px}
.footer p{margin:0;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; }
/* === Mostrar íconos sociales del header (sin tocar el modal) === */
.page-about .rw-left,
.page-services .rw-left{
  display:flex; align-items:center; gap:18px;
}

.page-about .rw-left .rw-social,
.page-services .rw-left .rw-social{
  display:inline-flex; width:26px; height:26px; opacity:.95;
}

.page-about .rw-left .rw-social svg,
.page-services .rw-left .rw-social svg{
  width:100%; height:100%;
  stroke: currentColor;      /* se ven las líneas con el color del header */
  stroke-width:1.6;
  fill:none;
}

.page-about .rw-left .rw-social svg [fill="currentColor"],
.page-services .rw-left .rw-social svg [fill="currentColor"]{
  fill: currentColor;        /* rellenos que usen currentColor también se ven */
}

/* === Asegura que el modal quede por encima del header (como en index) === */
.page-about .rw-header,
.page-services .rw-header{
  z-index: 100 !important;   /* evita que tape al modal */
}
/* ===== 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; }