/* Portada soporte.meyga.net. Usa los componentes de la portada (hero, imagen pegada,
   secciones, botones, campos y preguntas); aquí solo lo que no existe allí, con los mismos
   tokens de web.css. */

/* ---------- Móvil u ordenador ---------- */
/* Con :not() para ganar a los display propios (.diag-opcion__acciones es grid). */
.diag:not(.diag--movil) .solo-movil { display: none; }
.diag--movil .solo-movil { display: block; }
.diag--movil .solo-pc { display: none; }

/* ---------- Aviso del móvil: la dirección en grande ---------- */
.diag-movil { padding-bottom: 40px; }
.diag-movil__caja { background: var(--crema); border-radius: var(--radio); padding: 28px 22px 26px; text-align: center; }
.diag-movil__caja h2 { font-size: 28px; }
.diag-movil__caja p { margin-top: 12px; font-size: 17px; line-height: 1.4; color: var(--tinta-suave); }
.diag-movil__caja .diag-movil__direccion {
    /* 6.7vw: «soporte.meyga.net» cabe en una línea desde 320 px (con 8.4vw se partía la palabra). */
    margin: 18px auto 6px; display: inline-block; padding: 0 6px;
    font-size: clamp(20px, 6.7vw, 40px); font-weight: 600; line-height: 1.15; letter-spacing: -0.04em;
    color: var(--tinta); overflow-wrap: anywhere; user-select: all;
    background: linear-gradient(transparent 62%, var(--acento-suave) 62%);
}

/* ---------- Así funciona ---------- */
.diag-pasos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin: 40px 0 0; padding: 0 11px; list-style: none; }
.diag-paso { background: var(--crema); border-radius: var(--radio-chico); padding: 16px 16px 26px; }
.diag-paso__dibujo { background: var(--blanco); border-radius: 6px; aspect-ratio: 16 / 11; display: grid; place-items: center; color: var(--tinta); }
.diag-dibujo { width: 80%; height: auto; }
.diag-paso .reparacion__numero { margin-top: 20px; }
.diag-paso h3 { margin-top: 10px; font-size: 22px; line-height: 1.3; }
.diag-paso p { margin-top: 12px; font-size: 15px; line-height: 1.5; color: var(--tinta-suave); letter-spacing: -0.01em; }

/* Trazos de los dibujos (.d-fondo va detrás de .d-linea para que su relleno gane). */
.d-linea { fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.d-fondo { fill: var(--blanco); }
.d-tenue { stroke: var(--tinta-muda); }
.d-acento { fill: var(--acento); }
.d-arco { fill: none; stroke: var(--acento); stroke-width: 6; stroke-linecap: round; }
.d-trazo { fill: none; stroke: var(--tinta); stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; }
.d-texto { font: 600 11px var(--fuente); fill: currentColor; text-anchor: middle; letter-spacing: 0; }
.d-mono { font-family: ui-monospace, Consolas, monospace; font-size: 13px; letter-spacing: 0.08em; }

/* ---------- ¿Cómo prefiere hacerlo? ---------- */
#ayuda.seccion { padding-top: 60px; padding-bottom: 70px; }
/* Sin una palabra sola en la última línea («usted.»). */
#ayuda .subtitulo { text-wrap: balance; }
.diag-opciones { margin: 50px auto 0; max-width: 1040px; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: stretch; }
.diag-opcion { background: var(--crema); color: var(--tinta); border-radius: var(--radio); padding: 32px 28px 30px; display: flex; flex-direction: column; }
.diag-opcion__etiqueta { align-self: flex-start; padding: 4px 10px; border-radius: 999px; background: var(--acento-suave); font-size: 13px; font-weight: 500; letter-spacing: 0; }
.diag-opcion h3 { margin-top: 16px; font-size: 32px; line-height: 1.1; }
.diag-opcion > p { margin-top: 14px; font-size: 17px; line-height: 1.4; color: var(--tinta-suave); }
.diag-opcion__acciones { margin-top: 30px; display: grid; gap: 14px; justify-items: center; text-align: center; }
.diag--movil .diag-opcion__acciones.solo-movil { display: grid; }
.diag-opcion__direccion { font-size: 17px; line-height: 1.4; color: var(--tinta-suave); }
.diag-opcion__direccion b { display: block; margin-top: 4px; font-size: 22px; font-weight: 600; color: var(--tinta); overflow-wrap: anywhere; }
.diag-pronto { font-size: 16px; line-height: 1.45; color: var(--tinta-suave); text-wrap: balance; }
.diag-enlace {
    display: inline-flex; align-items: center; gap: 6px; font-size: 15px; color: var(--tinta-suave);
    text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--linea);
    transition: color 0.4s var(--hover), text-decoration-color 0.4s var(--hover);
}
.diag-enlace:hover { color: var(--tinta); text-decoration-color: var(--acento); }
.diag-enlace .icono { font-size: 18px; }
.diag-falla { font-size: 14px; line-height: 1.45; color: var(--tinta-suave); }
.diag-falla a { color: var(--tinta); font-weight: 500; text-decoration: underline; text-decoration-color: var(--acento); text-underline-offset: 3px; }
/* Botón secundario: mismo tamaño que .boton, con filete en vez de relleno. */
.diag-boton-borde { background: transparent; box-shadow: inset 0 0 0 1.5px var(--tinta); }
.diag-boton-borde:hover { box-shadow: none; }

