/* ===========================================================================
   Inner pages (servicios.html, estudio.html). Same system as the home page:
   paper ground, ink headlines with a blue second line, pill buttons, white
   cards only where a thing stands alone. Text from the Odoo site (27-sep),
   kept, and laid out calmly: these pages read, the home page moves.
   =========================================================================== */
.page-hero{padding-block:72px 40px}
.page-hero .eyebrow{margin-bottom:22px}
.page-hero h1{margin:0;max-width:980px;font-size:clamp(44px,6.2vw,92px);line-height:.98;letter-spacing:-.045em;font-weight:650;text-wrap:balance}
.page-hero h1 span{color:var(--blue)}
.page-hero.is-long h1{max-width:1160px;font-size:clamp(38px,5vw,72px);line-height:1.02}
.page-hero .lead{max-width:620px;margin:26px 0 0;font-size:19px;line-height:1.55;color:var(--muted)}
.page-hero .actions{display:flex;flex-wrap:wrap;align-items:center;gap:18px 26px;margin-top:34px}
.page-section{padding-block:84px}
.page-section+.page-section{padding-top:24px}
.page-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px 48px;align-items:end;margin-bottom:44px}
.page-head .eyebrow{grid-column:1/-1;margin:0}
.page-head h2{margin:0;font-size:clamp(32px,4vw,56px);line-height:1.04;letter-spacing:-.04em;font-weight:600;text-wrap:balance}
.page-head h2 span{color:var(--blue)}
.page-head p{margin:0 0 6px;max-width:460px;font-size:17px;color:var(--muted)}

/* Three ways of helping: wide blocks, film and text alternating (Codex, 28-sep: three cards in a
   row would turn the films into thumbnails). On a phone: title and why, film, what you get. */
