/* ==========================================================================
   Tripas para embutidos — dirección de arte propia
   Idea: calibre y comportamiento. Círculos (cortes transversales) como sistema
   gráfico: el tamaño del anillo ES el calibre. Hero tipográfico oscuro; un
   explorador por familias que muestra qué pasa con la envoltura al final
   (se pela, se come, se rebana); un selector de embutido → familia.
   CACHÉ: se sirve "immutable"; si lo editas, sube su ?v= en la página.
   ========================================================================== */

/* ===== 1. HERO (oscuro, tipográfico + calibres) ===== */
.phero--tripas{background:var(--jenn-negro-onix);padding-block:clamp(2rem,1.2rem + 2.6vw,3.75rem) clamp(3.5rem,2.4rem + 4vw,6rem);}
.phero--tripas .phero__grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--s5);row-gap:var(--s6);align-items:center;}
.phero--tripas .phero__copy{grid-column:1 / span 6;display:flex;flex-direction:column;align-items:flex-start;gap:var(--s5);}
.phero--tripas .phero__title{font-size:clamp(2.375rem,1.3rem + 3.3vw,4.25rem);margin-block:var(--s2) var(--s1);}
.phero--tripas .phero__fig{grid-column:7 / -1;margin:0;}
.tp-calibres__lienzo{position:relative;}
.tp-calibres__svg{width:100%;height:auto;}
.tp-anillo,.tp-cota{stroke-dasharray:1;stroke-dashoffset:0;}
.tp-etq{position:absolute;display:flex;flex-direction:column;gap:2px;font-size:.8125rem;color:var(--jenn-gris-perla);line-height:1.3;white-space:nowrap;}
.tp-etq b{font-family:var(--jenn-font-heading);font-weight:500;font-size:clamp(1.25rem,1rem + .8vw,1.75rem);color:var(--jenn-blanco-marfil);line-height:1.1;}
.tp-etq--der{transform:translateX(-100%);text-align:right;align-items:flex-end;}
.tp-calibres .figcap{margin-top:var(--s3);}
@media (prefers-reduced-motion: no-preference){
  .intro-pending .tp-anillo,.intro-pending .tp-cota{stroke-dashoffset:1;}
  .intro-pending .tp-etq{opacity:0;}
}

/* ===== 2. POR QUÉ IMPORTA LA ENVOLTURA ===== */
.tp-env__grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--s5);row-gap:var(--s7);align-items:start;}
.tp-env__copy{grid-column:1 / span 6;display:flex;flex-direction:column;gap:var(--s5);}
.tp-env__fig{grid-column:8 / -1;margin:0;position:sticky;top:calc(var(--subnav-h) + 32px);}
.tp-env__fig svg{width:100%;height:auto;max-width:440px;}
.tp-env__ley{display:grid;gap:10px;margin-top:var(--s4);}
.tp-env__ley li{display:flex;align-items:flex-start;gap:12px;font-size:.9375rem;line-height:1.45;color:var(--jenn-gris-grafito);}
.tp-env__ley b{color:var(--jenn-negro-onix);font-weight:600;}
.tp-n{flex:none;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-size:.75rem;font-weight:700;background:var(--jenn-negro-onix);color:var(--jenn-blanco-marfil);}
.tp-n--oro{background:var(--jenn-dorado);color:var(--jenn-negro-onix);}
.tp-tres{grid-column:1 / -1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--s5);}
.tp-tres li{padding-top:var(--s4);border-top:1px solid var(--jenn-negro-onix);display:flex;flex-direction:column;gap:var(--s2);padding-right:var(--s5);}
.tp-tres p{color:var(--jenn-gris-grafito);font-size:1rem;text-wrap:pretty;}

