/* =============================================================================
   NUTRITUPP · tarjetas.css — capa 04
   -----------------------------------------------------------------------------
   Pasada de diseño sobre las 42 fichas de plato y la sección de planes.
   Lo que se corrige, mirando la página en pantalla y no el HTML:

     · Dos llamadas a la acción por tarjeta compitiendo (la píldora verde y un
       "Pedir" subrayado debajo). Ahora una sola, y la otra es un enlace de texto.
     · La píldora iba CENTRADA mientras el resto de la tarjeta iba a la
       izquierda: flotaba suelta en medio.
     · El precio era lo menos visible de la tarjeta. Manda el precio.
     · El verde #74B74E, repetido 42 veces, era lo más ruidoso de la página.
       El verde es para distintivos; los botones son teal.
     · Las tarjetas no se alineaban: un nombre de dos líneas empujaba el precio
       y los pies bailaban de una a otra.
   ========================================================================== */

/* --- La tarjeta de plato ------------------------------------------------- */

.product__item,
.product__item-inner {
  height: 100%;
}
.product__item-inner {
  display: flex !important;
  flex-direction: column;
  gap: 10px;
}

/* EL ESLABÓN QUE FALTABA. El contenido con flex:1 vive DENTRO del <a> que
   envuelve foto+texto, y ese ancla no crecía: el flex:1 de un hijo no puede
   estirar nada si su padre no se estira antes. Por eso «Arroz Blanco» (una
   línea de descripción) subía su botón 20 px sobre sus vecinos de fila.
   La cadena entera, eslabón a eslabón: inner → a → content → pie abajo. */
.product__item-inner > a:first-child {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}
.product__item-inner > a:first-child .product__item-footer { margin-top: auto; }

.product__item-content {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;                 /* empuja el pie abajo: los pies se alinean */
  text-align: left;
}

/* El nombre ocupa siempre dos líneas de alto aunque tenga una: así los
   precios de toda la fila quedan a la misma altura. */
