/* Edición 3: rojo y verde italianos, amarillo pasta, platos protagonistas. */
:root {
  --cream:#fff8e9;
  --paper:#fffdf5;
  --red:#e1251b;
  --olive:#00853b;
  --wheat:#ffca00;
  --ink:#342e23;
  --line:#d6c69d
}
.header {
  background:var(--paper);
  border-bottom:3px solid var(--red)
}
.header-inner {
  padding-block:14px
}
.nav a[aria-current] {
  color:var(--red)
}
.button {
  background:var(--red);
  border-color:var(--red);
  color:white
}
.button:hover {
  background:#9d211a
}
.button.light {
  border-color:var(--olive);
  color:var(--olive)
}
.button.light:hover {
  background:var(--olive);
  color:white
}
.eyebrow {
  color:var(--red)
}
h2 {
  color:var(--red)
}
.origin-strip {
  background:var(--wheat);
  color:var(--ink);
  border:0;
  padding-block:20px
}
.origin-dot {
  height:4px;
  background:linear-gradient(90deg,#00853b 33%,#fff 33% 66%,#e1251b 66%)
}
.olive {
  background:var(--olive)
}
.olive h2 {
  color:var(--paper)
}
.olive .eyebrow {
  color:#ffdc38
}
.olive .button.light {
  border-color:var(--paper);
  color:var(--paper)
}
.olive .button.light:hover {
  background:var(--wheat);
  border-color:var(--wheat);
  color:var(--ink)
}
.media-hero .button {
  background:var(--red);
  border-color:#e16442
}
.media-hero .button:hover {
  background:#9d211a
}
.video-slide video {
  filter:saturate(1.12)
}
.hero-shade {
  background:linear-gradient(180deg,#17200a12,#17170c99 48%,#21170d66)
}
.media-hero h1 em {
  color:#ffdc38
}
.media-hero .lead {
  text-shadow:0 1px 5px #1b160bcc
}
.media-hero h1 {
  color:white
}
.page-index .video-slide[data-slide="0"] video {
  object-position:50% 73%
}
.video-controls button {
  background:#16392366
}
.video-controls button:hover {
  background:var(--olive)
}
.home-story {
  grid-template-columns:.85fr 1.15fr;
  gap:6vw
}
.history-photo {
  width:100%;
  max-width:335px;
  margin:15px auto;
  position:relative
}
.history-photo:before {
  content:'';
  position:absolute;
  inset:20px -16px -14px 15px;
  background:var(--wheat);
  transform:rotate(5deg);
  z-index:-1;
  border-radius:3px
}
.history-photo img {
  width:100%;
  height:400px;
  object-fit:cover;
  object-position:center;
  border:10px solid var(--paper);
  box-shadow:0 12px 24px #47331622;
  transform:rotate(-3deg);
  animation:family-sway 9s ease-in-out infinite
}
.history-photo figcaption {
  margin:18px 0 0 10px;
  color:var(--olive)
}
@keyframes family-sway {
  0%,100% {
    transform:translateY(0) rotate(-3deg)
  }
  50% {
    transform:translateY(-9px) rotate(-1deg)
  }
}
.appetite-section {
  position:relative;
  overflow:hidden
}
.appetite-layout {
  display:grid;
  grid-template-columns:1.05fr 1fr;
  gap:6vw;
  align-items:center;
  padding-block:65px
}
.appetite-plate {
  position:relative;
  max-width:530px;
  width:100%;
  margin:auto
}
.appetite-plate img {
  width:100%;
  aspect-ratio:1;
  object-fit:cover;
  object-position:center;
  clip-path:circle(48%);
  filter:saturate(1.1)
}
.appetite-plate:after {
  content:'';
  position:absolute;
  inset:0;
  border:2px dashed #ffca00;
  transform:rotate(-10deg);
  border-radius:50%;
  pointer-events:none
}
.appetite-section .lead {
  font-size:1.05rem
}
.catalog-heading {
  align-items:center
}
.catalog-dish {
  width:330px;
  flex:0 0 330px;
  position:relative
}
.catalog-dish img {
  width:100%;
  aspect-ratio:1;
  object-fit:cover;
  clip-path:circle(48%);
  filter:saturate(1.15);
  transform:rotate(7deg)
}
.catalog-dish:after {
  content:'';
  position:absolute;
  width:62px;
  height:62px;
  background:var(--wheat);
  border-radius:50%;
  left:-10px;
  bottom:25px;
  z-index:-1
}
.family {
  background:transparent;
  border-top:1px solid var(--olive);
  border-bottom:1px solid var(--olive);
  border-radius:0;
  padding:22px 12px 24px;
  transition:color .3s
}
.family:hover {
  background:transparent;
  color:var(--red)
}
.family img {
  height:230px;
  margin-inline:auto
}
.family h3 {
  color:var(--red);
  margin-bottom:10px
}
.family span {
  color:var(--olive);
  text-decoration:underline;
  text-underline-offset:5px
}
.family:hover img {
  transform:rotate(-3deg) translateY(-5px)
}
.family:hover span {
  color:var(--red)
}
.catalog-section h2 {
  color:var(--olive)
}
.product {
  border-top-color:var(--olive)
}
.product h3 {
  color:var(--red)
}
.filters a {
  border-color:var(--olive)
}
.filters a:hover,.filters a.active {
  background:var(--olive)
}
.table-video {
  border:5px solid var(--wheat)
}
.cta {
  background:var(--red);
  color:var(--paper)
}
.cta h2,.cta .eyebrow {
  color:var(--paper)
}
.cta .button {
  background:var(--paper);
  color:var(--red);
  border-color:var(--paper)
}
.cta .button:hover {
  background:var(--wheat);
  color:var(--ink);
  border-color:var(--wheat)
}
.cta:before,.cta:after {
  background:repeating-linear-gradient(0deg,transparent 0 15px,#fff5db30 15px 30px),repeating-linear-gradient(90deg,transparent 0 15px,#fff5db30 15px 30px)
}
.meal-cta {
  display:grid;
  grid-template-columns:1.2fr .8fr;
  gap:30px;
  align-items:center;
  padding:65px max(6vw,calc((100vw - 1150px)/2));
  text-align:left
}
.meal-cta h2 {
  margin-left:0
}
.cta-dish {
  width:100%;
  max-width:340px;
  aspect-ratio:1;
  object-fit:cover;
  border-radius:50%;
  margin:auto;
  transform:rotate(-8deg);
  border:8px solid #fff5db
}
.drying-highlight {
  background:#ffca00;
  border-color:#edb800
}
.drying-highlight:before {
  border-color:#00853b88
}
.drying-seal {
  border-color:var(--olive);
  outline-color:var(--olive);
  color:var(--olive);
  background:var(--paper);
  width:240px;
  height:240px
}
.drying-seal strong {
  font-size:3.8rem
}
.drying-seal small {
  font-size:2.2rem
}
.drying-seal span {
  font-size:.65rem
}
.drying-highlight h2 {
  color:var(--olive)
}
.drying-highlight h2 em {
  color:var(--red)
}
.drying-visual {
  position:relative;
  min-height:430px
}
.drying-dish {
  width:95%;
  max-width:420px;
  aspect-ratio:1;
  object-fit:cover;
  border-radius:50%;
  border:7px solid var(--paper);
  margin:auto
}
.drying-visual .drying-seal {
  position:absolute;
  bottom:-12px;
  right:-18px;
  box-shadow:0 9px 0 #00853b1a
}
.recipe-heading h2,.recipe-card h3 {
  color:var(--red)
}
.recipe-badge {
  background:var(--red);
  color:white
}
.recipe-photo {
  border-radius:3px 35px 3px 3px
}
.recipe-photo img {
  filter:saturate(1.08)
}
.form {
  background:#f5df94
}
.footer {
  background:var(--olive);
  color:var(--paper);
  border-top:6px solid var(--wheat)
}
.footer .eyebrow {
  color:#ffdc38
}
.footer a:hover {
  color:#ffdc38
}
.footer small {
  border-top-color:#fff9e66b
}
.footer p {
  color:var(--paper)
}
.footer img {
  background:var(--paper);
  padding:10px;
  width:185px;
  border-radius:4px
}
.top {
  background:var(--red)
}
@media(max-width:1100px) {
  .catalog-dish {
    width:290px;
    flex-basis:290px
  }
  .family img {
    height:210px
  }
  .drying-visual .drying-seal {
    right:0
  }
  .drying-inner {
    gap:40px
  }
}
@media(max-width:800px) {
  .home-story {
    grid-template-columns:1fr;
    gap:30px
  }
  .history-photo {
    max-width:290px
  }
  .history-photo img {
    height:345px
  }
  .appetite-layout {
    grid-template-columns:1fr;
    gap:35px;
    text-align:center
  }
  .appetite-plate {
    max-width:390px
  }
  .appetite-layout .lead {
    margin-inline:auto
  }
  .catalog-heading {
    display:flex;
    align-items:center;
    gap:20px
  }
  .catalog-dish {
    width:230px;
    flex-basis:230px
  }
  .family img {
    height:190px
  }
  .meal-cta {
    grid-template-columns:1fr;
    text-align:center;
    padding:60px 8vw
  }
  .meal-cta h2 {
    margin-inline:auto
  }
  .cta-dish {
    max-width:270px
  }
  .drying-visual {
    min-height:415px;
    max-width:410px;
    width:100%;
    margin:auto
  }
  .drying-visual .drying-seal {
    right:0;
    bottom:0
  }
  .drying-dish {
    max-width:360px;
    margin-left:0
  }
  .drying-inner>div:last-child {
    text-align:center
  }
}
@media(max-width:500px) {
  .catalog-heading {
    display:block
  }
  .catalog-dish {
    width:240px;
    margin:25px auto 30px
  }
  .family img {
    height:175px
  }
  .history-photo {
    max-width:260px
  }
  .history-photo img {
    height:320px
  }
  .drying-visual {
    min-height:350px
  }
  .drying-dish {
    max-width:270px
  }
  .drying-visual .drying-seal {
    width:200px;
    height:200px;
    right:0;
    bottom:0
  }
  .drying-seal strong {
    font-size:3.1rem
  }
  .drying-seal small {
    font-size:1.8rem
  }
  .drying-seal span {
    font-size:.56rem
  }
  .appetite-plate {
    max-width:300px
  }
  .media-hero .lead {
    font-size:1rem
  }
}
.home-story {
  overflow:clip
}
.appetite-plate img,.catalog-dish img,.cta-dish,.drying-dish {
  height:auto;
  aspect-ratio:1
}
@media(prefers-reduced-motion:reduce) {
  .history-photo img {
    animation:none;
    transform:none
  }
  .family:hover img {
    transform:none
  }
}
/* Ajuste v4: videos sin overlay; solo el texto conserva sombra para leerse. */
.video-hero .hero-shade {
  display:none
}
.video-hero h1 {
  text-shadow:0 2px 5px #18150fd9,0 0 18px #18150f55
}
.video-hero .lead,.video-hero .eyebrow,.video-hero .hero-scroll {
  text-shadow:0 1px 3px #18150f,0 0 8px #18150f88
}
/* Fotografías nuevas de productos: preservar sus colores originales. */
.family img,.product img,.dialog-grid img {
  mix-blend-mode:normal
}
/* v6: el plato invita a elegir; las opciones aparecen al abrir una familia. */
.family-intro {
  text-align:center;
  padding:70px 0 35px
}
.family-intro h2 {
  margin:12px 0
}
.family-gallery {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:45px 30px;
  margin-bottom:50px
}
.family-choice {
  background:none;
  border:0;
  border-top:1px solid var(--olive);
  border-bottom:1px solid var(--olive);
  padding:18px 0 22px;
  cursor:pointer;
  color:inherit;
  font:inherit;
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center
}
.family-choice img {
  width:100%;
  height:auto;
  aspect-ratio:6/5;
  object-fit:cover;
  border-radius:35% 5% 32% 5%;
  transition:transform .4s,border-radius .4s
}
.family-choice:hover img,.family-choice.selected img {
  transform:translateY(-4px);
  border-radius:5% 32% 5% 35%
}
.choice-name {
  font:1.9rem Georgia,serif;
  color:var(--red);
  margin-top:20px
}
.choice-description {
  font-size:.9rem;
  margin:10px 8px;
  line-height:1.5
}
.choice-link {
  font-size:.8rem;
  color:var(--olive);
  text-decoration:underline;
  text-underline-offset:5px
}
.family-choice:focus-visible {
  outline:3px solid var(--red);
  outline-offset:6px
}
.family-choice.selected {
  border-width:2px
}
.family-gallery .family-choice:last-child {
  grid-column:2
}
.options-heading {
  text-align:center;
  padding:25px 0
}
.options-heading h2 {
  margin:10px 0 20px
}
#family-options {
  scroll-margin-top:110px
}
#family-options:focus {
  outline:none
}
.js #family-options[hidden] {
  display:none
}
.page-index .family img {
  width:100%;
  height:auto;
  aspect-ratio:6/5;
  object-fit:cover;
  border-radius:12px
}
.page-pastas .search-label {
  max-width:600px;
  margin:0 auto 35px
}
@media(max-width:800px) {
  .family-gallery {
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:30px 20px
  }
  .family-gallery .family-choice:last-child {
    grid-column:auto
  }
  .choice-name {
    font-size:1.6rem
  }
}
@media(max-width:500px) {
  .family-gallery {
    grid-template-columns:1fr;
    gap:28px
  }
  .family-choice img {
    max-width:440px
  }
  .family-intro {
    padding-top:45px
  }
  .choice-description {
    font-size:1rem
  }
}
@media(prefers-reduced-motion:reduce) {
  .family-choice img {
    transition:none
  }
  .family-choice:hover img,.family-choice.selected img {
    transform:none
  }
}
html:not(.js) .family-gallery {
  display:none
}

