/* =====================================================
   sections.css — Versión optimizada (2025-11-06)
   Proyecto: CONSULTOR DIGITAL
   Objetivo: Normalizar y reducir duplicidades sin perder funcionalidad
   Dependencias: style.css (tokens), components.css (header/hero/footer/ui)
   ===================================================== */

/* =====================================================
   0) NOTAS DE DISEÑO
   - Se eliminaron reglas duplicadas/antiguas (hero genérico, servicios antiguo,
     footer) para evitar solapamientos con components.css.
   - Se conservaron solo las secciones realmente usadas por index.html:
     Beneficios (enhanced), Servicios GRID, Casos/Resultados, Testimonios Azul,
     FAQ Azul, Sobre Azul, Frase Azul, Contacto Azul, CTA Clara.
   - Todo usa design tokens definidos en :root (style.css).
   ===================================================== */

/* =====================================================
   1) BENEFICIOS — Enhanced (vigente en index.html)
   ===================================================== */
.beneficios { background: var(--color-neutral-100); }

.beneficios.enhanced {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, #F7FAFC 0%, #E9F4F7 100%);
  padding-top: var(--space-8);
  padding-bottom: var(--space-8);
}
.beneficios.enhanced::before {
  content: "";
  position: absolute; top: -120px; left: 50%; transform: translateX(-50%);
  width: 900px; height: 900px;
  background: radial-gradient(circle at center, rgba(0,169,199,.10), transparent 75%);
  filter: blur(40px); z-index: 0;
}

.beneficios-header { position: relative; z-index: 1; margin-bottom: var(--space-6); }
.beneficios-header h2 {
  color: var(--color-brand-700);
  font-weight: var(--fw-bold);
  font-size: clamp(1.75rem, 2vw + 1rem, 2.25rem);
  margin-bottom: var(--space-3);
  letter-spacing: -.3px;
}
.beneficios-header .lead {
  color: var(--color-neutral-700);
  font-size: clamp(1rem, .5vw + .9rem, 1.125rem);
  max-width: 60ch; margin-inline: auto; margin-bottom: var(--space-7); line-height: 1.5;
}

.beneficios-grid {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-6); align-items: stretch;
}

.beneficio {
  display: flex; flex-direction: column;
  min-height: clamp(320px, 34vw, 380px);
  padding: var(--space-6);
  background: #fff; border: 1px solid rgba(11,59,96,.08);
  border-radius: var(--radius-xl);
  text-align: center;
  box-shadow: 0 8px 20px rgba(2,8,23,.05);
  transition: transform .3s var(--ease-standard), box-shadow .3s var(--ease-standard), border-color .3s var(--ease-standard);
}
.beneficio:hover { transform: translateY(-6px); box-shadow: 0 12px 28px rgba(0,169,199,.18); border-color: rgba(0,169,199,.25); }

.beneficio-top { display: flex; flex-direction: column; align-items: center; gap: .5rem; margin-bottom: var(--space-3); }

.icon-circle {
  width: 50px; height: 50px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 30% 30%, rgba(0,169,199,.14), rgba(201,229,111,.12));
  box-shadow: inset 0 0 8px rgba(0,169,199,.10);
  transition: transform .25s var(--ease-standard), box-shadow .25s var(--ease-standard);
}
.beneficio:hover .icon-circle { transform: scale(1.06); box-shadow: inset 0 0 12px rgba(0,169,199,.20); }

.beneficio-tag {
  display: inline-block; padding: .28rem .75rem; font-size: .88rem; font-weight: var(--fw-semibold);
  color: var(--color-brand-700); background: rgba(0,169,199,.12); border-radius: 9999px; letter-spacing: .2px; white-space: nowrap;
  transition: background .25s var(--ease-standard), transform .25s var(--ease-standard);
}
.beneficio:hover .beneficio-tag { background: rgba(201,229,111,.24); transform: translateY(-1px); }

