/* EL FORMULARIO OSCURO DEL HOME (contact__form), para usarlo en cualquier página.
   Sacado del CSS del home nuevo (owly-metodo.html); todo va dentro de .owly-form-oscuro. */
.owly-form-oscuro{--text-2xl:1.5rem;--color-text:#f0f0f0;--space-8:2rem;--space-6:1.5rem;--text-sm:.875rem;--space-2:.5rem;--text-base:1rem;--font-sans:'Publica Sans',system-ui,sans-serif;--transition-fast:.15s ease;--transition-base:.3s ease;--color-accent:#fc6f20;--color-accent-dark:#e15303;--text-xs:.75rem;--space-3:.75rem;--radius-md:22px;--space-4:1rem;--color-text-muted:#afa79e;--radius-full:99px;--sans:'Publica Sans',system-ui,sans-serif;--naranja:#fc6f20;--papel:#ffffff;color:var(--color-text);font-family:var(--font-sans)}
.owly-form-oscuro .contact__btn{margin-top:var(--space-6)}
.owly-form-oscuro .btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);padding:var(--space-3) var(--space-6);border-radius:var(--radius-full);font-size:var(--text-sm);font-weight:600;letter-spacing:.02em;transition:all var(--transition-base);cursor:pointer;border:none;white-space:nowrap}.btn--primary{background-color:var(--color-accent);color:#fff}.btn--primary:hover{background-color:#e15303}
.owly-form-oscuro .contact__form-heading{font-size:var(--text-2xl);font-weight:700;color:var(--color-text);margin-bottom:var(--space-8);text-align:center}
.owly-form-oscuro .contact__form{width:100%}
.owly-form-oscuro .form__row{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-6);margin-bottom:var(--space-6);align-items:end}
.owly-form-oscuro .form__group{position:relative;padding-top:1.25rem}
.owly-form-oscuro .form__group--full{grid-column:1 / -1}
.owly-form-oscuro .form__group label{position:absolute;left:0;bottom:8px;white-space:nowrap;font-size:var(--text-sm);font-weight:400;color:#ffffff73;pointer-events:none;transition:bottom .2s ease,font-size .2s ease,color .2s ease}
.owly-form-oscuro .form__group input{background:transparent;border:none;border-bottom:1px solid rgba(255,255,255,.25);padding:var(--space-2) 0;color:var(--color-text);font-size:var(--text-base);font-family:var(--font-sans);width:100%;transition:border-color var(--transition-fast)}
.owly-form-oscuro .form__group input:focus{outline:none;border-bottom-color:var(--color-accent)}
.owly-form-oscuro .form__group input:focus~label,.owly-form-oscuro .form__group input:not(:placeholder-shown)~label{bottom:calc(100% - 1rem);font-size:var(--text-xs);color:var(--color-accent)}
.owly-form-oscuro .form__group input::placeholder{color:transparent}
.owly-form-oscuro .form__group--phone{display:flex;align-items:flex-end;gap:0}
.owly-form-oscuro .form__group--phone .form__dial{flex-shrink:0;position:relative;padding-top:1.25rem}
.owly-form-oscuro .form__dial-trigger{display:flex;align-items:center;gap:4px;background:transparent;border:none;border-bottom:1px solid rgba(255,255,255,.25);padding:var(--space-2) var(--space-3) var(--space-2) 0;color:var(--color-text);font-size:var(--text-sm);font-family:var(--font-sans);cursor:pointer;width:88px;transition:border-color var(--transition-fast)}
.owly-form-oscuro .form__dial-trigger:focus{outline:none;border-bottom-color:var(--color-accent)}
.owly-form-oscuro .form__dial.is-open .form__dial-trigger{border-bottom-color:var(--color-accent)}
.owly-form-oscuro .form__dial-flag-img{display:inline-block;width:20px;height:15px;object-fit:cover;border-radius:2px;flex-shrink:0;vertical-align:middle}
.owly-form-oscuro .form__dial-chevron{font-size:.6rem;color:#fff6;margin-left:auto;display:inline-block;transition:transform var(--transition-fast)}
.owly-form-oscuro .form__dial.is-open .form__dial-chevron{transform:rotate(180deg)}
.owly-form-oscuro .form__dial-list{display:none;position:absolute;bottom:calc(100% + 4px);left:0;min-width:110px;background:#323232;border:1px solid rgba(255,255,255,.1);border-radius:var(--radius-md);list-style:none;padding:var(--space-2) 0;max-height:320px;overflow-y:auto;z-index:9999;box-shadow:0 8px 28px #00000080;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.15) transparent}
.owly-form-oscuro .form__dial.is-open .form__dial-list{display:block}
.owly-form-oscuro .form__dial-item{display:flex;align-items:center;gap:var(--space-2);padding:6px var(--space-4);cursor:pointer;transition:background var(--transition-fast);font-size:var(--text-sm);color:var(--color-text);white-space:nowrap}
.owly-form-oscuro .form__dial-item:hover{background:#fffaf512}
.owly-form-oscuro .form__dial-item.is-selected{color:var(--color-accent)}
.owly-form-oscuro .form__dial-item .form__dial-flag-img{width:20px;height:15px}
.owly-form-oscuro .form__dial-item-code{color:inherit}
.owly-form-oscuro .form__group--phone .form__input-wrap{flex:1;position:relative;padding-top:1.25rem;padding-left:var(--space-3)}
.owly-form-oscuro .form__group--phone .form__input-wrap input{background:transparent;border:none;border-bottom:1px solid rgba(255,255,255,.25);padding:var(--space-2) 0;color:var(--color-text);font-size:var(--text-base);font-family:var(--font-sans);width:100%;transition:border-color var(--transition-fast)}
.owly-form-oscuro .form__group--phone .form__input-wrap input:focus{outline:none;border-bottom-color:var(--color-accent)}
.owly-form-oscuro .form__group--phone .form__input-wrap label{position:absolute;left:var(--space-3);bottom:8px;font-size:var(--text-sm);font-weight:400;color:#ffffff73;pointer-events:none;transition:bottom .2s ease,font-size .2s ease,color .2s ease}
.owly-form-oscuro .form__group--phone .form__input-wrap input:focus~label,.owly-form-oscuro .form__group--phone .form__input-wrap input:not(:placeholder-shown)~label{bottom:calc(100% - 1rem);font-size:var(--text-xs);color:var(--color-accent)}
.owly-form-oscuro .form__group--phone .form__input-wrap input::placeholder{color:transparent}
.owly-form-oscuro .form__check{display:flex;align-items:center;gap:var(--space-3);margin-bottom:var(--space-4)}
.owly-form-oscuro .form__check input[type=checkbox]{width:16px;height:16px;accent-color:var(--color-accent);flex-shrink:0;cursor:pointer}
.owly-form-oscuro .form__check label{font-size:var(--text-sm);color:var(--color-text);cursor:pointer}
.owly-form-oscuro .form__legal{font-size:.75rem;color:var(--color-text-muted);line-height:1.6;margin-bottom:var(--space-8)}
.owly-form-oscuro .contact__btn{border-radius:var(--radius-full);padding-inline:var(--space-8);display:block;margin-inline:auto}
@media (max-width: 480px){.owly-form-oscuro .form__row{grid-template-columns:1fr}}
.owly-form-oscuro .btn,.owly-form-oscuro .contact__btn,.owly-form-oscuro .thankyou__btn,.owly-form-oscuro .owlysales-banner__btn,.owly-form-oscuro .blog-slider__viewall,.owly-form-oscuro .uxui-card__hover-btn{min-height:44px;padding:0 22px;border-radius:99px;font-size:14px;font-weight:600;letter-spacing:normal}
.owly-form-oscuro .btn:hover,.owly-form-oscuro .contact__btn:hover,.owly-form-oscuro .thankyou__btn:hover,.owly-form-oscuro .owlysales-banner__btn:hover,.owly-form-oscuro .uxui-card__hover-btn:hover{transform:none}
.owly-form-oscuro .btn--primary:active,.owly-form-oscuro .contact__btn:active,.owly-form-oscuro .thankyou__btn:active{background-color:#323232;border-color:#323232}
.owly-form-oscuro .form__etapa{border:0;margin:6px 0 22px;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.owly-form-oscuro .form__etapa legend{width:100%;margin-bottom:12px;padding:0;font:400 14px/1.3 var(--sans);color:#ffffff99}
.owly-form-oscuro .form__etapa label{cursor:pointer}
.owly-form-oscuro .form__etapa input{position:absolute;opacity:0;pointer-events:none}
.owly-form-oscuro .form__etapa span{display:inline-flex;align-items:center;height:38px;padding:0 16px;border-radius:99px;border:1px solid rgba(255,255,255,.3);font:500 14px/1 var(--sans);color:#f0f0f0}
.owly-form-oscuro .form__etapa span:hover{border-color:rgba(255,255,255,.6)}
.owly-form-oscuro .form__etapa input:checked+span{background:var(--naranja);border-color:var(--naranja);color:var(--papel)}
.owly-form-oscuro .form__etapa input:focus-visible+span{outline:2px solid var(--naranja);outline-offset:2px}
.owly-form-oscuro .btn,.owly-form-oscuro .contact__btn,.owly-form-oscuro .thankyou__btn,.owly-form-oscuro .owlysales-banner__btn,.owly-form-oscuro .blog-slider__viewall,.owly-form-oscuro .uxui-card__hover-btn{min-height:44px;padding:0 22px;border-radius:99px;font-size:14px;font-weight:600;letter-spacing:normal}

/* LA SECCIÓN DEL FORMULARIO (section#cierre.contact del home): título centrado y el formulario debajo */
.contact{--space-8:2rem;--container-max:1600px;--container-pad:var(--space-8);--color-bg:#323232;--space-24:6rem;--space-4:1rem;--text-xs:.75rem;--space-6:1.5rem;--color-accent:#fc6f20;--color-text:#f0f0f0;--text-base:1rem;--space-2:.5rem;--color-text-muted:#afa79e;--sans:'Publica Sans',system-ui,sans-serif}
.contact,.footer,.home-faq-section{--space-2:.5rem;--space-3:.75rem;--space-4:1rem;--space-6:1.5rem;--space-8:2rem;--space-10:2.5rem;--space-12:3rem;--space-16:4rem;--space-24:6rem;
  --text-xs:.75rem;--text-sm:.875rem;--text-base:1rem;--text-2xl:1.5rem;--radius-full:99px;--radius-md:22px;--transition-fast:.15s ease;--transition-base:.3s ease;
  --color-accent:#fc6f20;--color-accent-dark:#e15303;--color-text:#f0f0f0;--color-text-muted:#afa79e;--color-border:#575655;--color-bg:#323232;
  --font-sans:'Publica Sans',system-ui,sans-serif;--container-max:1600px;--container-pad:var(--space-8)}
.contact .container,.footer .container{width:100%;max-width:var(--container-max);margin-inline:auto;padding-inline:var(--container-pad)}
:where(.contact,.footer) :where(p,h2,h3,ul){margin:0}
.contact a,.footer a{text-decoration:none}
.contact__label-line:first-child{display:inline-block;flex-shrink:0;width:6px;height:6px;border-radius:99px;background:#fc6f20;box-shadow:11px 0 0 #fc6f20,23px 0 0 1.5px #fc6f20;margin-right:24px;vertical-align:middle}
.contact__label-line:last-child:not(:first-child){display:none}
.contact{background-color:var(--color-bg);padding-block:var(--space-24);position:relative;overflow:hidden}
.contact__glow{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:600px;height:500px;background:radial-gradient(ellipse at center,rgba(180,50,0,.45) 0%,transparent 70%);pointer-events:none}
.contact__inner{display:flex;flex-direction:column;align-items:center;gap:var(--space-8)}
.contact__left{width:100%;text-align:center}
.contact__right{width:100%;max-width:760px}
.contact__label{display:flex;align-items:center;justify-content:center;gap:var(--space-4);font-size:var(--text-xs);font-weight:700;letter-spacing:normal;text-transform:uppercase;color:#888;margin-bottom:var(--space-6)}
.contact__label-line{display:block;width:48px;height:1px;background-color:var(--color-accent)}
.contact__title{font-size:clamp(2.5rem,5vw,4.5rem);font-weight:600;line-height:1.05;color:var(--color-text)}
.contact__title span{color:var(--color-accent)}
.contact__intro{margin-bottom:var(--space-8);text-align:center}
.contact__intro-heading{font-size:var(--text-base);font-weight:700;color:var(--color-text);margin-bottom:var(--space-2)}
.contact__intro-desc{font-size:var(--text-base);color:var(--color-text-muted)}
@media (max-width: 768px){.contact__right{max-width:100%}}
@media (max-width: 480px){.contact__inner{grid-template-columns:1fr;gap:var(--space-8)}.contact__title{font-size:clamp(2rem,8vw,3rem)}}
/* Sin degradados ni luces: el sistema de marca usa superficies planas. Sobre una imagen, velo negro plano. */
.ecosystem__deco,.branding__glow,.contact__glow{display:none}
/* Rótulos con tres puntos en vez de rayas (sistema de marca) */
.blog__label-line:first-child,.branding__label-line:first-child,.contact__label-line:first-child,.discover__label-line:first-child,.ecosystem__label-line:first-child,.partners__label-line:first-child,.portfolio__label-line:first-child,.proj-label-line:first-child,.uxui-showcase__label-line:first-child{display:inline-block;flex-shrink:0;width:6px;height:6px;border-radius:99px;background:#fc6f20;box-shadow:11px 0 0 #fc6f20,23px 0 0 1.5px #fc6f20;margin-right:24px;vertical-align:middle}
.blog__label-line:last-child:not(:first-child),.branding__label-line:last-child:not(:first-child),.contact__label-line:last-child:not(:first-child),.discover__label-line:last-child:not(:first-child),.ecosystem__label-line:last-child:not(:first-child),.partners__label-line:last-child:not(:first-child),.portfolio__label-line:last-child:not(:first-child),.proj-label-line:last-child:not(:first-child),.uxui-showcase__label-line:last-child:not(:first-child){display:none}
/* Rótulos con tres puntos en vez de rayas (sistema de marca) */
.blog__label-line:first-child,.branding__label-line:first-child,.contact__label-line:first-child,.discover__label-line:first-child,.ecosystem__label-line:first-child,.partners__label-line:first-child,.portfolio__label-line:first-child,.proj-label-line:first-child,.uxui-showcase__label-line:first-child{display:inline-block;flex-shrink:0;width:6px;height:6px;border-radius:99px;background:#fc6f20;box-shadow:11px 0 0 #fc6f20,23px 0 0 1.5px #fc6f20;margin-right:24px;vertical-align:middle}
.blog__label-line:last-child:not(:first-child),.branding__label-line:last-child:not(:first-child),.contact__label-line:last-child:not(:first-child),.discover__label-line:last-child:not(:first-child),.ecosystem__label-line:last-child:not(:first-child),.partners__label-line:last-child:not(:first-child),.portfolio__label-line:last-child:not(:first-child),.proj-label-line:last-child:not(:first-child),.uxui-showcase__label-line:last-child:not(:first-child){display:none}
/* el diagnóstico: la transformación y la etapa */
.contact__trans{margin:18px auto 0;max-width:620px;text-align:center;font:300 18px/1.5 var(--sans);color:var(--color-text-muted,#afa79e)}
/* Rótulos con tres puntos en vez de rayas (sistema de marca) */
.blog__label-line:first-child,.branding__label-line:first-child,.contact__label-line:first-child,.discover__label-line:first-child,.ecosystem__label-line:first-child,.partners__label-line:first-child,.portfolio__label-line:first-child,.proj-label-line:first-child,.uxui-showcase__label-line:first-child{display:inline-block;flex-shrink:0;width:6px;height:6px;border-radius:99px;background:#fc6f20;box-shadow:11px 0 0 #fc6f20,23px 0 0 1.5px #fc6f20;margin-right:24px;vertical-align:middle}
.blog__label-line:last-child:not(:first-child),.branding__label-line:last-child:not(:first-child),.contact__label-line:last-child:not(:first-child),.discover__label-line:last-child:not(:first-child),.ecosystem__label-line:last-child:not(:first-child),.partners__label-line:last-child:not(:first-child),.portfolio__label-line:last-child:not(:first-child),.proj-label-line:last-child:not(:first-child),.uxui-showcase__label-line:last-child:not(:first-child){display:none}
/* Rótulos con tres puntos en vez de rayas (sistema de marca) */
.blog__label-line:first-child,.branding__label-line:first-child,.contact__label-line:first-child,.discover__label-line:first-child,.ecosystem__label-line:first-child,.partners__label-line:first-child,.portfolio__label-line:first-child,.proj-label-line:first-child,.uxui-showcase__label-line:first-child{display:inline-block;flex-shrink:0;width:6px;height:6px;border-radius:99px;background:#fc6f20;box-shadow:11px 0 0 #fc6f20,23px 0 0 1.5px #fc6f20;margin-right:24px;vertical-align:middle}
.blog__label-line:last-child:not(:first-child),.branding__label-line:last-child:not(:first-child),.contact__label-line:last-child:not(:first-child),.discover__label-line:last-child:not(:first-child),.ecosystem__label-line:last-child:not(:first-child),.partners__label-line:last-child:not(:first-child),.portfolio__label-line:last-child:not(:first-child),.proj-label-line:last-child:not(:first-child),.uxui-showcase__label-line:last-child:not(:first-child){display:none}
.contact .contact__form-heading{font-size:1.5rem;font-weight:700;color:#f0f0f0;margin-bottom:2rem;text-align:center}