/* v11: pausa visual en la historia, con cifras del material de SBIROLI. */
#quienes-somos {
  overflow: clip;
}
.history-numbers {
  padding: 65px 35px;
  margin-block: 45px;
  background: #f1ead8;
  border-radius: 45px 0 45px 0;
  text-align: center;
}
.history-numbers h2 {
  font-size: clamp(2rem, 3.2vw, 3rem);
  margin: 12px 0 45px;
}
.history-numbers-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 30px;
}
.history-number svg {
  width: 55px;
  height: 55px;
  fill: none;
  stroke: var(--red);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.history-number-value {
  font: 4rem Georgia, serif;
  font-variant-numeric: tabular-nums;
  color: var(--red);
  margin: 15px 0 10px;
}
.history-number-label {
  color: var(--olive);
  font-weight: bold;
  margin: 0 0 10px;
}
.history-number-detail {
  font-size: .82rem;
  line-height: 1.5;
  margin: 0;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
@media (max-width: 800px) {
  .history-numbers-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 40px 20px;
  }
  .history-numbers {
    padding: 45px 20px;
  }
  .history-number-value {
    font-size: 3.3rem;
  }
}

/* v13: recorrido alternado y contadores al terminar la historia. */
.page-historia .timeline {
  position: relative;
  border-left: 0;
  margin-left: 0;
  padding-left: 0;
}
.page-historia .timeline::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 10px;
  bottom: 10px;
  width: 1px;
  background: var(--line);
}
.page-historia .timeline article {
  gap: 100px;
  margin-bottom: 85px;
}
.page-historia .timeline article::before {
  left: 50%;
  top: 15px;
  transform: translateX(-50%);
}
.page-historia .timeline article > div {
  min-width: 0;
}
.page-historia .timeline article:nth-of-type(even) figure {
  grid-column: 1;
  grid-row: 1;
}
.page-historia .timeline article:nth-of-type(even) > div {
  grid-column: 2;
  grid-row: 1;
}
.page-historia .timeline article:last-child {
  margin-bottom: 0;
}
.page-historia .history-numbers {
  margin-block: 70px 55px;
}
@media (max-width: 800px) {
  .page-historia .timeline {
    padding-left: 25px;
  }
  .page-historia .timeline::before {
    left: 0;
  }
  .page-historia .timeline article {
    grid-template-columns: 1fr;
    gap: 25px;
    margin-bottom: 55px;
  }
  .page-historia .timeline article::before {
    left: -25px;
  }
  .page-historia .timeline article:nth-of-type(even) figure,
  .page-historia .timeline article:nth-of-type(even) > div {
    grid-column: auto;
    grid-row: auto;
  }
  .page-historia .timeline figure {
    transform: none;
  }
  .page-historia .history-numbers {
    margin-block: 45px;
  }
}

