/* =========================================================
   ACTIVOS (/activos/) — glosario de activos (prefijo act-).
   Se enlaza después de jicalab.css y solo usa sus variables; reutiliza cat-hero, cat-cards/ptile,
   rail, section-head, pill, faq/af-faq, band y ai__chip.
   ========================================================= */

/* ---------- Cabecera: las teselas filtran (son botones, no enlaces) ---------- */
.act-tiles .ptile { width: 100%; border: 0; font: inherit; text-align: left; cursor: pointer; -webkit-appearance: none; appearance: none; }
.act-tiles .ptile__top { min-height: 24px; }
@media (min-width: 1101px) { .act-tiles .ptile { aspect-ratio: 4 / 3; } } /* 6 teselas: más bajas para que el glosario asome antes */

/* ---------- Glosario: rejilla en escritorio (24 = 4 o 6 por fila, sin huecos), carrusel en tablet y móvil ---------- */
.act-list .section-head { align-items: end; }
.act-grid { --rail-w-t: 31%; --rail-w: 76%; }
/* Todas las tarjetas del mismo ancho: sin min-width:0, la etiqueta de producto más larga («Well Aging Peptide Technology»)
   fijaba el ancho mínimo de su tarjeta en el carrusel (204-250 px a 320 px) y desbordaba el pie en la rejilla a 1101 px */
.act-grid > .act-card { min-width: 0; }
@media (max-width: 1100px) { .act-grid { align-items: stretch; } } /* en el carrusel todas igual de altas (estira la fila) */
.act-card[hidden], .act-more li[hidden], .act-more[hidden], #actReset[hidden] { display: none !important; }

.act-card { position: relative; display: flex; flex-direction: column; padding: 8px; border-radius: var(--r-card); background: var(--card); scroll-margin-top: calc(var(--header-h, 72px) + 24px); transition: box-shadow .3s var(--ease), transform .3s var(--ease); }
@media (hover: hover) { .act-card:hover { box-shadow: var(--shadow); transform: translateY(-3px); } }
.act-card:target { box-shadow: inset 0 0 0 2px var(--green); }
.act-card__media { position: relative; aspect-ratio: 4 / 3; border-radius: calc(var(--r-card) - 6px); overflow: hidden; isolation: isolate; background: #e9e8e4; -webkit-mask-image: -webkit-radial-gradient(white, black); }
.act-card__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease); }
@media (hover: hover) { .act-card:hover .act-card__media img { transform: scale(1.05); } }
.act-chip { position: absolute; left: 10px; top: 10px; display: inline-flex; align-items: center; max-width: calc(100% - 20px); height: 24px; padding: 0 10px; border-radius: var(--pill); background: var(--green-deep); color: var(--white); font: 600 10px/1 var(--font-alt); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.act-card__body { display: flex; flex-direction: column; gap: 6px; flex: 1; padding: 14px 10px; }
.act-card__name { font-size: clamp(18px, 1.3vw, 21px); font-weight: 500; letter-spacing: -.015em; line-height: 1.15; overflow-wrap: break-word; text-wrap: balance; }
.act-card__meta { font: 600 10.5px/1.4 var(--font-alt); letter-spacing: .08em; text-transform: uppercase; color: var(--green); text-wrap: balance; }
.act-card__desc { font-size: 14px; line-height: 1.5; color: var(--muted); text-wrap: pretty; }
.act-card__foot { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; margin: 0 10px 8px; padding-top: 12px; border-top: 1px solid var(--line); }
.act-card__where { font: 600 10px/1 var(--font-alt); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }

/* Escritorio: 4 por fila (6 desde 1600, contenedor ancho) con el ancho de tarjeta fijo. Si el filtro deja menos tarjetas de
   las que caben o una última fila corta, p-activos.js pone en --c otro número de columnas (3 · 2 filas de 3 · 4…) y la
   rejilla se centra: mismas tarjetas, sin columnas vacías a un lado.
   Todas las filas miden lo mismo (grid-auto-rows: 1fr: la tarjeta más alta marca el alto de todas, no solo el de su fila)
   y en cada tarjeta el texto crece (flex: 1) y deja «Está en» abajo. */
@media (min-width: 1101px) {
  .act-grid { --cols: 4; --gap: 14px; grid-template-columns: repeat(var(--c, var(--cols)), calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols))); grid-auto-rows: 1fr; justify-content: center; gap: var(--gap); }
}
@media (min-width: 1600px) { .act-grid { --cols: 6; } }

