/* ══════════════════════════════════════════════════════════════════
   CONTACTO · Yeapdata® — contacto.css  (Light Edition)
   Coherencia visual total con us.css / modelo.css
   Filosofía:
     • Fondos: blanco / off-white / bg sutiles — NADA oscuro
     • Form card: fondo blanco con sombra, campos legibles sobre claro
     • Tipografía grande y limpia en el formulario
     • Colores de marca solo como acento
══════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,400&display=swap');

:root {
  /* Marca */
  --pink:          #E61667;
  --pink-hover:    #FF1E73;
  --pink-soft:     rgba(230,22,103,.07);
  --pink-mid:      rgba(230,22,103,.14);
  --pink-glow:     rgba(230,22,103,.28);
  --teal:          #6DC0AA;
  --teal-soft:     rgba(109,192,170,.1);
  --indigo:        #4B509C;
  --indigo-soft:   rgba(75,80,156,.08);

  /* Fondos claros */
  --bg-0:          #FFFFFF;
  --bg-1:          #F8F9FC;
  --bg-2:          #F2F4FA;
  --bg-3:          #ECEEF7;
  --bg-warm:       #FAFAF8;

  /* Texto */
  --t1:            #0B0A18;
  --t2:            #4A4968;
  --t3:            #8A89A8;
  --t4:            #BBBAD4;

  /* Bordes */
  --brd:           #E4E6F2;
  --brd-2:         #D6D9EE;
  --brd-focus:     rgba(230,22,103,.4);

  --ease:          cubic-bezier(.22,1,.36,1);
  --spring:        cubic-bezier(.34,1.56,.64,1);
  --max:           1220px;
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box }
html { scroll-behavior:smooth; font-size:16px }
body {
  font-family:'Poppins', sans-serif;
  background:var(--bg-0); color:var(--t1);
  overflow-x:hidden; -webkit-font-smoothing:antialiased;
  cursor:none;
}
::selection { background:var(--pink); color:#fff }
a { text-decoration:none; color:inherit }


/* ═══════════════════════════════════════════════════════════════
   HERO — blanco con partículas/grid, dos columnas
═══════════════════════════════════════════════════════════════ */
.hero {
  position:relative; min-height:100vh;
  display:flex; align-items:center; overflow:hidden;
  background:
    radial-gradient(ellipse 70% 60% at 75% 45%, rgba(109,192,170,.06) 0%, transparent 55%),
    radial-gradient(ellipse 50% 50% at 10% 65%, rgba(230,22,103,.05) 0%, transparent 50%),
    radial-gradient(ellipse 80% 80% at 50% 5%,  rgba(75,80,156,.04)  0%, transparent 60%),
    #ffffff;
}
.hero-canvas {
  position:absolute; inset:0; width:100%; height:100%;
  pointer-events:none; z-index:1;
}
/* Dot grid */
.hero-grid {
  position:absolute; inset:0; z-index:2; pointer-events:none;
  background-image:radial-gradient(rgba(75,80,156,.06) 1px, transparent 1px);
  background-size:36px 36px;
  mask-image:radial-gradient(ellipse 80% 80% at 50% 50%, black 40%, transparent 100%);
}
/* Línea top marca */
.hero-top-line {
  position:absolute; top:0; left:0; right:0; height:2px; z-index:10;
  background:linear-gradient(to right, transparent 0%, var(--pink) 50%, transparent 100%);
}
/* Scan line */
.hero-scan {
  position:absolute; left:0; right:0; height:1px;
  z-index:5; pointer-events:none;
  background:linear-gradient(to right,
    transparent, rgba(230,22,103,.1) 30%,
    rgba(109,192,170,.16) 50%,
    rgba(230,22,103,.1) 70%, transparent);
  animation:scanLine 14s ease-in-out infinite;
}
@keyframes scanLine {
  0%  { top:-1%; opacity:0 }
  4%  { opacity:1 }
  96% { opacity:.4 }
  100%{ top:101%; opacity:0 }
}

/* Inner layout */
.hero-inner {
  position:relative; z-index:6;
  max-width:var(--max); margin:0 auto;
  padding:100px 52px 80px;
  display:grid;
  grid-template-columns:1fr 1.08fr;
  gap:5rem; align-items:center; width:100%;
}

/* ── Hero Left: copy ── */
.hero-content {
  opacity:0; animation:fadeUp .8s var(--ease) .1s forwards;
}
.hero-badge {
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 16px; border-radius:999px;
  background:var(--pink-soft); border:1px solid var(--pink-mid);
  font-size:.78rem; font-weight:500; color:var(--t2);
  margin-bottom:2rem;
}
.hero-dot {
  width:7px; height:7px; background:var(--pink); border-radius:50%;
  animation:badgePulse 2s ease infinite;
}
@keyframes badgePulse {
  0%{box-shadow:0 0 0 0 rgba(230,22,103,.7)}
  60%{box-shadow:0 0 0 8px transparent}
  100%{box-shadow:0 0 0 0 transparent}
}

.hero-eyebrow {
  font-size:.5rem; font-weight:700; letter-spacing:.28em; text-transform:uppercase;
  color:var(--pink); margin-bottom:.8rem;
  display:flex; align-items:center; gap:12px;
}
.hero-eyebrow::before { content:''; display:block; width:28px; height:1px; background:var(--pink) }

.hero-title {
  font-size:clamp(36px, 5vw, 62px);
  font-weight:900; line-height:1.04; letter-spacing:-.03em;
  text-transform:uppercase; color:var(--t1);
  margin-bottom:1.4rem;
}
.text-pink   { color:var(--pink) }
.text-teal   { color:var(--teal) }
.text-outline {
  color:transparent;
  -webkit-text-stroke:1.5px rgba(11,10,24,.2);
}

.hero-subtitle {
  font-size:clamp(.9rem, 1.3vw, 1.05rem);
  font-weight:300; line-height:1.85; color:var(--t2);
  max-width:440px; margin-bottom:2.4rem;
}
.hero-subtitle strong { font-weight:600; color:var(--t1) }

/* KPIs del hero */
.hero-stats { display:flex; gap:2.4rem; flex-wrap:wrap }
.hstat      { display:flex; flex-direction:column }
.hstat-val  {
  font-size:1.4rem; font-weight:900; color:var(--t1);
  line-height:1; letter-spacing:-.03em;
}
.hstat-val span { color:var(--pink) }
.hstat-lbl {
  font-size:.56rem; font-weight:600; color:var(--t3);
  letter-spacing:.1em; text-transform:uppercase; margin-top:.3rem;
}

/* ── Hero Right: form card ── */
.form-wrap {
  opacity:0; animation:fadeUp .9s var(--ease) .25s forwards;
}

/* Form card — fondo blanco brillante, sombra generosa */
.form-card {
  background:var(--bg-0);
  border:1px solid var(--brd);
  border-radius:24px; overflow:hidden;
  box-shadow:
    0 4px 0 var(--brd),
    0 20px 60px rgba(11,10,24,.08),
    0 4px 12px rgba(11,10,24,.04);
}

/* Topbar tipo "app" sobre claro */
.fc-bar {
  display:flex; align-items:center; justify-content:space-between;
  padding:.75rem 1.4rem;
  background:var(--bg-1);
  border-bottom:1px solid var(--brd);
}
.fc-dots { display:flex; gap:.4rem }
.fc-dot  { width:9px; height:9px; border-radius:50%; background:var(--brd-2) }
.fc-dot.red   { background:rgba(230,22,103,.55) }
.fc-dot.yel   { background:rgba(255,190,0,.5) }
.fc-dot.grn   { background:rgba(109,192,170,.55) }
.fc-label {
  font-size:.5rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--t3);
}
.fc-status {
  display:flex; align-items:center; gap:.35rem;
  font-size:.5rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--teal);
}
.fc-status-dot {
  width:5px; height:5px; border-radius:50%; background:var(--teal);
  animation:pulseGreen 2s infinite;
}
@keyframes pulseGreen {
  0%,100%{box-shadow:0 0 0 0 rgba(109,192,170,.6)}
  50%    {box-shadow:0 0 0 6px rgba(109,192,170,0)}
}