.product__item-content h4,
.product__item-content h5 {
  font-size: 1.0625rem !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  margin: 0 !important;
  min-height: calc(2 * 1.3em);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: var(--titulo, #161915);
}

.product__item-content p {
  font-size: .875rem !important;
  line-height: 1.45 !important;
  color: var(--tinta, #556354) !important;
  margin: 0 !important;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* El precio manda. Cifras tabulares para que no bailen entre tarjetas. */
.product__item-content .product__item-price,
.product__item-price {
  font-size: 1.25rem !important;
  font-weight: 700 !important;
  color: var(--titulo, #161915) !important;
  font-variant-numeric: tabular-nums;
  margin: 2px 0 0 !important;
}

/* --- Pie de tarjeta: UNA acción ------------------------------------------ */

.product__item-footer {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: stretch;
  margin-top: auto;
  padding-top: 4px;
}
.product__item-action { display: block; width: 100%; }

/* La acción principal: teal, ancho completo, alineada con la tarjeta.
   Antes era una píldora verde centrada flotando en medio. */
.anadir-plan {
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 11px 16px !important;
  background: var(--teal, #145961) !important;
  color: #fff !important;
  border-radius: var(--radio-boton, 8px) !important;
  font-size: .95rem !important;
  font-weight: 600 !important;
  text-align: center;
  text-decoration: none;
  transition: background .18s var(--curva, ease), transform .18s var(--curva, ease);
}
.anadir-plan:hover {
  background: var(--teal-hondo, #073439) !important;
  color: #fff !important;
  transform: translateY(-1px);
}

/* La secundaria deja de ser un segundo botón y pasa a ser un enlace de texto.
   Hay que ganarle a la hoja de GloriaFood, que carga después. */
.product__item-footer span.glf-button,
.product__item-footer span.glf-button.glf-button-custom {
  display: block !important;
  width: 100% !important;
  background: transparent !important;
  color: var(--teal, #145961) !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 2px 0 !important;
  font-size: .86rem !important;
  font-weight: 600 !important;
  text-align: center;
  text-decoration: underline;
  text-underline-offset: 3px;
  box-shadow: none !important;
}
.product__item-footer span.glf-button:hover {
  color: var(--teal-hondo, #073439) !important;
  transform: none !important;
}

/* --- La sección de planes ------------------------------------------------ */

/* Las tres columnas comparten línea base: la primera reserva el hueco de la
   píldora aunque no tenga descuento. Antes su título subía 40 px y parecía
   un error de maquetación. */
.plan-col { display: flex; flex-direction: column; }
.plan-col__dto {
  align-self: flex-start;
  min-height: 1.7rem;
  line-height: 1.7rem;
  padding-block: 0;
}
.plan-col__dto--vacio {
  background: transparent !important;
  color: transparent !important;
  user-select: none;
}

/* Los tres números tienen que ser comparables. Antes eran 10,90 € contra
   "7 días" contra "28 días": el ojo intenta compararlos y no puede, porque
   uno es dinero y los otros son tiempo. Ahora los tres son el precio del día,
   que es donde se ve el descuento de verdad. */
.plan-col__precio { margin-bottom: 2px !important; }
.plan-col__unidad { margin-bottom: 18px !important; }
.plan-col__texto { flex: 1; margin-bottom: 22px !important; }
.plan-col .btn,
.plan-col .btn-simple { align-self: flex-start; margin-top: auto; }

.plan-col__antes {
  font-size: .95rem;
  color: var(--tinta, #556354);
  text-decoration: line-through;
  margin: 0 0 2px;
}

/* --- La piel del configurador, calcada -----------------------------------
   Pedido expreso: «las fichas copialas del configurador». Es el mismo
   lenguaje de cfg-12-carta.css en /pedidos: tarjeta blanca con canto fino,
   la foto sangrando hasta los bordes, cuerpo con aire y el precio en tinta.
   Solo cambia el markup de debajo; la piel es identica. ------------------ */
.product__item.product__item--style2 {
  background: #fff;
  border: 1px solid #ece5d9;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgb(22 25 21 / .04), 0 12px 26px -20px rgb(22 25 21 / .28);
  transition: transform .18s ease, box-shadow .18s ease;
}
.product__item.product__item--style2:hover {
  transform: translateY(-3px);
  box-shadow: 0 2px 4px rgb(22 25 21 / .05), 0 20px 36px -20px rgb(22 25 21 / .35);
}
/* la foto, a sangre: sin radio propio ni sombra, el recorte lo da la tarjeta */
.product__item--style2 .product__item-thumb {
  border-radius: 0 !important;
  box-shadow: none !important;
  margin: 0 !important;
}
.product__item--style2 .product__item-thumb img { border-radius: 0 !important; }
/* el cuerpo respira dentro de la tarjeta */
.product__item--style2 .product__item-inner { gap: 0; }
.product__item--style2 .product__item-inner > a:first-child .product__item-content {
  padding: 12px 14px 0 !important;
}
.product__item--style2 .anadir-plan { margin: 12px 14px 0 !important; width: auto !important; }
.product__item--style2 .product__item-inner > .product__item-content { padding: 6px 14px 12px !important; }

/* --- EL MÓVIL NECESITA TRES LÍNEAS, NO DOS -----------------------------------
   Andrés, 11-09-2026: «revisa el responsive en todas las páginas, a veces no
   sale bien». Medido en la portada: a 390 px, 23 de las 42 fichas cortaban
   texto. Tres nombres perdían justo la palabra que dice qué es el plato
   —«Risotto de Langostinos y…» (falta Chipirones), «Arroz al Wok con Verduras
   y…» (Sésamo), «Crema de Boletus y…» (Piñones)— y 20 descripciones se
   quedaban sin su última línea. A 768 px fallaban 2; a 1280, ninguna.

   NO era un desborde: era el `-webkit-line-clamp: 2`. En su día se subió de 1
   a 2 y con eso se arregló el escritorio, pero en el móvil la columna mide
   137 px y dos líneas no dan.

   Y OJO CON DÓNDE SE ARREGLA: esta regla vive en CUATRO hojas a la vez
   (style.css la clava en 1; sistema.css, landing.css y esta la suben a 2).
   Gana la última cargada, que es tarjetas.css — o sea ESTA. Tocarlo en
   carta.css no sirve para la portada, porque la portada no carga carta.css.

   El min-height sube a la par: reserva las tres líneas para que los precios de
   una misma fila sigan cayendo a la misma altura, que es para lo que está. */
@media (max-width: 800px) {
  .product__item-content h4,
  .product__item-content h5 {
    -webkit-line-clamp: 3;
    line-clamp: 3;
    min-height: calc(3.9em);
  }
  /* CUATRO en la descripción, no tres: con tres seguían cortándose dos de las
     42 («Dados de contramuslo confitado con leche de coco.» y «Textura suave,
     sabor casero, acompañamiento perfecto.»). Cuesta una línea de alto en dos
     fichas y a cambio no se corta ni una frase. */
  .product__item-content p.small,
  .product__item--style2 .product__item-content p.small {
    -webkit-line-clamp: 4;
    line-clamp: 4;
  }
}