/* ==========================================================================
   ARROBA CONSULTORÍA — HOJA DE ESTILOS PRINCIPAL
   ==========================================================================
   Cómo está organizado este archivo:
   1. Variables de marca (colores, tipografía) — EDITA AQUÍ para cambiar
      colores o fuente en todo el sitio de una sola vez.
   2. Reset y base
   3. Utilidades (contenedor, botones, etiquetas)
   4. Header / navegación
   5. Botón flotante de WhatsApp
   6. Hero
   7. Secciones compartidas (Sobre nosotros, Servicios, Por qué elegirnos,
      Proceso, Testimonios, CTA)
   8. Formulario de contacto
   9. Footer
   10. Animaciones de aparición (scroll reveal)
   11. Responsive (media queries al final de cada bloque y aquí al final)
   ========================================================================== */

/* -------------------- 1. VARIABLES DE MARCA -------------------- */
:root {
  /* Colores tomados del logotipo de Arroba Consultoría.
     Si tu manual de marca define otros tonos exactos, cámbialos aquí. */
  --mauve: #b4756f;         /* color principal (icono @ y texto script) */
  --mauve-dark: #8f5a55;    /* variante oscura: hover, texto sobre claro */
  --mauve-darker: #6f4440;  /* variante aún más oscura: texto de alto contraste */
  --pink: #eb93c5;          /* rosa de acento (formas del logo) */
  --pink-soft: #fbc4e1;     /* rosa suave (fondos, superficies) */
  --pink-wash: #fdf1f6;     /* rosa casi blanco (fondos alternos de sección) */

  --white: #ffffff;
  --ink: #33262a;           /* texto principal — no negro puro, con tinte cálido */
  --ink-soft: #6f5d5b;      /* texto secundario */
  --line: rgba(51, 38, 42, 0.12);
  --line-strong: rgba(51, 38, 42, 0.22);

  --shadow-sm: 0 1px 3px rgba(51, 38, 42, 0.08);
  --shadow-md: 0 8px 30px rgba(51, 38, 42, 0.10);
  --shadow-lg: 0 20px 60px rgba(51, 38, 42, 0.14);

  /* Tipografía: Inter en todo el sitio, como se solicitó */
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;

  --radius: 14px;
  --radius-sm: 8px;
  --header-h: 84px;
  --header-h-scrolled: 68px;

  --container: 1180px;
}

/* -------------------- 2. RESET Y BASE -------------------- */
* { box-sizing: border-box; }
html {
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

body {
  margin: 0;
  font-family: var(--font);
  color: var(--ink);
  background: var(--white);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

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

h1, h2, h3, h4 {
  font-family: var(--font);
  font-weight: 700;
  line-height: 1.15;
  margin: 0;
  text-wrap: balance;
  letter-spacing: -0.01em;
}

p { margin: 0; }

/* Cada página marca en <body> a qué sección de nav pertenece con
   data-page="inicio|nosotros|servicios|contacto" — ver script.js */

/* -------------------- 3. UTILIDADES -------------------- */
.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 32px;
}
@media (max-width: 640px) {
  .container { padding: 0 20px; }
}

.eyebrow {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--mauve-dark);
  margin-bottom: 14px;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-family: var(--font);
  font-weight: 600;
  font-size: 0.96rem;
  padding: 15px 28px;
  border-radius: 999px;
  border: 1.5px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: transform 0.15s ease, background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
}
.btn:active { transform: translateY(1px); }
.btn svg { width: 18px; height: 18px; flex-shrink: 0; }

.btn-primary {
  background: var(--mauve);
  color: var(--white);
  box-shadow: var(--shadow-sm);
}
.btn-primary:hover { background: var(--mauve-dark); box-shadow: var(--shadow-md); }

.btn-ghost {
  background: transparent;
  border-color: var(--line-strong);
  color: var(--ink);
}
.btn-ghost:hover { border-color: var(--mauve); color: var(--mauve-dark); }

