/* ============================================================================
   FLIP CARDS — Qué Hacemos
   ----------------------------------------------------------------------------
   La clienta: "faltan los íconos de cada cuadrícula... los cuadros no giran al
   hacer clic... así debería verse una vez gire el cuadro". Antes cada tarjeta
   era un <details> que se expandía. Ahora es una tarjeta que GIRA en 3D: cara
   frontal con el ícono del programa y el título; al pulsar, gira y muestra la
   lista de actividades con un ícono pequeño por línea.

   Los íconos son los mismos garabatos del mapa (#g-mochila, #g-balon,
   #g-acordeon, #g-carpa, #g-moto): una sola fuente de verdad, no dibujos
   nuevos.
   ============================================================================ */

/* El color de programa pasa a variable local para poder pintarlo en las dos
   caras (que son absolutas y no heredan el background del contenedor). */
.t-educacion{ --c:var(--azul) }
.t-cultura  { --c:var(--coral) }
.t-deporte  { --c:var(--verde) }
.t-jornadas { --c:var(--naranja) }
.t-rural    { --c:var(--morado) }

/* La tarjeta deja de pintar el fondo y de tener padding: ahora eso vive en cada
   cara. Conserva su caja de la rejilla (aspect-ratio la pone estilo.css). */
.flip-card{
  background:transparent !important;
  padding:0 !important;
  /* La tarjeta era flex (align-items:flex-end) para apoyar el titulo abajo.
     Ahora el boton llena la caja y las caras gobiernan su propio layout, asi
     que vuelve a bloque: si no, la regla movil .tablero .tile{justify-content}
     empuja el contenido de lado. */
  display:block;
  perspective:1100px;
  overflow:visible;
}