/* ===== 3. EXPLORADOR ===== */
.exp__tabs{display:none;}
.js-on .exp__tabs{position:relative;display:inline-grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);margin-bottom:var(--s6);border-bottom:1px solid var(--linea-fuerte);}
.exp__tab{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:56px;padding:12px clamp(1rem,.5rem + 2vw,2.25rem);background:none;border:0;cursor:pointer;font-family:var(--jenn-font-heading);font-size:clamp(1.125rem,1rem + .5vw,1.5rem);color:var(--jenn-gris-grafito);transition:color var(--dur-hover) ease, transform var(--dur-press) var(--ease-out);}
.exp__tab:active{transform:scale(.98);}
.exp__tab[aria-selected="true"]{color:var(--jenn-negro-onix);}
.exp__thumb{position:absolute;left:0;bottom:-1px;height:2px;width:calc(100% / 3);background:var(--jenn-dorado);transform:translateX(calc(100% * var(--i, 0)));transition:transform var(--dur-panel) var(--ease-out);}
/* El anillo dice el calibre (chico / mediano / grande) */
.exp__ring{flex:none;display:inline-block;width:calc(26px * var(--r, 1));height:calc(26px * var(--r, 1));border-radius:50%;border:2px solid var(--jenn-dorado);}
.exp__paneles{display:flex;flex-direction:column;gap:var(--s9);}
.js-on .exp__paneles{display:block;}
.exp__panel{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--s5);row-gap:var(--s5);align-items:start;}
.exp__panel[hidden]{display:none;}
.exp__panel:focus-visible{outline:2px solid var(--jenn-dorado);outline-offset:8px;}
.exp__stage{grid-column:1 / span 7;position:relative;margin:0;background:var(--jenn-blanco-marfil);border:1px solid var(--linea);}
.exp__svg{display:block;width:100%;height:auto;}
.exp__rot{position:absolute;left:var(--s5);bottom:var(--s4);display:inline-flex;align-items:center;gap:8px;font-size:.875rem;font-weight:600;color:var(--jenn-negro-onix);background:var(--jenn-blanco-marfil);padding:4px 10px;border:1px solid var(--linea);}
.exp__rot::before{content:"";width:7px;height:7px;background:var(--jenn-dorado);transform:rotate(45deg);}
.exp__info{grid-column:9 / -1;display:flex;flex-direction:column;align-items:flex-start;gap:var(--s4);}
.exp__cal{display:flex;align-items:center;gap:10px;font-weight:600;}
.exp__cal .etq{display:inline;}
.exp__txt{color:var(--jenn-gris-grafito);text-wrap:pretty;}
.exp__info .rombos li{font-size:.9375rem;}
.exp__uso{font-size:.9375rem;text-wrap:pretty;}
.exp__uso .etq{margin-bottom:2px;}
.exp__toma{font-size:.8125rem;line-height:1.5;color:var(--jenn-gris-grafito);padding-top:var(--s3);border-top:1px solid var(--linea);}
.exp__toma .toma__tag{margin-right:4px;}

/* ===== 4. MATRIZ COMPARATIVA ===== */
.matriz-wrap{overflow-x:auto;}
.matriz{width:100%;border-collapse:collapse;font-size:1rem;}
.matriz th,.matriz td{padding:16px 18px;text-align:left;vertical-align:top;border-bottom:1px solid var(--linea);transition:background-color var(--dur-hover) ease;text-wrap:pretty;}
.matriz thead th{border-bottom:1px solid var(--jenn-negro-onix);font-family:var(--jenn-font-heading);font-weight:500;font-size:1.375rem;}
.matriz thead a{border-bottom:1px solid transparent;transition:border-color var(--dur-hover) ease, color var(--dur-hover) ease;}
.matriz tbody th{width:24%;font-weight:600;}
.matriz td{color:var(--jenn-gris-grafito);}
.matriz__grupo th{padding:22px 18px 8px;font-size:.875rem;font-weight:600;color:var(--jenn-dorado-tinta);border-bottom-color:var(--linea);}
.matriz[data-col="1"] tr > :nth-child(2):not([colspan]),.matriz[data-col="2"] tr > :nth-child(3),.matriz[data-col="3"] tr > :nth-child(4){background:color-mix(in srgb, var(--jenn-dorado) 10%, transparent);color:var(--jenn-negro-onix);}
.matriz__nota{margin-top:var(--s5);font-size:.9375rem;color:var(--jenn-gris-grafito);max-width:48em;}