/* v14: nuevo hero, presentación con color y fotos históricas más pequeñas. */
.page-historia .nosotros-hero {
  height: calc(100svh - 82px);
  min-height: 590px;
  max-height: none;
}
.nosotros-hero .hero-background {
  object-position: 60% center;
}
.nosotros-hero .hero-shade {
  display: none;
}
.nosotros-hero h1 {
  text-shadow: 0 2px 5px #18150fd9, 0 0 18px #18150f55;
}
.nosotros-hero .lead,
.nosotros-hero .eyebrow {
  text-shadow: 0 1px 3px #18150f, 0 0 8px #18150f88;
}
.page-historia #quienes-somos {
  background: var(--wheat);
  border-radius: 45px 0 45px 0;
  padding-block: 65px;
  margin-bottom: 60px;
}
.page-historia .timeline figure {
  width: 82%;
  max-width: 420px;
  justify-self: center;
  padding: 12px;
}
.page-historia .timeline img {
  max-height: 360px;
}
@media (max-width: 800px) {
  .page-historia .nosotros-hero {
    height: calc(100svh - 74px);
    min-height: 570px;
  }
  .page-historia #quienes-somos {
    padding-block: 40px;
    margin-bottom: 40px;
  }
  .page-historia .timeline figure {
    width: 90%;
    max-width: 350px;
  }
  .page-historia .timeline img {
    max-height: 300px;
  }
}

