/* Rutagest · novedades.css (14/10/2026) · fotos nuevas de Diego, vídeo tutorial y guía para instalar
   la app en el móvil. Va después de sistema.css y mejoras.css, solo en las páginas que lo usan. */

/* ------------------------------------------------------------------ Fotos */
/* Portada: la foto en el muelle, enmarcada. Sustituye al recorte fundido con el fondo. */
.hero-foto.hero-foto-marco { -webkit-mask-image: none; mask-image: none; aspect-ratio: 4 / 5; overflow: hidden; margin-inline: auto;
  width: min(100%, 448px); border-radius: 20px; box-shadow: 0 30px 60px -28px rgb(0 63 77 / .45), 0 0 0 1px rgb(0 63 77 / .06); background: var(--humo); }
.hero-foto.hero-foto-marco img { width: 100%; height: 100%; max-height: none; object-fit: cover; object-position: 50% 30%; }
.hero-equipo:has(.hero-foto-marco)::before { display: none; }
.hero-equipo:has(.hero-foto-marco) .equipo-bocadillo { z-index: 3; }
@media (max-width: 720px) {
  .hero-foto.hero-foto-marco { width: min(78%, 320px); border-radius: 16px; }
}

/* Quién va contigo y Nosotros: el retrato de estudio, en una tarjeta blanca. */
.equipo-figura.foto-estudio { margin-bottom: 0; }
.equipo-figura.foto-estudio::before { display: none; }
.equipo-figura.foto-estudio picture { width: min(100%, 420px); margin-inline: auto; aspect-ratio: 720 / 872; overflow: hidden; border-radius: 20px;
  background: var(--blanco); box-shadow: 0 30px 60px -30px rgb(0 63 77 / .4), 0 0 0 1px rgb(0 63 77 / .06); }
.equipo-figura.foto-estudio img { width: 100%; height: 100%; object-fit: cover; filter: none; max-height: none; }
@media (max-width: 720px) { .equipo-figura.foto-estudio picture { width: min(80%, 320px); border-radius: 16px; } }

/* ------------------------------------------------------------------ Vídeo tutorial */
.tutorial-etiqueta { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 14px; padding: 6px 12px 6px 8px; border-radius: 999px;
  background: var(--petroleo); color: var(--blanco); font-size: 14px; font-weight: 600; letter-spacing: .01em; }
.tutorial-etiqueta .ico { width: 18px; height: 18px; padding: 3px; border-radius: 50%; background: var(--senal); color: var(--asfalto); }
.tutorial-marco { position: relative; margin-top: 36px; aspect-ratio: 16 / 9; border-radius: 18px; overflow: hidden; background: var(--asfalto);
  box-shadow: 0 40px 80px -36px rgb(0 63 77 / .55), 0 0 0 1px rgb(0 63 77 / .1); }
.tutorial-video { display: block; width: 100%; height: 100%; object-fit: contain; background: var(--asfalto); }
.tutorial-play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 18px; padding: 24px; border: 0; cursor: pointer;
  background: linear-gradient(180deg, rgb(16 26 31 / .05) 30%, rgb(16 26 31 / .55)); color: var(--blanco); font: inherit; text-align: left; }
.tutorial-play-boton { display: grid; place-items: center; flex: none; width: 92px; height: 92px; border-radius: 50%; background: var(--senal); color: var(--asfalto);
  box-shadow: 0 0 0 10px rgb(255 255 255 / .22), 0 18px 40px -10px rgb(0 0 0 / .5); transition: transform .2s cubic-bezier(.34, 1.4, .64, 1); }
.tutorial-play-boton .ico { width: 40px; height: 40px; margin-left: 5px; }
.tutorial-play-texto { display: flex; flex-direction: column; gap: 2px; text-shadow: 0 2px 12px rgb(0 0 0 / .45); }
.tutorial-play-texto b { font-family: var(--display); font-size: 34px; line-height: 1; letter-spacing: .01em; }
.tutorial-play-texto span { font-size: 16px; opacity: .92; }
.tutorial-play:hover .tutorial-play-boton, .tutorial-play:focus-visible .tutorial-play-boton { transform: scale(1.07); }
.tutorial-play:focus-visible { outline: 3px solid var(--senal); outline-offset: -6px; }
.tutorial-en-marcha .tutorial-play { display: none; }
.tutorial-capitulos { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 18px; }
.tutorial-capitulos-titulo { display: inline-flex; align-items: center; gap: 6px; margin-right: 6px; font-size: 14px; font-weight: 600; color: var(--grafito); }
.tutorial-capitulos-titulo .ico { width: 18px; height: 18px; }
.tutorial-capitulos button { display: inline-flex; align-items: baseline; gap: 6px; min-height: 40px; padding: 8px 14px; border: 1px solid rgb(0 63 77 / .18); border-radius: 999px;
  background: var(--blanco); color: var(--asfalto); font: inherit; font-size: 15px; cursor: pointer; transition: background-color .15s, border-color .15s; }