.btn-whatsapp {
  background: #25D366;
  color: var(--white);
}
.btn-whatsapp:hover { background: #1fb857; }

.btn-block { width: 100%; }

.section {
  padding: 100px 0;
}
.section + .section { border-top: 1px solid var(--line); }
.section-alt { background: var(--pink-wash); }

.section-head {
  max-width: 640px;
  margin: 0 auto 60px;
  text-align: center;
}
.section-head h2 {
  font-size: clamp(1.9rem, 3.6vw, 2.6rem);
  margin-bottom: 16px;
}
.section-head p {
  color: var(--ink-soft);
  font-size: 1.05rem;
}
.section-head.align-left {
  text-align: left;
  margin: 0 0 56px;
}

/* -------------------- 4. HEADER / NAVEGACIÓN -------------------- */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  height: var(--header-h);
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  transition: height 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
/* Efecto al hacer scroll: el header se encoge y gana sombra (ver script.js) */
.site-header.is-scrolled {
  height: var(--header-h-scrolled);
  border-bottom-color: var(--line);
  box-shadow: var(--shadow-sm);
}

.nav {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
}
.brand img { height: 34px; width: auto; transition: height 0.25s ease; }
.site-header.is-scrolled .brand img { height: 28px; }

.nav-links {
  display: flex;
  align-items: center;
  gap: 36px;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.95rem;
  font-weight: 500;
}
.nav-links a {
  color: var(--ink-soft);
  position: relative;
  padding: 6px 0;
  transition: color 0.15s ease;
}
.nav-links a:hover { color: var(--ink); }
.nav-links a.is-active { color: var(--mauve-dark); }
.nav-links a.is-active::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: var(--mauve);
  border-radius: 2px;
}

.nav-right { display: flex; align-items: center; gap: 18px; }

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 0;
}
.nav-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--ink);
  margin: 0 auto;
  transition: transform 0.25s ease, opacity 0.25s ease;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 900px) {
  .nav-toggle { display: flex; }
  .nav-links {
    position: fixed;
    top: var(--header-h);
    left: 0; right: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    background: var(--white);
    border-bottom: 1px solid var(--line);
    padding: 12px 24px 20px;
    box-shadow: var(--shadow-md);
    transform: translateY(-8px);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.2s ease, opacity 0.2s ease;
  }
  .nav-links.is-open {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }
  .nav-links a { display: block; padding: 12px 0; width: 100%; }
  .nav-right .btn-primary { padding: 10px 18px; font-size: 0.88rem; }
}

/* -------------------- 5. BOTÓN FLOTANTE DE WHATSAPP -------------------- */
.whatsapp-float {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 90;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: #25D366;
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 30px rgba(37, 211, 102, 0.45);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.whatsapp-float:hover { transform: scale(1.07); box-shadow: 0 14px 34px rgba(37, 211, 102, 0.55); }
.whatsapp-float svg { width: 28px; height: 28px; }

/* -------------------- 6. HERO -------------------- */
.hero {
  position: relative;
  overflow: hidden;
  padding: calc(var(--header-h) + 88px) 0 96px;
  background: var(--white);
}
.hero-shape {
  position: absolute;
  border-radius: 50%;
  filter: blur(2px);
  opacity: 0.55;
  pointer-events: none;
}
.hero-shape--1 { width: 420px; height: 420px; background: var(--pink-soft); top: -140px; right: -90px; }
.hero-shape--2 { width: 260px; height: 260px; background: var(--pink); top: 160px; right: 220px; opacity: 0.35; }

.hero-inner {
  position: relative;
  max-width: 700px;
}
.hero h1 {
  font-size: clamp(2.3rem, 5vw, 3.6rem);
  margin-bottom: 24px;
  color: var(--ink);
}
.hero p.lead {
  font-size: 1.15rem;
  color: var(--ink-soft);
  max-width: 540px;
  margin-bottom: 38px;
}
.hero-ctas { display: flex; gap: 14px; flex-wrap: wrap; }

/* Franja de confianza corta debajo del hero (credencial profesional) */
.trust-strip {
  border-top: 1px solid var(--line);
  padding: 26px 0;
}
.trust-strip .container {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  color: var(--ink-soft);
  font-size: 0.92rem;
}
.trust-strip strong { color: var(--ink); font-weight: 600; }
.trust-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--line-strong); flex-shrink: 0; }

/* -------------------- 7. SOBRE NOSOTROS -------------------- */
.about-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 72px;
  align-items: center;
}
@media (max-width: 860px) {
  .about-grid { grid-template-columns: 1fr; gap: 40px; }
}
.about-media {
  position: relative;
}
.about-media img {
  width: 100%;
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
}
.about-copy p { color: var(--ink-soft); font-size: 1.02rem; max-width: 52ch; }
.about-copy p + p { margin-top: 16px; }
.about-copy .btn { margin-top: 28px; }

.credential-card {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 28px;
  padding: 14px 18px;
  background: var(--pink-wash);
  border-radius: var(--radius-sm);
  font-size: 0.88rem;
  color: var(--ink-soft);
}
.credential-card strong { display: block; color: var(--ink); font-size: 0.95rem; }