.formas{display:grid;gap:96px}
.forma{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);grid-template-areas:"film head" "film tail";gap:0 64px;align-items:start}
.forma:nth-child(even){grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);grid-template-areas:"head film" "tail film"}
.forma-head{grid-area:head;align-self:end;padding-top:12px}
.forma-film{grid-area:film;min-width:0}
.forma-tail{grid-area:tail;align-self:start}
.forma .eyebrow{margin:0 0 16px;font-size:11px}
.forma h3{margin:0;font-size:clamp(28px,2.8vw,38px);line-height:1.06;letter-spacing:-.035em;font-weight:600;text-wrap:balance}
.forma h3 span{color:var(--blue)}
.forma-head>p{margin:18px 0 0;max-width:500px;font-size:16.5px;line-height:1.6;color:#39424f}
.forma-take{margin:24px 0 0;padding-top:20px;max-width:500px;border-top:1px solid var(--line);font-size:16px;line-height:1.5;color:var(--ink)}
.forma-take b{display:block;margin-bottom:6px;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.pillar-links{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.pillar-links a{padding:7px 12px;border-radius:99px;background:#eef3ff;font-size:13px;font-weight:600;color:#1f3fb8;transition:background .16s}
.pillar-links a:hover{background:#dfe8ff}
.pillar-links a::after{content:" ↓";font-weight:500}
/* The films of the inner pages: stage, then pause button, caption and the «example» note */
.loop-film .film-stage{border-radius:16px}
.loop-foot{display:flex;align-items:flex-start;gap:14px;margin-top:14px}
.loop-text{flex:1;min-width:0;padding-top:1px}
.loop-cap{display:grid;margin:0;font-size:15px;font-weight:600;line-height:1.35;letter-spacing:-.015em;color:#27364a}
.loop-cap:empty{display:none}
.loop-cap span{grid-area:1/1;opacity:0}
.loop-cap span:last-child{opacity:1}
.loop-note{margin:4px 0 0;font-size:12.5px;color:var(--muted)}
/* The drawing of those films: the same camera as the folders (ensamble-films-casos.css), so each
   film's keyframes read the same way. .rw is 100 cqw wide (75 high on a 4:3 stage); every shot is
     translate(50cqw, 37.5cqw) scale(S) translate(-Xcqw, -Ycqw)   and the base is the result shot.
   Cards are white, labels small capitals, data travels in blue pills, a hand only for decisions. */
.loop-film .rw{position:absolute;left:0;top:0;width:100cqw;height:75cqw;transform-origin:0 0}
.loop-film .rw *{position:absolute;margin:0;white-space:nowrap}
.loop-film .rw :is(small,b,span,em,i,s){display:block;font-style:normal}
.lf-card{background:#fff;border-radius:1.4cqw;box-shadow:0 .2cqw .5cqw #17202b14,0 2.4cqw 4.8cqw -2.4cqw #243f7355;color:#1d2735}
.lf-lab{font-size:1.25cqw;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#6b778a}
.lf-pill{z-index:3;width:3.4cqw;height:1.5cqw;border-radius:.75cqw;background:#2453ec;box-shadow:0 .6cqw 1.2cqw -.4cqw #2453ec99;opacity:0}
.lf-cur{z-index:8;width:3.2cqw;height:3.2cqw;opacity:0}
.lf-cur svg{display:block;width:100%;height:100%;fill:#0f1a33;stroke:#fff;stroke-width:1.5;stroke-linejoin:round;transform-origin:22% 14%;filter:drop-shadow(0 .4cqw .5cqw #0f1a3340)}
.loop-film .vb-piece{z-index:4}
/* The eight folders, as on the home page (their styles and scripts are the home page's) */
.page-gallery.section{padding-block:84px 60px}
.page-gallery .help-heading h2{margin:0;font-size:clamp(32px,4vw,56px);line-height:1.04;letter-spacing:-.04em;font-weight:600;text-wrap:balance;max-width:none}
.page-gallery .help-heading h2 span{color:var(--blue)}
/* The method: four steps */
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px;margin:0;padding:0;list-style:none;counter-reset:step}
.steps li{position:relative;padding-top:22px;border-top:2px solid var(--ink)}
.metodo .film-stage{aspect-ratio:16/5}
.metodo .loop-foot{margin-bottom:40px}
/* the step the film is telling: a blue line over its own (keyframes in vibilog-peliculas-servicios.css) */
.metodo .steps li::before{content:"";position:absolute;left:0;right:0;top:-2px;height:2px;background:var(--blue);transform:scaleX(0);transform-origin:0 50%}
.steps .n{display:block;font-size:14px;font-weight:600;color:var(--blue);font-variant-numeric:tabular-nums}
.steps b{display:block;margin-top:10px;font-size:22px;font-weight:600;letter-spacing:-.03em}
.steps p{margin:10px 0 0;font-size:15.5px;line-height:1.55;color:var(--muted)}

/* Questions: title and a small card on the left, the answers on the right (Codex, 28-sep: here the
   motion rests). Several can be open; «¿Cuánto cuesta?» is, from the start. */
.faq-section{display:grid;grid-template-columns:minmax(0,.55fr) minmax(0,1fr);gap:40px 72px;align-items:start}
.faq-side .eyebrow{margin:0 0 22px}
.faq-side h2{margin:0;font-size:clamp(30px,3.1vw,44px);line-height:1.04;letter-spacing:-.04em;font-weight:600;text-wrap:balance}
.faq-side h2 span{color:var(--blue)}
.faq-card{margin-top:36px;padding:24px 24px 22px;border-radius:18px;background:#fff;box-shadow:inset 0 0 0 1px var(--line)}
.faq-card b{display:block;font-size:17px;font-weight:600;letter-spacing:-.02em}
.faq-card p{margin:8px 0 14px;font-size:15px;line-height:1.55;color:var(--muted)}
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line);border-radius:14px;transition:background .2s}
.faq details[open]{background:#eef3ff;border-bottom-color:transparent}
.faq summary{display:flex;justify-content:space-between;align-items:center;gap:24px;padding:22px 20px;cursor:pointer;list-style:none;font-size:19px;font-weight:600;letter-spacing:-.02em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:14px;height:14px;background:linear-gradient(currentColor,currentColor) center/14px 2px no-repeat,linear-gradient(currentColor,currentColor) center/2px 14px no-repeat;color:var(--blue)}
.faq details[open] summary::after{background:linear-gradient(currentColor,currentColor) center/14px 2px no-repeat}
.faq summary:hover{color:var(--blue)}
.faq summary:focus-visible{outline:3px solid var(--blue);outline-offset:-3px;border-radius:14px}
.faq p{margin:0;padding:0 20px 24px;max-width:720px;font-size:16.5px;line-height:1.6;color:#39424f}
.faq p strong{color:var(--ink);font-weight:600}
/* Quiénes somos: the three ways of speaking beside their film (the one being told, marked), the
   sentence between quotes above the faces, and the four values as an editorial strip. */
.voz{display:grid;grid-template-columns:minmax(0,.5fr) minmax(0,1fr);gap:40px 56px;align-items:center}
.voz .trio{display:grid;gap:0;margin:0;padding:0;list-style:none;border-top:1px solid var(--line)}
.voz .trio li{position:relative;padding:24px 0 24px 22px;border-bottom:1px solid var(--line)}
.voz .trio li::before{content:"";position:absolute;left:0;top:24px;bottom:24px;width:3px;border-radius:2px;background:var(--blue);transform:scaleY(0);transform-origin:50% 0}
.voz .trio .n{display:block;margin-bottom:6px;font-size:13px;font-weight:600;color:var(--blue);font-variant-numeric:tabular-nums}
.voz .trio b{display:block;font-size:22px;font-weight:600;letter-spacing:-.03em}
.voz .trio p{margin:8px 0 0;font-size:15.5px;line-height:1.55;color:var(--muted)}
.voz-film{min-width:0}
.team-head{max-width:640px;margin-bottom:40px}
.team-head .eyebrow{margin:0 0 22px}
.team-head h2{margin:0;font-size:clamp(32px,4vw,56px);line-height:1.04;letter-spacing:-.04em;font-weight:600;text-wrap:balance}
.team-head p{margin:18px 0 0;max-width:560px;font-size:17px;line-height:1.55;color:var(--muted)}
.team-section .team{margin-top:0}
/* the shared sentence, under the three of them: smaller than the title, so it closes and does not compete */
.team-section .quote{margin:48px 0 0;border-top:0;padding-top:0}  /* vibilog-base.css gives .quote a rule on top */
.quote blockquote{margin:0}
.quote p{margin:0;font-size:clamp(22px,2.1vw,28px);line-height:1.2;letter-spacing:-.025em;font-weight:650;text-wrap:balance}
.quote p span{color:var(--blue)}
.values{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px 40px;margin:0;padding:0;list-style:none}
.values li{padding-top:4px}
.values b{display:block;margin-top:18px;font-size:21px;font-weight:600;letter-spacing:-.03em}
.values p{margin:10px 0 0;font-size:15.5px;line-height:1.55;color:var(--muted)}
.values .v{position:relative;display:block;padding-bottom:12px;font-size:15px;font-weight:700;color:var(--blue);font-variant-numeric:tabular-nums}
/* a short blue stroke under each number, drawn as it comes into view (base: drawn) */
.values .v::after{content:"";position:absolute;left:0;bottom:0;width:44px;height:2px;border-radius:1px;background:var(--blue);transform-origin:0 50%}
@supports (animation-timeline:view()){@media(prefers-reduced-motion:no-preference){
  .values .v::after{animation:vb-trazo linear both;animation-timeline:view();animation-range:entry 30% cover 38%}
  .values li:nth-child(2) .v::after{animation-range:entry 40% cover 42%}
  .values li:nth-child(3) .v::after{animation-range:entry 50% cover 46%}
  .values li:nth-child(4) .v::after{animation-range:entry 60% cover 50%}
}}
@keyframes vb-trazo{from{transform:scaleX(0)}to{transform:none}}
@media(max-width:1100px){
  .steps,.values{grid-template-columns:repeat(2,minmax(0,1fr))}
  .page-head{grid-template-columns:minmax(0,1fr)}
  .forma,.forma:nth-child(even){grid-template-columns:minmax(0,1fr);grid-template-areas:"head" "film" "tail";gap:26px}
  .forma-head{padding-top:0}
  .forma-take{margin-top:0}
  .faq-section,.voz{grid-template-columns:minmax(0,1fr)}
  .formas{gap:72px}
}
@media(max-width:800px){
  .page-hero{padding-block:44px 24px}
  .page-hero .lead{font-size:17px}
  .page-section{padding-block:60px}
  .page-gallery.section{padding-block:60px 44px}
  .faq summary{padding:20px 14px}
  .faq p{padding:0 14px 20px}
}
@media(max-width:570px){
  .page-hero h1{font-size:clamp(38px,11vw,56px)}
  .steps,.values{grid-template-columns:minmax(0,1fr)}
  .faq summary{font-size:17px}
}
@media(prefers-reduced-motion:reduce){.faq details,.pillar-links a{transition:none}}

/* Forms (contacto.html, soporte.html): one white card, fields like the rest of the site.
   They post to /api/… with no JavaScript; the service answers with a 303. */
.form-wrap{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:40px 56px;align-items:start}
.form-card{display:grid;gap:18px;padding:30px 30px 28px;border-radius:20px;background:#fff;box-shadow:inset 0 0 0 1px var(--line),0 24px 48px -36px #17202b55}
.form-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.field{display:grid;gap:7px}
.field label,.field legend{font-size:14px;font-weight:600;color:var(--ink)}
.field .opt{font-weight:400;color:var(--muted)}
.field input,.field select,.field textarea{width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:#fff;font:inherit;font-size:16px;color:var(--ink)}
.field textarea{min-height:150px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px #2453ec2e}
/* Campos con la etiqueta dentro (28-09-2026, como el área de clientes): la etiqueta va DESPUÉS del
   campo en el HTML. Estado base = etiqueta arriba y pequeña; vacío y sin foco baja al sitio del texto.
   El placeholder es un ejemplo: solo se ve con el cursor dentro. */
.field.flota{position:relative;display:block}
.flota input,.flota textarea{min-height:58px;padding:24px 16px 8px;line-height:1.5}
.flota.area textarea{padding-top:32px;min-height:150px}
.flota label{position:absolute;z-index:2;top:9px;left:17px;right:17px;margin:0;font-size:16px;font-weight:600;line-height:1.25;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:none;transform:translateY(0) scale(.75);transform-origin:0 0;transition:transform .18s cubic-bezier(.2,0,.2,1),color .18s}
.flota.area::before{content:"";position:absolute;z-index:1;top:1px;left:1px;right:1px;height:30px;background:#fff;border-radius:11px 11px 0 0;pointer-events:none}
.flota label .opt{font-weight:400}
.flota input::placeholder,.flota textarea::placeholder{color:transparent;opacity:1;transition:color .18s}
.flota input:focus::placeholder,.flota textarea:focus::placeholder{color:#9aa1ac}
.flota input:focus+label,.flota textarea:focus+label{color:var(--blue)}
.flota input:placeholder-shown:not(:focus):not(:-webkit-autofill)+label{transform:translateY(10px) scale(1);font-weight:400}
.flota textarea:placeholder-shown:not(:focus)+label{transform:translateY(7px) scale(1);font-weight:400}
@media (prefers-reduced-motion:reduce){.flota label{transition:none}}
.choices{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;border:0}
.choices legend{margin-bottom:8px}
.choices label{position:relative;display:inline-flex;align-items:center;padding:9px 15px;border-radius:99px;background:#f0f3fa;box-shadow:inset 0 0 0 1px var(--line);font-size:14px;font-weight:600;color:#39424f;cursor:pointer}
.choices input{position:absolute;opacity:0;pointer-events:none}
.choices input:checked+span{color:#fff}
.choices label:has(input:checked){background:var(--blue);box-shadow:none;color:#fff}
.choices label:has(input:focus-visible){outline:3px solid var(--blue);outline-offset:2px}
.form-card .button{justify-self:start;border:0;cursor:pointer;font:inherit;font-size:15px;font-weight:600}
.form-note{margin:0;font-size:13px;line-height:1.5;color:var(--muted)}
.form-note a{color:var(--blue);text-decoration:underline;text-underline-offset:2px}
/* the trap field: out of sight for people, still there for bots */
.hp{position:absolute!important;left:-10000px;width:1px;height:1px;overflow:hidden}
.form-aside{display:grid;gap:22px}
.form-aside h2{margin:0;font-size:21px;font-weight:600;letter-spacing:-.025em}
.form-aside ol{display:grid;gap:14px;margin:0;padding:0;list-style:none;counter-reset:s}
.form-aside li{position:relative;padding-left:40px;font-size:15.5px;line-height:1.5;color:var(--muted)}
.form-aside li b{display:block;color:var(--ink);font-weight:600}
.form-aside li::before{counter-increment:s;content:counter(s);position:absolute;left:0;top:0;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:#eef3ff;color:var(--blue);font-size:13px;font-weight:700}
.form-aside p{margin:0;font-size:15px;color:var(--muted)}
.form-aside a{color:var(--blue)}
@media(max-width:900px){.form-wrap{grid-template-columns:minmax(0,1fr)}}
@media(max-width:570px){.form-row{grid-template-columns:minmax(0,1fr)}.form-card{padding:22px 18px}}
/* A link inside running text (gracias, no enviado) reads at the text's own size */
.lead .textlink{font-size:inherit;line-height:inherit}
/* Data still missing (the company name in the privacy notice): amber, as in the legal pages */
.todo{padding:1px 6px;border-radius:6px;background:#fdf1dc;box-shadow:inset 0 0 0 1px #ecc27f;color:#8a5a10;font-weight:600}