.tutorial-capitulos button b { font-family: var(--mono); font-size: 13px; color: var(--petroleo); }
.tutorial-capitulos button:hover { border-color: var(--petroleo); background: var(--petroleo-tinte); }
@media (max-width: 720px) {
  .tutorial-marco { margin-top: 24px; border-radius: 12px; margin-inline: calc(-1 * var(--margen) + 4px); }
  .tutorial-play { flex-direction: column; gap: 10px; text-align: center; }
  .tutorial-play-boton { width: 68px; height: 68px; box-shadow: 0 0 0 7px rgb(255 255 255 / .22); }
  .tutorial-play-boton .ico { width: 30px; height: 30px; }
  .tutorial-play-texto b { font-size: 24px; }
  .tutorial-play-texto span { font-size: 14px; }
  .tutorial-capitulos { flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(-1 * var(--margen)); padding: 2px var(--margen) 6px; scrollbar-width: none; }
  .tutorial-capitulos::-webkit-scrollbar { display: none; }
  .tutorial-capitulos button { flex: none; }
  .tutorial-capitulos-titulo { flex: none; }
}
@media (prefers-reduced-motion: reduce) { .tutorial-play-boton { transition: none; } }

/* ------------------------------------------------------------------ Guía de instalación */
.guia { margin-top: 32px; }
.guia-pestanas { display: inline-flex; gap: 4px; padding: 4px; border-radius: 14px; background: var(--blanco); box-shadow: 0 0 0 1px rgb(0 63 77 / .12); }
.guia-pestanas button { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 10px 22px; border: 0; border-radius: 10px; background: none;
  color: var(--grafito); font: inherit; font-size: 17px; font-weight: 600; cursor: pointer; transition: background-color .15s, color .15s; }
.guia-pestanas button .ico { width: 20px; height: 20px; }
.guia-pestanas button[aria-selected="true"] { background: var(--petroleo); color: var(--blanco); }
.guia-pestanas button:focus-visible { outline: 3px solid var(--senal); outline-offset: 2px; }
.guia-panel { margin-top: 28px; }
.guia-pasos { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 28px 20px; counter-reset: paso; }
.guia-paso { display: flex; flex-direction: column; gap: 16px; }
.guia-texto { position: relative; }
.guia-num { display: inline-grid; place-items: center; width: 30px; height: 30px; margin-bottom: 8px; border-radius: 50%; background: var(--senal); color: var(--asfalto);
  font-family: var(--display); font-size: 18px; font-weight: 700; }
.guia-texto h3 { font-size: 19px; line-height: 1.2; text-wrap: balance; }
.guia-texto p { margin-top: 6px; font-size: 15px; line-height: 1.5; color: var(--grafito); }
.guia-texto b { color: var(--asfalto); }
.tecla { display: inline-block; min-width: 1.6em; padding: 0 .35em; border-radius: 6px; background: var(--blanco); box-shadow: 0 0 0 1px rgb(0 63 77 / .2); font-weight: 700; text-align: center; line-height: 1.4; }
.guia-texto .ico-linea, .ico-linea { display: inline-block; width: 1.05em; height: 1.05em; vertical-align: -.15em; }
.guia-nota { display: flex; gap: 10px; align-items: flex-start; margin-top: 32px; padding: 14px 16px; border-radius: 12px; background: var(--blanco); font-size: 15px; line-height: 1.5; color: var(--grafito); max-width: 62em; }
.guia-nota .ico { flex: none; width: 20px; height: 20px; margin-top: 2px; color: var(--petroleo); }

/* El móvil dibujado. Nada de capturas reales: dibujo propio, sin datos. */
.tel { position: relative; width: 100%; max-width: 200px; aspect-ratio: 9 / 17.5; margin-inline: auto; padding: 7px; border-radius: 30px; background: #1d2327;
  box-shadow: 0 24px 40px -24px rgb(0 0 0 / .45); }