.values-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-top: 64px;
}
@media (max-width: 720px) { .values-row { grid-template-columns: 1fr; } }
.value-block { border-left: 2px solid var(--mauve); padding-left: 18px; }
.value-block h3 { font-size: 1.05rem; margin-bottom: 8px; }
.value-block p { color: var(--ink-soft); font-size: 0.93rem; }

/* -------------------- SERVICIOS -------------------- */
.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
@media (max-width: 980px) { .services-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .services-grid { grid-template-columns: 1fr; } }

.service-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.service-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: transparent;
}
.service-icon {
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--pink-wash);
  color: var(--mauve-dark);
  display: flex; align-items: center; justify-content: center;
}
.service-icon svg { width: 22px; height: 22px; }
.service-card h3 { font-size: 1.12rem; }
.service-card p { color: var(--ink-soft); font-size: 0.94rem; flex-grow: 1; }
.service-card .card-link {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--mauve-dark);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
}
.service-card .card-link svg { width: 14px; height: 14px; transition: transform 0.15s ease; }
.service-card .card-link:hover svg { transform: translateX(3px); }

/* Página de servicios: detalle expandido */
.service-detail {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 24px;
  padding: 44px 0;
}
.service-detail + .service-detail { border-top: 1px solid var(--line); }
.service-detail .service-icon { width: 56px; height: 56px; }
.service-detail .service-icon svg { width: 26px; height: 26px; }
.service-detail h3 { font-size: 1.3rem; margin-bottom: 10px; }
.service-detail p { color: var(--ink-soft); max-width: 62ch; }
.service-detail ul { margin: 16px 0 0; padding-left: 20px; color: var(--ink-soft); font-size: 0.95rem; }
.service-detail li { margin-bottom: 6px; }
@media (max-width: 560px) {
  .service-detail { grid-template-columns: 1fr; }
}

/* -------------------- POR QUÉ ELEGIRNOS -------------------- */
.why-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
}
@media (max-width: 980px) { .why-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .why-grid { grid-template-columns: 1fr; } }

.why-block { text-align: left; }
.why-icon {
  width: 52px; height: 52px;
  border-radius: 50%;
  border: 1.5px solid var(--mauve);
  color: var(--mauve-dark);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 18px;
}
.why-icon svg { width: 24px; height: 24px; }
.why-block h3 { font-size: 1.05rem; margin-bottom: 8px; }
.why-block p { color: var(--ink-soft); font-size: 0.93rem; }

/* -------------------- PROCESO DE TRABAJO -------------------- */
.process-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
  counter-reset: step;
}
@media (max-width: 900px) { .process-list { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .process-list { grid-template-columns: 1fr; } }

.process-step {
  position: relative;
  padding-top: 20px;
  border-top: 2px solid var(--mauve);
}
.process-num {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--mauve-dark);
  letter-spacing: 0.05em;
  display: block;
  margin-bottom: 10px;
}
.process-step h3 { font-size: 1.08rem; margin-bottom: 8px; }
.process-step p { color: var(--ink-soft); font-size: 0.93rem; }

/* -------------------- TESTIMONIOS -------------------- */
.testimonial-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
@media (max-width: 900px) { .testimonial-grid { grid-template-columns: 1fr; } }

.testimonial-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.stars { display: flex; gap: 4px; color: var(--mauve); }
.stars svg { width: 16px; height: 16px; }
.testimonial-card p.quote {
  color: var(--ink);
  font-size: 0.98rem;
  line-height: 1.6;
  flex-grow: 1;
}
.testimonial-attr { font-size: 0.86rem; color: var(--ink-soft); font-weight: 600; }
.testimonial-note {
  text-align: center;
  color: var(--ink-soft);
  font-size: 0.82rem;
  margin-top: 36px;
}

/* -------------------- CTA WHATSAPP -------------------- */
.cta-band {
  background: var(--mauve);
  color: var(--white);
  text-align: center;
  padding: 84px 0;
}
.cta-band h2 { color: var(--white); font-size: clamp(1.8rem, 3.6vw, 2.5rem); margin-bottom: 18px; }
.cta-band p { color: rgba(255,255,255,0.86); max-width: 520px; margin: 0 auto 34px; font-size: 1.05rem; }
.cta-band .btn-whatsapp {
  font-size: 1.05rem;
  padding: 18px 36px;
  box-shadow: 0 14px 34px rgba(0,0,0,0.18);
}

/* -------------------- 8. FORMULARIO DE CONTACTO -------------------- */
.contact-grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 64px;
}
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; gap: 44px; } }

