/* caso-proplegal.css — solo los tokens y los ajustes del caso PropLegal.
   El layout vive en caso-base.css y caso-layouts.css. Si hay que tocar
   maquetación, se toca allá.

   La paleta sale del propio logotipo, muestreada de los JPG originales de 2021:
     #0165c3  azul del isotipo             (5,75:1 sobre blanco — pasa AA)
     #0a3c6e  azul oscuro, para apoyos     (11,1:1)
     #000000  el negro de la versión 1     (21:1)

   Blanco sobre el azul da los mismos 5,75:1, que es lo que sostiene la píldora
   y los iconos de las tarjetas. */

.caso--proplegal {
  /* El id de la sección es un ancla: sin esto, al llegar por
     `#proplegal` el título queda pegado al borde de arriba. */
  scroll-margin-top: 2rem;

  --caso-acento: #0165c3;
  --caso-acento-texto: #fff;
  --caso-secundario: #0a3c6e;
  --caso-fondo-alt: #f2f6fb;
  --caso-linea: #dde6f1;
  --caso-radio: 14px;              /* más redondeo que la base: las piezas son
                                      mockups fotográficos, y el canto blando
                                      es lo que las hace ver montadas y no
                                      pegadas */
}

/* ── Tema claro, fijo ────────────────────────────────────────────────────
   Sin bloque de modo oscuro a propósito. caso-base.css trae un
   @media (prefers-color-scheme: dark) que se apaga con data-tema="claro",
   y ese atributo va puesto en el <section>. Se usa el interruptor que ya
   existe en la base en vez de escribir un override que la contradiga.

   El motivo es de diseño: las seis piezas son azul y blanco sobre fondo claro
   —dos de ellas sobre celeste—. En pantalla oscura los mockups quedan
   flotando como recortes y la marca pierde el aire que la sostiene. */

/* ── Ritmo vertical ─────────────────────────────────────────────────────
   Más apretado que el de la base. Son tres secciones y seis piezas: con el
   aire por defecto el caso pedía cinco scrolls para lo que se cuenta en dos.
   El aire de más no se lee como respiro, se lee como relleno. */
.caso--proplegal { padding-block: clamp(2.25rem, 4vw, 3.25rem); }
.caso--proplegal .caso__bloque { margin-block: clamp(1.75rem, 3.2vw, 2.5rem); }

/* ══ Maquetación de las secciones 2 y 3 ═════════════════════════════════
   Ago 2026. Las dos secciones dejaron de ser "encabezado centrado + rejilla
   de iguales" y pasaron a la diagramación de la referencia que trajo Miguel:
   bloques de anchos desiguales, el texto AL LADO de las piezas y no encima, y
   un panel de color macizo que hace de contrapeso.

   Las clases van con prefijo `pl-` y viven aquí, no en caso-layouts.css: son
   la maqueta de este caso y la capa compartida no tiene por qué crecer con
   algo que ninguna otra sección pide. Si mañana un segundo caso quiere el
   mismo patrón, ahí se promueve a la capa compartida — no antes.

   Todo se apoya en una rejilla de 12 columnas, que es lo que permite los
   repartos 5/7 y 6/3/3 de la referencia sin números mágicos. */

.caso--proplegal .caso__pl-rejilla {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(.6rem, 1.4vw, 1rem);
  align-items: stretch;
}

/* --- Sección 2: texto a la izquierda, pieza grande a la derecha ---------- */

.caso--proplegal .caso__pl-texto {
  grid-column: span 6;
  display: flex;
  flex-direction: column;
  justify-content: center;   /* el texto se centra contra el alto de la pieza
                                vecina, como en la referencia: la columna
                                angosta no arranca pegada al techo */
  min-width: 0;
  padding-right: clamp(0rem, 1.5vw, 1.5rem);
}
.caso--proplegal .caso__pl-texto .caso__titulo-2 { text-align: left; }
.caso--proplegal .caso__pl-parrafo {
  margin: 0;
  max-width: 48ch;   /* la columna mide 552px: con 42ch el párrafo se iba a
                        cinco renglones angostos y dejaba un hueco al lado */
  color: var(--caso-tinta-suave);
}

/* Los dos datos bajo el párrafo. Reemplazan a la segunda línea de prosa: un
   par de etiquetas se leen de un vistazo y una frase más, no. */