.tel.tableta { max-width: 240px; aspect-ratio: 3 / 4; border-radius: 22px; padding: 9px; }
.tel-pantalla { position: relative; height: 100%; overflow: hidden; border-radius: 24px; background: #fbfbf9; font-size: 11px; color: #1d2327; }
.tableta .tel-pantalla { border-radius: 14px; }
.tel-web { display: flex; flex-direction: column; gap: 9px; padding: 34px 16px 0; }
.android .tel-web, .tableta .tel-web { padding-top: 16px; }
.tel-web img { width: 70px; height: auto; }
.tel-web.tenue { opacity: .35; }
.tel-linea { display: block; height: 7px; border-radius: 4px; background: #e4e4df; }
.tel-linea.corta { width: 60%; }
.tel-boton-web { display: block; height: 22px; margin-top: 6px; border-radius: 6px; background: var(--senal); }
/* Barras del navegador */
.ios-barra { position: absolute; left: 8px; right: 8px; bottom: 12px; display: flex; align-items: center; gap: 6px; }
.ios-atras { font-size: 18px; line-height: 1; color: #6b7378; width: 16px; text-align: center; }
.ios-direccion { flex: 1; min-width: 0; padding: 7px 9px; border-radius: 999px; background: #e9ebea; font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center; }
.ios-mas, .and-puntos { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #e9ebea; font-weight: 700; font-size: 13px; letter-spacing: -.05em; }
.and-barra, .ipad-barra { display: flex; align-items: center; gap: 6px; padding: 26px 8px 8px; background: #f1f2f1; border-bottom: 1px solid #e2e3e1; }
.ipad-barra { padding-top: 10px; }
.and-casa { font-size: 15px; color: #6b7378; }
.and-puntos { background: none; font-size: 17px; letter-spacing: 0; }
.ipad-iconos { display: flex; gap: 6px; color: #1d2327; }
.ipad-iconos .ico { width: 18px; height: 18px; border-radius: 6px; padding: 1px; }
/* Menús y hojas */
.ios-menu { position: absolute; right: 10px; bottom: 50px; display: flex; flex-direction: column; min-width: 128px; padding: 4px; border-radius: 14px; background: #fff;
  box-shadow: 0 10px 30px -6px rgb(0 0 0 / .35); }
.ios-menu span, .and-menu span { display: flex; align-items: center; gap: 7px; padding: 7px 8px; border-radius: 9px; }
.ios-menu .ico { width: 14px; height: 14px; }
.and-menu { position: absolute; right: 6px; top: 26px; display: flex; flex-direction: column; min-width: 140px; padding: 4px 0; border-radius: 8px; background: #fff;
  box-shadow: 0 10px 30px -6px rgb(0 0 0 / .35); }
.and-menu span { border-radius: 4px; margin: 0 4px; }
.ios-hoja { position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; gap: 6px; padding: 10px 10px 16px; border-radius: 16px 16px 0 0;
  background: #eff0ee; box-shadow: 0 -10px 30px -10px rgb(0 0 0 / .3); }
.ipad-hoja { left: auto; right: 8px; bottom: auto; top: 40px; width: 72%; border-radius: 12px; }
.ios-hoja-cabeza { display: flex; align-items: center; gap: 8px; padding: 4px 4px 8px; border-bottom: 1px solid #dcddda; }
.ios-hoja-cabeza img, .ios-dialogo-app img { border-radius: 22%; }
.ios-hoja-cabeza span, .ios-dialogo-app span { display: flex; flex-direction: column; font-size: 9px; color: #6b7378; }
.ios-hoja-cabeza b, .ios-dialogo-app b { font-size: 11px; color: #1d2327; }
.ios-fila { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 8px 9px; border-radius: 9px; background: #fff; }
.ios-fila .ico { width: 14px; height: 14px; flex: none; }
.ios-dialogo { position: absolute; inset: 22px 0 0; border-radius: 14px 14px 0 0; background: #eff0ee; padding: 10px; }
.ipad-dialogo { inset: 18% 12% auto; border-radius: 12px; padding-bottom: 14px; box-shadow: 0 10px 30px -6px rgb(0 0 0 / .35); }
.ios-dialogo-barra { display: flex; align-items: center; justify-content: space-between; gap: 4px; font-size: 10px; color: #0a6cff; }
.ios-dialogo-barra b { color: #1d2327; font-size: 10px; }
.ios-dialogo-barra .toca { font-weight: 700; }
.ios-dialogo-app { display: flex; align-items: center; gap: 10px; margin-top: 14px; padding: 10px; border-radius: 10px; background: #fff; }
.ios-interruptor { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; padding: 9px 10px; border-radius: 10px; background: #fff; }
.interruptor { position: relative; width: 30px; height: 18px; border-radius: 999px; background: #34c759; }
.interruptor::after { content: ""; position: absolute; top: 2px; right: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; }
.and-dialogo { position: absolute; left: 10px; right: 10px; top: 32%; padding: 14px 12px 10px; border-radius: 18px; background: #f3f4f2; box-shadow: 0 10px 30px -6px rgb(0 0 0 / .35); }
.and-dialogo > b { font-size: 12px; }
.and-dialogo .ios-dialogo-app { margin-top: 10px; background: none; padding: 4px 0; }
.and-botones { display: flex; justify-content: flex-end; gap: 14px; margin-top: 8px; color: #0b57d0; font-weight: 600; }
.and-botones span { padding: 5px 6px; border-radius: 8px; }
/* Pantalla de inicio */
.tel-inicio { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-content: start; gap: 14px 8px; padding: 40px 12px 0; background: linear-gradient(160deg, #3b6f7a, #0f3440); }
.app-falsa { aspect-ratio: 1; border-radius: 24%; background: rgb(255 255 255 / .22); }
.app-real { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.app-real img { width: 100%; height: auto; border-radius: 24%; }
.app-real small { font-size: 8px; color: #fff; }
/* Lo que hay que tocar: un anillo amarillo que late. */
.toca, .toca-icono { position: relative; z-index: 1; outline: 3px solid var(--senal); outline-offset: 2px; border-radius: 9px; background-color: #fff8e5; animation: toca-late 1.6s ease-in-out infinite; }
.ios-direccion.toca { border-radius: 999px; }
.app-real.toca { background: none; border-radius: 22%; }
.activo { outline: 2px solid rgb(16 26 31 / .25); }
@keyframes toca-late { 0%, 100% { outline-color: var(--senal); box-shadow: 0 0 0 0 rgb(255 184 28 / .55); } 50% { box-shadow: 0 0 0 7px rgb(255 184 28 / 0); } }
@media (prefers-reduced-motion: reduce) { .toca, .toca-icono { animation: none; } }
@media (max-width: 720px) {
  .guia-pestanas { display: flex; width: 100%; }
  .guia-pestanas button { flex: 1; justify-content: center; padding: 10px 8px; font-size: 16px; }
  .guia-pasos { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 78%; overflow-x: auto; scroll-snap-type: x mandatory; gap: 16px;
    margin-inline: calc(-1 * var(--margen)); padding: 4px var(--margen) 16px; scroll-padding-inline: var(--margen); }
  .guia-paso { scroll-snap-align: start; }
  .tel { max-width: 190px; }
}

/* ------------------------------------------------------------------ Portada más corta (14/10/2026) */
/* «Cómo funciona» del menú lleva al vídeo: el ancla deja sitio a la cabecera fija. */
.ancla { display: block; height: 0; scroll-margin-top: 96px; }
/* Franja de instalación: una línea y tres botones; la guía con dibujos está en /instalar. */
.instalar-banda { background: var(--petroleo-tinte); border-block: 1px solid rgb(0 63 77 / .08); padding-block: 40px; }
.instalar-banda-caja { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 40px; }
.instalar-banda h2 { font-size: clamp(28px, 2.4vw + 12px, 40px); line-height: 1.05; }
.instalar-banda p { margin-top: 8px; font-size: 17px; color: var(--grafito); max-width: 34em; }
.instalar-banda-botones { display: flex; flex-wrap: wrap; gap: 10px; }
.instalar-banda-botones .btn { gap: 8px; background: var(--blanco); }
.instalar-banda-botones .ico { width: 20px; height: 20px; }
/* Ventajas: cuatro tarjetas en lugar de tres secciones largas. */
.ventajas-lista { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.ventaja { padding: 22px 20px; border-radius: 14px; background: var(--blanco); box-shadow: 0 0 0 1px rgb(0 63 77 / .1); }
.ventaja .ico { width: 30px; height: 30px; padding: 6px; border-radius: 10px; background: var(--petroleo-tinte); color: var(--petroleo); stroke-width: 2; }
.ventaja h3 { margin-top: 14px; font-size: 20px; line-height: 1.15; text-wrap: balance; }
.ventaja p { margin-top: 8px; font-size: 15px; line-height: 1.5; color: var(--grafito); }
.ventajas-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin-top: 28px; }
/* Equipo corto: foto pequeña y un párrafo. */
.equipo-corto-caja { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); align-items: center; gap: 32px 64px; }
.equipo-corto-foto.foto-estudio picture { width: min(100%, 300px); }
.equipo-corto .lead { max-width: 36em; }
/* Precios en la portada: los tres planes; «Gratis» y «A medida», en la página de precios. */
#precios .pv-gratis, #precios .pv-medida { display: none; }
@media (max-width: 1100px) { .ventajas-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px) {
  .instalar-banda { padding-block: 32px; }
  .instalar-banda-botones { width: 100%; }
  .instalar-banda-botones .btn { flex: 1; justify-content: center; padding-inline: 10px; }
  .ventajas-lista { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .ventaja { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 14px; padding: 16px; }
  .ventaja .ico { grid-row: span 2; }
  .ventaja h3 { margin-top: 2px; font-size: 18px; }
  .ventaja p { margin-top: 4px; }
  .equipo-corto-caja { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .equipo-corto-foto { order: 2; }
  .equipo-corto-foto.foto-estudio picture { width: min(64%, 240px); }
}