/* v15: azul original del logo, catálogo descargable y contacto flotante. */
.hero-divider {
  height: 3px;
  background: var(--red);
}
.catalog-download {
  margin: 0 0 35px;
}
.catalog-download span {
  margin-left: 12px;
}
.footer {
  background: #233669;
}
.footer .eyebrow {
  color: #ffdc38;
}
.footer a:hover {
  color: #ffdc38;
}
.whatsapp-float {
  position: fixed;
  right: 25px;
  bottom: 25px;
  z-index: 20;
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #087f3f;
  color: white;
  border: 2px solid white;
  box-shadow: 0 4px 14px #0003;
  transition: transform .2s, background .2s;
}
.whatsapp-float svg {
  width: 36px;
  height: 36px;
}
.whatsapp-float:hover {
  background: #006c32;
  transform: translateY(-3px);
}
.whatsapp-float:focus-visible {
  outline: 3px solid var(--wheat);
  outline-offset: 4px;
}
.top {
  bottom: 98px;
}
@media (max-width: 500px) {
  .whatsapp-float {
    right: 16px;
    bottom: 18px;
    width: 54px;
    height: 54px;
  }
  .top {
    right: 16px;
    bottom: 85px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .whatsapp-float {
    transition: none;
  }
}

/* v16: texto del hero de Inicio a la izquierda, sin leyenda ni CTA. */
.page-index .video-controls {
  bottom: 95px;
}
.page-index .video-hero {
  justify-content: flex-start;
  text-align: left;
}
.page-index .video-hero .media-hero-copy {
  width: min(560px, 45%);
  max-width: none;
  padding: 40px 0 70px;
  margin-left: max(6vw, calc((100vw - 1320px) / 2));
}
.page-index .video-hero h1 {
  font-size: clamp(3rem, 4.6vw, 4.5rem);
}
.page-index .video-hero .lead {
  margin: 0;
  max-width: 410px;
}
.page-index .video-hero .lead br {
  display: none;
}
@media (max-width: 800px) {
  .page-index .video-hero {
    align-items: flex-start;
  }
  .page-index .video-hero .media-hero-copy {
    width: min(480px, 88%);
    margin: 0 6%;
    padding: 55px 0 0;
  }
  .page-index .video-hero h1 {
    font-size: clamp(2.5rem, 7vw, 3.5rem);
  }
  .page-index .video-hero h1 br {
    display: block;
  }
  .page-index .video-hero .lead {
    max-width: 330px;
    font-size: 1rem;
  }
}

/* v17: categorías sin líneas, logo transparente y botones alineados. */
.footer img {
  height: auto;
}
.page-index .family {
  border-top: 0;
  border-bottom: 0;
}
.footer img {
  background: transparent;
  padding: 0;
  border-radius: 0;
}
.top {
  right: 25px;
  width: 58px;
  height: 58px;
}
@media (max-width: 500px) {
  .top {
    right: 16px;
    width: 54px;
    height: 54px;
  }
}

/* v18: título con relieve sutil y aparición; footer con iconos. */
.page-index .video-hero h1 {
  font-size: clamp(3.2rem, 5vw, 4.9rem);
  font-weight: 700;
  text-shadow: 1px 1px 0 #302015, 2px 2px 0 #302015b3,
    3px 3px 0 #30201580, 0 5px 15px #17110980;
}
.page-index .video-hero h1 em {
  font-weight: 700;
}
.page-index .video-hero .media-hero-copy {
  animation: hero-copy-appear 1s cubic-bezier(.2, .7, .3, 1) both;
}
@keyframes hero-copy-appear {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.footer a,
.footer a:hover {
  text-decoration: none;
}
.footer a:has(.footer-icon) {
  display: flex;
  align-items: center;
  gap: 10px;
}
.footer-icon {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: 0 0 19px;
}
.footer p .footer-icon {
  width: 15px;
  height: 15px;
  vertical-align: -2px;
  margin-right: 5px;
}
.footer a span {
  overflow-wrap: anywhere;
}
.footer a:focus-visible {
  outline: 2px solid var(--wheat);
  outline-offset: 4px;
}
@media (max-width: 800px) {
  .page-index .video-hero h1 {
    font-size: clamp(2.65rem, 7.4vw, 3.75rem);
  }
}
@media (prefers-reduced-motion: reduce) {
  .page-index .video-hero .media-hero-copy {
    animation: none;
  }
}

/* v19: créditos alineados con las tres columnas del footer. */
.footer .footer-credits {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  gap: 50px;
  line-height: 1.6;
}
@media (max-width: 800px) {
  .footer .footer-credits {
    grid-template-columns: 1fr 1fr;
    gap: 18px 30px;
  }
  .footer-credits > span:first-child {
    grid-column: 1 / -1;
  }
}
@media (max-width: 500px) {
  .footer .footer-credits {
    grid-template-columns: 1fr;
    gap: 12px;
    padding-right: 65px;
  }
  .credit-separator {
    display: none;
  }
}

/* v20: Nosotros más compacto y banda institucional de margen a margen. */
.page-historia .nosotros-hero {
  height: calc(85svh - 82px);
  min-height: 480px;
}
.page-historia .route {
  font-size: clamp(1.15rem, 2.2vw, 1.65rem);
  padding-block: 24px;
}
.page-historia #quienes-somos {
  max-width: none;
  width: 100%;
  border-radius: 0;
  padding: 0;
}
.page-historia .quienes-inner {
  padding-block: 55px;
}
.page-historia .timeline article {
  margin-bottom: 45px;
}
.page-historia .timeline article:last-child {
  margin-bottom: 0;
}
@media (max-width: 800px) {
  .page-historia .nosotros-hero {
    height: calc(85svh - 74px);
    min-height: 430px;
  }
  .page-historia .quienes-inner {
    padding-block: 40px;
  }
  .page-historia .timeline article {
    margin-bottom: 32px;
  }
}

/* v21: archivo real, galería ampliable y novedades del catálogo. */
.page-historia #quienes-somos .archive-frame { width: min(100%, 330px); justify-self: center; }
.archive-frame { margin: 0; min-width: 0; }
.archive-open { display: block; position: relative; width: 100%; border: 0; padding: 0; background: var(--paper); color: var(--olive); cursor: zoom-in; }
.archive-open img { width: 100%; height: 275px; object-fit: contain; background: var(--paper); }
.archive-open > span { position: absolute; bottom: 10px; right: 10px; padding: 5px 10px; border-radius: 20px; background: #fff8eee8; font-size: .7rem; }
.archive-frame figcaption { margin-top: 12px; font-size: .75rem; color: var(--olive); }
.page-historia .timeline .archive-open img { height: auto; max-height: 360px; object-fit: contain; }
.page-historia #quienes-somos .archive-open img { height: 360px; }
.page-historia .origin-journey { background: var(--paper); text-align: center; padding: 35px 18px; }
.origin-journey > span { display: block; font: italic clamp(1.3rem, 2vw, 1.9rem)/1.4 var(--serif); color: var(--red); }
.origin-journey > span:nth-child(2) { padding: 14px 0; color: var(--olive); }
.origin-journey figcaption { font-size: .75rem; margin-top: 20px; }
.archive-section { padding-top: 30px; }
.archive-section > p:not(.eyebrow) { max-width: 650px; }
.archive-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 35px; margin-top: 35px; }
.archive-pack-title { margin-top: 65px; }
.archive-pack-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 24px; }
.archive-pack-grid .archive-open img { height: 235px; }
#archive-dialog { width: min(1100px, 94vw); max-width: 94vw; max-height: 94svh; padding: 45px 20px 15px; background: var(--paper); }
#archive-image { display: block; width: 100%; height: auto; max-height: 75svh; object-fit: contain; }
#archive-caption { margin: 12px 0 0; text-align: center; font-size: .85rem; }
.product-badge { display: inline-block; background: var(--wheat); color: var(--ink); font-size: .7rem; padding: 4px 10px; border-radius: 20px; margin: 10px 0 0; }
.product-process { display: block; margin-top: 5px; font-size: .72rem; color: var(--olive); }
.product button > .product-badge { margin-bottom: 0; }
@media (max-width: 800px) {
 .archive-pack-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
 .archive-grid { gap: 25px; }
}
@media (max-width: 500px) {
 .archive-grid { grid-template-columns: 1fr; }
 .archive-pack-grid { gap: 22px 15px; }
 .archive-pack-grid .archive-open img { height: 190px; }
 .archive-open img { height: 260px; }
}

