:root{
  --paper:#f7f3ed;
  --paper-2:#efe9e1;
  --footer-bg:#efe9e1;
  --surface:#fffdfa;
  --ink:#24131d;
  --ink-2:#46373f;
  --muted:#786b70;
  --line:#d8cec5;
  --line-soft:#e8e0d8;
  --blue:#1f5982;
  --blue-dark:#174866;
  --blue-pale:rgba(31,89,130,.08);
  --brand-dot-one:#c95232;
  --success:#237b4b;
  --error:#9b3131;
  --serif:'Instrument Serif',Georgia,serif;
  --sans:'Geist',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'Geist Mono',ui-monospace,monospace;
  --wordmark:'Sarina','Segoe Script',cursive;
  --shell:min(1180px,calc(100% - 48px));
  --shadow:0 24px 60px rgba(36,19,29,.09),0 3px 12px rgba(36,19,29,.05);
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{scroll-behavior:smooth}
body{min-width:320px;margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased}
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background-image:linear-gradient(rgba(64,42,51,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(64,42,51,.025) 1px,transparent 1px);background-size:84px 84px}
a{color:inherit}
button,input,textarea{font:inherit}
.shell{width:var(--shell);margin-inline:auto}
.skip-link{position:fixed;top:10px;left:10px;z-index:200;padding:10px 14px;background:var(--ink);color:#fff;transform:translateY(-150%);transition:transform .2s}
.skip-link:focus{transform:none}

.contact-header{position:relative;z-index:10;width:min(1600px,calc(100% - 32px));margin:12px auto 0;border:1px solid rgba(255,255,255,.9);border-radius:999px;background:linear-gradient(135deg,rgba(255,253,250,.74),rgba(255,255,255,.5));box-shadow:0 14px 42px rgba(31,89,130,.12),inset 0 1px 0 rgba(255,255,255,.95);backdrop-filter:blur(16px) saturate(120%);-webkit-backdrop-filter:blur(16px) saturate(120%)}
.contact-header .header-inner{width:min(1440px,calc(100% - 48px));min-height:68px;margin-inline:auto;display:flex;align-items:center;justify-content:space-between;gap:30px}
/* El header inyectado de la landing usa `.shell`, que aquí es mas estrecho.
   Forzamos su ancho real (1440) para que quede identico al de la landing. */
.site-header .header-inner{width:min(1440px,calc(100% - 48px));margin-inline:auto}
@media(max-width:1000px){.site-header .header-inner{width:calc(100% - 24px)}}
.wordmark{position:relative;display:inline-block;color:var(--blue);font:400 27px/1 var(--wordmark);text-decoration:none;letter-spacing:0}
.wordmark-i{position:relative;display:inline-block;line-height:1}
.wordmark-i::after{content:"";position:absolute;z-index:1;top:.04em;left:62%;width:.15em;height:.15em;border-radius:50%;background:#c95232;transform:translateX(-50%)}
.header-nav{display:flex;align-items:center;gap:26px}
.header-nav a{text-decoration:none;font-size:13px;font-weight:600}
.back-link,.login-link{color:var(--blue);transition:color .2s}
.back-link{display:inline-flex;align-items:center;gap:8px}
.back-link span{font-size:17px;transition:transform .2s}
.back-link:hover span{transform:translateX(-3px)}
.back-link:hover,.login-link:hover{color:var(--blue-dark)}
.primary-link{display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:0 19px;border:1px solid var(--blue);background:var(--blue);color:#fff;transition:transform .2s,background .2s,border-color .2s}
.primary-link:hover{background:var(--blue-dark);border-color:var(--blue-dark);transform:translateY(-2px)}

.contact-main{width:var(--shell);margin-inline:auto;padding:76px 0 94px}
.contact-layout{display:grid;grid-template-columns:minmax(0,.9fr) minmax(420px,.78fr);gap:100px;align-items:start}
.eyebrow{margin:0 0 18px;font:500 10px/1.2 var(--mono);text-transform:uppercase;letter-spacing:.14em;color:var(--blue)}
.contact-copy h1{max-width:650px;margin:0;font:400 clamp(54px,5vw,78px)/.94 var(--serif);letter-spacing:-.04em}
.contact-lede{max-width:600px;margin:27px 0 0;color:var(--ink-2);font-size:16px;line-height:1.7}
.contact-points{margin-top:52px;border-top:1px solid var(--line)}
.contact-points article{display:grid;grid-template-columns:40px 1fr;gap:18px;padding:22px 0;border-bottom:1px solid var(--line)}
.contact-points article>span{padding-top:3px;color:var(--blue);font:500 9px/1.2 var(--mono);letter-spacing:.1em}
.contact-points h2{margin:0 0 5px;font-size:13px}
.contact-points p{margin:0;color:var(--muted);font-size:11px;line-height:1.55}

.form-panel{padding:34px;border:1px solid var(--line);background:rgba(255,253,250,.76);box-shadow:var(--shadow)}
.form-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:27px;padding-bottom:18px;border-bottom:1px solid var(--line)}
.form-heading p{margin:0;font:400 31px/1 var(--serif)}
.form-heading span{color:var(--muted);font-size:9px}
.contact-form{display:flex;flex-direction:column;gap:20px}
.field{position:relative;display:flex;flex-direction:column;gap:8px}
.field label{font-size:11px;font-weight:650}
.field input,.field textarea{width:100%;border:1px solid var(--line);border-radius:0;background:var(--surface);color:var(--ink);outline:none;transition:border-color .2s,box-shadow .2s}
.field input{height:49px;padding:0 14px}
.field textarea{min-height:172px;padding:13px 14px;line-height:1.55;resize:vertical}
.field input::placeholder,.field textarea::placeholder{color:#9a8e92}
.field input:focus,.field textarea:focus{border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-pale)}
.field input[aria-invalid="true"],.field textarea[aria-invalid="true"]{border-color:var(--error)}
.field-help{align-self:flex-end;margin-top:-4px;color:var(--muted);font-size:8.5px}
.website-field{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.privacy-copy{margin:0;color:var(--muted);font-size:9px;line-height:1.55}
.privacy-copy a{color:var(--blue);font-weight:600}
.submit-button{width:100%;min-height:49px;display:flex;align-items:center;justify-content:space-between;padding:0 18px;border:1px solid var(--blue);background:var(--blue);color:#fff;font-weight:650;cursor:pointer;transition:background .2s,border-color .2s,transform .2s}
.submit-button:hover:not(:disabled){background:var(--blue-dark);border-color:var(--blue-dark);transform:translateY(-2px)}
.submit-button:disabled{cursor:wait;opacity:.68}
.submit-button>span:last-child{font-size:18px}
.form-status{min-height:22px;margin:0;font-size:10px;line-height:1.5}
.form-status.is-success{color:var(--success)}
.form-status.is-error{color:var(--error)}

/* SIN `--brand-icon:none` a proposito. Esta hoja se carga DESPUES de
   landing.css, y ese valor por defecto pisaba (por orden de carga) las clases
   de icono que solo estan en landing.css: sin mascara, el icono salia como un
   cuadrado macizo. Paso con el icono de X del pie (22-sep-2026), que la landing
   añadio al quitar el de WhatsApp y que aqui nadie copio. El valor por defecto
   ya lo pone landing.css, asi que cualquier icono nuevo de la landing funciona
   tambien aqui sin copiarlo. Las clases de abajo sobran, pero no estorban. */
.brand-icon{width:21px;height:21px;display:inline-block;flex:none;background:currentColor;-webkit-mask:var(--brand-icon) center/contain no-repeat;mask:var(--brand-icon) center/contain no-repeat}
.icon-whatsapp{--brand-icon:url('/static/img/landing/icon-whatsapp.svg')}
.icon-instagram{--brand-icon:url('/static/img/landing/icon-instagram.svg')}
.icon-linkedin{--brand-icon:url('/static/img/landing/icon-linkedin.svg')}
.icon-youtube{--brand-icon:url('/static/img/landing/icon-youtube.svg')}
.icon-facebook{--brand-icon:url('/static/img/landing/icon-facebook.svg')}
.icon-openai{--brand-icon:url('/static/img/landing/icon-openai.svg')}
.icon-claude{--brand-icon:url('/static/img/landing/icon-claude.svg')}
.icon-gemini{--brand-icon:url('/static/img/landing/icon-gemini.svg')}
.site-footer{margin-top:56px;padding:64px 0 28px;border:1px solid var(--line);border-bottom:0;border-radius:24px 24px 0 0;background:var(--footer-bg)}
.footer-grid{display:grid;grid-template-columns:2fr repeat(3,1fr);gap:54px}
.footer-grid>div{display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.footer-grid p,.footer-grid a,.footer-grid span{margin:0;color:var(--muted);font-size:10px;text-decoration:none}
.footer-grid strong{color:var(--ink);font-size:10px}
.footer-grid a:hover{color:#823230}
.footer-grid .wordmark,.footer-grid .wordmark span{color:var(--ink);font:400 35px/1.35 var(--wordmark);letter-spacing:0}
.footer-grid .wordmark-i{position:relative;display:inline-block;line-height:1}
/* Igual que en landing.css (esta hoja carga después y la pisaría): iconos del
   pie sin círculo y en el azul de la marca. */
.footer-socials{display:flex;align-items:center;gap:14px;margin-top:10px}
.footer-social{display:grid;place-items:center;color:var(--icon-blue)!important}
.footer-social .brand-icon{width:18px;height:18px;color:inherit}
.footer-bottom{display:flex;justify-content:space-between;margin-top:42px;padding-top:18px;border-top:1px solid var(--line);color:var(--muted);font-size:9px}
.footer-bottom a{text-decoration:none}

@media (max-width:900px){
  .contact-layout{grid-template-columns:1fr;gap:54px}
  .contact-copy h1{max-width:760px}
  .contact-lede{max-width:720px}
  .contact-points{display:grid;grid-template-columns:repeat(3,1fr)}
  .contact-points article{grid-template-columns:1fr;padding:20px 16px;border-right:1px solid var(--line)}
  .contact-points article:last-child{border-right:0}
  .form-panel{max-width:660px;width:100%;margin-inline:auto}
}

@media (max-width:680px){
  :root{--shell:calc(100% - 32px)}
  .contact-header{width:calc(100% - 20px);border-radius:24px}
  .contact-header .header-inner{width:calc(100% - 28px);min-height:auto;padding:15px 0;align-items:flex-start}
  .wordmark{margin-top:5px;font-size:25px}
  .header-nav{display:grid;grid-template-columns:auto auto;justify-content:end;gap:8px 13px}
  .back-link{grid-column:1/-1;justify-self:end;font-size:11px!important}
  .login-link{align-self:center;font-size:11px!important}
  .primary-link{min-height:35px;padding:0 12px;font-size:11px!important}
  .contact-main{padding:56px 0 68px}
  .contact-copy h1{font-size:clamp(47px,15vw,62px)}
  .contact-lede{font-size:14px}
  .contact-points{display:block;margin-top:38px}
  .contact-points article{grid-template-columns:35px 1fr;padding:18px 0;border-right:0}
  .form-panel{padding:25px 20px}
  .form-heading{display:block}
  .form-heading span{display:block;margin-top:8px}
}

@media (max-width:760px){
  .footer-grid{grid-template-columns:1fr 1fr;gap:35px}
  .footer-grid>div:first-child{grid-column:1/-1}
  .footer-bottom{gap:18px;align-items:flex-start}
}

@media (max-width:460px){
  .footer-grid{grid-template-columns:1fr}
  .footer-grid>div:first-child{grid-column:auto}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;transition-duration:.01ms!important}
}

/* Pie compartido con la landing: bloque de novedades + formulario de suscripción. */
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.footer-news{display:grid;grid-template-columns:1.1fr .9fr;gap:46px;align-items:start;padding-bottom:36px;margin-bottom:46px;border-bottom:1px solid var(--line)}
.footer-news strong{font-size:13px}
.footer-news>div>p{margin:6px 0 0;color:var(--muted);font-size:11px;line-height:1.6}
.newsletter-form label{display:flex;flex-direction:column;gap:8px;color:var(--ink-2);font-size:9px;font-weight:600}
.inline-field{display:grid;grid-template-columns:1fr auto}
.inline-field input{width:100%;min-width:0;border:1px solid var(--line);border-right:0;border-radius:0;background:var(--surface);color:var(--ink);padding:13px 14px;outline:0;font-size:12px}
.inline-field input:focus{border-color:var(--blue);box-shadow:0 0 0 2px var(--blue-pale)}
.newsletter-form small{display:block;margin-top:9px;color:var(--muted);font-size:8.5px;line-height:1.55}
.newsletter-form small a{color:inherit}
.honeypot{position:absolute!important;left:-10000px!important;width:1px!important;height:1px!important;overflow:hidden!important}
.newsletter-form .form-status{min-height:18px;margin:8px 0 0;font-size:9px}
.form-status[data-state="success"]{color:var(--success)}
.form-status[data-state="error"]{color:var(--error)}
.site-footer .button-accent{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:0 22px;border:1px solid var(--blue);background:var(--blue);color:#fff;text-decoration:none;font-size:13.5px;font-weight:600;cursor:pointer;transition:background .2s,transform .2s}
.site-footer .button-accent:hover{background:var(--blue-dark);border-color:var(--blue-dark);transform:translateY(-2px)}
.footer-grid .wordmark,.footer-grid .wordmark span{font:400 27px/1.35 var(--wordmark)}
.wordmark-i::after{background:#823230}
@media (max-width:760px){
  .footer-news{grid-template-columns:1fr;gap:18px;padding-bottom:28px;margin-bottom:36px}
  .inline-field{grid-template-columns:1fr}
  .inline-field input{border-right:1px solid var(--line);border-bottom:0}
}