.beneficio-title {
  font-family: var(--font-head); font-weight: var(--fw-semibold);
  font-size: clamp(1.12rem, .9vw + .88rem, 1.28rem);
  color: var(--color-brand-700); line-height: 1.22; margin: 0;
}
.beneficio-text { color: var(--color-neutral-700); font-size: 1rem; line-height: 1.55; max-width: 48ch; margin: var(--space-3) auto 0; }

@media (max-width: 992px) { .beneficios-header .lead { margin-bottom: var(--space-6); } .beneficio { min-height: auto; } }
@media (max-width: 768px) { .icon-circle { width: 46px; height: 46px; } .beneficio-title { font-size: clamp(1.06rem, 1vw + .84rem, 1.2rem); } }


/* =====================================================
   2) SERVICIOS — GRID definitivo (vigente en index.html)
   ===================================================== */
.servicios-grid { background: linear-gradient(180deg, #0B3B60 0%, #0D5C8C 100%); padding: var(--space-8) 0; }

.servicios-header { text-align: center; margin-bottom: var(--space-7); }
.servicios-header h2 { color: #fff; font-weight: var(--fw-bold); font-size: clamp(1.9rem, 2vw + 1rem, 2.3rem); margin-bottom: var(--space-3); }
.servicios-header .lead { color: rgba(255,255,255,.9); font-size: clamp(1rem, .6vw + .9rem, 1.125rem); max-width: 70ch; margin: 0 auto; line-height: 1.6; }

.servicios-lista { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-6); }
@media (max-width: 992px) { .servicios-lista { grid-template-columns: 1fr; } }

.servicio-block {
  background: #fff; border: 1px solid rgba(11,59,96,.08); border-radius: var(--radius-lg);
  padding: var(--space-6); box-shadow: var(--shadow-card);
  transition: transform .35s var(--ease-standard), box-shadow .35s var(--ease-standard), border-color .35s var(--ease-standard), background .35s var(--ease-standard);
}
.servicio-block:hover { transform: translateY(-6px); box-shadow: 0 12px 28px rgba(0,169,199,.25); border-color: rgba(0,169,199,.35); background: linear-gradient(180deg, #FFFFFF 0%, #F4F9FB 100%); }

.servicio-header { display: flex; align-items: center; gap: var(--space-4); margin-bottom: var(--space-4); }
.servicio-icon {
  width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 30% 30%, rgba(0,169,199,.14), rgba(201,229,111,.12)); color: var(--color-accent-600);
  transition: transform .35s var(--ease-standard), box-shadow .35s var(--ease-standard);
}
.servicio-block:hover .servicio-icon { transform: scale(1.08); box-shadow: 0 0 12px rgba(0,169,199,.4); }
.servicio-icon svg { width: 20px; height: 20px; stroke: currentColor; }

.servicio-header h3 { font-size: clamp(1.15rem, .8vw + .9rem, 1.25rem); font-weight: var(--fw-semibold); color: var(--color-brand-700); margin: 0; }

.servicio-items { list-style: none; margin: 0 0 var(--space-4); padding: 0; }
.servicio-items li { color: var(--color-text-muted); font-size: 1rem; line-height: 1.55; margin-bottom: .35rem; position: relative; padding-left: 1.2rem; }
.servicio-items li::before { content: "•"; color: var(--color-neutral-300); position: absolute; left: 0; }

.servicio-extra { font-size: .95rem; line-height: 1.5; color: var(--color-brand-700); font-weight: var(--fw-semibold); }
.servicio-extra .tilde { color: var(--color-green-500); margin-right: .4rem; font-weight: bold; }

.servicios-contexto { margin-top: var(--space-8); text-align: center; }
.servicios-contexto p { color: rgba(255,255,255,.9); font-size: 1rem; max-width: 75ch; margin: 0 auto var(--space-5); line-height: 1.6; }
.servicios-contexto strong { font-weight: var(--fw-semibold); }


/* =====================================================
   3) CASOS Y RESULTADOS — Versión definitiva
   ===================================================== */
.casos-resultados { background: linear-gradient(180deg, #EDF5F9 0%, #FFFFFF 100%); padding: var(--space-8) 0; color: var(--color-text-main); }

.casos-header { text-align: center; margin-bottom: var(--space-6); }
.casos-header h2 { color: var(--color-brand-700); font-weight: var(--fw-bold); font-size: clamp(1.8rem, 1.9vw + 1rem, 2.2rem); margin-bottom: var(--space-3); }
.casos-header .lead { color: var(--color-neutral-700); font-size: clamp(.95rem, .6vw + .8rem, 1.05rem); max-width: 70ch; margin: 0 auto; line-height: 1.6; }

.casos-lista { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: var(--space-7); align-items: stretch; }

.caso-wrapper { position: relative; padding-top: 1.5rem; }
.caso-codigo {
  position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%);
  border: 1px solid var(--color-accent-600); color: var(--color-accent-600);
  font-size: .8rem; font-weight: var(--fw-semibold); padding: .25rem .75rem; border-radius: 999px;
  text-transform: uppercase; letter-spacing: .4px; background: #fff; box-shadow: 0 2px 6px rgba(0,169,199,.15); white-space: nowrap; z-index: 2;
}
@media (max-width: 768px) {
  .caso-codigo { font-size: .7rem; padding: .2rem .6rem; top: .3rem; transform: translate(-50%, -40%); box-shadow: none; }
}

.caso-block {
  display: flex; flex-direction: column; height: 100%; overflow: hidden;
  background: #fff; border: 1px solid rgba(11,59,96,.15); border-radius: var(--radius-lg);
  box-shadow: 0 4px 16px rgba(0,169,199,.08);
  transition: transform .35s var(--ease-standard), box-shadow .35s var(--ease-standard), border-color .35s var(--ease-standard);
}
.caso-block:hover { transform: translateY(-6px); box-shadow: 0 12px 26px rgba(0,169,199,.2); border-color: rgba(0,169,199,.25); }

.caso-header { padding: var(--space-5) var(--space-6) var(--space-3); border-bottom: 1px solid rgba(0,169,199,.1); background: rgba(0,169,199,.07); }
.caso-header h3 { font-size: clamp(1.05rem, .8vw + .85rem, 1.25rem); font-weight: var(--fw-semibold); color: var(--color-brand-700); margin: 0; }

.caso-detalle { flex-grow: 1; padding: var(--space-4) var(--space-6); }
.caso-detalle p { margin-bottom: .45rem; line-height: 1.55; color: var(--color-text-muted); }
.caso-detalle strong { color: var(--color-brand-700); font-weight: var(--fw-semibold); }
.caso-detalle a { color: var(--color-accent-600); text-decoration: none; font-weight: var(--fw-semibold); transition: color .3s var(--ease-standard); }
.caso-detalle a:hover { color: var(--color-green-500); text-decoration: underline; }

.caso-check { position: absolute; bottom: -1.5rem; right: -1rem; font-size: 5rem; z-index: 2; }
.caso-check::before { content: "✓"; color: var(--color-green-500); font-weight: 700; text-shadow: 0 2px 6px rgba(0,0,0,.1); }

.casos-cta { text-align: center; margin-top: var(--space-8); }
.casos-cta .cta-text { font-size: 1.1rem; font-weight: var(--fw-semibold); color: var(--color-brand-700); margin-bottom: var(--space-3); }
.casos-cta .btn-green { font-size: 1rem; padding: .9rem 1.8rem; transition: transform .3s var(--ease-standard), box-shadow .3s var(--ease-standard); }
.casos-cta .btn-green:hover { transform: translateY(-3px); box-shadow: 0 8px 18px rgba(0,169,199,.2); }


/* =====================================================
   4) TESTIMONIOS — Fondo azul + cards claras
   ===================================================== */
.testimonios-azul { background: linear-gradient(180deg, #0B3B60 0%, #0D5C8C 100%); color: #fff; position: relative; padding-top: var(--space-8); padding-bottom: var(--space-8); }
.testimonios-azul .testimonios-header h2 { color: #fff; }
.testimonios-azul .testimonios-header .lead { color: rgba(255,255,255,.9); max-width: 68ch; margin-inline: auto; line-height: 1.6; }

.testimonios-amplio { display: grid; grid-template-columns: repeat(auto-fit, minmax(460px, 1fr)); gap: var(--space-6); align-items: stretch; }

.testimonios-azul .card {
  display: flex; flex-direction: column; justify-content: space-between; min-height: 200px;
  background: #F8FBFD; border: 1px solid rgba(255,255,255,.2); border-radius: var(--radius-lg);
  color: var(--color-brand-700); padding: var(--space-6);
  box-shadow: 0 6px 18px rgba(0,0,0,.12);
  font-style: italic; transition: transform .3s var(--ease-standard), box-shadow .3s var(--ease-standard);
}
.testimonios-azul .card:hover { transform: translateY(-4px); box-shadow: 0 10px 24px rgba(0,0,0,.25); }
.testimonios-azul .card p { line-height: 1.6; color: var(--color-brand-700); }

.testimonios-azul .author {
  margin-top: var(--space-5); color: var(--color-accent-600); font-weight: var(--fw-bold); font-style: normal; text-align: right;
  border-top: 1px solid rgba(0,169,199,.25); padding-top: var(--space-3); margin-top: auto;
}

.testimonios-cta { margin-top: var(--space-8); text-align: center; }
.testimonios-cta .cta-text { font-size: 1.1rem; font-weight: var(--fw-semibold); color: var(--color-neutral-200); margin-bottom: var(--space-3); }

@media (max-width: 768px) { .testimonios-amplio { grid-template-columns: 1fr; } }


/* =====================================================
   5) FAQ — Azul clara (acordeón)
   ===================================================== */
.faq-azul { background: linear-gradient(180deg, #E9F4F7 0%, #F7FAFC 100%); position: relative; padding-top: var(--space-8); padding-bottom: var(--space-8); }

.faq-header h2 { color: var(--color-brand-700); font-weight: var(--fw-bold); }
.faq-header .lead { color: var(--color-neutral-700); max-width: 68ch; margin-inline: auto; margin-bottom: var(--space-7); line-height: 1.6; }

.faq-list { max-width: 900px; margin-inline: auto; display: flex; flex-direction: column; gap: var(--space-4); }

.faq-item {
  background: #fff; border: 1px solid rgba(11,59,96,.12); border-radius: var(--radius-lg);
  box-shadow: 0 4px 12px rgba(0,169,199,.08);
  overflow: hidden; transition: box-shadow .3s var(--ease-standard), border-color .3s var(--ease-standard);
}
.faq-item:hover { box-shadow: 0 8px 18px rgba(0,169,199,.18); border-color: rgba(0,169,199,.25); }

.faq-question {
  width: 100%; background: transparent; border: none; padding: var(--space-5);
  font-family: var(--font-head); font-weight: var(--fw-semibold); font-size: 1.05rem; color: var(--color-brand-700);
  text-align: left; display: flex; justify-content: space-between; align-items: center; cursor: pointer; transition: color .25s var(--ease-standard);
}
.faq-question:hover { color: var(--color-accent-600); }

.faq-answer { padding: 0 var(--space-5) var(--space-5); color: var(--color-text-muted); line-height: 1.6; font-size: 1rem; display: none; }
.faq-item.active .faq-answer { display: block; }

.faq-question span { color: var(--color-accent-600); transition: transform .3s var(--ease-standard); }
.faq-item.active .faq-question span { transform: rotate(180deg); }

@media (max-width: 768px) {
  .faq-question { font-size: 1rem; padding: var(--space-4); }
  .faq-answer { padding: 0 var(--space-4) var(--space-4); }
}


/* =====================================================
   6) SOBRE CONSULTOR DIGITAL — v3
   ===================================================== */
.sobre-azul { background: linear-gradient(180deg, #F7FAFC 0%, #E9F4F7 100%); padding-top: var(--space-8); padding-bottom: var(--space-8); }

.sobre-header h2 { color: var(--color-brand-700); font-weight: var(--fw-bold); }
.sobre-header .lead { color: var(--color-neutral-700); max-width: 60ch; margin-inline: auto; margin-bottom: var(--space-7); line-height: 1.6; }

.sobre-card {
  background: #fff; border: 1px solid rgba(11,59,96,.1); border-radius: var(--radius-lg);
  box-shadow: 0 8px 20px rgba(0,169,199,.08);
  padding: var(--space-8) var(--space-7);
  color: var(--color-brand-700); font-size: var(--fs-body); line-height: 1.65; max-width: 900px; margin-inline: auto;
}
.sobre-card p + p { margin-top: var(--space-4); }

.sobre-forma-trabajo { margin: var(--space-6) 0; }
.sobre-forma-trabajo h3 { color: var(--color-accent-600); font-size: clamp(1.05rem, .6vw + .9rem, 1.15rem); font-weight: var(--fw-semibold); margin-bottom: var(--space-4); text-align: left; }
.sobre-forma-trabajo ul { list-style: none; padding: 0; margin: 0; }
.sobre-forma-trabajo li { position: relative; padding-left: 1.5rem; margin-bottom: .65rem; line-height: 1.55; font-size: .97rem; }
.sobre-forma-trabajo li::before { content: "✔"; position: absolute; left: 0; top: .1rem; color: var(--color-green-500); font-weight: bold; }

.sobre-cierre { margin-top: var(--space-6); font-weight: var(--fw-semibold); color: var(--color-brand-700); text-align: center; line-height: 1.6; max-width: 70ch; margin-inline: auto; }

.sobre-cta { margin-top: var(--space-8); text-align: center; }
.sobre-cta .cta-text { font-size: 1.1rem; font-weight: var(--fw-semibold); color: var(--color-brand-700); margin-bottom: var(--space-3); }

@media (max-width: 992px) { .sobre-card { padding: var(--space-7) var(--space-5); max-width: 100%; } .sobre-cierre { max-width: 100%; } }


/* =====================================================
   7) FRASE INSPIRADORA — vFinal
   ===================================================== */
.frase-azul { background: linear-gradient(180deg, #0B3B60 0%, #0D5C8C 100%); color: #fff; text-align: center; padding-top: var(--space-9); padding-bottom: var(--space-9); position: relative; overflow: hidden; }
.frase-azul::before { content: ""; position: absolute; top: -200px; left: 50%; transform: translateX(-50%); width: 900px; height: 900px; background: radial-gradient(circle at center, rgba(0,169,199,.18), transparent 75%); filter: blur(60px); z-index: 0; opacity: .4; }

.frase-destacada { position: relative; z-index: 1; max-width: 900px; margin: 0 auto; font-family: var(--font-head); font-weight: var(--fw-semibold); line-height: 1.5; }
.frase-destacada p { font-size: clamp(1.5rem, 2vw + 1rem, 2.2rem); color: #fff; margin: 0 auto var(--space-4); text-shadow: 0 2px 12px rgba(0,0,0,.3); letter-spacing: -.2px; }
.frase-destacada footer { font-size: 1rem; color: rgba(255,255,255,.75); font-style: normal; margin-top: var(--space-3); letter-spacing: .5px; }

@media (max-width: 768px) { .frase-destacada p { font-size: clamp(1.25rem, 1.6vw + 1rem, 1.6rem); padding: 0 var(--space-3); } }


/* =====================================================
   8) CONTACTO — vFinal con fondo azul
   ===================================================== */
.contacto-azul { position: relative; background: linear-gradient(180deg, #0B3B60 0%, #0D5C8C 100%); color: #fff; padding: var(--space-8) 0; overflow: hidden; z-index: 0; }
.contacto-azul::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 60% 20%, rgba(0,169,199,.15), transparent 70%); opacity: .5; pointer-events: none; z-index: -1; }

.contacto-header { text-align: center; margin-bottom: var(--space-7); }
.contacto-header h2 { color: #fff; font-weight: var(--fw-bold); }
.contacto-header .lead { color: rgba(255,255,255,.9); max-width: 60ch; margin-inline: auto; line-height: 1.6; }

/* Card del formulario sobre fondo azul */
.contact-form {
  background: var(--color-neutral-100); color: var(--color-brand-700);
  border: 1px solid rgba(11,59,96,.12); border-radius: var(--radius-lg);
  box-shadow: 0 6px 18px rgba(2,8,23,.12);
  padding: var(--space-7); max-width: 720px; margin-inline: auto; position: relative; z-index: 1;
}
.contact-form label { display: block; font-weight: var(--fw-semibold); margin-bottom: var(--space-2); }
.contact-form input, .contact-form textarea {
  width: 100%; border: 1px solid var(--color-neutral-200); border-radius: var(--radius-md);
  padding: .75rem 1rem; font-size: 1rem; color: var(--color-brand-700); background: #fff; transition: border-color .3s var(--ease-standard);
}
.contact-form textarea { resize: none; min-height: 140px; }
.contact-form input:focus, .contact-form textarea:focus { outline: none; border-color: var(--color-accent-600); box-shadow: 0 0 0 3px color-mix(in oklab, var(--color-accent-600) 30%, white); }

/* RGPD */
.rgpd { display: grid; grid-template-columns: auto 1fr; align-items: start; gap: .6rem; margin-top: var(--space-4); font-size: .95rem; color: var(--color-neutral-700); line-height: 1.4; }
.rgpd input[type="checkbox"] { margin-top: .25rem; }
.rgpd a { color: var(--color-accent-600); text-decoration: underline; }

/* Acciones + ayuda */
.actions { margin-top: var(--space-6); text-align: center; }
.form-help-after { text-align: center; font-size: .95rem; color: var(--color-neutral-700); margin-top: var(--space-4); }

/* Contacto directo y redes */
.contacto-directo { text-align: center; margin-top: var(--space-8); }
.contacto-directo-text { color: rgba(255,255,255,.9); margin-bottom: var(--space-4); }
.contacto-botones { display: flex; justify-content: center; flex-wrap: wrap; gap: var(--space-4); }
.btn-social { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 50%; color: #fff; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2); box-shadow: 0 4px 12px rgba(0,0,0,.25); transition: transform .3s var(--ease-standard), background .3s var(--ease-standard); }
.btn-social svg { width: 22px; height: 22px; }
.btn-social:hover { transform: translateY(-2px); background: rgba(255,255,255,.25); }

@media (max-width: 768px) { .contact-form { padding: var(--space-6); } .rgpd { grid-template-columns: 1fr; align-items: flex-start; } }


/* =====================================================
   9) CTA FINAL — Clara
   ===================================================== */
.cta-clara { background: linear-gradient(180deg, #F7FAFC 0%, #FFFFFF 100%); border-top: 1px solid var(--color-neutral-200); padding: var(--space-8) 0; text-align: center; }
.cta-clara h2 { color: var(--color-brand-700); font-weight: var(--fw-bold); margin-bottom: var(--space-4); }
.cta-clara .lead { color: var(--color-neutral-700); max-width: 65ch; margin-inline: auto; margin-bottom: var(--space-6); line-height: 1.6; font-size: clamp(1rem, .6vw + .9rem, 1.125rem); }
.cta-clara .btn-green { font-size: 1rem; padding: .9rem 1.8rem; border-radius: var(--radius-lg); transition: transform .3s var(--ease-standard), box-shadow .3s var(--ease-standard); }
.cta-clara .btn-green:hover { transform: translateY(-3px); box-shadow: 0 8px 18px rgba(0,169,199,.2); }
@media (max-width: 768px) { .cta-clara { padding: var(--space-7) 0; } .cta-clara .lead { margin-bottom: var(--space-5); } }


/* =====================================================
   10) LIMPIEZA — Reglas eliminadas de la versión previa
   -----------------------------------------------------
   - .hero (genérico) → reemplazado por .hero-dinamico en components.css
   - .servicios (antiguo) y .servicios.enhanced (antiguo) → unificado en GRID
   - .beneficios/testimonios/casos base duplicados → se conservan versiones activas
   - .footer → se elimina aquí para evitar conflicto con components.css
   ===================================================== */