/* ── Cuerpo del formulario ── */
.fc-body { padding:2rem 1.8rem 1.6rem }

.frow {
  display:grid; grid-template-columns:1fr 1fr;
  gap:1.1rem; margin-bottom:1.1rem;
}
.frow.full { grid-template-columns:1fr }

/* Campo — LEGIBLE, grande, sobre blanco */
.field { display:flex; flex-direction:column; gap:0 }

.field label {
  font-size:.6rem; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--t3); padding-bottom:.45rem;
  display:block; transition:color .3s;
}
.field:focus-within label { color:var(--pink) }

.field input,
.field select,
.field textarea {
  font-family:'Poppins', sans-serif;
  font-size:.95rem;              /* MÁS GRANDE Y LEGIBLE */
  font-weight:400;
  width:100%;
  padding:.82rem 1.05rem;
  background:var(--bg-1);
  border:1.5px solid var(--brd);
  border-radius:10px;
  color:var(--t1);
  outline:none;
  transition:all .3s var(--ease);
  -webkit-appearance:none;
  min-height:46px; line-height:1.4;
}
.field input::placeholder,
.field textarea::placeholder { color:var(--t4); font-size:.9rem }

.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color:var(--brd-focus);
  background:var(--bg-0);
  box-shadow:0 0 0 4px rgba(230,22,103,.07);
}
.field input:hover:not(:focus),
.field select:hover:not(:focus),
.field textarea:hover:not(:focus) {
  border-color:var(--brd-2);
}

