/* Landing de Alder Gestiones · secciones después de la primera pantalla: servicios, módulos del rubro y "a tu medida".
   Alternan los campos: marino (primera pantalla), papel, papel con el color del rubro, marino. */

/* Servicios: dos bloques, cada uno con su celular */
.servicios-lista { display: grid; gap: var(--e-8) var(--e-6); margin-top: var(--e-7); }
.servicio { display: grid; gap: var(--e-3); align-content: start; justify-items: start; }
.servicio .telefono { width: min(240px, 64vw); margin-bottom: var(--e-4); }
.servicio h3 { margin-top: var(--e-2); }
.servicios-modelo { margin-top: var(--e-7); max-width: 56ch; }
.servicio p { color: var(--tinta-2); max-width: 36ch; }
@media (min-width: 860px) { .servicios-lista { grid-template-columns: repeat(2, minmax(0, 340px)); justify-content: center; column-gap: var(--e-8); align-items: start; } .servicio .telefono { width: min(100%, 260px); } }

/* Módulos del rubro: encabezado con selector, lista que se despliega y el celular con sus capturas */
.modulos { background: color-mix(in srgb, var(--acento) 7%, var(--papel)); }
@media (prefers-reduced-motion: no-preference) { .modulos { transition: background-color 420ms ease; } }
.modulos-grilla { display: grid; gap: var(--e-7); grid-template-areas: "cab" "tel" "lista"; align-items: start; }
.modulos-cab { grid-area: cab; display: grid; gap: var(--e-5); align-content: start; }
.modulos-lista { grid-area: lista; border-top: 1px solid var(--linea); }
.modulos-tel { grid-area: tel; justify-self: center; width: min(260px, 70vw); }
@media (min-width: 900px) {
  .modulos-grilla { grid-template-columns: minmax(0, 1.1fr) minmax(260px, .9fr); grid-template-areas: "cab tel" "lista tel"; column-gap: var(--e-8); }
  .modulos-tel { position: sticky; top: var(--e-7); width: min(320px, 100%); grid-row: 1 / span 2; }
}

.modulos-lista details { border-bottom: 1px solid var(--linea); }
.modulos-lista summary { display: flex; align-items: center; justify-content: space-between; gap: var(--e-4); min-height: 64px; padding-block: var(--e-3); cursor: pointer; list-style: none; font: 600 var(--t-3)/1.25 var(--f-titulo); letter-spacing: -.015em; }
.modulos-lista summary::-webkit-details-marker { display: none; }
.modulos-lista summary::after { content: ""; flex: none; width: 10px; height: 10px; border: solid var(--acento); border-width: 0 2.5px 2.5px 0; transform: rotate(45deg) translate(-2px, -2px); }
.modulos-lista details[open] summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.modulos-lista details p { padding: 0 var(--e-6) var(--e-5) 0; color: var(--tinta-2); max-width: 52ch; }
.modulos-lista summary:focus-visible { outline-offset: -3px; border-radius: var(--r-control); }

/* Páginas del celular: puntos de 44 px de zona de toque */
.paginas { display: flex; justify-content: center; gap: 0; }
.pagina-punto { position: relative; width: 44px; height: 44px; padding: 0; border: 0; background: transparent; cursor: pointer; }
.pagina-punto::before { content: ""; position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; translate: -50% -50%; border-radius: 50%; background: color-mix(in srgb, var(--tinta) 28%, transparent); }
.pagina-punto[aria-pressed="true"]::before { width: 26px; border-radius: 5px; background: var(--acento); }
.pagina-punto:focus-visible { outline-offset: -4px; border-radius: 12px; }
@media (prefers-reduced-motion: no-preference) { .pagina-punto::before { transition: width 220ms var(--salida), background-color 220ms ease; } .modulos-lista summary::after { transition: transform 200ms var(--salida); } }

/* A tu medida: tres ideas en columnas, sobre marino */
.medida-lista { display: grid; gap: var(--e-7); margin-top: var(--e-7); }
.medida-item { display: grid; gap: var(--e-3); align-content: start; justify-items: start; padding-top: var(--e-5); border-top: 1.5px solid var(--linea); }
.medida-item p { color: var(--tinta-2); max-width: 34ch; }
.enlace-wa { margin-top: var(--e-3); display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; color: var(--acento); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: .25em; }
@media (min-width: 860px) { .medida-lista { grid-template-columns: repeat(3, 1fr); gap: var(--e-6); } }
@media (hover: hover) and (pointer: fine) { .enlace-wa:hover { text-decoration-thickness: 3px; } .modulos-lista summary:hover::after { border-color: var(--tinta); } .pagina-punto:not([aria-pressed="true"]):hover::before { background: color-mix(in srgb, var(--tinta) 55%, transparent); } }