/* ===== 5. CÓMO ELEGIR (oscura): embutido → familia ===== */
.tp-elegir__grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--s5);row-gap:var(--s6);align-items:start;}
.emb{grid-column:1 / span 6;margin:0;}
.emb__t{font-weight:600;font-size:1.0625rem;margin-bottom:var(--s4);}
.emb__lista{display:flex;flex-direction:column;border-top:1px solid var(--linea-oscura);}
.emb__op{position:relative;display:grid;grid-template-columns:22px 1fr auto;column-gap:var(--s4);align-items:center;padding:var(--s4) var(--s3);border-bottom:1px solid var(--linea-oscura);cursor:pointer;transition:background-color var(--dur-hover) ease;}
.emb__op input{position:absolute;opacity:0;width:1px;height:1px;}
.emb__op::before{content:"";grid-column:1;grid-row:1;width:18px;height:18px;border-radius:50%;border:1.5px solid color-mix(in srgb, var(--jenn-blanco-marfil) 45%, transparent);box-shadow:inset 0 0 0 4px var(--jenn-negro-onix);transition:background-color var(--dur-hover) ease, border-color var(--dur-hover) ease;}
.emb__op span{grid-column:2;display:flex;flex-direction:column;gap:2px;}
.emb__op b{font-weight:600;color:var(--jenn-blanco-marfil);}
.emb__op small{font-size:.875rem;color:var(--jenn-gris-perla);}
.emb__op em{grid-column:3;font-style:normal;font-size:.8125rem;font-weight:600;color:var(--jenn-dorado);}
.emb__op:has(input:checked){background:color-mix(in srgb, var(--jenn-dorado) 10%, transparent);}
.emb__op:has(input:checked)::before{background:var(--jenn-dorado);border-color:var(--jenn-dorado);}
.emb__op:has(input:focus-visible){outline:2px solid var(--jenn-dorado);outline-offset:-2px;}
.emb__otro{margin-top:var(--s5);color:var(--jenn-gris-perla);font-size:.9375rem;}
.emb__res{grid-column:8 / -1;position:sticky;top:calc(var(--subnav-h) + 32px);display:flex;flex-direction:column;align-items:flex-start;gap:var(--s4);padding:var(--s6);background:var(--jenn-onix-2);border:1px solid var(--linea-oscura);}
.emb__fam{font-family:var(--jenn-font-heading);font-weight:500;font-size:clamp(1.75rem,1.3rem + 1.4vw,2.5rem);line-height:1.1;color:var(--jenn-blanco-marfil);}
.emb__por{color:var(--jenn-gris-perla);text-wrap:pretty;}
.emb__nota{font-size:.8125rem;line-height:1.5;color:var(--jenn-gris-perla);}
.emb__res.is-fresh .emb__fam,.emb__res.is-fresh .emb__por{animation:rise-in 420ms var(--ease-out) both;}
.emb__res.is-fresh .emb__por{animation-delay:60ms;}
.seis{margin-top:var(--s9);padding-top:var(--s7);border-top:1px solid var(--linea-oscura);display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--s5);row-gap:var(--s4);}
.seis__intro{grid-column:1 / span 5;display:flex;flex-direction:column;gap:var(--s4);}
.seis__t{font-family:var(--jenn-font-heading);font-weight:500;font-size:clamp(1.5rem,1.2rem + 1vw,2.125rem);line-height:1.15;}
.seis__d{color:var(--jenn-gris-perla);}
.seis__lista{grid-column:7 / -1;display:grid;grid-template-columns:1fr 1fr;column-gap:var(--s6);counter-reset:dato;}
.seis__lista li{counter-increment:dato;display:flex;flex-direction:column;gap:4px;padding:var(--s4) 0 var(--s4) 2.25rem;border-top:1px solid var(--linea-oscura);position:relative;}
.seis__lista li::before{content:counter(dato);position:absolute;left:0;top:var(--s4);font-family:var(--jenn-font-heading);font-size:1.375rem;line-height:1.1;color:var(--jenn-dorado);}
.seis__lista b{font-weight:600;color:var(--jenn-blanco-marfil);}
.seis__lista span{font-size:.9375rem;color:var(--jenn-gris-perla);text-wrap:pretty;}
.seis__nota{margin-top:var(--s3);padding-top:var(--s4);border-top:1px solid var(--linea-oscura);font-size:.9375rem;color:var(--jenn-gris-perla);text-wrap:pretty;}