.field textarea { resize:vertical; min-height:100px; line-height:1.7 }

/* Select */
.field-select { position:relative }
.field-select::after {
  content:''; position:absolute; right:1rem; bottom:15px;
  width:0; height:0;
  border:5px solid transparent; border-top-color:var(--t3);
  pointer-events:none;
}
.field-select select { cursor:pointer; padding-right:2.8rem; color:var(--t2) }
.field-select select option { background:var(--bg-0); color:var(--t1) }

/* Divisor */
.fc-divider { height:1px; background:var(--brd); margin:.3rem 0 1.2rem }

/* Chips de servicio — multi-select sobre claro */
.chips-label {
  font-size:.6rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--t3); margin-bottom:.7rem; display:block;
}
.chips-row { display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:1.2rem }
.schip {
  padding:.44rem 1rem; border:1.5px solid var(--brd);
  border-radius:50px;
  font-size:.72rem; font-weight:500; color:var(--t2);
  cursor:pointer; transition:all .3s var(--ease); user-select:none;
  background:var(--bg-1);
}
.schip:hover {
  border-color:rgba(230,22,103,.3); color:var(--pink); background:var(--pink-soft);
}
.schip.on {
  border-color:var(--pink); background:var(--pink-soft); color:var(--pink); font-weight:600;
}
/* Checkmark en chip seleccionado */
.schip.on::before { content:'✓ '; font-size:.64rem }

/* Botón submit */
.btn-send {
  width:100%; padding:15px;
  background:var(--pink); color:#fff;
  border:none; border-radius:12px;
  font-family:'Poppins', sans-serif;
  font-size:.78rem; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase;
  cursor:pointer; transition:all .4s var(--ease);
  position:relative; overflow:hidden;
  box-shadow:0 8px 28px rgba(230,22,103,.25);
  display:flex; align-items:center; justify-content:center; gap:.8rem;
  margin-top:.8rem;
}
.btn-send::after {
  content:''; position:absolute; inset:0;
  background:linear-gradient(135deg, rgba(255,255,255,.18), transparent);
  opacity:0; transition:opacity .3s;
}
.btn-send:hover { transform:translateY(-2px); box-shadow:0 14px 40px rgba(230,22,103,.4) }
.btn-send:hover::after { opacity:1 }
.btn-send:active { transform:translateY(0) }
.btn-send svg { transition:transform .3s }
.btn-send:hover svg { transform:translateX(4px) }
.btn-send.sent {
  background:var(--teal);
  box-shadow:0 8px 28px rgba(109,192,170,.28);
  pointer-events:none;
}

.form-note {
  text-align:center; font-size:.62rem; font-weight:300;
  color:var(--t3); margin-top:.75rem; line-height:1.5;
}


/* ═══════════════════════════════════════════════════════════════
   CANALES DIRECTOS — fondo off-white
═══════════════════════════════════════════════════════════════ */
.channels-sec {
  background:var(--bg-1); padding:72px 0;
  border-top:1px solid var(--brd);
}
.channels-inner { max-width:var(--max); margin:0 auto; padding:0 52px }

/* Eyebrow */
.sec-eyebrow {
  display:flex; align-items:center; gap:1rem; margin-bottom:2.8rem;
}
.sec-eyebrow span {
  font-size:.52rem; font-weight:700; letter-spacing:.22em; text-transform:uppercase;
  color:var(--pink); white-space:nowrap;
}
.sec-eyebrow-line { flex:1; height:1px; background:linear-gradient(to right, var(--brd), transparent) }

/* Grid canales */
.channels-grid {
  display:grid; grid-template-columns:repeat(4,1fr); gap:16px;
}
.ch-card {
  background:var(--bg-0); border:1px solid var(--brd);
  border-radius:18px; padding:28px 22px;
  position:relative; overflow:hidden;
  transition:all .4s var(--ease);
  opacity:0; transform:translateY(24px);
  display:block;
}
.ch-card.show { opacity:1; transform:translateY(0) }