/* v22: una sola galería, como fotografías sobre la mesa. */
.archive-album { display: grid; grid-template-columns: minmax(0,.8fr) minmax(0,1.2fr); align-items: center; gap: 65px; padding-block: 70px 90px; }
.archive-copy { min-width: 0; }
.archive-copy h2 { font-size: clamp(2.2rem,3.4vw,3.3rem); }
.archive-copy > p:not(.eyebrow) { max-width: 420px; }
.archive-navigation { display: flex; align-items: center; gap: 20px; margin-top: 30px; }
.archive-navigation button { width: 44px; height: 44px; border: 1px solid var(--red); border-radius: 50%; color: var(--red); background: transparent; cursor: pointer; font-size: 1.25rem; transition: background .2s, color .2s; }
.archive-navigation button:hover { background: var(--red); color: var(--paper); }
#archive-position { font-size: .8rem; color: var(--olive); min-width: 45px; text-align: center; }
.archive-copy .archive-current-caption { color: var(--olive); font-size: .8rem; margin-top: 18px; min-height: 3em; }
.archive-stack { position: relative; min-width: 0; height: 440px; isolation: isolate; }
.archive-stack .archive-frame { position: absolute; width: 75%; top: 35px; left: 12%; padding: 12px 12px 22px; background: var(--paper); box-shadow: 0 16px 36px #44311b28; border: 1px solid #dacbbd; transform-origin: center; }
.archive-stack .archive-frame[hidden] { display: none; }
.archive-stack .archive-frame[data-slot="previous"] { z-index: 1; transform: translate(-12%,15px) rotate(-10deg); }
.archive-stack .archive-frame[data-slot="next"] { z-index: 2; transform: translate(15%,-10px) rotate(9deg); }
.archive-stack .archive-frame[data-slot="current"] { z-index: 3; transform: rotate(-2deg); }
.archive-stack .archive-open img { height: 315px; width: 100%; object-fit: contain; }
.archive-stack .archive-frame figcaption { display: none; }
.archive-stack .archive-frame:not([data-slot="current"]) .archive-open > span { display: none; }
.archive-stack .archive-frame:not([data-slot="current"]) .archive-open { pointer-events: none; }
.archive-stack:focus-visible { outline: 2px solid var(--red); outline-offset: 8px; }
@media (max-width: 1000px) {
 .archive-album { gap: 35px; }
 .archive-stack { height: 390px; }
 .archive-stack .archive-open img { height: 275px; }
}
@media (max-width: 800px) {
 .archive-album { grid-template-columns: 1fr; gap: 8px; padding-block: 45px 55px; }
 .archive-copy > p:not(.eyebrow) { max-width: 540px; }
 .archive-stack { width: min(100%,560px); height: 405px; margin: 0 auto; }
 .archive-stack .archive-open img { height: 290px; }
 .archive-copy .archive-current-caption { min-height: 0; }
}
@media (max-width: 500px) {
 .archive-stack { height: 340px; }
 .archive-stack .archive-frame { padding: 8px 8px 16px; top: 25px; }
 .archive-stack .archive-open img { height: 245px; }
}
@media (prefers-reduced-motion: reduce) {
 .archive-navigation button { transition: none; }
}
/* Sin JavaScript, el archivo sigue siendo accesible en una única galería. */
html:not(.js) .archive-album { display: block; }
html:not(.js) .archive-navigation, html:not(.js) .archive-current-caption { display: none; }
html:not(.js) .archive-stack { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px; height: auto; }
html:not(.js) .archive-stack .archive-frame { position: static; width: 100%; transform: none; }
html:not(.js) .archive-stack .archive-frame figcaption { display: block; }

/* v23: tarjetas sin líneas en Nuestras pastas. */
.page-pastas .family-choice,
.page-pastas .product {
  border-top: 0;
  border-bottom: 0;
}