/* ===== TextoPro Studio — Tecnología Viva · Inicio (hero, franja, soluciones, programas, guías) =====
   Módulo aparte: reutiliza los tokens de styles.css y no modifica ninguna regla existente.
   Sin JavaScript todo el contenido se ve (nodos, explicaciones y flujo); js/vivo-inicio.js solo lo hace "vivo". */

.hero-vivo{ padding: 3rem 0 3rem; }
.hero-vivo .hero-grid{ align-items: center; }
@media (min-width: 961px){
  .hero-vivo .hero-grid{ grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 3rem; }
}

/* Escena: foto + red + panel */
.hero-scene{
  position: relative;
  min-width: 0;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(138, 180, 255, 0.25);
  background: #060b1c;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.55);
  overflow: hidden;
}

.hero-stage{
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  isolation: isolate;
}
@media (max-width: 640px){
  .hero-stage{ aspect-ratio: 4 / 3.3; }
}

.hero-photo{
  position: absolute;
  inset: -3%;
  width: 106%;
  height: 106%;
  max-width: none;
  object-fit: cover;
  object-position: 68% 50%;
  z-index: 0;
  will-change: transform;
}
/* Velo azul marino: integra la foto con el fondo, da contraste a nodos y líneas y añade profundidad (viñeta + luz de acento) */
.hero-stage::after{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 50% 55%, transparent 52%, rgba(5, 8, 22, 0.55) 100%),
    linear-gradient(180deg, rgba(5, 8, 22, 0.50) 0%, rgba(5, 8, 22, 0.22) 42%, rgba(6, 11, 28, 0.74) 100%),
    radial-gradient(circle at 74% 62%, rgba(50, 177, 255, 0.16), transparent 52%);
}
/* Filo de luz en el borde superior de la escena */
.hero-scene::before{
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  z-index: 5;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(110, 231, 255, 0.85), transparent);
}

.hero-lines,
.hero-net{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
}
.hero-lines line{
  stroke: rgba(110, 231, 255, 0.38);
  stroke-width: 1.2;
  vector-effect: non-scaling-stroke;
}
/* Con canvas activo, las líneas las dibuja el canvas (misma geometría) */
.hero-scene.has-canvas .hero-lines{ opacity: 0; }