.ch-card:hover {
  border-color:rgba(230,22,103,.2);
  box-shadow:0 16px 48px rgba(11,10,24,.08);
  transform:translateY(-5px);
}
.ch-card::after {
  content:''; position:absolute; bottom:0; left:0; right:0; height:2px;
  background:linear-gradient(to right, var(--pink), var(--teal));
  transform:scaleX(0); transform-origin:left;
  transition:transform .45s var(--ease);
}
.ch-card:hover::after { transform:scaleX(1) }

.ch-ico {
  width:46px; height:46px;
  background:var(--pink-soft); border-radius:13px;
  display:flex; align-items:center; justify-content:center;
  margin-bottom:1.1rem; transition:background .3s, transform .35s var(--spring);
}
.ch-ico svg { width:20px; height:20px; color:var(--pink) }
.ch-card:hover .ch-ico { background:var(--pink-mid); transform:scale(1.08) rotate(-4deg) }

.ch-type {
  font-size:.55rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--t3); margin-bottom:.35rem;
}
.ch-val {
  font-size:.9rem; font-weight:700; color:var(--t1); line-height:1.3;
  transition:color .3s;
}
.ch-card:hover .ch-val { color:var(--pink) }
.ch-sub { font-size:.72rem; font-weight:300; color:var(--t3); margin-top:.3rem }


/* ═══════════════════════════════════════════════════════════════
   POR QUÉ ELEGIRNOS — fondo blanco
═══════════════════════════════════════════════════════════════ */
.why-sec { padding:90px 0; background:var(--bg-0) }
.why-inner { max-width:var(--max); margin:0 auto; padding:0 52px }
.why-grid {
  display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:start;
}

/* Left: copy con animaciones reveal */
.why-left {
  opacity:0; transform:translateX(-28px);
  transition:opacity .9s var(--ease), transform .9s var(--ease);
  padding-top:8px;
}
.why-left.show { opacity:1; transform:translateX(0) }

.tag {
  display:inline-block; font-size:.52rem; font-weight:700;
  letter-spacing:.22em; text-transform:uppercase; color:var(--pink); margin-bottom:1rem;
}
.why-title {
  font-size:clamp(24px, 2.8vw, 38px); font-weight:900;
  letter-spacing:-.02em; line-height:1.1; color:var(--t1); margin-bottom:1.3rem;
}
.divider { width:52px; height:3px; background:var(--pink); margin-bottom:1.8rem; border-radius:2px }

.why-desc {
  font-size:.92rem; font-weight:300; color:var(--t2); line-height:1.85; margin-bottom:2rem;
}
.why-quote {
  border-left:3px solid var(--pink);
  padding:.9rem 1.2rem;
  background:var(--pink-soft);
  border-radius:0 12px 12px 0;
  font-size:.9rem; font-style:italic; font-weight:300; color:var(--t1); line-height:1.75;
}
.why-quote strong { font-style:normal; font-weight:700 }

/* Right: garantías */
.why-right {
  opacity:0; transform:translateX(28px);
  transition:opacity .9s var(--ease) .12s, transform .9s var(--ease) .12s;
  display:flex; flex-direction:column; gap:1px;
}
.why-right.show { opacity:1; transform:translateX(0) }

.guarantee {
  display:flex; align-items:flex-start; gap:1.1rem;
  padding:1.3rem 1.5rem;
  background:var(--bg-0); border:1px solid var(--brd);
  transition:all .35s var(--ease);
}
.guarantee:first-child { border-radius:16px 16px 0 0 }
.guarantee:last-child  { border-radius:0 0 16px 16px }
.guarantee:not(:last-child){ border-bottom:none }
.guarantee:hover { background:var(--bg-1); border-color:rgba(230,22,103,.2) }

.guar-check {
  width:28px; height:28px; flex-shrink:0; border-radius:9px;
  background:var(--pink-soft);
  display:flex; align-items:center; justify-content:center;
  margin-top:1px; transition:background .3s, transform .3s var(--spring);
}
.guarantee:hover .guar-check { background:var(--pink-mid); transform:scale(1.1) }
.guar-check svg { width:12px; height:12px; color:var(--pink) }

.guar-text h5 {
  font-size:.86rem; font-weight:700; color:var(--t1); margin-bottom:.22rem;
}
.guar-text p { font-size:.76rem; font-weight:300; color:var(--t2); line-height:1.6 }