/* ===== 7. CIERRE (variante tripas): tres anillos de calibre junto a la fórmula ===== */
.cierre--tripas .cierre__formula{position:relative;padding-right:clamp(4rem,2rem + 8vw,10rem);}
.cierre--tripas .cierre__formula::after{content:"";position:absolute;right:0;top:50%;width:clamp(3rem,1.5rem + 5vw,6.5rem);aspect-ratio:1;transform:translateY(-60%);border-radius:50%;border:2px solid var(--jenn-dorado);box-shadow:0 0 0 clamp(8px,.4rem + .6vw,16px) var(--jenn-negro-onix), 0 0 0 calc(clamp(8px,.4rem + .6vw,16px) + 2px) color-mix(in srgb, var(--jenn-dorado) 55%, transparent);}

@media (hover:hover) and (pointer:fine){
  .exp__tab:not([aria-selected="true"]):hover{color:var(--jenn-negro-onix);}
  .emb__op:hover{background:color-mix(in srgb, var(--jenn-blanco-marfil) 5%, transparent);}
  .matriz thead a:hover{border-bottom-color:var(--jenn-dorado);}
}
@media (max-width:960px){
  .phero--tripas .phero__grid{display:flex;flex-direction:column;align-items:stretch;gap:var(--s5);}
  .phero--tripas .phero__copy{display:contents;}
  .phero--tripas .crumbs{order:1;align-self:flex-start;}
  .phero--tripas .phero__title{order:2;margin:0;}
  .phero--tripas .phero__fig{order:3;max-width:520px;}
  .phero--tripas .phero__lede{order:4;}
  .phero--tripas .phero__actions{order:5;}
  .tp-env__copy,.tp-env__fig{grid-column:1 / -1;}
  .tp-env__fig{position:static;}
  .tp-tres{grid-template-columns:1fr;row-gap:var(--s5);}
  .exp__stage,.exp__info{grid-column:1 / -1;}
  .js-on .exp__tabs{display:grid;width:100%;}
  .emb,.emb__res{grid-column:1 / -1;}
  .emb__res{position:static;}
  .seis__intro,.seis__lista{grid-column:1 / -1;}
}
@media (max-width:640px){
  .exp__tab{flex-direction:column;gap:6px;min-height:72px;padding-inline:8px;font-size:1.0625rem;}
  .exp__rot{left:12px;bottom:10px;font-size:.75rem;}
  .seis__lista{grid-template-columns:1fr;}
  .emb__op{grid-template-columns:22px 1fr;row-gap:4px;}
  .emb__op em{grid-column:2;}
  .matriz thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);}
  .matriz,.matriz tbody,.matriz tr,.matriz th,.matriz td{display:block;width:100%;}
  .matriz tr{padding:var(--s3) 0;border-bottom:1px solid var(--linea);}
  .matriz th,.matriz td{padding:4px 0;border:0;}
  .matriz__grupo{border-bottom:0 !important;padding-bottom:0 !important;}
  .matriz__grupo th{padding:var(--s5) 0 0;}
  .matriz tbody th{width:auto;margin-bottom:6px;}
  .matriz td{display:grid;grid-template-columns:6.5rem 1fr;gap:var(--s3);}
  .matriz td::before{content:attr(data-label);font-size:.8125rem;font-weight:600;color:var(--jenn-dorado-tinta);padding-top:1px;}
  .tp-etq{font-size:.75rem;}
  .cierre--tripas .cierre__formula{padding-right:0;}
  .cierre--tripas .cierre__formula::after{display:none;}
}
@media (prefers-reduced-motion: reduce){
  .emb__res.is-fresh .emb__fam,.emb__res.is-fresh .emb__por{animation:none;}
  .exp__thumb{transition:none;}
}