/* Nodos: enlaces reales a su destino */
.hero-nodes{
  list-style: none;
  margin: 0;
  padding: 0;
  position: absolute;
  inset: 0;
  z-index: 3;
}
.hero-nodes li{
  position: absolute;
  left: var(--x);
  top: var(--y);
  transform: translate(-50%, -50%);
}
.hero-node{
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  padding: 0 1rem;
  border-radius: 999px;
  background: rgba(7, 14, 36, 0.88);
  border: 1px solid rgba(110, 231, 255, 0.45);
  color: var(--text);
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.hero-node-dot{
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 10px rgba(50, 177, 255, 0.9);
  flex: none;
}
.hero-node:hover,
.hero-node.is-active{
  border-color: #6ee7ff;
  background: rgba(9, 24, 58, 0.94);
  box-shadow: 0 0 0 1px rgba(110, 231, 255, 0.3), 0 0 22px rgba(50, 177, 255, 0.45);
}
@media (max-width: 640px){
  .hero-node{ font-size: 0.8rem; padding: 0 0.8rem; gap: 0.4rem; }
}

/* Posición del botón de pausa dentro del escenario (la forma del botón es .vivo-pause, en vivo-base.css) */
.hero-pause{
  position: absolute;
  bottom: 0.7rem;
  right: 0.7rem;
  z-index: 4;
}

/* Panel navy: explicación del nodo + flujo conceptual */
.hero-panel{
  position: relative;
  padding: 1rem 1.25rem 1.05rem;
  background: linear-gradient(180deg, #07112b 0%, #050a1c 100%);
  border-top: 1px solid rgba(110, 231, 255, 0.22);
}
.hero-panel::before{
  content: "";
  position: absolute;
  top: -1px;
  left: var(--nx, 24%);
  width: 84px;
  height: 2px;
  margin-left: -42px;
  background: linear-gradient(90deg, transparent, #6ee7ff, transparent);
  box-shadow: 0 0 16px rgba(110, 231, 255, 0.85);
  transition: left 0.35s ease;
}
.hero-info{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0;
}
/* Estado inicial (antes de que cargue JavaScript): las cuatro explicaciones comparten la misma celda
   y se ve la primera, así el panel ya reserva su altura final y no hay salto de diseño al activarse el JS.
   Sin JavaScript, css/nojs.css vuelve a apilarlas todas. */
.hero-info li{ grid-area: 1 / 1; visibility: hidden; opacity: 0; }
.hero-info li:first-child{ visibility: visible; opacity: 1; }
.hero-info h3,
.hero-info .hero-info-title{
  margin: 0 0 0.3rem;
  font-size: 1.02rem;
  font-weight: 700;
  line-height: 1.6; /* el mismo interlineado que tenía el h3 (hereda del cuerpo) */
  color: var(--text);
}
.hero-info p{
  margin: 0;
  max-width: none;
  color: var(--muted);
  font-size: 0.9rem;
}
.hero-info .card-link{ margin-top: 0.55rem; }

/* Con JS: se muestra una explicación a la vez, sin cambiar la altura del panel */
.hero-scene.is-live .hero-info{ gap: 0; }
.hero-scene.is-live .hero-info li{
  grid-area: 1 / 1;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.25s ease;
}
.hero-scene.is-live .hero-info li.is-active{
  visibility: visible;
  opacity: 1;
}
.hero-touch-hint{
  display: none;
  margin-top: 0.4rem;
  font-size: 0.74rem;
  color: var(--tp-silver);
}
@media (hover: none){
  /* En pantallas táctiles el aviso reserva su sitio desde el principio y solo se muestra cuando el JS está activo */
  .hero-touch-hint{ display: block; visibility: hidden; }
  .hero-scene.is-live .hero-touch-hint{ visibility: visible; }
}

/* Flujo conceptual */
.hero-flow{
  margin-top: 0.8rem;
  padding-top: 0.75rem;
  border-top: 1px dashed rgba(138, 180, 255, 0.28);
}
.hero-flow-steps{
  list-style: none;
  margin: 0.6rem 0 0.5rem;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.5rem;
}
.hero-flow-steps li{
  padding: 0.6rem 0.4rem;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: rgba(13, 15, 24, 0.85);
  color: var(--muted);
  font-size: 0.74rem;
  line-height: 1.25;
  text-align: center;
}
@media (max-width: 640px){
  .hero-flow-steps{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero-panel{ padding: 1rem 1.1rem 1.1rem; }
}
.hero-caption{
  margin: 0;
  font-size: 0.72rem;
  color: var(--muted);
}

/* Movimiento (solo con JS activo; sin JS la escena es estática) */
@keyframes hero-step{
  0%, 22%{
    border-color: rgba(110, 231, 255, 0.75);
    color: var(--text);
    background: rgba(9, 24, 58, 0.92);
    box-shadow: 0 0 16px rgba(50, 177, 255, 0.3);
  }
  26%, 100%{
    border-color: var(--border);
    color: var(--muted);
    background: rgba(13, 15, 24, 0.85);
    box-shadow: 0 0 0 rgba(50, 177, 255, 0);
  }
}
@keyframes hero-pulse{
  0%{ box-shadow: 0 0 0 0 rgba(50, 177, 255, 0.7); }
  100%{ box-shadow: 0 0 0 14px rgba(50, 177, 255, 0); }
}
.hero-scene.is-live .hero-flow-steps li{
  animation: hero-step 8s linear infinite;
  animation-delay: calc(var(--i) * 2s);
}
.hero-node.is-pulse{ animation: hero-pulse 1.1s ease-out; }
.hero-scene.is-paused .hero-flow-steps li,
.hero-scene.is-paused .hero-node{ animation-play-state: paused; }

@media (prefers-reduced-motion: reduce){
  .hero-scene *,
  .hero-scene *::before,
  .hero-scene *::after{ animation: none !important; }
}

/* ===== Iteración 2 ===== */

/* Cuadrículas de 2 tarjetas (Guías y Programas): sin hueco a la derecha */
.cards-grid--two{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 1100px){
  .cards-grid--two{ grid-template-columns: minmax(0, 1fr); }
}

/* Portátiles y pantallas bajas (p. ej. 1366 × 768): el hero completo cabe en la primera pantalla */
@media (min-width: 961px) and (max-height: 820px){
  .hero-vivo{ padding: 1.4rem 0 2rem; }
  .hero-stage{ aspect-ratio: 16 / 7.4; }
  .hero-panel{ padding: 0.8rem 1.1rem 0.85rem; }
  .hero-info h3,
  .hero-info .hero-info-title{ font-size: 0.98rem; margin-bottom: 0.2rem; }
  .hero-info p{ font-size: 0.85rem; line-height: 1.5; }
  .hero-info .card-link{ margin-top: 0.4rem; }
  .hero-flow{ margin-top: 0.6rem; padding-top: 0.6rem; }
  .hero-flow-steps{ margin: 0.5rem 0 0.4rem; }
  .hero-flow-steps li{ padding: 0.4rem 0.3rem; font-size: 0.72rem; }
  .hero-caption{ font-size: 0.68rem; line-height: 1.35; }
}

/* Móvil: más presencia de la escena (título y botones se compactan, no se ocultan) */
@media (max-width: 640px){
  .hero-vivo{ padding: 1.3rem 0 1.6rem; }
  .hero-vivo .hero-grid{ gap: 1.4rem; }
  .hero-vivo .hero-text h1{ font-size: clamp(1.62rem, 8.2vw, 2.2rem); margin-bottom: 0.7rem; text-wrap: balance; }
  /* En móvil el título fluye con líneas equilibradas (sin la línea huérfana que dejaría el salto forzado) */
  .hero-vivo .hero-text h1 br{ display: none; }
  .hero-vivo .hero-text h1 .accent::before{ content: " "; }
  .hero-vivo .hero-actions{ margin: 1.1rem 0 0.8rem; gap: 0.7rem; }
  .hero-vivo .badge-soon--inline{ margin-top: 0.2rem; }
  /* La escena ocupa todo el ancho de la pantalla */
  .hero-scene{
    margin-inline: -1.2rem;
    border-radius: 0;
    border-left: 0;
    border-right: 0;
  }
  .hero-stage{ aspect-ratio: 4 / 3.5; }
}

/* ===== Franja de capacidades ===== */
.cap-strip{
  padding: 1.4rem 0 0.4rem;
}
.cap-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.7rem;
}
.cap-title{
  margin: 0;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tp-silver);
}
.cap-viewport{ position: relative; }
.cap-track{
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
}
.cap-item{
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.7rem 1.2rem;
  border-radius: 999px;
  border: 1px solid rgba(110, 231, 255, 0.28);
  background: linear-gradient(180deg, rgba(9, 24, 58, 0.9), rgba(7, 14, 36, 0.9));
  color: var(--text);
  font-size: 0.92rem;
  font-weight: 600;
  white-space: nowrap;
}
.cap-dot{
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 10px rgba(50, 177, 255, 0.9);
  flex: none;
}
/* Con JS (y sin movimiento reducido): una sola fila continua */
.cap-strip.is-marquee .cap-viewport{
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.cap-strip.is-marquee .cap-track{
  flex-wrap: nowrap;
  gap: 0;
  width: max-content;
  animation: cap-scroll 46s linear infinite;
}
.cap-strip.is-marquee .cap-item{ margin-right: 0.8rem; }
.cap-strip.is-paused .cap-track,
.cap-strip.is-offscreen .cap-track{ animation-play-state: paused; }
@media (hover: hover){
  .cap-strip.is-marquee .cap-viewport:hover .cap-track{ animation-play-state: paused; }
}
@keyframes cap-scroll{ to{ transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce){
  .cap-strip .cap-track{ animation: none !important; transform: none !important; }
}

/* ===== Panel de soluciones (pestañas + flechas) ===== */
.sol-panels{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.4rem;
}
.sol-panel{
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
  padding: 1.3rem;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: linear-gradient(180deg, #08122b 0%, #060b1c 100%);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
}
.sol-panel h3{ margin: 0 0 0.5rem; font-size: 1.3rem; }
.sol-panel p{ margin: 0 0 0.7rem; color: var(--muted); font-size: 0.95rem; }
.sol-panel .sol-note{ font-size: 0.78rem; color: var(--tp-silver); }
.sol-visual{
  position: relative;
  border-radius: var(--radius-md);
  border: 1px solid rgba(110, 231, 255, 0.16);
  background:
    radial-gradient(circle at 70% 20%, rgba(50, 177, 255, 0.16), transparent 60%),
    linear-gradient(180deg, #091735, #060b1c);
  overflow: hidden;
  min-height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sol-visual svg{ display: block; width: 100%; height: auto; max-height: 230px; }
.sv-card{ fill: #0b1430; stroke: rgba(110, 231, 255, 0.3); stroke-width: 1.2; }
.sv-acc{ fill: #0a1f4a; stroke: #6ee7ff; }
.sv-line{ fill: rgba(170, 195, 255, 0.6); }
.sv-dim{ fill: rgba(170, 195, 255, 0.28); }
.sv-path{ fill: none; stroke: rgba(110, 231, 255, 0.7); stroke-width: 1.6; stroke-linecap: round; stroke-dasharray: 3 5; }
.sv-node{ fill: #32b1ff; }
.sv-doc{ fill: #0d1838; stroke: rgba(170, 195, 255, 0.4); stroke-width: 1; }
.sv-bar{ fill: #32b1ff; opacity: 0.85; }
.sv-dot.r{ fill: #ff5f57; } .sv-dot.y{ fill: #febc2e; } .sv-dot.g{ fill: #28c840; }
.sol-visual--products{ gap: 1rem; padding: 1rem; }
.sol-cover{ height: 190px; width: auto; border-radius: 6px; box-shadow: 0 14px 30px rgba(0, 0, 0, 0.55), 0 0 22px rgba(50, 177, 255, 0.25); }
.mini-lab{ display: grid; gap: 0.5rem; width: 42%; }
.mini-lab-field{ height: 12px; border-radius: 6px; background: rgba(170, 195, 255, 0.28); border: 1px solid rgba(110, 231, 255, 0.2); }
.mini-lab-field--short{ width: 60%; }
.mini-lab-result{ height: 26px; border-radius: 8px; background: linear-gradient(90deg, rgba(50, 177, 255, 0.35), rgba(50, 177, 255, 0.08)); border: 1px solid rgba(110, 231, 255, 0.3); }
.mini-lab-field + .mini-lab-result{ margin-top: 0.4rem; }

/* Con JS: un panel a la vez */
.sol-carousel.is-live .sol-panels{ display: block; }
.sol-carousel.is-live .sol-panel{
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  align-items: center;
  gap: 1.8rem;
  padding: 1.6rem;
}
.sol-carousel.is-live .sol-panel[hidden]{ display: none; }
.sol-carousel.is-live .sol-panel.is-entering{ animation: sol-in 0.4s ease; }
@keyframes sol-in{ from{ opacity: 0; transform: translateY(8px); } to{ opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce){ .sol-panel.is-entering{ animation: none !important; } }
.sol-bar{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}
.sol-tabs{
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.sol-tab{
  min-height: 44px;
  padding: 0 1.1rem;
  border-radius: 999px;
  border: 1px solid rgba(138, 180, 255, 0.3);
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.sol-tab:hover{ color: var(--text); border-color: rgba(110, 231, 255, 0.6); }
.sol-tab[aria-selected="true"]{
  color: var(--text);
  border-color: #6ee7ff;
  background: rgba(9, 24, 58, 0.95);
  box-shadow: 0 0 18px rgba(50, 177, 255, 0.28);
}
.sol-arrows{ display: flex; align-items: center; gap: 0.5rem; flex: none; }
.sol-arrow{
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(138, 180, 255, 0.35);
  background: rgba(7, 14, 36, 0.85);
  color: var(--text);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
}
.sol-arrow:hover{ border-color: #6ee7ff; }
.sol-count{ min-width: 3rem; text-align: center; font-size: 0.8rem; color: var(--muted); }
@media (max-width: 900px){
  .sol-panels{ grid-template-columns: minmax(0, 1fr); }
  .sol-carousel.is-live .sol-panel{ grid-template-columns: minmax(0, 1fr); gap: 1rem; padding: 1.2rem; }
  .sol-bar{ flex-direction: column; align-items: stretch; }
  .sol-tabs{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sol-tab{ padding: 0 0.6rem; }
  .sol-arrows{ justify-content: space-between; }
}

/* ===== Programas: tarjetas con imagen (Base azul · Crecimiento verde) ===== */
.program-card{
  --prog: #32b1ff;
  --prog-rgb: 50, 177, 255;
  display: grid;
  grid-template-columns: minmax(0, 190px) minmax(0, 1fr);
  gap: 1.3rem;
  align-items: stretch;
  border-color: rgba(var(--prog-rgb), 0.38);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45), 0 0 34px rgba(var(--prog-rgb), 0.10);
}
.program-card--crecimiento{ --prog: #3ddc84; --prog-rgb: 61, 220, 132; }
.program-media{ display: flex; align-items: center; }
.program-media img{
  display: block;
  width: 100%;
  height: auto;
  border-radius: 14px;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.55), 0 0 26px rgba(var(--prog-rgb), 0.28);
}
.program-body{ display: flex; flex-direction: column; min-width: 0; }
.program-body .solution-number{ color: var(--prog); }
.program-body h3{ margin-bottom: 0.5rem; }
.program-body ul{ margin-bottom: 0; }
.program-body li::marker{ color: var(--prog); }
.program-body .card-actions{ margin-top: auto; padding-top: 1.1rem; }
.program-card .btn-secondary{ border-color: rgba(var(--prog-rgb), 0.7); }
.program-card .btn-secondary:hover{ background: rgba(var(--prog-rgb), 0.14); }
@media (max-width: 560px){
  .program-card{ grid-template-columns: minmax(0, 1fr); }
  .program-media{ max-width: 320px; width: 100%; margin-inline: auto; }
  .program-media img{ aspect-ratio: 1 / 1; object-fit: cover; object-position: 50% 42%; }
}

/* ===== Guías: portada real + composición editorial ===== */
.guide-list{ display: grid; gap: 1.4rem; }
.guide-feature{
  display: grid;
  grid-template-columns: minmax(0, 250px) minmax(0, 1fr);
  gap: 2rem;
  align-items: center;
  padding: 1.6rem;
}
.guide-cover{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.guide-cover::before{
  content: "";
  position: absolute;
  inset: 8% -6% 4% -6%;
  background: radial-gradient(ellipse at center, rgba(50, 177, 255, 0.30), transparent 68%);
  pointer-events: none;
}
.guide-cover img{
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 22px 46px rgba(0, 0, 0, 0.6), 0 0 30px rgba(50, 177, 255, 0.22);
}
.guide-body{ min-width: 0; }
.guide-body h3{ margin: 0.7rem 0 0.5rem; font-size: 1.35rem; }
.guide-body .mini-faq{ margin: 1rem 0 1.2rem; }
/* Mercado Libre: sin portada aún; marcador neutro con el logotipo, claramente "próximamente" */
.guide-feature--soon{ grid-template-columns: minmax(0, 150px) minmax(0, 1fr); opacity: 0.96; }
.guide-cover--soon{
  aspect-ratio: 4 / 5;
  border-radius: 10px;
  border: 1px dashed rgba(138, 180, 255, 0.4);
  background: linear-gradient(180deg, rgba(9, 24, 58, 0.7), rgba(6, 11, 28, 0.7));
}
.guide-cover--soon::before{ display: none; }
.guide-cover--soon img{ width: 62%; box-shadow: none; border-radius: 0; opacity: 0.85; }
@media (max-width: 760px){
  .guide-feature,
  .guide-feature--soon{ grid-template-columns: minmax(0, 1fr); gap: 1.2rem; padding: 1.2rem; }
  .guide-cover{ max-width: 230px; margin-inline: auto; }
  .guide-cover--soon{ max-width: 140px; }
}

/* ===== Digitalización (Inicio): imagen del emprendedor con la interfaz holográfica =====
   El recuadro reserva su proporción (sin saltos de diseño); object-fit: cover recorta el exceso de fondo oscuro
   y object-position mantiene visibles el rostro, la mano y los paneles de la interfaz. */
.digi-photo{
  margin: 0;
  aspect-ratio: 7 / 5;
  overflow: hidden;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(110, 231, 255, 0.24);
  background: #050b1f;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), 0 0 34px rgba(50, 177, 255, 0.14);
}
.digi-photo img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 78% 40%;
}
/* Pantallas estrechas: proporción natural de la imagen (3:2), sin recortes */
@media (max-width: 900px){
  .digi-photo{ aspect-ratio: 3 / 2; }
}