/* Ayuda paso a paso: número en círculo amarillo y un filete que los une. */
.diag-ayuda { margin-top: 26px; padding: 0; list-style: none; counter-reset: ayuda; }
.diag-ayuda > li { position: relative; padding: 0 0 24px 44px; counter-increment: ayuda; }
.diag-ayuda > li:last-child { padding-bottom: 0; }
.diag-ayuda > li::before {
    content: counter(ayuda); position: absolute; left: 0; top: -2px; width: 28px; height: 28px; border-radius: 50%;
    background: var(--acento); display: grid; place-items: center; font-size: 14px; font-weight: 600;
}
.diag-ayuda > li::after { content: ''; position: absolute; left: 13.5px; top: 32px; bottom: 6px; width: 1px; background: var(--linea); }
.diag-ayuda > li:last-child::after { display: none; }
.diag-ayuda b { display: block; font-size: 18px; font-weight: 500; line-height: 1.3; letter-spacing: -0.03em; }
.diag-ayuda p { margin-top: 6px; font-size: 15px; line-height: 1.5; color: var(--tinta-suave); }
.diag-ayuda__botones { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 10px; }
.diag-ayuda .boton { padding: 14px 18px; }
.diag-ayuda .diag-falla { margin-top: 10px; }
.diag-ayuda__movil { margin-top: 16px; font-size: 15px; line-height: 1.5; color: var(--tinta-suave); }
/* En el móvil a la opción 2 solo le queda «Hablemos»: sin número ni filete. */
.diag--movil .diag-ayuda:not(.diag-ayuda--lista) > li { padding-left: 0; padding-bottom: 0; }
.diag--movil .diag-ayuda:not(.diag-ayuda--lista) > li::before, .diag--movil .diag-ayuda:not(.diag-ayuda--lista) > li::after { display: none; }

.diag-confianza { margin: 40px auto 0; max-width: 1040px; display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 18px; line-height: 1.4; color: #ebebeb; text-align: center; }
.diag-confianza .icono { flex: none; font-size: 22px; color: var(--acento); }

#que-revisamos.faq.seccion { padding-top: 70px; }

/* «Que me llamen»: dos campos en fila sobre el crema de la tarjeta (los campos ya son blancos). */
.diag-llamada { margin-top: 16px; display: grid; grid-template-columns: 1fr 1fr; gap: 14px 12px; }
.diag-llamada[hidden] { display: none; }
.diag-llamada .campo label { color: var(--tinta-suave); }
.diag-llamada__estado { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; font-size: 14px; line-height: 1.4; color: var(--tinta-suave); }
.diag-llamada__estado::before { content: ''; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--tinta-muda); }
.diag-llamada__estado--abierto::before { background: var(--whatsapp); }
.diag-llamada__ok { margin-top: 16px; }
.diag-llamada__ok[hidden] { display: none; }
/* .boton pone display:inline-flex, que gana al atributo hidden: el botón ya usado se esconde aquí. */
.diag [data-llamada-abrir][hidden] { display: none; }

/* ---------- Portada de soporte ---------- */
.diag-cta { display: flex; flex-wrap: wrap; gap: 10px; }
#revision .subtitulo { text-wrap: balance; }
/* El código: una tarjeta crema centrada bajo los pasos, del ancho de un formulario. */
.diag-codigo { margin: 40px auto 0; max-width: 520px; background: var(--crema); border-radius: var(--radio); padding: 28px 26px; text-align: center; }
.diag-codigo__form { display: grid; gap: 14px; justify-items: stretch; text-align: left; }
.diag-codigo__form .campo input { font-size: 22px; letter-spacing: 0.12em; text-transform: uppercase; text-align: center; }
.diag-codigo__form .diag-enlace { justify-self: center; }
.diag-codigo__form [data-descarga-ok][hidden] { display: none; }
.diag--movil .diag-codigo .solo-movil { display: block; }
/* Tres tarjetas: la de llamada lleva el formulario en una columna. */
.diag-opciones--tres { max-width: 1200px; grid-template-columns: repeat(3, 1fr); }
.diag-opciones--tres .diag-llamada { grid-template-columns: 1fr; }
.diag-opciones--tres .diag-opcion > .diag-ayuda__botones { margin-top: 18px; }
.diag--movil .diag-opciones--tres { grid-template-columns: 1fr; max-width: 560px; }

@media (max-width: 1024px) {
    .diag-opciones--tres { grid-template-columns: 1fr; max-width: 560px; }
    .diag-pasos { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 809px) {
    .diag-codigo { padding: 22px 16px; margin-top: 30px; }
    .diag-cta .boton { width: 100%; }
    /* Pasos: dibujo a la izquierda y texto a la derecha, para no hacer la página eterna. */
    .diag-pasos { grid-template-columns: 1fr; padding: 0; margin-top: 30px; }
    .diag-paso { display: grid; grid-template-columns: 104px 1fr; column-gap: 16px; align-items: start; padding: 14px; }
    .diag-paso__dibujo { grid-row: span 3; aspect-ratio: 1; }
    .diag-dibujo { width: 92%; }
    .diag-paso .reparacion__numero { margin-top: 2px; }
    .diag-paso h3 { margin-top: 4px; font-size: 19px; }
    .diag-paso p { margin-top: 6px; font-size: 14px; }
    /* Lleva .contenedor dentro (que ya pone los 20 px): sin sangría propia, como #contacto. */
    #ayuda.seccion { padding: 50px 0; }
    .diag-opciones { grid-template-columns: 1fr; margin-top: 30px; }
    .diag-opcion { padding: 24px 18px; }
    .diag-opcion h3 { font-size: 26px; }
    .diag-ayuda__botones .boton { width: 100%; }
    .diag-llamada { grid-template-columns: 1fr; }
    .diag-confianza { font-size: 16px; align-items: flex-start; text-align: left; }
    #que-revisamos.faq.seccion { padding-top: 50px; }
}