/* ==========================================================================
   Disco Mad · páginas de servicio con la "escena" (plantillas/landing.php)

   Se carga solo en esas páginas, DESPUÉS de eventos.css, que es quien pone el
   fondo oscuro (.blog-escena), los títulos de bloque (.evento__titulo), las
   tarjetas de montajes (.blog-mini) y la aparición al scroll ([data-revela]).
   Aquí va lo propio: cabecera, el contenido de la base de datos maquetado en
   oscuro (.bloque/.prosa) y los bloques añadidos.

   Nada de esto se anima de forma continua: solo hay transiciones al pasar el
   ratón y la aparición al hacer scroll, todo con transform/opacity.
   ========================================================================== */
.landing { padding: 0 0 90px; }
.landing__ancho { max-width: 1180px; }

/* --- Cabecera ------------------------------------------------------------- */
.landing__cab { padding: clamp(34px, 6vw, 80px) 0 clamp(26px, 4vw, 48px); }
.landing__kicker {
    display: inline-flex; align-items: center; gap: 10px; margin: 0 0 18px;
    font-size: 12.5px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
}
.blog-escena .landing__kicker { color: var(--marca); }
.landing__kicker::before { content: ""; width: 28px; height: 2px; border-radius: 2px; background: var(--marca); }
.landing__cab h1 {
    margin: 0; max-width: 16ch; color: #fff;
    font-size: clamp(38px, 6.6vw, 78px); line-height: .98; letter-spacing: -.045em;
}
.blog-escena .landing__entrada {
    margin: 24px 0 0; max-width: 700px; color: rgba(255, 255, 255, .82);
    font-size: clamp(17.5px, 2vw, 21.5px); line-height: 1.55;
}
.landing__datos {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px 28px;
    margin: clamp(34px, 5vw, 58px) 0 0;
}
.landing__dato { padding-top: 16px; border-top: 2px solid var(--marca); }
.landing__dato dt { color: #fff; font-weight: 800; font-size: clamp(24px, 3vw, 34px); line-height: 1.05; letter-spacing: -.03em; }
.landing__dato dd { margin: 7px 0 0; color: rgba(255, 255, 255, .62); font-size: 14.5px; line-height: 1.45; }

/* --- El contenido de la página (bloques de la base de datos) --------------
   Los bloques llegan del panel con el marcado de siempre: una .bloque con su
   .prosa y, si acaso, una <figure>. Aquí se maquetan según lo que traen, sin
   tocar el contenido:
     · solo una frase   → manifiesto centrado, a todo el ancho
     · texto + vídeo    → pieza destacada: el vídeo en grande y el texto al lado
     · texto + foto     → mosaico de dos columnas, con el texto sobre la foto
     · lo demás (galería, opiniones, ejemplos, ventajas) → a todo el ancho
   -------------------------------------------------------------------------- */
.landing__contenido { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(14px, 2vw, 22px); }
.landing__contenido > * { min-width: 0; }
.landing__contenido figure { margin: 0; }
.landing__contenido .bloque { display: grid; gap: 26px; align-items: center; margin-top: clamp(20px, 3.4vw, 42px); }
.landing__contenido .bloque > figure > img { display: block; width: 100%; height: auto; border-radius: 18px; }
.landing__contenido .prosa > *:first-child { margin-top: 0; }
.landing__contenido .prosa > *:last-child { margin-bottom: 0; }
.landing__contenido .prosa h2,
.landing__contenido .prosa h3 {
    margin: 0 0 .55em; color: #fff;
    font-size: clamp(22px, 2.7vw, 31px); line-height: 1.14; letter-spacing: -.025em;
}
.landing__contenido .bloque > .prosa > h2:first-child::before,
.landing__contenido .bloque > .prosa > h3:first-child::before {
    content: ""; display: block; width: 34px; height: 3px; margin: 0 0 16px;
    border-radius: 2px; background: var(--marca);
}
.blog-escena .landing__contenido .prosa p,
.blog-escena .landing__contenido .prosa li { color: rgba(255, 255, 255, .78); font-size: 17px; line-height: 1.75; }
.blog-escena .landing__contenido .prosa a { color: #fff; text-decoration: underline; text-decoration-color: var(--marca); text-underline-offset: 3px; }
.blog-escena .landing__contenido .prosa .precio {
    display: inline-block; margin: 0 0 16px; padding: 9px 20px; border-radius: 999px;
    background: var(--marca); color: #fff; font-weight: 800; font-size: 21px; line-height: 1.2; letter-spacing: -.01em;
    box-shadow: 0 10px 30px rgba(255, 28, 66, .35);
}

/* Solo una frase: manifiesto centrado, a todo el ancho de la página */
.landing__contenido .bloque:has(> .prosa:only-child > :is(h2, h3):only-child) {
    margin-top: 0; padding: clamp(30px, 5.6vw, 76px) 0 clamp(20px, 3.6vw, 46px);
    justify-items: center; text-align: center;
}
.landing__contenido .bloque > .prosa:only-child > :is(h2, h3):only-child {
    max-width: 21em; margin: 0;
    font-size: clamp(25px, 3.5vw, 44px); line-height: 1.14; letter-spacing: -.035em; text-wrap: balance;
}
.landing__contenido .bloque > .prosa:only-child > :is(h2, h3):only-child::before { width: 46px; margin: 0 auto 24px; }

/* Texto + vídeo: la pieza destacada. El vídeo en grande, y al lado el título,
   el precio de partida en cifra grande y la frase. */
.landing__contenido .bloque:has(> figure > .video) {
    margin-top: 0; padding: clamp(12px, 1.8vw, 20px); gap: clamp(6px, 2vw, 20px);
    border-radius: 26px; border: 1px solid rgba(255, 28, 66, .42);
    background:
        radial-gradient(100% 130% at 100% 0%, rgba(255, 28, 66, .28), rgba(255, 28, 66, 0) 62%),
        linear-gradient(160deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .02));
    box-shadow: 0 26px 70px rgba(209, 0, 48, .22);
}
.landing__contenido .bloque:has(> figure > .video) > figure { order: -1; }
.landing__contenido .bloque > figure > .video {
    display: block; width: 100%; border-radius: 16px; background: #1a1418;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .1), 0 20px 50px rgba(0, 0, 0, .55);
}
.landing__contenido .bloque:has(> figure > .video) > .prosa { padding: clamp(12px, 2vw, 26px) clamp(8px, 2vw, 28px) clamp(14px, 2vw, 26px); }
.landing__contenido .bloque:has(> figure > .video) > .prosa h3 { margin-bottom: .35em; font-size: clamp(24px, 2.6vw, 32px); }
.blog-escena .landing__contenido .bloque:has(> figure > .video) > .prosa .precio {
    display: block; margin: 0 0 14px; padding: 0; border-radius: 0; background: none; box-shadow: none;
    font-size: clamp(40px, 5vw, 64px); line-height: 1; letter-spacing: -.05em;
}

/* Texto + foto: mosaico. La foto ocupa toda la tarjeta y el texto va encima,
   sobre un degradado, como en las tarjetas del índice de eventos. */
.landing__contenido .bloque:has(> figure > img):has(> .prosa):not(.bloque--galeria) {
    position: relative; isolation: isolate; overflow: hidden; margin-top: 0;
    align-items: end; min-height: clamp(430px, 42vw, 510px); border-radius: 22px;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .1), 0 26px 60px rgba(0, 0, 0, .5);
}
.landing__contenido .bloque:has(> figure > img):has(> .prosa):not(.bloque--galeria) > figure { position: absolute; inset: 0; z-index: -1; }
.landing__contenido .bloque:has(> figure > img):has(> .prosa):not(.bloque--galeria) > figure > img {
    height: 100%; object-fit: cover; border-radius: 0;
    transition: scale .7s cubic-bezier(.2, .7, .2, 1);
}
.landing__contenido .bloque:has(> figure > img):has(> .prosa):not(.bloque--galeria):hover > figure > img { scale: 1.05; }
.landing__contenido .bloque:has(> figure > img):has(> .prosa):not(.bloque--galeria) > .prosa {
    padding: clamp(80px, 10vw, 130px) clamp(20px, 2.6vw, 32px) clamp(22px, 2.6vw, 30px);
    background: linear-gradient(to top, rgba(10, 7, 9, .97) 0%, rgba(10, 7, 9, .9) 44%, rgba(10, 7, 9, .55) 76%, rgba(10, 7, 9, 0) 100%);
}
.landing__contenido .bloque:has(> figure > img):has(> .prosa):not(.bloque--galeria) > .prosa h3 { font-size: clamp(22px, 2.4vw, 29px); }
.blog-escena .landing__contenido .bloque:has(> figure > img):has(> .prosa):not(.bloque--galeria) > .prosa p {
    color: rgba(255, 255, 255, .88); font-size: 15.5px; line-height: 1.62;
}

