/* =====================================================================
   v13 · Estructura de agencia
   Inicio · 01 Lo que ofrecemos · 02 Cómo trabajamos · 03 Trabajos y estilos
   04 Planes · 05 Preguntas · 06 Cotiza (formulario)
   Ritmo de color: noche · lavanda · blanco plano · noche · blanco · lavanda · violeta
   ===================================================================== */

/* ---------- 01 · Lo que ofrecemos ---------- */
.svc13{padding-block:88px 96px}
.svc13 .section-heading{margin-bottom:40px}
.svc13 .deal-hint{max-width:30ch;font-size:15px;color:var(--muted)}
.svc13 .deal-hint b{color:var(--violeta);font-weight:700}
.deal.deal6{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;padding:0;width:calc(100% - 64px);max-width:1160px;margin:0 auto;height:auto}
.deal6 .svc{min-height:288px;transform-style:preserve-3d;will-change:transform;transition:box-shadow var(--hover),outline-color var(--hover);outline:3px solid transparent;outline-offset:3px}
.deal6 .svc h3{font-size:var(--fs-h3);max-width:12ch}
.deal6 .svc p{font-size:15px;line-height:1.55;max-width:26ch}
.deal6 .svc-ico{width:104px;height:104px;top:-34px}
@media(hover:hover) and (pointer:fine){.deal6 .svc:hover{box-shadow:var(--e3)}}
.deal6 .svc.is-picked{outline-color:var(--violeta)}
.deal6 .svc-dark.is-picked{outline-color:var(--lime)}

