/* --- TARJETAS DE TEMAS: PÓSTER VERTICAL UNIFORME --- */

.w0-style-card{
  display:flex;
  flex-direction:column;
  height:100%;
  text-decoration:none;
}

/* Títulos de tarjetas: mismo alto en todas, aunque unas partan a 2 líneas */
.w0-style-card h3{
  margin: 0;
  padding: 18px 12px;
  min-height: calc(2 * 1.2em + 36px); /* 2 líneas + padding (ajusta si quieres) */
  line-height: 1.2;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* Marco del póster */
.w0-poster{
  overflow:hidden;
  background:#000;
  aspect-ratio: 1080 / 1333; /* <- clave: póster uniforme también en escritorio */
}

.w0-poster img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
}

/* Texto / CTA debajo del póster */
.w0-world-body{
  flex: 1 1 auto;      /* clave: ocupa el espacio sobrante */
  display: flex;
  justify-content: center;
  padding: 0;          /* el padding lo tendrá la caja enmarcada */
  margin-top: 12px;
  text-align: center;
}

/* Texto */
.w0-world-text{
  margin: 0;
  max-width: 50ch;

  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  text-align: center;            /* por si acaso */
}

.w0-world-text-7{
  margin: 0;
  max-width: 50ch;

  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 7;
  overflow: hidden;
}

.w0-world-text-1{
  margin: 0;
  max-width: 220ch;

  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}
/* “Botón” visual (sirve para <a>, <button> o un contenedor si lo usas así) */
/* Caja de texto con marco */
.w0-world-link{
  display: inline-flex;          /* en vez de inline-block */
  flex-direction: column;        /* apila texto + CTA si lo tienes dentro */
  align-items: center;           /* centra el contenido */
  justify-content: center;
  text-align: center;            /* centra el texto dentro */
  margin-top: 4px;
  border: 1px solid #B4945A;
  background-color: transparent;
  color: #9A9A9A;
  padding: 24px;
  transition: background-color .7s, color .7s, border-color .7s;
  box-sizing: border-box;
}

/* Hover cuando pasas por la tarjeta (no solo por la caja) */
.w0-style-card:hover .w0-world-link,
.w0-style-card:focus .w0-world-link{
  background-color: #5a7ab4;
  color: #191919;
}

/* ==== Breadcrumb (migas de pan) ==== */

.breadcrumb{
  font-size: 0.77rem;
  color: #666;
  margin: 1rem 0;
  font-family: Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", Monaco, "Courier New", monospace;
}

.breadcrumb a{
  text-decoration: none;
  color: #5A7AB4 !important; /* deja el !important solo si te lo pisa W3 */
}

.breadcrumb-separator{ margin: 0 0.25em; }

.breadcrumb-icon img{ vertical-align: middle; }

.breadcrumb-item.current{
  font-weight: bold;
  color: #777777;
}

/* ==== Quadern de estudi ==== */
.w0-quadern{
  border-style: solid solid solid dotted; /* top right bottom left */
  border-width: thin;
  border-left-width: 7px;
  border-color: #777777;
  border-radius: 3px;
}

/* --- MÓVIL: ratio fijo + imagen completa (sin recortes) --- */
@media (max-width: 600px){

  /* Solo esta sección */
  #index-general.w3-row-padding,
  #index-general.w3-row-padding > .w3-col{ padding:0 !important; }

  #index-general .w3-margin-bottom{ margin-bottom:0 !important; }

  /* “una por pantalla” */
  .w0-style-card{ min-height: 100vh; }

  /* Imagen completa */
  .w0-poster img{ object-fit: contain; }
}

/* Más aire solo en escritorio */
@media (min-width: 992px){
  .w0-index-manifesto{ margin-top: 72px; }
}

/* (ease más teatral + más distancia + más tiempo */
.w0-reveal{
  opacity: 0;
  transform: translateY(44px) scale(0.985);
  filter: blur(6px);
  transition:
    opacity 1.2s ease,
    transform 1.5s cubic-bezier(.16,1,.3,1),
    filter 1.3s ease;
  will-change: opacity, transform, filter;
}

.w0-reveal.is-visible{
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
}

@media (prefers-reduced-motion: reduce){
  .w0-reveal{ opacity:1; transform:none; filter:none; transition:none; }
}