.caso--proplegal .caso__pl-datos {
  margin: clamp(1rem, 2vw, 1.4rem) 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: .55rem;
}
.caso--proplegal .caso__pl-datos li {
  padding-left: .85rem;
  border-left: 3px solid var(--caso-acento);
}
.caso--proplegal .caso__pl-datos b {
  display: block;
  font-size: .93rem;
  letter-spacing: -.005em;
}
.caso--proplegal .caso__pl-datos span {
  display: block;
  font-size: .84rem;
  color: var(--caso-tinta-suave);
}

/* 6 y no 7: así la lámina del logotipo mide 552 px, prácticamente lo mismo
   que la pieza de la apertura (541 px). Las dos columnas derechas del caso
   quedan alineadas al mirar la sección completa, en vez de una más ancha que
   la otra por 100 px sin motivo. */
.caso--proplegal .caso__pl-pieza { grid-column: span 6; min-width: 0; }

/* La banda que cierra la sección 2: la lámina horizontal partida en sus dos
   versiones, una al lado de la otra. Partirla es cosa de build_assets.py; aquí
   solo se reparten las 12 columnas en dos mitades.

   El alto va TOPADO. La lámina horizontal es de 1920x1029, así que a 1120 px
   de ancho medía 601 px de alto: media pantalla para una sola pieza, y la
   sección quedaba desfondada. Con el tope y `contain`, la lámina entra entera
   dentro de una franja baja y lo que sobra es aire a los lados — que es
   exactamente cómo se lee la banda ancha en la referencia. `cover` habría
   dado el mismo alto recortando el logotipo, y un logotipo recortado miente
   sobre lo que se entregó. */
.caso--proplegal .caso__pl-banda {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(.6rem, 1.4vw, 1rem);
  margin: clamp(.6rem, 1.4vw, 1rem) 0 0;
  padding: 0;
  list-style: none;
  min-width: 0;
}
.caso--proplegal .caso__pl-banda > li { margin: 0; min-width: 0; }
/* Alto topado: cada mitad es de 1920x~514, o sea 3,7:1. A 552px de ancho eso
   son 148px de alto, que ya es una franja baja; el tope existe por si la
   página se ve en un contenedor más ancho. */
.caso--proplegal .caso__pl-banda img {
  max-height: 200px;
  object-fit: contain;
}
@media (max-width: 620px) {
  .caso--proplegal .caso__pl-banda { grid-template-columns: 1fr; }
}

/* --- Sección 3: bento 6 / 3 / 3 ----------------------------------------- */
/* La pieza grande manda el alto de la fila; el panel y la columna de la
   derecha se estiran contra ella. Por eso la grande va con `contain` —es un
   mockup y recortarlo le quita el aire que lo hace parecer foto— mientras que
   las dos de la columna van con `cover`: tienen margen de sobra alrededor del
   objeto y el recorte las aprieta sin comerse nada. */

.caso--proplegal .caso__pl-grande { grid-column: span 6; min-width: 0; }
.caso--proplegal .caso__pl-grande .caso__lupa,
.caso--proplegal .caso__pl-grande img { height: 100%; }
.caso--proplegal .caso__pl-grande img { object-fit: contain; }

.caso--proplegal .caso__pl-columna {
  grid-column: span 3;
  display: grid;
  grid-template-rows: 1fr 1fr;
  gap: clamp(.6rem, 1.4vw, 1rem);
  margin: 0;
  padding: 0;
  list-style: none;
  min-width: 0;
}
.caso--proplegal .caso__pl-columna > li { margin: 0; min-height: 0; }
.caso--proplegal .caso__pl-columna .caso__lupa,
.caso--proplegal .caso__pl-columna img { height: 100%; }
.caso--proplegal .caso__pl-columna img { object-fit: cover; }

/* El panel macizo. Es el contrapeso oscuro de la referencia, pero en el azul
   de la marca y no en negro: el caso va sobre blanco de punta a punta. */