.svc-add{margin-top:auto;align-self:start;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:10px 18px;border-radius:99px;border:1.5px solid #12101f26;background:#fff;color:var(--ink);font:600 14px Outfit,sans-serif;cursor:pointer;transition:background var(--hover),color var(--hover),border-color var(--hover),translate var(--hover) var(--ease-ui)}
.svc-add>span{font-size:16px;line-height:1}
.svc-dark .svc-add{background:#ffffff14;border-color:#ffffff33;color:#fff}
.svc-add:hover{translate:0 -2px;border-color:var(--violeta)}
.svc-dark .svc-add:hover{border-color:var(--lime)}
.svc-add[aria-pressed=true]{background:var(--violeta);border-color:var(--violeta);color:#fff}
.svc-dark .svc-add[aria-pressed=true]{background:var(--lime);border-color:var(--lime);color:var(--ink)}
.svc-add:focus-visible{outline:3px solid var(--violeta);outline-offset:3px}

/* Ya y su cotización */
.ya-quote{display:grid;grid-template-columns:132px minmax(0,1fr) auto;align-items:center;gap:24px;margin-top:48px;padding:16px 24px 16px 8px;border-radius:28px;background:#ffffffb3;border:1px solid #e4d8f6;box-shadow:var(--e1);backdrop-filter:blur(6px)}
.ya-quote .deal-ya{display:block;position:relative;left:auto;bottom:auto;width:132px;margin:-40px 0 -8px;z-index:1}
.quote-card{min-width:0}
.quote-head{display:flex;align-items:baseline;gap:12px;margin-bottom:8px}
.quote-k{font:700 12px Outfit,sans-serif;letter-spacing:.14em;color:var(--violeta)}
.quote-n{font-size:14px;color:var(--muted)}
.quote-list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px;min-height:40px;align-items:center}
.quote-empty{font-size:15px;color:var(--muted)}
.quote-empty b{color:var(--ink)}
.quote-item{display:inline-flex;align-items:center;gap:4px;padding:6px 6px 6px 14px;border-radius:99px;background:var(--lavanda);border:1px solid #d9c8f6;font:600 14px Outfit,sans-serif;color:var(--ink)}
.quote-item button{width:28px;height:28px;border-radius:50%;border:0;background:transparent;color:var(--muted);font-size:18px;line-height:1;cursor:pointer;transition:background var(--hover),color var(--hover)}
.quote-item button:hover{background:#fff;color:var(--ink)}
.quote-go{white-space:nowrap}
.ya-quote:not(.has-items) .quote-go{background:#fff;border:1.5px solid #12101f26;box-shadow:none}

/* ---------- 02 · Cómo trabajamos ---------- */
.proc13 .build-heading{margin-bottom:48px}
.proc13 .build-layout{grid-template-columns:1.1fr .9fr;gap:56px;align-items:start}
.steps13{list-style:none;margin:0;padding:0;border-top:1px solid #e4d8f6}
.steps13 .build-step{display:block!important;position:relative;min-height:0;margin:0;padding:24px 0 24px;border:0;border-bottom:1px solid #e4d8f6;border-radius:0;background:none;box-shadow:none;animation:none!important}
.steps13 .step-btn{display:flex;align-items:baseline;gap:20px;width:100%;padding:0;border:0;background:none;text-align:left;cursor:pointer;font:inherit;color:inherit}
.steps13 .step-n{flex-shrink:0;width:28px;font:700 14px/1 Outfit,sans-serif;letter-spacing:.06em;color:#a79fb8;transition:color var(--hover)}
.steps13 .step-t{font:600 24px/1.2 Outfit,sans-serif;color:#7d7590;transition:color var(--hover)}
.steps13 p{margin:8px 0 0 48px;font-size:15px;line-height:1.6;color:#8d86a0;transition:color var(--hover)}
.steps13 .build-step.active .step-n,.steps13 .build-step.active .step-t{color:var(--violeta)}
.steps13 .build-step.active p{color:var(--ink)}
.steps13 .build-step.done .step-n{color:var(--ink)}
.steps13 .build-step.done .step-t{color:var(--ink)}
.steps13 .step-btn:hover .step-t{color:var(--violeta)}
.steps13 .step-btn:focus-visible{outline:3px solid var(--violeta);outline-offset:6px;border-radius:8px}
.steps13 .step-bar{position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--violeta);transform:scaleX(0);transform-origin:0 50%}
.proc13 .build-step>span{display:none}

/* ---------- 03 · Trabajos y estilos ---------- */
.work13 .section-heading{display:flex;justify-content:space-between;align-items:end;gap:24px;margin-bottom:48px}
.work13 .demo-lead{max-width:40ch;color:var(--on-dark-muted)}
.work13 #estilos.styles13{margin:96px 0 0;padding:64px 0 0;border-top:1px solid #ffffff1f;border-radius:0;background:none;max-width:none;width:auto;z-index:auto;position:static}
.styles13-head{display:flex;justify-content:space-between;align-items:end;gap:24px;margin-bottom:24px}
.styles13-head h3{font-size:clamp(28px,2.6vw,36px);color:#fff}
.styles13-head p{font-size:15px;color:var(--on-dark-muted);max-width:36ch}
.styles13 .chips{margin-bottom:24px}
.styles13 .chip{background:#ffffff0f;border-color:#ffffff2e;color:#fff}
.styles13 .chip:hover{border-color:var(--lime);background:#ffffff1a}
.styles13 .chip[aria-pressed=true]{background:var(--lime);border-color:var(--lime);color:var(--ink)}
.styles13 .browser{box-shadow:0 2px 4px #0003,0 32px 64px #0007}
.styles13 .style-card{color:var(--ink);border-color:transparent;box-shadow:0 24px 48px #0005}

/* ---------- 04 · Planes ---------- */
#planes .center-heading>p:not(.eyebrow){font-size:15px;line-height:1.6;max-width:60ch;margin-inline:auto;color:var(--muted)}
.perks13{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:8px 12px;margin:24px 0 0;padding:0}
.perks13 li{display:inline-flex;align-items:center;gap:8px;padding:8px 16px;border-radius:99px;background:#fff;border:1px solid #e4d8f6;font:600 14px Outfit,sans-serif;color:var(--ink);box-shadow:var(--e1)}
.perks13 li:before{content:'✓';display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--lime);color:var(--ink);font-size:12px}
@media(min-width:761px){.plans12{margin-top:64px}}

/* ---------- 06 · Cotiza ---------- */
.contact13{text-align:left;padding-block:112px}
.contact13-grid{position:relative;display:grid;grid-template-columns:.9fr 1.1fr;gap:64px;align-items:center}
.contact13-copy .eyebrow{color:#e4dcff}
.contact13-copy .eyebrow .code{color:var(--lime)}
.contact13-copy h2{font-size:clamp(44px,5vw,72px);line-height:1.02;margin:24px 0}
.contact13-copy h2>span{color:var(--lime)}
.contact13-copy>p:not(.eyebrow){font-size:var(--fs-lead);color:#e4dcff;max-width:36ch}
.contact13-list{list-style:none;margin:24px 0 32px;padding:0;display:grid;gap:12px}
.contact13-list li{display:flex;align-items:center;gap:12px;font-size:15px;color:#fff}
.contact13-list li:before{content:'✓';display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:#ffffff1f;color:var(--lime);font-size:13px;flex-shrink:0}
.contact13 .contact-direct{justify-content:flex-start;gap:24px}
.contact13 .contact-direct a{color:#fff}

.quote-form{position:relative;display:grid;gap:20px;padding:32px;border-radius:28px;background:#fff;color:var(--ink);box-shadow:0 4px 8px #1a064a33,0 40px 80px #1a064a59}
.qf-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.qf-field{display:grid;gap:8px;min-width:0;margin:0;padding:0;border:0}
.qf-field>label,.qf-field>legend{font:600 14px Outfit,sans-serif;color:var(--ink);padding:0;margin-bottom:8px}
.qf-field>label{margin-bottom:0}
.qf-field small{font-weight:400;color:var(--muted)}
.quote-form input[type=text],.quote-form select,.quote-form textarea{width:100%;min-height:48px;padding:12px 16px;border-radius:14px;border:1.5px solid #ddd2ef;background:#faf8fe;font:16px/1.4 'Work Sans',sans-serif;color:var(--ink);transition:border-color var(--hover),background var(--hover),box-shadow var(--hover)}
.quote-form textarea{resize:vertical;min-height:88px}
.quote-form input:focus,.quote-form select:focus,.quote-form textarea:focus{outline:0;border-color:var(--violeta);background:#fff;box-shadow:0 0 0 4px #6c2bff1f}
.quote-form [aria-invalid=true]{border-color:#d93a5b;background:#fff6f8}
.qf-checks{display:flex;flex-wrap:wrap;gap:8px}
.qf-checks label,.qf-via label{position:relative;cursor:pointer}
.qf-checks input,.qf-via input{position:absolute;opacity:0;width:1px;height:1px}
.qf-checks span,.qf-via span{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:8px 14px;border-radius:99px;border:1.5px solid #ddd2ef;background:#faf8fe;font:600 14px Outfit,sans-serif;color:var(--ink);transition:background var(--hover),border-color var(--hover),color var(--hover)}
.qf-checks span:before{content:'＋';font-size:14px;color:var(--violeta)}
.qf-checks input:checked+span{background:var(--violeta);border-color:var(--violeta);color:#fff}
.qf-checks input:checked+span:before{content:'✓';color:var(--lime)}
.qf-checks label:hover span,.qf-via label:hover span{border-color:var(--violeta)}
.qf-checks input:focus-visible+span,.qf-via input:focus-visible+span{outline:3px solid var(--violeta);outline-offset:2px}
.qf-via{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.qf-via legend{width:100%}
.qf-via input:checked+span{background:var(--ink);border-color:var(--ink);color:#fff}
.qf-send{width:100%;justify-content:center}
.qf-note{margin:-4px 0 0;font-size:13px;line-height:1.5;color:var(--muted);text-align:center}
.qf-note.is-error{color:#c42a4c}

/* ---------- Color de cada sección (sobrescribe identidad.css) ---------- */
.work13{background:radial-gradient(ellipse 55% 50% at 100% 0%,#3a1c7a,transparent 70%),radial-gradient(ellipse 50% 45% at 0% 100%,#2a1757,transparent 70%),var(--noche)}
.work13 .eyebrow,.work13 .eyebrow .code,.work13 .pc-k{color:var(--lime)}
.contact13{background:radial-gradient(ellipse 50% 60% at 100% 0%,#c6ff3d1f,transparent 65%),radial-gradient(ellipse 60% 70% at 0% 100%,#2c0d8c,transparent 70%),linear-gradient(150deg,#6c2bff,var(--violeta-2))}
.contact13:before{display:none}
.contact13 .bp-grid{opacity:.35}

/* Hojas: cada sección sube sobre la anterior, en el orden nuevo */
@media(min-width:761px){
 #proceso{z-index:3}#trabajos{z-index:4}#planes{z-index:5}#preguntas{z-index:6}#contacto{z-index:7}
 #servicios{position:relative;z-index:2}
}

/* ---------- Escalas intermedias y celular ---------- */
@media(max-width:1000px) and (min-width:761px){
 .deal.deal6{grid-template-columns:1fr 1fr}
 .contact13-grid{grid-template-columns:1fr;gap:48px}
 .proc13 .build-layout{grid-template-columns:1fr}
}
@media(max-width:760px){
 .svc13{padding-block:64px 72px}
 .deal.deal6{grid-template-columns:1fr;gap:48px;width:calc(100% - 36px);padding-top:24px}
 .ya-quote{grid-template-columns:88px minmax(0,1fr);padding:16px;gap:12px 16px;margin-top:48px}
 .ya-quote .deal-ya{width:88px;margin:-36px 0 0}
 .quote-go{grid-column:1/-1;justify-content:center}
 .proc13 .build-layout{grid-template-columns:1fr;gap:32px}
 .steps13 .step-t{font-size:20px}
 .steps13 p{margin-left:48px;font-size:14px}
 .work13 .section-heading,.styles13-head{flex-direction:column;align-items:flex-start}
 .work13 #estilos.styles13{margin-top:64px;padding-top:48px}
 .contact13{padding-block:72px}
 .contact13-grid{grid-template-columns:1fr;gap:40px}
 .contact13-copy h2{font-size:44px}
 .quote-form{padding:24px 20px}
 .qf-row{grid-template-columns:1fr}
}
.contact13-copy h2,.contact13-copy h2>.w{color:#fff}
.contact13-copy h2>span .w{color:var(--lime)}
#planes .center-heading h2{margin-bottom:16px}
@media(min-width:761px){.plans12{margin-top:112px}.deal.deal6{row-gap:56px}}
.glow:after{display:none!important}

/* ---------- Logo: Ya se asoma detrás de la etiqueta ---------- */
.brand{padding-top:14px}
.tag-wrap{position:relative;display:inline-block;transform:rotate(-7deg)}
.tag-wrap .tag{position:relative;z-index:1;transform:none}
.tag-ya{position:absolute;z-index:0;left:50%;top:-.78em;width:1.32em;height:.99em;margin-left:-.66em;font-size:32px;transition:translate .35s var(--ease-ui)}
.tag-hands{position:absolute;z-index:2;left:50%;top:-.2em;width:1.62em;height:.4em;margin-left:-.81em;font-size:32px;pointer-events:none;transition:translate .35s var(--ease-ui)}
.dark-brand .tag-ya,.dark-brand .tag-hands{font-size:27px}
.tag-eyes rect{transform-box:fill-box;transform-origin:50% 50%}
@media(hover:hover){.brand:hover .tag-ya{translate:0 -4px}.brand:hover .tag-hands{translate:0 -1px}}
@media(prefers-reduced-motion:no-preference){.tag-eyes rect{animation:tag-blink 5.5s infinite}.tag-eyes rect:last-child{animation-delay:.02s}}
@keyframes tag-blink{0%,92%,100%{transform:scaleY(1)}95%{transform:scaleY(.12)}}
@media(max-width:760px){.tag-ya,.tag-hands{font-size:27px}.brand{padding-top:12px}}

/* ---------- 05 · Preguntas: tarjeta de ayuda con Ya ---------- */
.faq-layout>div:first-child:after{display:none!important}
.faq-help{position:relative;margin-top:40px;padding:28px 28px 32px;border-radius:24px;background:var(--noche);color:#fff;box-shadow:var(--e3);max-width:420px}
.fh-k{margin:0;font:700 12px/1.4 Outfit,sans-serif;letter-spacing:.14em;color:var(--lime)}
.faq-help h3{margin:10px 0 8px;font:700 26px/1.15 Outfit,sans-serif;color:#fff;max-width:11ch}
.faq-help>p:not(.fh-k){margin:0 0 20px;font-size:15px;line-height:1.6;color:var(--on-dark-muted);max-width:22ch}
.fh-actions{display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.fh-wa{display:inline-flex;align-items:center;min-height:44px;padding:10px 18px;border-radius:99px;border:1.5px solid #ffffff40;color:#fff;font:600 14px Outfit,sans-serif;text-decoration:none;transition:border-color var(--hover),background var(--hover)}
.fh-wa:hover{border-color:var(--lime);background:#ffffff0f}
.fh-ya{position:absolute;right:-40px;bottom:-30px;width:170px;pointer-events:none}
.fh-ya .ya-svg{width:100%;height:auto;display:block}
@media(max-width:1000px){.fh-ya{right:-8px;width:140px}}
@media(max-width:760px){.faq-help{margin:24px 0 8px;max-width:none;padding:24px 20px 28px}.fh-ya{right:-6px;bottom:-20px;width:118px}.faq-help h3{font-size:23px}}
/* Sobre la etiqueta violeta (menú al bajar y pie), la cabeza de Ya se separa con un tono más profundo y un canto blanco */
.site-header.scrolled .tag-ya>rect:first-of-type,.dark-brand .tag-ya>rect:first-of-type{fill:#4a17c9;stroke:#fff;stroke-width:3px}