/* El boton ocupa toda la tarjeta y no trae estilos propios del navegador. */
.flip-card .flip{
  all:unset;
  display:block; box-sizing:border-box;
  width:100%; height:100%;
  cursor:pointer;
  border-radius:26px;
}
.flip-card .flip:focus-visible{ outline:3px solid #fff; outline-offset:3px }

/* El plano que gira. transform-style:preserve-3d es lo que permite que la cara
   de atras exista en el espacio 3D en vez de aplastarse. */
.flip-card .flip-inner{
  position:relative; display:block;
  width:100%; height:100%;
  transform-style:preserve-3d;
  transition:transform .6s cubic-bezier(.2,.7,.2,1);
}
.flip-card .flip[aria-pressed="true"] .flip-inner{ transform:rotateY(180deg) }

/* Las dos caras, superpuestas. backface-visibility:hidden oculta el reverso de
   cada una mientras gira, para que no se vean espejadas.

   align-items:center + text-align:center: el documento de correcciones pide
   la info de cada cuadro centrada (título y viñetas), no pegada a la
   izquierda -- aplica a las dos caras, no sólo a la trasera con la lista. */
.flip-card .cara{
  position:absolute; inset:0;
  -webkit-backface-visibility:hidden; backface-visibility:hidden;
  border-radius:26px;
  background:var(--c);
  color:#fff;
  box-sizing:border-box;
  padding:30px;
  display:flex; flex-direction:column;
  align-items:center; text-align:center;
  overflow:hidden;
}

/* --- CARA FRONTAL: icono arriba, titulo abajo, pista de giro --- */
.flip-card .cara-frente{ justify-content:flex-end }
.flip-card .cara-frente .tile-ic{
  width:64px; height:64px; display:block;
  margin-bottom:auto;                 /* empuja el titulo hacia abajo */
  fill:#fff; opacity:.96;
}
.flip-card .cara-frente h3{
  font-size:clamp(20px,1.8vw,27px); text-transform:uppercase; letter-spacing:.005em;
  margin:0;
}
.flip-card .cara-frente .flip-pista{
  margin-top:10px; font-size:13.5px; font-weight:300; opacity:.9;
  display:inline-flex; align-items:center; gap:7px;
}
.flip-card .cara-frente .flip-pista b{ font-size:17px; line-height:1 }

/* --- CARA TRASERA: marca de agua + frase de intro + lista con vinetas --- */
/* La referencia (imagen7 del docx de correcciones) muestra el bloque de texto
   centrado en el alto de la tarjeta, no pegado arriba con aire vacío debajo. */
.flip-card .cara-atras{ justify-content:center; gap:12px }

/* MARCA DE AGUA: la figura translucida de fondo que pidio la clienta ("las
   tarjetas atras tienen una figura en forma de textura"). Va blanca a muy baja
   opacidad, grande y asomando por una esquina; el overflow:hidden de la cara la
   recorta contra el borde redondeado. z-index 0 para que quede DETRAS del texto. */
/* La marca de agua se vectorizó directamente del .ai (pág. 2, el diseño maestro
   de las tarjetas giradas). El path ya está en coordenadas 0..100 de la propia
   tarjeta, con su posición y su giro tal cual el arte, así que la svg solo tiene
   que llenar la tarjeta: nada de posicionar por tipo. Blanca a baja opacidad
   para reproducir el tinte más claro del diseño sobre cualquier color de fondo. */
.flip-card .cara-atras .wm{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  width:100%; height:100%;
  fill:#fff; opacity:.14;
}
.flip-card .cara-atras .intro,
.flip-card .cara-atras ul{ position:relative; z-index:1 }

.flip-card .cara-atras .intro{
  margin:0; font-size:14px; font-weight:700; line-height:1.28;
}
.flip-card .cara-atras ul{
  list-style:none; margin:0; padding:0;
  display:flex; flex-direction:column; gap:8px;
  min-height:0; overflow:auto;         /* si una tarjeta trae muchas lineas, rueda dentro */
}
.flip-card .cara-atras li{
  display:flex; align-items:flex-start; gap:9px;
  font-size:14px; font-weight:600; line-height:1.28;
}
.flip-card .cara-atras .li-ic{
  flex:none; width:18px; height:18px; margin-top:1px;
}

/* Cada linea de trabajo lleva su propia vineta de color, como en el arte:
   estrella dorada (Educacion), nota (Cultura), balon rojo (Deporte), corazon
   morado (Jornadas) y flecha verde (Intervencion rural). */
.t-educacion .cara-atras .li-ic{ fill:#FFC61A }
.t-cultura   .cara-atras .li-ic{ fill:#2C2C6E }
.t-deporte   .cara-atras .li-ic{ fill:#EA1F1F }
.t-jornadas  .cara-atras .li-ic{ fill:#7B4FC0 }
.t-rural     .cara-atras .li-ic{ fill:#5FB320 }

/* La cara de atras ya nace girada 180 para que, al voltear el plano, quede
   derecha hacia el usuario. */
.flip-card .cara-atras{ transform:rotateY(180deg) }

/* Un realce muy leve al pasar el raton, sin sombra difusa (regla del sitio). */
.flip-card .flip:hover .flip-inner{ transform:translateY(-2px) }
.flip-card .flip[aria-pressed="true"]:hover .flip-inner{ transform:rotateY(180deg) translateY(-2px) }

/* Respeto a quien pide menos movimiento: sin transicion de giro. */
@media (prefers-reduced-motion:reduce){
  .flip-card .flip-inner{ transition:none }
}

/* En movil las tarjetas se apilan a una columna. Las caras son absolutas, asi
   que el alto NO puede salir de min-height (un height:100% colgado de min-height
   colapsa y las caras se aplastan). Se fija un alto explicito en px, comodo para
   que la lista de 5 lineas quepa sin recorte. */
@media (max-width:600px){
  .flip-card{ aspect-ratio:auto !important; height:270px }
  .flip-card .flip,
  .flip-card .flip-inner{ height:270px }
}