/* Contacto Forms v5 — Responsive, Manrope + Poppins */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;600;700;800&family=Poppins:wght@300;400;500;600&display=swap');

:root {
  --ctco-c:#37937e; --ctco-cd:#2a7a68; --ctco-cl:#e6f4f1;
  --ctco-bg:#f2f4f3; --ctco-w:#fff; --ctco-dark:#1c2226;
  --ctco-mid:#4a5568; --ctco-light:#9aa5b1; --ctco-border:#dde2e8;
  --ctco-err:#e53e3e; --ctco-err-l:#fff5f5; --ctco-r:.7em; --ctco-dur:.4s;
}

[class*=ctco-type-] *,
[class*=ctco-type-] *::before,
[class*=ctco-type-] *::after,
.ctco-thanks * { box-sizing:border-box; margin:0; padding:0; }

/* ═══════════════════════════════════════════════
   MULTISTEP — layout 50/50
═══════════════════════════════════════════════ */
.ctco-wrap.ctco-type-multistep,
.ctco-wrap.ctco-type-multistep_clone {
  width:100%; min-height:100vh; display:flex;
  font-family:'Poppins',sans-serif;
  font-size:clamp(14px, 1.1vw, 18px);
  color:var(--ctco-dark); background:var(--ctco-bg);
}

.ctco-type-multistep .ctco-left,
.ctco-type-multistep_clone .ctco-left {
  width:50%; min-height:100vh; background:var(--ctco-bg);
  display:flex; align-items:center; padding:4em 3.2em;
  position:sticky; top:0; height:100vh; overflow:hidden;
}

.ctco-lp { width:100%; max-width:38em; animation:ctcoFu .5s ease both; }
@keyframes ctcoFu { from{opacity:0;transform:translateY(14px)} to{opacity:1;transform:translateY(0)} }

.ctco-hero {
  font-family:'Manrope',sans-serif; font-weight:300;
  font-size:2.6em; line-height:1.2;
  color:var(--ctco-dark); margin-bottom:1.5em;
}
.ctco-hero span { color:var(--ctco-c); font-weight:700; }