.contact-info p { color: var(--ink-soft); max-width: 40ch; margin: 16px 0 32px; }
.info-list { display: flex; flex-direction: column; gap: 20px; }
.info-item { display: flex; gap: 14px; align-items: flex-start; }
.info-item .service-icon { width: 40px; height: 40px; flex-shrink: 0; }
.info-item .service-icon svg { width: 18px; height: 18px; }
.info-item strong { display: block; font-size: 0.94rem; margin-bottom: 2px; }
.info-item span, .info-item a { color: var(--ink-soft); font-size: 0.92rem; }
.info-item a:hover { color: var(--mauve-dark); }

.social-row { display: flex; gap: 12px; margin-top: 32px; }
.social-icon {
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  display: flex; align-items: center; justify-content: center;
  color: var(--ink-soft);
  transition: all 0.15s ease;
}
.social-icon:hover { background: var(--mauve); border-color: var(--mauve); color: var(--white); }
.social-icon svg { width: 17px; height: 17px; }

form.contact-form { display: flex; flex-direction: column; gap: 20px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 520px) { .field-row { grid-template-columns: 1fr; } }

.field { display: flex; flex-direction: column; gap: 8px; }
.field label {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--ink);
}
.field .req { color: var(--mauve); }
.field input,
.field select,
.field textarea {
  width: 100%;
  background: var(--white);
  border: 1.5px solid var(--line-strong);
  border-radius: var(--radius-sm);
  padding: 13px 15px;
  font-family: var(--font);
  font-size: 0.96rem;
  color: var(--ink);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--mauve);
  box-shadow: 0 0 0 3px rgba(180, 117, 111, 0.15);
}
.field textarea { resize: vertical; min-height: 130px; }
.field.has-error input,
.field.has-error select,
.field.has-error textarea {
  border-color: #c0392b;
}
.field-error {
  font-size: 0.8rem;
  color: #c0392b;
  display: none;
}
.field.has-error .field-error { display: block; }

.form-status {
  display: none;
  padding: 14px 16px;
  border-radius: var(--radius-sm);
  font-size: 0.92rem;
}
.form-status.is-success {
  display: block;
  background: #e7f6ec;
  color: #1e7a3d;
}
.form-status.is-error {
  display: block;
  background: #fbe9e7;
  color: #c0392b;
}
.form-note { font-size: 0.82rem; color: var(--ink-soft); }

/* -------------------- 9. FOOTER -------------------- */
.site-footer {
  background: var(--pink-wash);
  padding: 72px 0 28px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 48px;
  border-bottom: 1px solid var(--line);
}
@media (max-width: 860px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 36px 24px; }
}
@media (max-width: 520px) {
  .footer-grid { grid-template-columns: 1fr; }
}

.footer-brand img { height: 30px; margin-bottom: 14px; }
.footer-brand p { color: var(--ink-soft); font-size: 0.9rem; max-width: 30ch; margin-bottom: 20px; }

.footer-col h4 {
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink);
  margin-bottom: 18px;
}
.footer-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.footer-col a, .footer-col span { color: var(--ink-soft); font-size: 0.92rem; }
.footer-col a:hover { color: var(--mauve-dark); }

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  padding-top: 24px;
  font-size: 0.84rem;
  color: var(--ink-soft);
}
.footer-bottom a:hover { color: var(--mauve-dark); }
.footer-legal { display: flex; gap: 20px; flex-wrap: wrap; }

/* -------------------- AVISO DE PRIVACIDAD (contacto.html) -------------------- */
.privacy-block {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 40px;
  margin-top: 8px;
}
.privacy-block h3 { font-size: 1.15rem; margin-bottom: 14px; }
.privacy-block p { color: var(--ink-soft); font-size: 0.92rem; margin-bottom: 12px; }
.privacy-block p:last-child { margin-bottom: 0; }

/* -------------------- 10. SCROLL REVEAL -------------------- */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
/* Retraso escalonado para grupos de tarjetas */
.reveal-group > * { transition-delay: calc(var(--i, 0) * 70ms); }

/* -------------------- PÁGINA INTERIOR: encabezado simple -------------------- */
.page-hero {
  padding: calc(var(--header-h) + 64px) 0 60px;
  background: var(--pink-wash);
  text-align: center;
}
.page-hero h1 { font-size: clamp(2rem, 4.2vw, 2.8rem); margin-bottom: 14px; }
.page-hero p { color: var(--ink-soft); max-width: 560px; margin: 0 auto; font-size: 1.05rem; }