/* ═══════════════════════════════════════════════════════════════
   CTA FINAL — off-white con partículas y dot pattern
═══════════════════════════════════════════════════════════════ */
.cta-sec {
  padding:120px 0;
  background:
    radial-gradient(ellipse 80% 70% at 50% 50%, rgba(230,22,103,.04) 0%, transparent 60%),
    var(--bg-2);
  position:relative; overflow:hidden; text-align:center;
  border-top:1px solid var(--brd);
}
.cta-sec::before {
  content:''; position:absolute; inset:0; pointer-events:none;
  background-image:radial-gradient(rgba(75,80,156,.05) 1.5px, transparent 1.5px);
  background-size:30px 30px;
}
.cta-canvas {
  position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:1;
}
.cta-inner {
  position:relative; z-index:2;
  max-width:680px; margin:0 auto; padding:0 52px;
  opacity:0; transform:translateY(24px);
  transition:opacity .9s var(--ease), transform .9s var(--ease);
}
.cta-inner.show { opacity:1; transform:translateY(0) }

.cta-tag {
  font-size:.5rem; font-weight:700; letter-spacing:.26em; text-transform:uppercase;
  color:var(--pink); display:inline-block; margin-bottom:1.5rem;
}
.cta-title {
  font-size:clamp(28px, 4vw, 52px); font-weight:900;
  letter-spacing:-.03em; line-height:1.06; color:var(--t1); margin-bottom:1rem;
}
.cta-title em { font-style:normal; color:var(--pink) }
.cta-sub {
  font-size:.96rem; font-weight:300; color:var(--t2); line-height:1.85; margin-bottom:2.5rem;
}
.cta-btns {
  display:flex; gap:12px; justify-content:center; flex-wrap:wrap;
}
.btn-primary {
  display:inline-flex; align-items:center; gap:8px;
  padding:14px 32px; border-radius:50px;
  background:var(--pink); color:#fff; border:none; cursor:pointer;
  font-family:'Poppins', sans-serif;
  font-size:.78rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  transition:all .35s var(--ease);
  box-shadow:0 8px 28px rgba(230,22,103,.28);
  text-decoration:none;
}
.btn-primary:hover { transform:translateY(-2px); box-shadow:0 14px 44px rgba(230,22,103,.45) }
.btn-primary svg { transition:transform .3s }
.btn-primary:hover svg { transform:translateX(3px) }

.btn-ghost {
  display:inline-flex; align-items:center; gap:8px;
  padding:14px 28px; border-radius:50px; cursor:pointer;
  font-family:'Poppins', sans-serif;
  font-size:.78rem; font-weight:500; letter-spacing:.12em; text-transform:uppercase;
  background:transparent; color:var(--t2);
  border:1.5px solid var(--brd);
  transition:all .3s; text-decoration:none;
}
.btn-ghost:hover { border-color:var(--pink); color:var(--pink); transform:translateY(-2px) }


/* ═══════════════════════════════════════════════════════════════
   REVEAL ANIMATIONS (coherentes con el sistema)
═══════════════════════════════════════════════════════════════ */
.reveal-up {
  opacity:0; transform:translateY(36px);
  transition:opacity .9s var(--ease), transform .9s var(--ease);
}
.reveal-up.in { opacity:1; transform:translateY(0) }

.reveal-fade {
  opacity:0;
  transition:opacity .8s var(--ease);
}
.reveal-fade.in { opacity:1 }

/* Stagger helpers */
.delay-1 { transition-delay:.1s }
.delay-2 { transition-delay:.2s }
.delay-3 { transition-delay:.3s }
.delay-4 { transition-delay:.4s }


/* ═══════════════════════════════════════════════════════════════
   KEYFRAMES
═══════════════════════════════════════════════════════════════ */
@keyframes fadeUp {
  from{ opacity:0; transform:translateY(22px) }
  to  { opacity:1; transform:translateY(0) }
}


/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════════════════════════ */
@media(max-width:1024px){
  .hero-inner    { grid-template-columns:1fr; gap:3.5rem; padding:80px 32px 60px }
  .channels-grid { grid-template-columns:repeat(2,1fr) }
  .channels-inner, .why-inner { padding:0 32px }
  .why-grid      { grid-template-columns:1fr; gap:3rem }
  .cta-inner     { padding:0 32px }
}
@media(max-width:768px){
  .hero-inner           { padding:70px 24px 50px }
  .frow                 { grid-template-columns:1fr }
  .channels-grid        { grid-template-columns:1fr }
  .channels-inner,.why-inner,.cta-inner { padding:0 24px }
  .fc-body              { padding:1.5rem 1.2rem }
}
@media(max-width:480px){
  .hero-title { font-size:2rem }
  .btn-send   { font-size:.7rem }
}