@media (min-width: 860px) {
    .landing__contenido { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .landing__contenido > * { grid-column: 1 / -1; }
    .landing__contenido > .bloque:has(> figure > img):has(> .prosa):not(.bloque--galeria) { grid-column: auto; }
    .landing__contenido .bloque:has(> figure > .video) { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
}

/* Galerías de fotos dentro del contenido */
.landing__contenido .bloque--galeria { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; align-items: stretch; }
.landing__contenido .bloque--galeria > .prosa { grid-column: 1 / -1; }
.landing__contenido .bloque--galeria > figure { overflow: hidden; border-radius: 16px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .09); }
.landing__contenido .bloque--galeria > figure > img {
    width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 0;
    transition: scale .5s cubic-bezier(.2, .7, .2, 1);
}
.landing__contenido .bloque--galeria > figure:hover > img { scale: 1.05; }
/* Galería con título (los "ejemplos de servicios"): dos columnas grandes, que
   son carteles con letra pequeña y tienen que poder leerse. */
.landing__contenido .bloque--galeria:has(> .prosa) { grid-template-columns: 1fr; }
@media (min-width: 760px) {
    .landing__contenido .bloque--galeria:has(> .prosa) { grid-template-columns: repeat(2, 1fr); gap: 20px; }
}
/* Este es un cartel con logotipos: entero y sobre blanco, sin recortar */
.landing__contenido .bloque--galeria > figure > img[src*="empresas-colaboradoras"] {
    aspect-ratio: auto; height: auto; object-fit: contain; background: #fff;
}

/* Opiniones (Elfsight): banda propia a todo el ancho de la columna, a oscuras
   como el resto de la página. El widget pinta sus textos en negro y sus
   tarjetas en gris claro: se le cambian los colores por sus clases "es-…", que
   son las estables (las otras llevan un código que cambia). Con !important
   porque el widget inyecta sus estilos después que esta hoja. */
.landing__contenido .bloque:has([class*="elfsight-app"]),
.landing__contenido .bloque:has(.opiniones-aviso) {
    display: block; padding: clamp(26px, 4vw, 44px) clamp(14px, 3vw, 30px); margin: clamp(20px, 3vw, 36px) 0;
    border: 1px solid rgba(255, 255, 255, .12); border-radius: 20px; background: rgba(255, 255, 255, .04);
}
.blog-escena [class*="elfsight-app"] .es-widget-title-header { color: #fff !important; }
.blog-escena [class*="elfsight-app"] .es-widget-title-caption { color: rgba(255, 255, 255, .72) !important; }
.blog-escena [class*="elfsight-app"] .es-review-background-container,
.blog-escena [class*="elfsight-app"] .es-skeleton { background: rgba(255, 255, 255, .07) !important; }
.blog-escena [class*="elfsight-app"] .es-review-author-name-container,
.blog-escena [class*="elfsight-app"] .es-review-author-name { color: #fff !important; }
.blog-escena [class*="elfsight-app"] .es-review-info-date-container,
.blog-escena [class*="elfsight-app"] .es-review-info-date,
.blog-escena [class*="elfsight-app"] .es-text-shortener-control { color: rgba(255, 255, 255, .58) !important; }
.blog-escena [class*="elfsight-app"] .es-review-content-text-container,
.blog-escena [class*="elfsight-app"] .es-text-shortener-container,
.blog-escena [class*="elfsight-app"] .es-text-shortener { color: rgba(255, 255, 255, .88) !important; }
.blog-escena [class*="elfsight-app"] .es-carousel-arrow-control { background: rgba(255, 255, 255, .22) !important; }

/* El aviso de "ver opiniones" (cuando no se han aceptado las cookies), también a oscuras */
.blog-escena .landing__contenido .opiniones-aviso {
    background: rgba(255, 255, 255, .04); border-color: rgba(255, 255, 255, .2);
}
.blog-escena .landing__contenido .opiniones-aviso p { color: rgba(255, 255, 255, .74); }

/* Ejemplos de servicio con precio, a oscuras: cristal oscuro, precio en blanco
   y el «completo» con un foco de marca. La base está en estilo.css. */
.landing__contenido .bloque--ejemplos { grid-template-columns: 1fr; gap: 20px; align-items: stretch; }
.blog-escena .ejemplo {
    background: linear-gradient(180deg, rgba(255, 255, 255, .085), rgba(255, 255, 255, .03));
    border-color: rgba(255, 255, 255, .14); box-shadow: 0 24px 60px rgba(0, 0, 0, .45);
}
.blog-escena .ejemplo::before { background: linear-gradient(90deg, var(--marca), rgba(255, 28, 66, 0)); }
.blog-escena .ejemplo__nombre { color: var(--marca); }
.blog-escena .ejemplo__precio { color: #fff; }
.blog-escena .ejemplo__precio span {
    background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .18); color: rgba(255, 255, 255, .84);
}
.blog-escena .ejemplo__lista { border-top-color: rgba(255, 255, 255, .13); }
.blog-escena .ejemplo__lista li { color: rgba(255, 255, 255, .9); }
.blog-escena .ejemplo__lista li::before {
    background-color: rgba(255, 28, 66, .2);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23ff5c78' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round' d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
}
.blog-escena .ejemplo .boton--linea { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .34); }
.blog-escena .ejemplo .boton--linea:hover { background: #fff; color: var(--tinta); border-color: #fff; }
.blog-escena .ejemplo--completo {
    background:
        radial-gradient(120% 85% at 100% 0%, rgba(255, 28, 66, .3), rgba(255, 28, 66, 0) 62%),
        linear-gradient(180deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .03));
    border-color: rgba(255, 28, 66, .6); box-shadow: 0 26px 70px rgba(209, 0, 48, .3);
}
@media (min-width: 760px) {
    .landing__contenido .bloque--ejemplos { grid-template-columns: 1fr 1fr; gap: 24px; }
}

/* Tarjetas de ventajas que ya trae el contenido */
.landing__contenido .bloque--ventajas {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; align-items: stretch;
}
.landing__contenido .bloque--ventajas > article {
    min-width: 0; padding: 24px 22px; border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, .1); box-shadow: none;
    background: linear-gradient(160deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .02));
}
.landing__contenido .bloque--ventajas > article:hover { transform: none; border-color: var(--marca); box-shadow: none; }
.landing__contenido .bloque--ventajas > article::before { background-color: rgba(255, 28, 66, .16); }
.landing__contenido .bloque--ventajas > article h3 { color: #fff; }
.blog-escena .landing__contenido .bloque--ventajas > article p { color: rgba(255, 255, 255, .7); font-size: 14.5px; line-height: 1.55; }

/* Las mismas tarjetas, cuando la página las pinta más abajo con su título */
.landing__ventajas .bloque--ventajas { margin-top: 0; }

/* --- La portada de los vídeos -----------------------------------------------
   Mientras no se pulsa: la portada algo oscurecida por abajo, el botón de
   reproducir en grande con el color de la marca y una etiqueta que dice qué
   es. Al pulsar, web.js cambia todo eso por el vídeo y esto deja de aplicar. */
.blog-escena .video__play { background: linear-gradient(to top, rgba(10, 7, 9, .7) 0%, rgba(10, 7, 9, .12) 46%, rgba(10, 7, 9, .28) 100%); transition: background .3s ease; }
.blog-escena .video__play:hover { background: linear-gradient(to top, rgba(10, 7, 9, .6) 0%, rgba(10, 7, 9, 0) 46%, rgba(10, 7, 9, .15) 100%); }
.blog-escena .video__play span {
    width: clamp(62px, 7vw, 84px); height: clamp(62px, 7vw, 84px); padding-left: 4px; font-size: clamp(20px, 2.2vw, 27px);
    background: var(--accion); box-shadow: 0 0 0 10px rgba(255, 28, 66, .22), 0 14px 40px rgba(255, 28, 66, .5);
    transition: scale .3s cubic-bezier(.2, .7, .2, 1);
}
.blog-escena .video__play:hover span { scale: 1.08; }
.blog-escena .video__play::after {
    content: "Ver el vídeo"; position: absolute; left: clamp(12px, 2vw, 20px); bottom: clamp(12px, 2vw, 18px);
    padding: 7px 14px; border-radius: 999px; background: rgba(10, 7, 9, .66); border: 1px solid rgba(255, 255, 255, .24);
    color: #fff; font-size: 12.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
}

/* --- Bloques añadidos ------------------------------------------------------ */
.blog-escena .landing__intro { margin: -8px 0 22px; max-width: 640px; color: rgba(255, 255, 255, .7); font-size: 16.5px; }

.landing__incluye { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 620px) { .landing__incluye { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 960px) {
    .landing__incluye--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .landing__incluye--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.landing__item {
    position: relative; padding: 24px 22px 22px; border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, .1);
    background: linear-gradient(160deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .02));
}
.landing__num { display: block; margin: 0 0 12px; font-size: 13px; font-weight: 800; letter-spacing: .14em; color: var(--marca); }
.landing__item h3 { margin: 0 0 8px; color: #fff; font-size: 18.5px; letter-spacing: -.015em; }
.blog-escena .landing__item p { margin: 0; color: rgba(255, 255, 255, .72); font-size: 15px; line-height: 1.6; }

.landing__para { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.landing__para li {
    padding: 11px 20px; border-radius: 999px; color: #fff; font-weight: 700; font-size: 15.5px;
    border: 1px solid rgba(255, 255, 255, .16); background: rgba(255, 255, 255, .05);
}

/* Los trabajos: una tarjeta grande por servicio, con la foto a un lado y el
   desarrollo al otro (en móvil, la foto arriba). Alternan el lado de la foto. */
.blog-escena .landing__intro + .landing__trabajos { margin-top: 30px; }
.landing__trabajos { display: grid; gap: clamp(18px, 2.6vw, 28px); }
.trabajo {
    display: grid; overflow: hidden; border-radius: 22px;
    border: 1px solid rgba(255, 255, 255, .11);
    background: linear-gradient(160deg, rgba(255, 255, 255, .075), rgba(255, 255, 255, .02));
    box-shadow: 0 26px 60px rgba(0, 0, 0, .4);
    transition: border-color .3s ease;
}
.trabajo:hover { border-color: rgba(255, 28, 66, .55); }
.trabajo__foto { position: relative; margin: 0; overflow: hidden; background: #1a1418; }
.trabajo__foto img {
    display: block; width: 100%; height: 100%; aspect-ratio: 16 / 10; object-fit: cover;
    transition: scale .6s cubic-bezier(.2, .7, .2, 1);
}
.trabajo:hover .trabajo__foto img { scale: 1.04; }
/* Con vídeo: va encima de la foto, a su proporción, y la foto ocupa el resto */
.trabajo__foto--video { display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 3px; background: transparent; }
.trabajo__foto--video .video { border-radius: 0; box-shadow: none; }
/* Cuando lo que importa de la foto no está en el centro */
.trabajo__foto--izq img { object-position: 22% 50%; }
.trabajo__foto--der img { object-position: 78% 50%; }
.trabajo__txt { min-width: 0; padding: clamp(22px, 3.4vw, 40px); }
.trabajo__txt .landing__num { margin-bottom: 10px; }
.trabajo h3 {
    margin: 0 0 14px; color: #fff;
    font-size: clamp(23px, 2.8vw, 32px); line-height: 1.1; letter-spacing: -.03em;
}
.blog-escena .trabajo__txt > p { margin: 0 0 12px; color: rgba(255, 255, 255, .78); font-size: 16px; line-height: 1.7; }
.trabajo__lista {
    list-style: none; margin: 20px 0 0; padding: 20px 0 0; display: grid; gap: 11px 24px;
    border-top: 1px solid rgba(255, 255, 255, .12);
}
.blog-escena .trabajo__lista li {
    position: relative; padding-left: 31px; color: rgba(255, 255, 255, .92); font-size: 15px; line-height: 1.45;
}
.trabajo__lista li::before {
    content: ""; position: absolute; left: 0; top: 0; width: 21px; height: 21px; border-radius: 50%;
    background: rgba(255, 28, 66, .2) center / 13px 13px no-repeat
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23ff5c78' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round' d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
}
.blog-escena .trabajo__txt > .trabajo__enlaces { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin: 24px 0 0; }
.blog-escena .trabajo__real {
    display: inline-flex; align-items: center; gap: 10px; padding: 6px 15px 6px 6px; border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, .2); color: #fff; font-size: 13.5px; font-weight: 700; line-height: 1.3;
    text-decoration: none; transition: background .2s ease, border-color .2s ease;
}
.trabajo__real span {
    flex: none; padding: 5px 10px; border-radius: 999px; background: var(--accion);
    font-size: 10.5px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase;
}
.blog-escena .trabajo__real:hover { background: rgba(255, 255, 255, .1); border-color: #fff; text-decoration: none; }
.blog-escena .trabajo__mas {
    color: #fff; font-size: 14.5px; font-weight: 700;
    text-decoration: underline; text-decoration-color: var(--marca); text-underline-offset: 4px;
}
@media (min-width: 900px) {
    .trabajo { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
    .trabajo:nth-child(even) { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
    .trabajo:nth-child(even) .trabajo__foto { order: 2; }
    /* La foto ocupa toda la altura de la tarjeta, mida lo que mida el texto */
    .trabajo__foto { min-height: 380px; }
    .trabajo__foto img { position: absolute; inset: 0; aspect-ratio: auto; }
    .trabajo__foto--video img { position: static; min-height: 180px; }
    .trabajo__lista { grid-template-columns: 1fr 1fr; }
}

/* La llamada a pedir presupuesto, a media página (antes iba en la cabecera) */
.landing__cta {
    display: grid; gap: 22px; align-items: center;
    margin-top: clamp(46px, 7vw, 86px); padding: clamp(26px, 4.4vw, 48px);
    border-radius: 24px; border: 1px solid rgba(255, 28, 66, .45);
    background:
        radial-gradient(90% 150% at 0% 0%, rgba(255, 28, 66, .3), rgba(255, 28, 66, 0) 60%),
        linear-gradient(160deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .02));
    box-shadow: 0 26px 70px rgba(209, 0, 48, .22);
}
.landing__cta h2 { margin: 0 0 10px; color: #fff; font-size: clamp(26px, 3.4vw, 40px); line-height: 1.05; letter-spacing: -.035em; }
.blog-escena .landing__cta p { margin: 0; max-width: 560px; color: rgba(255, 255, 255, .82); font-size: 16.5px; line-height: 1.6; }
.landing__acciones { display: flex; flex-wrap: wrap; gap: 12px; }
.landing__acciones .boton { flex: 1 1 210px; justify-content: center; text-align: center; }
.landing__acciones .boton--linea { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .34); }
.landing__acciones .boton--linea:hover { background: #fff; color: var(--tinta); border-color: #fff; }
@media (min-width: 860px) {
    .landing__cta { grid-template-columns: minmax(0, 1fr) auto; gap: 40px; }
    .landing__acciones .boton { flex: none; }
}

.blog-escena .landing__mas { margin: 20px 0 0; }
.landing__mas a { color: #fff; font-weight: 700; text-decoration: underline; text-decoration-color: var(--marca); text-underline-offset: 4px; }

.landing__pasos {
    list-style: none; margin: 0; padding: 0; counter-reset: paso;
    display: grid; gap: 26px 22px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.landing__pasos li { position: relative; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, .14); }
.landing__paso-num {
    display: grid; place-items: center; width: 40px; height: 40px; margin: 0 0 14px; border-radius: 50%;
    background: var(--accion); color: #fff; font-weight: 800; font-size: 16px;
}
.landing__pasos h3 { margin: 0 0 7px; color: #fff; font-size: 18px; letter-spacing: -.015em; }
.blog-escena .landing__pasos p { margin: 0; color: rgba(255, 255, 255, .72); font-size: 15px; line-height: 1.6; }

/* Preguntas frecuentes: <details>, sin JavaScript. La columna y su título van
   centrados en la página; el texto de cada respuesta, alineado a la izquierda,
   que es como se lee bien un párrafo largo. */
.landing__preguntas > .evento__titulo { justify-content: center; text-align: center; }
.landing__faq { max-width: 900px; margin-inline: auto; border-top: 1px solid rgba(255, 255, 255, .14); }
.landing__faq details { border-bottom: 1px solid rgba(255, 255, 255, .14); }
.landing__faq summary {
    display: flex; align-items: center; justify-content: space-between; gap: 18px;
    padding: 19px 0; cursor: pointer; list-style: none;
    color: #fff; font-weight: 700; font-size: clamp(16.5px, 1.8vw, 19px); line-height: 1.3;
}
.landing__faq summary::-webkit-details-marker { display: none; }
.landing__faq summary::after {
    content: "+"; flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .26); color: var(--marca); font-size: 21px; font-weight: 400; line-height: 1;
}
.landing__faq details[open] summary::after { content: "–"; }
.landing__faq summary:focus-visible { outline: 3px solid var(--marca); outline-offset: 3px; }
.blog-escena .landing__faq p { margin: 0; padding: 0 46px 20px 0; color: rgba(255, 255, 255, .76); font-size: 16px; line-height: 1.7; }

@media (max-width: 700px) {
    .landing { padding-bottom: 60px; }
    .landing__contenido .bloque > figure > .video { border-radius: 12px; }
    .blog-escena .landing__faq p { padding-right: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .landing__contenido .bloque > figure > img { transition: none; }
    .blog-escena .video__play, .blog-escena .video__play span { transition: none; }
    .blog-escena .video__play:hover span { scale: none; }
    .landing__contenido .bloque:hover > figure > img { scale: none; }
    .trabajo, .trabajo__foto img { transition: none; }
    .trabajo:hover .trabajo__foto img { scale: none; }
}