/* Productos que lo llevan: etiquetas pequeñas (mismo estilo en «También en nuestras fórmulas») */
.act-prods { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.act-prods a, .act-more__prod { display: inline-flex; align-items: center; min-height: 28px; padding: 4px 8px; border: 1px solid var(--line); border-radius: var(--pill); background: var(--white); color: var(--ink); font: 600 10px/1.2 var(--font-alt); letter-spacing: .02em; text-transform: uppercase; transition: border-color .2s, background .2s, color .2s; }
.act-prods a:hover, .act-more__prod:hover { border-color: var(--green); background: var(--green-tint); color: var(--green-dark); }
.act-prods a:focus-visible, .act-more__prod:focus-visible { outline: none; border-color: var(--green); box-shadow: inset 0 0 0 1px var(--green); }
@media (pointer: coarse) { .act-prods a, .act-more__prod { min-height: 44px; padding-inline: 10px; } }
@media (max-width: 1199px) { .act-prods a, .act-more__prod { letter-spacing: 0; } } /* tarjetas más estrechas: menos recorte del nombre */
/* El nombre en una sola línea: si no cabe en la tarjeta, puntos suspensivos (el nombre completo va en title y en el texto del enlace).
   Con el tracking y el relleno ajustados caben todos desde 360 px en móvil y desde 1101 px en escritorio; solo se recortan
   «Well Aging Peptide Technology» y «Hyaluronic Advanced SPF50+» en las tarjetas más estrechas (320-359 px y tablet). */
.act-prods li { min-width: 0; max-width: 100%; }
.act-prods a, .act-more__prod { max-width: 100%; }
.act-prod__txt { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.act-nw { white-space: nowrap; } /* palabras con guion (C-Luminous, Vita-C, gum-1): no se parten entre líneas */

/* ---------- También en nuestras fórmulas: lista compacta en dos columnas (una en tablet) con filas que reaccionan ---------- */
.act-more { display: grid; gap: 14px; margin-top: clamp(36px, 4vw, 56px); padding-top: clamp(28px, 3vw, 40px); border-top: 1px solid var(--line); }
.act-more__title { font-size: clamp(20px, 1.7vw, 24px); font-weight: 450; letter-spacing: -.015em; }
.act-more__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(16px, 3vw, 40px); margin: 0; padding: 0; list-style: none; }
.act-more__list li { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name prod" "desc prod"; align-items: center; align-content: center; gap: 3px 16px; padding: 14px 12px; border-radius: 12px; transition: background .2s; }
.act-more__list li::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--line); transition: opacity .2s; } /* separador recto (un borde inferior se curvaría con el radio) */
@media (hover: hover) { .act-more__list li:hover { background: var(--card); } .act-more__list li:hover::after { opacity: 0; } }
.act-more__name { grid-area: name; font-size: 15.5px; font-weight: 500; color: var(--ink); }
.act-more__desc { grid-area: desc; font-size: 14px; line-height: 1.45; color: var(--muted); text-wrap: pretty; }
.act-more__prod { grid-area: prod; justify-self: end; text-align: center; }
@media (max-width: 1100px) { .act-more__list { grid-template-columns: minmax(0, 1fr); } } /* tablet: a dos columnas el texto quedaba en 3-4 líneas junto a la etiqueta */
@media (max-width: 760px) {
  .act-more__list li { grid-template-columns: minmax(0, 1fr); grid-template-areas: "name" "desc" "prod"; padding-inline: 4px; }
  .act-more__prod { justify-self: start; margin-top: 6px; }
}

/* ---------- Origen: foto real del cultivo + datos de las fichas ---------- */
.act-origin { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 32px clamp(28px, 5vw, 88px); align-items: center; }
.act-origin__media { position: relative; margin: 0; aspect-ratio: 4 / 3; border-radius: var(--r-card); overflow: hidden; isolation: isolate; -webkit-mask-image: -webkit-radial-gradient(white, black); }
.act-origin__media img { width: 100%; height: 100%; object-fit: cover; }
.act-origin__media .ai__chip { right: auto; max-width: calc(100% - 28px); }
.act-origin__copy { display: grid; gap: 16px; justify-items: start; }
.act-origin__copy .lead { max-width: 56ch; }
.act-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; width: 100%; margin: 4px 0 6px; padding: 0; list-style: none; }
.act-facts li { display: grid; align-content: start; gap: 8px; padding: 18px; border-radius: var(--r-card); background: var(--white); transition: box-shadow .25s var(--ease), transform .25s var(--ease); }
@media (hover: hover) { .act-facts li:hover { box-shadow: 0 10px 26px rgb(30 34 22 / .08); transform: translateY(-2px); } }
.act-facts b { font-size: clamp(28px, 2.6vw, 38px); font-weight: 450; letter-spacing: -.02em; line-height: 1; color: var(--green-dark); white-space: nowrap; }
.act-facts span { font-size: 14px; line-height: 1.45; color: var(--muted); }
.act-facts .link-inline { white-space: nowrap; } /* el nombre del producto no se parte («Perfect / Skin») */
@media (pointer: coarse) { .act-facts .link-inline { padding-block: 13px; } } /* zona táctil de 44 px sin mover el texto (el relleno vertical de un enlace en línea no cambia la altura de la línea) */
@media (max-width: 900px) { .act-origin { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 760px) {
  .act-origin__media .ai__chip { left: 10px; bottom: 10px; max-width: calc(100% - 20px); gap: 8px; padding: 6px 12px 6px 6px; font-size: 10.5px; }
  .act-origin__media .ai__chip span { width: 26px; height: 26px; } /* como el chip del análisis en móvil */
  .act-facts li { padding: 14px; }
  .act-origin__copy .btn { width: 100%; }
}
@media (max-width: 374px) { .act-origin__media .ai__chip { padding-right: 10px; font-size: 10px; letter-spacing: .04em; } } /* «Cultivo de aloe vera ecológico» en una línea también a 320 px */