/* Un día en una agencia: los pasos van en una columna y el celular queda fijo a un lado (solo en pantallas anchas y con JavaScript).
   En celulares, y sin JavaScript, cada paso trae su propia captura debajo del texto. */
.dia-nota { margin-top: var(--e-3); }
.dia-pasos { display: grid; gap: var(--e-8); margin-top: var(--e-7); }
.paso { display: grid; gap: var(--e-3); align-content: start; justify-items: start; }
.paso p { color: var(--tinta-2); max-width: 36ch; }
.paso-tel { width: min(220px, 60vw); margin-top: var(--e-4); }
.dia-tel { display: none; }
@media (min-width: 900px) {
  .js .dia-grilla { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, .8fr); column-gap: var(--e-8); align-items: start; }
  .js .dia-pasos { margin-top: var(--e-7); gap: 0; }
  .js .paso { min-height: 62vh; align-content: center; }
  .js .paso h3 { color: var(--tinta-2); }
  .js .paso[data-activo] h3 { color: var(--acento); }
  .js .paso-tel { display: none; }
  .js .dia-tel { display: block; position: sticky; top: calc(50vh - 340px); justify-self: center; padding-top: var(--e-7); width: min(320px, 100%); }
  .js .dia-tel .telefono { width: 100%; }
}
@media (min-width: 900px) and (prefers-reduced-motion: no-preference) { .js .paso h3 { transition: color 280ms var(--salida); } }

/* Mirá cómo funciona: el video y el cliente real, lado a lado */
.func-grilla { display: grid; gap: var(--e-7); margin-top: var(--e-7); justify-items: center; }
.func-col { display: grid; gap: var(--e-4); justify-items: center; align-content: start; text-align: center; margin: 0; }
.func-col .telefono { width: min(280px, 72vw); }
.func-col figcaption { max-width: 32ch; color: var(--tinta-2); font-size: var(--t-nota); }
.func-col figcaption b { display: block; color: var(--tinta); font-size: var(--t-texto); margin-bottom: var(--e-1); }
.telefono-marco video { width: 100%; height: 100%; object-fit: cover; border-radius: calc(var(--r-telefono) - 9px); background: var(--marino-hondo); }
@media (min-width: 760px) { .func-grilla { grid-template-columns: repeat(2, minmax(0, 340px)); justify-content: center; column-gap: var(--e-8); } }

/* Preguntas frecuentes */
.faq { background: var(--superficie); }
.faq-grilla { display: grid; gap: var(--e-6); }
.faq-lista { border-top: 1px solid var(--linea); max-width: 760px; }
.faq-lista details { border-bottom: 1px solid var(--linea); }
.faq-lista summary { display: flex; align-items: center; justify-content: space-between; gap: var(--e-4); min-height: 64px; padding-block: var(--e-3); cursor: pointer; list-style: none; font: 600 clamp(1.0625rem, 1rem + .35vw, 1.25rem)/1.3 var(--f-titulo); letter-spacing: -.01em; }
.faq-lista summary::-webkit-details-marker { display: none; }
.faq-lista summary::after { content: ""; flex: none; width: 10px; height: 10px; border: solid var(--acento); border-width: 0 2.5px 2.5px 0; transform: rotate(45deg) translate(-2px, -2px); }
.faq-lista details[open] summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.faq-lista details p { padding: 0 var(--e-6) var(--e-5) 0; color: var(--tinta-2); max-width: 56ch; }
.faq-lista summary:focus-visible { outline-offset: -3px; border-radius: var(--r-control); }
@media (min-width: 900px) { .faq-grilla { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); column-gap: var(--e-8); align-items: start; } }
@media (prefers-reduced-motion: no-preference) { .faq-lista summary::after { transition: transform 200ms var(--salida); } }

/* Cierre y pie */
.cierre-grilla { display: grid; gap: var(--e-5); }
.cierre .bajada { max-width: 32ch; }
.cierre-botones { display: flex; flex-wrap: wrap; gap: var(--e-3); margin-top: var(--e-3); }
.pie-pagina { padding-block: var(--e-6); border-top: 1px solid var(--marino-linea); }
.pie-fila { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e-4); }
.enlace-pie { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; color: var(--tinta); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: .25em; }
@media (hover: hover) and (pointer: fine) { .enlace-pie:hover { text-decoration-thickness: 3px; } .faq-lista summary:hover::after { border-color: var(--tinta); } }
.func-col .enlace { display: inline-flex; align-items: center; min-height: 44px; }

/* Texto del video */
.transcripcion { margin-top: var(--e-3); font-size: var(--t-nota); color: var(--tinta-2); max-width: 34ch; }
.transcripcion summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; color: var(--acento); font-weight: 600; text-decoration: underline; text-underline-offset: .22em; }
.transcripcion p { margin-top: var(--e-2); }