/* Consultoría: jerarquía visual y movimiento.
   Implementación propia en CSS y JavaScript para el sitio PHP, inspirada en componentes gratuitos de
   Skiper UI (https://skiper-ui.com, autor: gxuri): CssLink (40), Text roll navigation (58),
   Card stack scroll (16), Text Scroll animation (31), Animated number (37) y Scroll progress (89).
   Todo el movimiento depende de html.motion, que no se activa con prefers-reduced-motion. */
.consult { --ease-out: cubic-bezier(.16, 1, .3, 1); }
.consult .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Avance de lectura */
.scroll-progress { position: fixed; inset: 0 0 auto; z-index: 20; height: 3px; background: var(--red); transform: scaleX(0); transform-origin: left; pointer-events: none; }

/* Presentación */
.consult-hero { align-items: end; padding-block: clamp(36px, 6vw, 88px); }
.consult-hero .area-heading h1 { font-size: clamp(38px, 5.3vw, 70px); line-height: 1.02; letter-spacing: -.045em; }
.consult-hero h1 strong { font-weight: 800; letter-spacing: -.035em; }
/* El margen negativo compensa el relleno que evita recortar descendentes dentro de la máscara. */
.hero-line { display: block; overflow: hidden; padding-bottom: .12em; margin-bottom: -.12em; }
.hero-line > span { display: block; }
.consult-hero .area-description { font-size: clamp(18px, 1.7vw, 21px); margin-block: 30px 34px; }
.hero-seal-disc { display: block; align-self: flex-end; width: clamp(104px, 11vw, 140px); aspect-ratio: 1; margin-bottom: auto; padding: 13px; border-radius: 50%; background: var(--cream); }
.hero-seal-disc img { width: 100%; height: 100%; animation: consult-seal 36s linear infinite; }
.consult-hero .area-status .area-label { margin-top: 44px; }
@keyframes consult-seal { to { rotate: 360deg; } }
@keyframes consult-line { from { transform: translateY(112%); } to { transform: none; } }
@keyframes consult-rise { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
html.motion .hero-line > span { animation: consult-line 700ms var(--ease-out) both; animation-delay: calc(var(--d) * 60ms + 60ms); }
html.motion .hero-rise { animation: consult-rise 600ms var(--ease-out) both; animation-delay: calc(var(--d) * 60ms + 60ms); }

/* Aparición al entrar en pantalla */
html.motion [data-reveal] { opacity: 0; transform: translateY(16px); transition: opacity 420ms var(--ease-out), transform 560ms var(--ease-out); transition-delay: calc(min(var(--d, 0), 4) * 60ms); }
html.motion [data-reveal].is-in { opacity: 1; transform: none; }

/* Servicios: cada fila completa abre su detalle. */
.service-accordion { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid rgb(4 84 62 / .22); }
.service-accordion > li { border-top: 1px solid rgb(4 84 62 / .22); scroll-margin-top: 24px; }
.service-accordion details { background: linear-gradient(var(--peach), var(--peach)) left bottom / 100% 0% no-repeat; transition: background-size 480ms var(--ease-out); }
.service-accordion details[open] { background-size: 100% 100%; }
.service-accordion summary,
.service-items { display: grid; grid-template-columns: 52px minmax(0, 1fr) minmax(0, 1.2fr) 44px; column-gap: 24px; padding-inline: 0 12px; transition: padding 480ms var(--ease-out); }
.service-accordion summary { align-items: start; padding-block: 28px; cursor: pointer; list-style: none; }
.service-accordion summary::-webkit-details-marker { display: none; }
.service-accordion summary:focus-visible { outline: 3px solid var(--green); outline-offset: -3px; }
.service-accordion details[open] > summary,
.service-accordion details[open] .service-items { padding-inline: 20px; }
.service-accordion .service-number { padding-top: 9px; color: var(--red); font: 14px Helvetica, Arial, sans-serif; }
.service-accordion h3 { margin: 0; font-size: clamp(22px, 2.3vw, 31px); font-weight: 400; line-height: 1.15; letter-spacing: -.03em; }
.service-lead { font-size: 17px; line-height: 1.6; }
.service-toggle { position: relative; justify-self: end; width: 40px; height: 40px; border: 1px solid currentColor; border-radius: 50%; transition: rotate 480ms var(--ease-out), background-color 200ms ease, border-color 200ms ease, color 200ms ease; }
.service-toggle::before,
.service-toggle::after { content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 1.5px; background: currentColor; translate: -50% -50%; }
.service-toggle::after { rotate: 90deg; }
.service-accordion details[open] .service-toggle { rotate: 45deg; background: var(--red); border-color: var(--red); color: #fff; }
.service-items { row-gap: 14px; padding-bottom: 34px; }
.service-items-label { grid-column: 2; font: 700 13px/1.6 Helvetica, Arial, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--red); }
.service-items ul { grid-column: 3; margin: 0; padding: 0 0 0 20px; font-size: 16px; line-height: 1.6; }
.service-items li { padding: 0 0 8px 4px; }
.service-items li::marker { color: var(--red); }
.service-items .text-link { grid-column: 3; justify-self: start; padding-block: 10px; font-size: 16px; }
@supports (interpolate-size: allow-keywords) {
  html.motion .service-accordion { interpolate-size: allow-keywords; }
  html.motion .service-accordion details::details-content { block-size: 0; overflow: clip; transition: block-size 560ms var(--ease-out), content-visibility 560ms allow-discrete; }
  html.motion .service-accordion details[open]::details-content { block-size: auto; }
}
html.motion .service-accordion details[open] .service-items > * { animation: consult-rise 700ms var(--ease-out) both; }
html.motion .service-accordion details[open] .service-items > :nth-child(2) { animation-delay: 80ms; }
html.motion .service-accordion details[open] .service-items > :nth-child(3) { animation-delay: 160ms; }

/* Título que rueda letra por letra: la copia que entra es la sombra de cada letra. */
.roll-word { display: inline-block; overflow: hidden; padding-block: .1em; margin-block: -.1em; vertical-align: top; white-space: nowrap; }
.roll-char { display: inline-block; text-shadow: 0 1.35em 0 currentColor; transition: translate 560ms var(--ease-out); transition-delay: calc(var(--i) * 14ms); }
.service-accordion summary:focus-visible .roll-char { translate: 0 -1.35em; }
@media (hover: hover) and (pointer: fine) {
  .service-accordion details:hover { background-size: 100% 100%; }
  .service-accordion details:hover > summary { padding-inline: 20px; }
  .service-accordion summary:hover .roll-char { translate: 0 -1.35em; }
  .team-card { transition: translate 480ms var(--ease-out), box-shadow 480ms var(--ease-out); }
  .team-card:hover { translate: 0 -6px; box-shadow: 0 22px 30px -24px rgb(4 84 62 / .55); }
}

/* Fotografía que se abre al llegar */
.consult-photo { position: relative; overflow: hidden; margin: clamp(40px, 6vw, 80px) 0 0; aspect-ratio: 16 / 8; background: var(--green); }
.consult-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
.consult-photo figcaption { position: absolute; left: 20px; bottom: 18px; padding: 8px 14px; border-radius: 20px; background: var(--cream); color: var(--green); font: 13px/1.4 Helvetica, Arial, sans-serif; letter-spacing: .03em; }
html.motion .consult-photo { clip-path: inset(var(--clip, 14%)); will-change: clip-path; }
html.motion .consult-photo img { scale: var(--zoom, 1.18); will-change: scale; }

/* Cómo lo hacemos: tarjetas que se apilan al avanzar */
.method { margin-top: 0; padding: clamp(56px, 8vw, 104px) 0 0; background: none; }
.method-intro { margin-bottom: 44px; }
.method-stack { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; }
.method-card { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); align-items: end; gap: 32px; min-height: min(56vh, 430px); padding: clamp(26px, 4.5vw, 60px); transform-origin: 50% 0; }
.method-card:nth-child(1) { background: var(--peach); color: var(--green); }
.method-card:nth-child(2) { background: var(--red); color: #fff; }
.method-card:nth-child(3) { background: var(--green); color: var(--cream); }
.method-number { align-self: start; font-size: clamp(84px, 13vw, 190px); font-weight: 800; line-height: .82; letter-spacing: -.06em; }
.method-card h3 { margin: 0 0 16px; font-size: clamp(26px, 3.1vw, 42px); font-weight: 400; line-height: 1.1; letter-spacing: -.035em; }
.method-card p { max-width: 40ch; font-size: 18px; line-height: 1.65; }
html.motion .method-card { position: sticky; top: 24px; transform: scale(var(--s, 1)); will-change: transform; }
html.motion .method-card:nth-child(2) { top: 46px; }
html.motion .method-card:nth-child(3) { top: 68px; }

/* Equipo */
.team-card .team-fact { display: flex; align-items: center; gap: 16px; }
.team-years { flex-shrink: 0; color: var(--red); font: 800 clamp(44px, 5vw, 62px)/1 Agrandir, Helvetica, Arial, sans-serif; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }

/* Frase que se enciende palabra por palabra al avanzar */
.consult-statement { max-width: 17ch; margin: clamp(64px, 10vw, 140px) 0; font-size: clamp(34px, 5.6vw, 78px); line-height: 1.05; letter-spacing: -.045em; }
html.motion .consult-statement .word { opacity: .16; transition: opacity 420ms ease; }
html.motion .consult-statement .word.is-lit { opacity: 1; }

/* Formulario: respuesta suave al enfocar y elegir */
.consult-form input:not([type=checkbox]),
.consult-form select,
.consult-form textarea { transition: border-color 200ms ease, box-shadow 200ms ease, background-color 200ms ease; }
.consult-form input:not([type=checkbox]):focus,
.consult-form select:focus,
.consult-form textarea:focus { background: #fff; box-shadow: 0 0 0 4px rgb(80 103 174 / .2); }
.consult-form .choice { margin-inline: -8px; padding-inline: 8px; border-radius: 6px; transition: background-color 200ms ease; }
.consult-form .choice:has(input:checked) { background: rgb(4 84 62 / .08); }

@media (max-width: 900px) {
  .hero-seal-disc { margin-bottom: 0; }
  .consult-hero .area-status .area-label { margin-top: 24px; }
  .service-accordion summary,
  .service-items { grid-template-columns: 34px minmax(0, 1fr) 40px; column-gap: 14px; }
  .service-accordion summary { row-gap: 10px; padding-block: 24px; }
  .service-lead { grid-column: 2 / 3; grid-row: 2; }
  .service-toggle { grid-column: 3; grid-row: 1; }
  .service-items-label,
  .service-items ul,
  .service-items .text-link { grid-column: 2 / -1; }
  .consult-photo { aspect-ratio: 4 / 3; }
  .method-card { grid-template-columns: 1fr; align-items: start; gap: 20px; min-height: 0; }
  .method-number { font-size: clamp(72px, 22vw, 120px); }
}
@media (max-width: 760px) {
  .hero-seal-disc { display: none; }
  .service-accordion details[open] > summary,
  .service-accordion details[open] .service-items { padding-inline: 12px; }
}