/* ============================================================
   Marketing Ultra — Página de Contacto (plantilla canvas contacto-mku.php)
   Scoped bajo body.mku-contacto. Solo se encola en la Contacto.
   Diseño: "Página de Contacto" (Claude Design handoff).
   El formulario es WPForms #23 re-estilado (ver bloque WPFORMS abajo).
   ============================================================ */

/* ---------- fuentes self-host ---------- */
@font-face{ font-family:"DumbnerdMKU"; src:url("fonts/dumbnerd.woff2") format("woff2"); font-weight:400; font-style:normal; font-display:swap; }
@font-face{ font-family:"Sora"; src:url("fonts/sora-latin.woff2") format("woff2"); font-weight:400 800; font-style:normal; font-display:swap; }
@font-face{ font-family:"JetBrains Mono"; src:url("fonts/jetbrainsmono-latin.woff2") format("woff2"); font-weight:400 700; font-style:normal; font-display:swap; }
@font-face{ font-family:"Permanent Marker"; src:url("fonts/permanentmarker-latin.woff2") format("woff2"); font-weight:400; font-style:normal; font-display:swap; }

:root{
  --teal-50:#E9F8F9; --teal-100:#CAE6E8; --teal-300:#7CC8D2; --teal-500:#3AA6B9; --teal-700:#1F6F7C; --teal-900:#0E3B43;
  --lime-300:#B9F4C8; --lime-500:#3CE595; --lime-600:#20C078; --lime-700:#168A55;
  --yellow-400:#F4D818; --yellow-600:#B89E00;
  --ink-900:#0F172A; --ink-700:#2A3344; --ink-500:#454F5E; --ink-300:#8B95A7; --ink-200:#C7CDD7; --ink-100:#E8EBF0; --ink-50:#F4F6F9;
  --paper:#FFFFFF; --night:#181823;
  --holo:linear-gradient(110deg, #168A55 0%, #3CE595 14%, #7CF5C8 26%, #F4D818 38%, #3AA6B9 52%, #6FE3F0 64%, #9DB4FF 76%, #3CE595 88%, #168A55 100%);
  --f-display:"DumbnerdMKU", system-ui, sans-serif; --f-sans:"Sora", system-ui, sans-serif; --f-title:"Sora", system-ui, sans-serif;
  --f-mono:"JetBrains Mono", ui-monospace, monospace; --f-mark:"Permanent Marker", cursive;
}
@keyframes wmholo{ from{ background-position:0% 0; } to{ background-position:100% 0; } }
@keyframes mkupulse{ 0%{ box-shadow:0 0 0 0 rgba(60,229,149,.6);} 70%{ box-shadow:0 0 0 9px rgba(60,229,149,0);} 100%{ box-shadow:0 0 0 0 rgba(60,229,149,0);} }

/* ---------- reset/base ---------- */
body.mku-contacto *{ box-sizing:border-box; }
body.mku-contacto{ margin:0; overflow-x:clip; background:var(--paper); color:var(--ink-900); font-family:var(--f-sans); -webkit-font-smoothing:antialiased; font-size:16px; line-height:1.6; }
html{ scroll-behavior:smooth; }
body.mku-contacto img{ max-width:100%; display:block; height:auto; }
body.mku-contacto a{ color:inherit; }
body.mku-contacto .wrap{ max-width:1200px; margin:0 auto; padding-left:clamp(20px,5vw,56px); padding-right:clamp(20px,5vw,56px); }

/* ---------- atoms ---------- */
body.mku-contacto .kicker{ font-family:var(--f-mono); font-size:clamp(12px,1.4vw,14px); letter-spacing:.16em; text-transform:uppercase; display:inline-flex; align-items:center; gap:10px; color:var(--teal-700); }
body.mku-contacto .kicker .dot{ width:8px; height:8px; border-radius:50%; background:var(--lime-500); flex:none; }
body.mku-contacto .lead{ font-size:clamp(17px,1.8vw,20px); color:var(--ink-500); }
body.mku-contacto .btn{ display:inline-flex; align-items:center; gap:12px; font-family:var(--f-sans); font-weight:800; font-size:clamp(16px,1.8vw,19px); padding:15px 30px; border-radius:999px; cursor:pointer; text-decoration:none; transition:transform .12s ease, box-shadow .12s ease; border:0; }
body.mku-contacto .btn .arr{ font-family:var(--f-sans); display:inline-block; }
body.mku-contacto .btn-lime{ background:var(--lime-500); color:var(--ink-900); border:2.5px solid var(--lime-700); box-shadow:0 5px 0 0 var(--lime-700); }
body.mku-contacto .btn-lime:hover{ transform:translateY(-2px); box-shadow:0 7px 0 0 var(--lime-700); }
body.mku-contacto .btn-lime:active{ transform:translateY(3px); box-shadow:0 2px 0 0 var(--lime-700); }

/* ============ NAV (igual que la home/about) ============ */

/* ============ HERO / CONTACT ============ */
body.mku-contacto .chero{ position:relative; overflow:hidden; background:linear-gradient(180deg, var(--teal-50) 0%, #ECF9FA 30%, #F4FBFC 62%, var(--paper) 100%); }
body.mku-contacto .chero .top{ position:relative; z-index:2; max-width:62ch; padding-top:clamp(34px,5vw,58px); }
body.mku-contacto .chero .top .wm{ font-family:var(--f-display); text-transform:uppercase; font-size:clamp(40px,8vw,86px); line-height:.86; margin:14px 0 0; position:relative; display:inline-block; color:var(--ink-900); }
body.mku-contacto .chero .top .wm::before{ content:attr(data-t); position:absolute; left:0; top:0; transform:translate(.05em,.06em); z-index:-1; pointer-events:none;
  background:var(--holo); background-size:320% 100%; background-position:0% 0;
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent;
  animation:wmholo 11s ease-in-out infinite alternate; }
body.mku-contacto .chero .top .lead{ margin:clamp(16px,2.4vw,24px) 0 0; max-width:48ch; }
body.mku-contacto .chero .top .lead b{ color:var(--ink-700); font-weight:700; }

body.mku-contacto .cgrid{ position:relative; z-index:2; display:grid; grid-template-columns:1fr .9fr; gap:clamp(26px,4vw,52px); align-items:stretch; padding-top:clamp(30px,4vw,48px); padding-bottom:clamp(48px,6vw,82px); }

/* ============ FORM CARD ============ */
body.mku-contacto .formcard{ position:relative; background:var(--paper); border:3px solid var(--ink-900); border-radius:24px; padding:clamp(24px,3vw,38px); z-index:1; }
body.mku-contacto .formcard::after{ content:""; position:absolute; inset:0; z-index:-1; border-radius:24px; transform:translate(13px,13px); background:var(--holo); background-size:320% 100%; animation:wmholo 11s ease-in-out infinite alternate; }
body.mku-contacto .formcard h2{ font-family:var(--f-title); font-weight:800; font-size:clamp(22px,2.4vw,28px); letter-spacing:-.02em; margin:0 0 4px; }
body.mku-contacto .formcard .sub{ color:var(--ink-500); font-size:15px; margin:0 0 22px; }
body.mku-contacto .formcard .legal{ margin:16px 0 0; font-size:12.5px; color:var(--ink-300); text-align:center; line-height:1.5; }
body.mku-contacto .formcard .legal a{ color:var(--ink-500); text-decoration:underline; }

/* ---- WPForms #23 re-estilado dentro de .formcard ---- */
body.mku-contacto .formcard .wpforms-container{ margin:0; }
body.mku-contacto .formcard .wpforms-container .wpforms-title,
body.mku-contacto .formcard .wpforms-container .wpforms-description{ display:none; }
body.mku-contacto .wpforms-field-container{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
body.mku-contacto .wpforms-field{ padding:0 !important; margin:0 !important; clear:none; max-width:none; }
body.mku-contacto #wpforms-23-field_2-container{ grid-column:1 / -1; } /* Mensaje (textarea) a todo el ancho */
body.mku-contacto #wpforms-23-field_5-container{ grid-column:1 / -1; } /* Consentimiento RGPD a todo el ancho */
/* casilla de consentimiento RGPD */
body.mku-contacto .wpforms-field-checkbox ul{ list-style:none; margin:0; padding:0; }
body.mku-contacto .wpforms-field-checkbox li{ display:flex; align-items:flex-start; gap:11px; margin:0; }
body.mku-contacto .wpforms-field-checkbox input[type="checkbox"]{ width:18px; height:18px; min-width:18px; flex:none; margin:3px 0 0; accent-color:var(--lime-600); cursor:pointer; }
body.mku-contacto .wpforms-field-checkbox .wpforms-field-label-inline{ font-family:var(--f-sans); font-weight:500; font-size:13.5px; line-height:1.5; color:var(--ink-500); text-transform:none; letter-spacing:0; margin:0; cursor:pointer; }
body.mku-contacto .wpforms-field-checkbox .wpforms-field-label-inline .mu-policy-link{ color:var(--lime-700); text-decoration:underline; font-weight:600; cursor:pointer; }
body.mku-contacto .wpforms-field-checkbox .wpforms-field-label-inline .mu-policy-link:hover{ color:var(--lime-600); }
body.mku-contacto .wpforms-field-label{ display:block; font-family:var(--f-mono); font-size:12px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-700); line-height:1.3; margin:0 0 8px; }
body.mku-contacto .wpforms-required-label{ color:var(--lime-700); border:0; }
body.mku-contacto .wpforms-field-sublabel{ font-family:var(--f-mono); font-size:11px; color:var(--ink-300); text-transform:none; letter-spacing:0; }
body.mku-contacto .wpforms-field input[type="text"],
body.mku-contacto .wpforms-field input[type="email"],
body.mku-contacto .wpforms-field input[type="url"],
body.mku-contacto .wpforms-field input[type="tel"],
body.mku-contacto .wpforms-field textarea,
body.mku-contacto .wpforms-field select{ width:100%; max-width:none; font-family:var(--f-sans); font-size:16px; color:var(--ink-900); background:var(--ink-50); border:2px solid var(--ink-100); border-radius:13px; padding:13px 15px; box-shadow:none; transition:border-color .14s ease, background .14s ease, box-shadow .14s ease; }
body.mku-contacto .wpforms-field textarea{ min-height:120px; resize:vertical; line-height:1.5; }
body.mku-contacto .wpforms-field select{ appearance:none; -webkit-appearance:none; -moz-appearance:none; background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23454F5E' stroke-width='3' stroke-linecap='round'><path d='M6 9l6 6 6-6'/></svg>"); background-repeat:no-repeat; background-position:right 15px center; padding-right:42px; cursor:pointer; height:auto; }
body.mku-contacto .wpforms-field input:focus,
body.mku-contacto .wpforms-field textarea:focus,
body.mku-contacto .wpforms-field select:focus{ outline:none; border-color:var(--lime-600); background:#fff; box-shadow:0 0 0 4px rgba(60,229,149,.18); }
body.mku-contacto .wpforms-field input::placeholder,
body.mku-contacto .wpforms-field textarea::placeholder{ color:var(--ink-300); opacity:1; }
/* errores */
body.mku-contacto .wpforms-field input.wpforms-error,
body.mku-contacto .wpforms-field textarea.wpforms-error,
body.mku-contacto .wpforms-field select.wpforms-error{ border-color:#E2574C; background:#FFF6F5; }
body.mku-contacto label.wpforms-error,
body.mku-contacto em.wpforms-error{ color:#C23B30; font-family:var(--f-sans); font-size:13px; font-weight:500; margin-top:6px; display:block; }
/* submit */
body.mku-contacto .wpforms-submit-container{ margin-top:22px; padding:0; text-align:center; }
body.mku-contacto button.wpforms-submit{ width:100%; justify-content:center; display:inline-flex; align-items:center; gap:10px; font-family:var(--f-sans); font-weight:800; font-size:clamp(16px,1.8vw,19px); line-height:1.1; padding:15px 30px; border-radius:999px; cursor:pointer; background:var(--lime-500); color:var(--ink-900); border:2.5px solid var(--lime-700); box-shadow:0 5px 0 0 var(--lime-700); transition:transform .12s ease, box-shadow .12s ease; text-transform:none; letter-spacing:0; }
body.mku-contacto button.wpforms-submit:hover{ transform:translateY(-2px); box-shadow:0 7px 0 0 var(--lime-700); background:var(--lime-500); }
body.mku-contacto button.wpforms-submit:active{ transform:translateY(3px); box-shadow:0 2px 0 0 var(--lime-700); }
body.mku-contacto .wpforms-submit-spinner{ margin-left:8px; }
/* confirmación (mensaje de éxito del diseño) */
body.mku-contacto .wpforms-confirmation-container-full,
body.mku-contacto div.wpforms-confirmation-container-full{ background:transparent; border:0; border-radius:0; padding:18px 6px 8px; margin:0; color:inherit; }
body.mku-contacto .mu-formsent{ text-align:center; display:flex; flex-direction:column; align-items:center; gap:8px; }
body.mku-contacto .mu-formsent .mu-tick{ width:74px; height:74px; border-radius:50%; background:var(--lime-500); border:3px solid var(--lime-700); display:grid; place-items:center; font-size:38px; color:var(--ink-900); font-weight:800; margin-bottom:6px; }
body.mku-contacto .mu-formsent .mu-big{ font-family:var(--f-title); font-weight:800; font-size:clamp(24px,3vw,32px); letter-spacing:-.02em; }
body.mku-contacto .mu-formsent .mu-smsg{ color:var(--ink-500); max-width:34ch; }

/* ============ SIDE: canales directos ============ */
body.mku-contacto .side{ display:flex; flex-direction:column; gap:16px; }
body.mku-contacto .side .chan{ flex:none; }
body.mku-contacto .chan{ display:flex; align-items:center; gap:16px; text-decoration:none; background:var(--paper); border:2px solid var(--ink-100); border-radius:18px; padding:18px 20px; transition:transform .15s ease, border-color .15s ease, box-shadow .15s ease; }
body.mku-contacto .chan:hover{ transform:translateY(-3px); border-color:var(--ink-900); box-shadow:7px 7px 0 0 var(--accent,var(--lime-500)); }
body.mku-contacto .chan .ic{ width:52px; height:52px; border-radius:14px; flex:none; display:grid; place-items:center; background:color-mix(in srgb, var(--accent,var(--lime-500)) 16%, white); border:1.5px solid color-mix(in srgb, var(--accent,var(--lime-500)) 38%, white); color:var(--ink-900); }
body.mku-contacto .chan .ic svg{ width:24px; height:24px; display:block; }
body.mku-contacto .chan .tx{ min-width:0; }
body.mku-contacto .chan .tx .k{ display:block; font-family:var(--f-mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-300); }
body.mku-contacto .chan .tx .v{ display:block; font-weight:700; font-size:16px; color:var(--ink-900); margin-top:2px; word-break:break-word; }
body.mku-contacto .chan .tx .v small{ font-weight:500; color:var(--ink-500); }

/* ============ SIDECARD oscura ============ */
body.mku-contacto .sidecard{ position:relative; flex:1; margin-top:6px; background:var(--ink-900); color:#fff; border-radius:20px; padding:clamp(24px,2.6vw,34px); overflow:hidden; display:flex; flex-direction:column; justify-content:center; }
body.mku-contacto .sidecard .splash{ position:absolute; right:-30px; bottom:-30px; width:200px; opacity:.22; pointer-events:none; }
body.mku-contacto .sidecard .rel{ position:relative; z-index:2; }
body.mku-contacto .sidecard .face{ width:66px; height:66px; border-radius:15px; border:2.5px solid var(--yellow-400); object-fit:cover; margin-bottom:18px; }
body.mku-contacto .sidecard h3{ font-family:var(--f-title); font-weight:800; font-size:clamp(21px,2.2vw,26px); line-height:1.15; letter-spacing:-.02em; margin:0 0 12px; }
body.mku-contacto .sidecard p{ margin:0 0 12px; color:var(--ink-200); font-size:clamp(15px,1.5vw,16.5px); line-height:1.6; }
body.mku-contacto .sidecard p:last-of-type{ margin-bottom:0; }
body.mku-contacto .sidecard .resp{ display:inline-flex; align-items:center; gap:8px; margin-top:16px; font-family:var(--f-mono); font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--lime-500); }
body.mku-contacto .sidecard .resp::before{ content:""; width:9px; height:9px; border-radius:50%; background:var(--lime-500); box-shadow:0 0 0 0 rgba(60,229,149,.6); animation:mkupulse 2s ease-out infinite; }

/* ============ FOOTER (igual que la home/about) ============ */

/* ============ RESPONSIVE ============ */
@media (max-width:900px){
  body.mku-contacto .cgrid{ grid-template-columns:1fr; }
}
@media (max-width:520px){
  body.mku-contacto .wpforms-field-container{ grid-template-columns:1fr; }
  body.mku-contacto #wpforms-23-field_2-container{ grid-column:auto; }
}

/* ============ MÓVIL: más aire entre el formulario y el borde de la pantalla ============ */
@media (max-width:600px){
  body.mku-contacto .cgrid{ padding-left:8px; padding-right:8px; }
  body.mku-contacto .formcard::after{ transform:translate(9px,9px); } /* el holo no se cuela hasta el borde derecho/inferior */
}

/* ============ MOTION GUARD ============ */
@media (prefers-reduced-motion: reduce){
  body.mku-contacto .chero .top .wm::before{ animation:none; background-position:50% 0; }
  body.mku-contacto .formcard::after{ animation:none; background-position:50% 0; }
  body.mku-contacto .sidecard .resp::before{ animation:none; }
}