.caso--proplegal .caso__panel {
  grid-column: span 3;
  display: flex;
  flex-direction: column;
  gap: .8rem;
  padding: clamp(1.1rem, 2.2vw, 1.6rem);
  border-radius: var(--caso-radio);
  background: var(--caso-secundario);
  color: #fff;                       /* 11,1:1 sobre el panel */
  min-width: 0;
}
/* El título del panel va en versalita y en UNA sola línea. A la escala de
   .caso__titulo-2 —hasta 2,35rem— «Las aplicaciones» partía en dos renglones
   dentro de una columna de 268px, y un título partido dentro de un panel
   angosto se lee como error de maqueta. En versalita a 1rem entra entero y
   además marca la diferencia con los otros dos encabezados, que sí son
   titulares. Sigue siendo un h3. */
.caso--proplegal .caso__panel-titulo {
  margin: 0;
  font-size: .95rem;   /* medido con un Range sobre el texto, no sobre la caja:
                          a 1030px de ventana —el caso más apretado que admite
                          el bento— «LAS APLICACIONES» ocupa 155px contra 178
                          de interior. Queda holgura, pero poca: subir de aquí
                          obliga a mover el punto de quiebre de 1024px */
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: #fff;
  text-wrap: nowrap;
}
.caso--proplegal .caso__panel p { margin: 0; color: #cfe0f2; font-size: .95rem; }
.caso--proplegal .caso__panel-pie {
  margin-top: auto !important;       /* pegado abajo, contra el alto que manda
                                        la pieza grande */
  padding-top: .9rem;
  border-top: 1px solid rgb(255 255 255 / .22);
  font-size: .8rem !important;
  letter-spacing: .04em;
  color: #9fc6ec !important;         /* 6,2:1 sobre el panel */
}

/* --- Cómo se desarma ---------------------------------------------------- */
/* Dos saltos, no uno. A 900px el reparto 5/7 y 6/3/3 ya no cabe pero la
   pantalla todavía admite dos columnas; por debajo de 620px va todo a una.
   El panel se pone primero al apilar: el texto tiene que llegar antes que las
   piezas que describe. */

/* 1024 y no 900: el bento 6/3/3 necesita que el panel tenga ancho para que
   «LAS APLICACIONES» quepa en una línea. Entre 900 y 1024 el panel bajaba de
   190px y el título partía en dos. */
@media (max-width: 1024px) {
  .caso--proplegal .caso__pl-texto,
  .caso--proplegal .caso__pl-pieza,
  .caso--proplegal .caso__pl-grande,
  .caso--proplegal .caso__panel { grid-column: 1 / -1; }
  .caso--proplegal .caso__pl-columna { grid-column: 1 / -1; grid-template-rows: none; grid-template-columns: 1fr 1fr; }
  .caso--proplegal .caso__panel { order: -1; }
  .caso--proplegal .caso__pl-texto { padding-right: 0; }
  /* Sin alto que igualar, las piezas vuelven a entrar enteras. */
  .caso--proplegal .caso__pl-grande .caso__lupa,
  .caso--proplegal .caso__pl-grande img,
  .caso--proplegal .caso__pl-columna .caso__lupa,
  .caso--proplegal .caso__pl-columna img { height: auto; }
  .caso--proplegal .caso__pl-columna img { object-fit: contain; }
}
@media (max-width: 620px) {
  .caso--proplegal .caso__pl-columna { grid-template-columns: 1fr; }
}

/* ── Fondo de las piezas ────────────────────────────────────────────────
   Los dos mockups de tarjeta traen fondo celeste propio y la lámina del muro
   es casi blanca: sobre el fondo alterno el borde de la casilla se perdía, así
   que el contraste lo pone la línea. */
.caso--proplegal .caso__bento .caso__lupa,
.caso--proplegal .caso__pl-grande .caso__lupa,
.caso--proplegal .caso__pl-columna .caso__lupa {
  border-color: var(--caso-linea);
  background: var(--caso-fondo-alt);
}

/* Las dos láminas de logotipo van sobre BLANCO, no sobre el fondo alterno.
   La lámina ya es blanca de origen, así que el azulado del fondo alterno solo
   aparecía en el aire de los costados: se leía como un recuadro azul pegado
   alrededor del logotipo, no como fondo. Sobre blanco, la única línea que se
   ve es el borde. */
.caso--proplegal .caso__pl-pieza .caso__lupa,
.caso--proplegal .caso__pl-banda .caso__lupa {
  border-color: var(--caso-linea);
  background: var(--caso-fondo);
}

/* ── Qué pasa al pasar el ratón ─────────────────────────────────────────
   Ya no es una sombra. Se probó dos veces y las dos se veían mal, así que vale
   la pena dejar escrito por qué, para no volver a intentarlo:

   1. La base tira una sola sombra grande (`0 10px 28px` al 13 % de negro): el
      borde del desenfoque se marca y la imagen parece montada sobre una lámina
      gris en vez de levantarse.
   2. El reemplazo fueron cuatro capas de radios 2, 8, 20 y 40 px al 6-7 %.
      Peor. **Un radio de 40 px con 7 % de opacidad bandea**: el degradado
      recorre tan poca diferencia de color en tantos píxeles que en una pantalla
      de 8 bits los saltos se ven como anillos. Y **las cuatro capas se suman
      cerca del objeto** —ahí la sombra pesa cerca del 25 % y a 30 px ya no pesa
      nada—, que es justo el escalón que se quería evitar.

   Lo que queda es movimiento, no sombra: la imagen se acerca un 3 % dentro de
   su propio marco, que no se mueve. El marco ya recorta (`overflow: hidden` en
   `.caso__lupa`), así que el efecto es que la pieza respira dentro de la
   casilla y la rejilla no se altera ni un píxel. El borde se tiñe de azul
   claro al mismo tiempo: el color dice «esto responde» y el movimiento dice
   «se puede abrir».

   Sin `box-shadow` en ninguna de las dos: sobre blanco no hace falta separar
   nada, y era justo lo que se veía sucio. */
.caso--proplegal .caso__lupa {
  transition: border-color .3s ease;
  box-shadow: none;
  /* En táctil: sin la espera del doble toque y sin el destello gris de
     Android encima de una pieza que ya tiene su propio estado. */
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
/* Sin `will-change: transform` fijo: son siete imágenes y dejarlas promovidas
   a capa propia todo el tiempo cuesta memoria para ganar un frame en un hover
   que quizá nunca pasa. El navegador ya promueve al empezar la transición. */
.caso--proplegal .caso__lupa img {
  transition: transform .45s cubic-bezier(.2, .6, .2, 1);
}
.caso--proplegal .caso__lupa:hover,
.caso--proplegal .caso__lupa:focus-visible {
  transform: none;
  box-shadow: none;
  border-color: #b9d2ea;
}
.caso--proplegal .caso__lupa:hover img,
.caso--proplegal .caso__lupa:focus-visible img { transform: scale(1.03); }

/* El foco de teclado NO se queda solo con el zoom: necesita un anillo visible.
   Lo hereda de caso-base.css (`outline: 3px solid var(--caso-acento)`), y aquí
   no se pisa a propósito. */

@media (prefers-reduced-motion: reduce) {
  .caso--proplegal .caso__lupa img { transition: none; }
  .caso--proplegal .caso__lupa:hover img,
  .caso--proplegal .caso__lupa:focus-visible img { transform: none; }
}

/* ── El cierre, a dos líneas ────────────────────────────────────────────
   Arriba el rótulo en azul y versalita; abajo la frase. Sin guion largo y sin
   punto final: son dos renglones, no una oración partida. */
/* Pegado a las piezas de arriba, no flotando al final de la página. Con el
   aire por defecto del cierre —hasta 3,5rem— se leía como el pie de la página
   entera y no como el remate de ESTE caso, que es lo que es: abajo sigue otra
   sección. */
.caso--proplegal .caso__pl-cierre {
  margin: clamp(1.1rem, 2vw, 1.6rem) auto 0;
  text-align: center;
}
/* Arriba, el rótulo: azul, versalita y con cuerpo. */
.caso--proplegal .caso__pl-cierre b {
  display: block;
  margin-bottom: .45rem;
  font-size: clamp(1rem, 1.5vw, 1.15rem);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--caso-acento);
}
/* Abajo, la frase: gris y pequeña, con aire de pie de página. Sin `max-width`
   ni `text-wrap: balance` a propósito — tiene que caber en UNA línea, y
   cualquiera de las dos cosas la parte en dos. */
.caso--proplegal .caso__pl-cierre span {
  display: block;
  font-size: .85rem;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--caso-tinta-suave);
}