.ctco-video { width:100%; max-width:30em; border-radius:.7em; overflow:hidden; aspect-ratio:16/9; background:#c8cdd3; }
.ctco-video video { width:100%; height:100%; object-fit:cover; display:block; }
.ctco-video img   { width:100%; height:100%; object-fit:cover; display:block; }

.ctco-left-intro { font-size:1em; color:var(--ctco-mid); line-height:1.7; margin-bottom:1.6em; }
.ctco-feats { list-style:none; display:flex; flex-direction:column; gap:.9em; }
.ctco-feats li { display:flex; align-items:flex-start; gap:.6em; }
.ctco-feat-icon {
  width:2.4em; height:2.4em; border-radius:50%;
  background:var(--ctco-cl); border:1.5px solid var(--ctco-c);
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0; color:var(--ctco-c);
}
.ctco-feat-icon svg { width:1.1em; height:1.1em; }
.ctco-feats strong { font-family:'Manrope',sans-serif; font-weight:600; font-size:1.05em; display:block; }
.ctco-feats span   { font-size:.9em; color:var(--ctco-mid); }

.ctco-antes-h { font-family:'Manrope',sans-serif; font-weight:300; font-size:1.8em; margin-bottom:.8em; }
.ctco-antes-body { font-size:1em; color:var(--ctco-mid); line-height:1.75; }
.ctco-antes-body p { margin-bottom:.6em; }
.ctco-antes-body strong { font-weight:600; color:var(--ctco-dark); }

.ctco-type-multistep .ctco-right,
.ctco-type-multistep_clone .ctco-right {
  width:50%; min-height:100vh; background:var(--ctco-w);
  display:flex; align-items:center; padding:4em 3.2em;
}
.ctco-type-multistep .ctco-card,
.ctco-type-multistep_clone .ctco-card { width:100%; max-width:36em; }

/* ═══════════════════════════════════════════════
   SIMPLE / CONTACT / POPUP
═══════════════════════════════════════════════ */
.ctco-wrap.ctco-type-simple,
.ctco-wrap.ctco-type-contact,
.ctco-wrap.ctco-type-popup {
  font-family:'Poppins',sans-serif;
  font-size:clamp(14px, 1.1vw, 16px);
  color:var(--ctco-dark);
}
.ctco-type-simple .ctco-left,
.ctco-type-contact .ctco-left,
.ctco-type-popup .ctco-left { display:none; }
.ctco-wrap.ctco-type-simple,
.ctco-wrap.ctco-type-contact { display:block; width:100%; }
.ctco-type-simple .ctco-right,
.ctco-type-contact .ctco-right,
.ctco-type-popup .ctco-right { width:100%; min-width:0; }
.ctco-type-simple .ctco-card,
.ctco-type-contact .ctco-card,
.ctco-type-popup .ctco-card {
  background:var(--ctco-w); border-radius:1em;
  box-shadow:0 4px 24px rgba(0,0,0,.09);
  padding:2em 2em 1.5em; width:100%;
}

/* ═══════════════════════════════════════════════
   PROGRESS BAR
═══════════════════════════════════════════════ */
.ctco-prog { height:4px; background:var(--ctco-border); border-radius:4px; margin-bottom:1.75em; overflow:hidden; }
.ctco-prog-bar { height:100%; border-radius:4px; transition:width .6s cubic-bezier(.4,0,.2,1); }

/* ═══════════════════════════════════════════════
   STEPS
═══════════════════════════════════════════════ */
.ctco-step { display:none; position:relative; }
.ctco-step.ctco-step-active { display:block; animation:ctcoSin var(--ctco-dur) cubic-bezier(.4,0,.2,1) both; }
.ctco-step.ctco-step-exit   { display:block; animation:ctcoSout var(--ctco-dur) cubic-bezier(.4,0,.2,1) both; pointer-events:none; position:absolute; width:100%; top:0; }
.ctco-step.ctco-step-back.ctco-step-active { animation:ctcoSinB var(--ctco-dur) cubic-bezier(.4,0,.2,1) both; }
@keyframes ctcoSin  { from{opacity:0;transform:translateX(32px)}  to{opacity:1;transform:translateX(0)} }
@keyframes ctcoSout { from{opacity:1;transform:translateX(0)}  to{opacity:0;transform:translateX(-32px)} }
@keyframes ctcoSinB { from{opacity:0;transform:translateX(-32px)} to{opacity:1;transform:translateX(0)} }

.ctco-step-lbl { font-size:.75em; font-weight:500; letter-spacing:.14em; text-transform:uppercase; margin-bottom:.4em; display:block; }
.ctco-card-title { font-family:'Manrope',sans-serif; font-weight:700; font-size:1.5em; color:var(--ctco-dark); margin-bottom:.9em; line-height:1.2; }
.ctco-card-sub   { font-size:.9em; color:var(--ctco-mid); margin-bottom:1.2em; }
.ctco-row2 { display:grid; grid-template-columns:1fr 1fr; gap:.75em; }
.ctco-field { margin-bottom:.8em; }

/* ═══════════════════════════════════════════════
   FIELDS
═══════════════════════════════════════════════ */
.ctco-field input,
.ctco-field select,
.ctco-field textarea {
  width:100%; padding:.75em 1em;
  border:1.5px solid var(--ctco-border) !important;
  border-radius:.6em !important;
  background:var(--ctco-w) !important;
  font-family:'Poppins',sans-serif !important;
  font-size:1em !important;
  color:var(--ctco-dark) !important;
  transition:border-color .2s, box-shadow .2s !important;
  appearance:none; -webkit-appearance:none;
  outline:none !important; box-shadow:none !important;
}
.ctco-field input::placeholder,
.ctco-field textarea::placeholder { color:var(--ctco-light); }
.ctco-field input:focus,
.ctco-field select:focus,
.ctco-field textarea:focus {
  border-color:var(--ctco-c) !important;
  box-shadow:0 0 0 3px rgba(55,147,126,.13) !important;
}
.ctco-field select {
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%239aa5b1' stroke-width='1.8' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") !important;
  background-repeat:no-repeat !important;
  background-position:right 1em center !important;
  padding-right:2.5em !important;
  cursor:pointer;
}
.ctco-field textarea { resize:vertical; min-height:5em; line-height:1.6; }

/* Error state */
.ctco-field input.ctco-err,
.ctco-field select.ctco-err,
.ctco-field textarea.ctco-err {
  border-color:var(--ctco-err) !important;
  background:var(--ctco-err-l) !important;
  animation:ctcoShake .35s ease;
}
@keyframes ctcoShake {
  0%,100%{transform:translateX(0)}
  20%{transform:translateX(-5px)}
  40%{transform:translateX(5px)}
  60%{transform:translateX(-3px)}
  80%{transform:translateX(3px)}
}

.ctco-check-label,
.ctco-radio-label { display:flex; align-items:center; gap:.5em; font-size:.9em; color:var(--ctco-mid); cursor:pointer; margin-bottom:.4em; }

/* ═══════════════════════════════════════════════
   GDPR
═══════════════════════════════════════════════ */
.ctco-gdpr { margin:.4em 0 .8em; }
/* Error: highlight checkbox + tint label */
.ctco-gdpr input[type=checkbox].ctco-err {
  outline:2px solid var(--ctco-err) !important;
  outline-offset:2px;
  animation:ctcoShake .35s ease;
}
.ctco-gdpr input[type=checkbox].ctco-err + label {
  color:var(--ctco-err) !important;
}

/* ═══════════════════════════════════════════════
   MISC
═══════════════════════════════════════════════ */
.ctco-hr   { border:none; border-top:1px solid var(--ctco-border); margin:.8em 0; }
.ctco-note { font-size:.78em; color:var(--ctco-light); line-height:1.5; margin-bottom:.8em; }

/* ═══════════════════════════════════════════════
   BUTTONS
═══════════════════════════════════════════════ */
[class*=ctco-type-] button.ctco-btn,
[class*=ctco-type-] input[type=submit].ctco-btn,
.ctco-popup-overlay button.ctco-btn,
button.ctco-open-popup {
  display:inline-flex !important; align-items:center !important; justify-content:center !important;
  gap:.55em !important; width:100% !important; padding:.9em 1.6em !important;
  background:#37937e !important; color:#fff !important; border:none !important;
  border-radius:.6em !important; font-family:'Poppins',sans-serif !important;
  font-size:1em !important; font-weight:500 !important; line-height:1.4 !important;
  cursor:pointer !important; text-decoration:none !important; text-shadow:none !important;
  box-shadow:0 4px 14px rgba(55,147,126,.28) !important;
  transition:transform .18s ease, box-shadow .18s ease, background .15s !important;
  -webkit-font-smoothing:antialiased !important;
  margin-top:.8em !important; position:relative !important; overflow:hidden !important;
}
[class*=ctco-type-] button.ctco-btn:hover,
button.ctco-open-popup:hover {
  transform:translateY(-2px) !important;
  box-shadow:0 8px 22px rgba(55,147,126,.38) !important;
}
[class*=ctco-type-] button.ctco-btn svg,
.ctco-popup-overlay button.ctco-btn svg,
button.ctco-open-popup svg {
  width:1em !important; height:1em !important; flex-shrink:0 !important;
  stroke:#fff !important; fill:none !important; transition:transform .18s !important;
}
[class*=ctco-type-] button.ctco-btn:hover svg { transform:translateX(3px) !important; }

/* Back button */
[class*=ctco-type-] button.ctco-btn.ctco-btn-back {
  background:transparent !important; color:var(--ctco-mid) !important;
  border:1.5px solid var(--ctco-border) !important; box-shadow:none !important; width:auto !important;
}
[class*=ctco-type-] button.ctco-btn.ctco-btn-back svg { stroke:var(--ctco-mid) !important; }
[class*=ctco-type-] button.ctco-btn.ctco-btn-back:hover {
  background:var(--ctco-cl) !important; border-color:var(--ctco-c) !important;
  color:var(--ctco-c) !important; box-shadow:none !important;
}
[class*=ctco-type-] button.ctco-btn.ctco-btn-back:hover svg {
  stroke:var(--ctco-c) !important; transform:translateX(-3px) !important;
}

/* Loading state */
[class*=ctco-type-] button.ctco-btn.ctco-loading,
.ctco-popup-overlay button.ctco-btn.ctco-loading { opacity:.8 !important; pointer-events:none !important; }
[class*=ctco-type-] button.ctco-btn.ctco-loading svg,
.ctco-popup-overlay button.ctco-btn.ctco-loading svg { display:none !important; }
[class*=ctco-type-] button.ctco-btn.ctco-loading::after,
.ctco-popup-overlay button.ctco-btn.ctco-loading::after {
  content:'' !important; display:inline-block !important;
  width:.95em !important; height:.95em !important;
  border:2.5px solid rgba(255,255,255,.35) !important;
  border-top-color:#fff !important; border-radius:50% !important;
  animation:ctcoSpin .65s linear infinite !important; margin-left:.5em !important;
}
@keyframes ctcoSpin { to{transform:rotate(360deg)} }

.ctco-btn-row { display:flex; gap:.7em; align-items:center; flex-wrap:wrap; margin-top:.2em; }

/* ═══════════════════════════════════════════════
   NOTICES — tipos: error, success, warning, info
═══════════════════════════════════════════════ */
.ctco-notice {
  display:flex; align-items:flex-start; gap:.6em;
  padding:.75em 1em; border-radius:.55em;
  font-size:.88em; margin-bottom:1em; line-height:1.5;
}
.ctco-n-icon {
  flex-shrink:0; margin-top:.1em;
  display:flex; align-items:center;
}
.ctco-n-icon svg { width:1.1em; height:1.1em; }
.ctco-n-msg { flex:1; }
.ctco-n-close {
  flex-shrink:0; background:none !important; border:none !important;
  padding:2px !important; cursor:pointer; opacity:.5; line-height:1;
  border-radius:3px !important; transition:opacity .15s;
  display:flex !important; align-items:center; justify-content:center;
  box-shadow:none !important; width:auto !important; margin-top:0 !important;
  min-width:0 !important;
}
.ctco-n-close:hover { opacity:1; }
.ctco-n-close svg   { width:.9em !important; height:.9em !important; stroke:none !important; }

/* Error */
.ctco-notice.ctco-notice-error {
  background:#fff5f5; border:1px solid #fc8181; color:#c53030;
}
.ctco-notice.ctco-notice-error .ctco-n-icon,
.ctco-notice.ctco-notice-error .ctco-n-close { color:#c53030; }

/* Success */
.ctco-notice.ctco-notice-success {
  background:#f0faf7; border:1px solid var(--ctco-c); color:var(--ctco-cd);
}
.ctco-notice.ctco-notice-success .ctco-n-icon,
.ctco-notice.ctco-notice-success .ctco-n-close { color:var(--ctco-cd); }

/* Warning */
.ctco-notice.ctco-notice-warning {
  background:#fffbeb; border:1px solid #f6ad55; color:#92400e;
}
.ctco-notice.ctco-notice-warning .ctco-n-icon,
.ctco-notice.ctco-notice-warning .ctco-n-close { color:#92400e; }

/* Info */
.ctco-notice.ctco-notice-info {
  background:#eff6ff; border:1px solid #93c5fd; color:#1e40af;
}
.ctco-notice.ctco-notice-info .ctco-n-icon,
.ctco-notice.ctco-notice-info .ctco-n-close { color:#1e40af; }

/* ═══════════════════════════════════════════════
   THANKS — pantalla completa (fuera del popup)
═══════════════════════════════════════════════ */
.ctco-thanks {
  position:fixed; inset:0; z-index:9999;
  background:#1c2226 center/cover no-repeat;
  display:flex; align-items:center; justify-content:center; padding:2em;
}
.ctco-thanks::before { content:''; position:absolute; inset:0; background:rgba(28,34,38,.55); }
.ctco-thanks-inner   { position:relative; text-align:center; max-width:520px; }
.ctco-thanks-check {
  width:3.5em; height:3.5em; border-radius:50%; background:var(--ctco-c);
  display:flex; align-items:center; justify-content:center; margin:0 auto 1em;
}
.ctco-thanks-check svg { width:2em; height:2em; color:#fff; }
.ctco-thanks-h {
  font-family:'Manrope',sans-serif; font-weight:300;
  font-size:2.2em; color:#fff; line-height:1.2; margin-bottom:.5em;
}
.ctco-thanks-h em    { font-style:normal; font-weight:700; color:var(--ctco-c); }
.ctco-thanks-body    { font-size:1.05em; color:rgba(255,255,255,.82); line-height:1.7; }
.ctco-thanks-body p  { margin-bottom:.4em; }

/* ═══════════════════════════════════════════════
   RESPONSIVE — Tablet grande (≤1100px)
═══════════════════════════════════════════════ */
@media (max-width:1100px) {
  .ctco-wrap.ctco-type-multistep,
  .ctco-wrap.ctco-type-multistep_clone {
    font-size:clamp(13px, 1.3vw, 16px);
  }
  .ctco-hero    { font-size:2.2em; }
  .ctco-antes-h { font-size:1.6em; }
}

/* ═══════════════════════════════════════════════
   RESPONSIVE — Tablet (≤900px): apilar multistep
═══════════════════════════════════════════════ */
@media (max-width:900px) {
  .ctco-wrap.ctco-type-multistep,
  .ctco-wrap.ctco-type-multistep_clone {
    flex-direction:column;
    min-height:auto;
    font-size:15px;
  }
  .ctco-type-multistep .ctco-left,
  .ctco-type-multistep_clone .ctco-left {
    width:100%; min-height:auto; height:auto;
    position:static; padding:2.5em 2.2em;
  }
  .ctco-type-multistep .ctco-right,
  .ctco-type-multistep_clone .ctco-right {
    width:100%; min-height:auto;
    padding:2.2em 2.2em 3em;
  }
  .ctco-hero { font-size:2em !important; }
  .ctco-video { max-width:100%; }
}

/* ═══════════════════════════════════════════════
   RESPONSIVE — Móvil (≤600px)
═══════════════════════════════════════════════ */
@media (max-width:600px) {
  .ctco-wrap.ctco-type-multistep,
  .ctco-wrap.ctco-type-multistep_clone,
  .ctco-wrap.ctco-type-simple,
  .ctco-wrap.ctco-type-contact,
  .ctco-wrap.ctco-type-popup {
    font-size:15px;
  }
  .ctco-type-multistep .ctco-left,
  .ctco-type-multistep_clone .ctco-left {
    padding:1.8em 1.2em;
  }
  .ctco-type-multistep .ctco-right,
  .ctco-type-multistep_clone .ctco-right {
    padding:1.8em 1.2em 2.5em;
  }
  .ctco-type-simple .ctco-card,
  .ctco-type-contact .ctco-card {
    border-radius:.75em;
    padding:1.5em 1.2em 1.2em;
    box-shadow:0 2px 12px rgba(0,0,0,.08);
  }
  /* 2 columnas → 1 columna */
  .ctco-row2 { grid-template-columns:1fr !important; }
  .ctco-hero    { font-size:1.6em !important; margin-bottom:1em; }
  .ctco-antes-h { font-size:1.4em !important; }
  .ctco-card-title { font-size:1.3em; }
  .ctco-prog { margin-bottom:1.2em; }
  /* Botones en columna */
  .ctco-btn-row { flex-direction:column; }
  .ctco-btn-row .ctco-btn.ctco-btn-back { width:100% !important; }
  /* Features compactos */
  .ctco-feats li { gap:.5em; }
  .ctco-feat-icon { width:2em; height:2em; }
  /* Thanks responsive */
  .ctco-thanks-h { font-size:1.7em; }
}

/* ═══════════════════════════════════════════════
   RESPONSIVE — Móvil muy pequeño (≤380px)
═══════════════════════════════════════════════ */
@media (max-width:380px) {
  .ctco-wrap.ctco-type-multistep,
  .ctco-wrap.ctco-type-multistep_clone,
  .ctco-wrap.ctco-type-simple,
  .ctco-wrap.ctco-type-contact {
    font-size:14px;
  }
  .ctco-hero     { font-size:1.4em !important; }
  .ctco-card-title { font-size:1.2em; }
}