/* Qui som · bloque «Tres coses que no negociem» · Terroir Radical · 13-oct-2026
   Antes: bloque verde oscuro a todo ancho. Ahora: papel claro, tres tarjetas con sombra de color (teja · groc · rosat) y pastilla de sección.
   Solo se usa en qui-som / quienes-somos / about-us / qui-sommes-nous. */
body .s-editorial { background: #FFF8EC; padding: clamp(56px, 7vw, 100px) 0; border-top: 1px solid rgba(26, 51, 24, .14); border-bottom: 1px solid rgba(26, 51, 24, .14); }
body .editorial-inner { margin-bottom: clamp(32px, 4vw, 54px); }
body .editorial-eyebrow { display: inline-block; margin: 0 0 18px; padding: 7px 17px 6px; border-radius: 999px; background: #B8451E; color: #FFF8EC; text-transform: none; letter-spacing: .02em; font: 700 1rem/1.15 var(--ff-body); }
body .editorial-title { max-width: 18ch; margin: 0 auto; color: #1A3318; text-wrap: balance; font: 700 clamp(2rem, 4.2vw, 3.2rem)/1.1 var(--ff-display); font-style: normal; letter-spacing: -.01em; }
body .principis-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px, 2.4vw, 32px); background: none; border: 0; align-items: stretch; }
body .principi { --pc: #B8451E; --pt: #FFF8EC; gap: 14px; padding: clamp(22px, 2.4vw, 34px); background: #fff; border: 1px solid rgba(26, 51, 24, .22); border-radius: 4px; box-shadow: 6px 6px 0 var(--pc); transition: transform .18s ease, box-shadow .18s ease; }
body .principi:nth-child(2) { --pc: #F2C012; --pt: #1A3318; }
body .principi:nth-child(3) { --pc: #D4607A; --pt: #2A0F18; }
body .principi:hover { background: #fff; transform: translate(-2px, -2px); box-shadow: 9px 9px 0 var(--pc); }
body .principi-num { display: none; }                       /* no es una secuencia: no hace falta numerar */
body .principi-tag { align-self: flex-start; padding: 4px 13px 3px; border-radius: 999px; background: var(--pc); color: var(--pt); text-transform: none; letter-spacing: .02em; font: 700 .92rem/1.2 var(--ff-body); }
body .principi h3 { margin: 0; color: #1A3318; font: 700 clamp(1.45rem, 2.1vw, 1.9rem)/1.18 var(--ff-display); font-style: normal; letter-spacing: -.005em; }
body .principi p { color: #2a281f; font-size: 1.02rem; line-height: 1.7; }
body .principi p a { color: #2B5425; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
body .principi-source { color: #5b574a; border-top: 1px solid rgba(26, 51, 24, .2); font: 800 .9rem/1.3 var(--ff-cond); letter-spacing: .1em; }
@media (max-width: 900px) { body .principis-grid { grid-template-columns: 1fr; } body .principi { padding: 24px 22px; } }

/* ───────── Tarjetas de historia: en columnas, no una debajo de otra ───────── */
body .qs-wrap { max-width: 1100px; padding: clamp(40px, 5vw, 72px) 24px clamp(48px, 6vw, 80px); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(18px, 2.4vw, 32px); align-items: stretch; }
body .qs-wrap.qs-quefem { max-width: 820px; display: block; padding-bottom: 8px !important; }   /* la presentación va sola, centrada, arriba */
body .qs-card { --pc: #B8451E; display: flex; flex-direction: column; padding: clamp(22px, 2.4vw, 34px); background: #fff; border: 1px solid rgba(26, 51, 24, .2); border-top: 5px solid var(--pc); border-radius: 4px; }
body .qs-quefem .qs-card { --pc: #2B5425; }
body .qs-wrap:not(.qs-quefem) .qs-card:nth-child(2) { --pc: #F2C012; }
body .qs-wrap:not(.qs-quefem) .qs-card:nth-child(3) { --pc: #D4607A; }
body .qs-wrap:not(.qs-quefem) .qs-card:nth-child(4) { --pc: #2B5425; }
body .qs-card-title { margin: 0 0 14px; color: #1A3318; font: 700 clamp(1.35rem, 1.9vw, 1.65rem)/1.2 var(--ff-display); }
body .qs-card p { color: #2a281f; font-size: 1.02rem; line-height: 1.7; margin: 0 0 12px; }
body .qs-card p:last-child { margin: 0; }
@media (max-width: 900px) { body .qs-wrap { grid-template-columns: 1fr; padding-left: 16px; padding-right: 16px; } }
body .qs-wrap > h2 { grid-column: 1 / -1; margin: 0 0 clamp(6px, 1vw, 14px) !important; text-align: center; color: #1A3318; font: 700 clamp(1.7rem, 3vw, 2.4rem)/1.15 var(--ff-display) !important; }

/* 15-oct-2026 — más aire entre secciones, columnas más estrechas y tarjetas sin hueco interior (petición: «todo muy pegado / columnas muy amplias») */
body .qs-wrap.qs-quefem { padding-bottom: clamp(44px, 5vw, 76px) !important; }
body .qs-wrap:not(.qs-quefem) { max-width: 980px; padding: clamp(60px, 6.5vw, 96px) 24px clamp(64px, 7vw, 110px) !important; gap: clamp(24px, 3vw, 40px); align-items: start; }
body .qs-wrap > h2 { margin: 0 0 clamp(18px, 2.4vw, 34px) !important; }
body .qs-card { padding: clamp(24px, 2.8vw, 38px); }
body .qs-card p { margin: 0 0 16px; }
body .qs-card p:last-child { margin: 0; }
@media (max-width: 900px) { body .qs-wrap:not(.qs-quefem) { padding-left: 16px !important; padding-right: 16px !important; } }
/* las tres tarjetas de principios: la tercera lleva más texto → columna doble en pantallas anchas (sin huecos en las otras); en medias, fila propia */
@media (min-width: 1200px) { body .principis-grid { grid-template-columns: 1fr 1fr 2fr; } }
@media (min-width: 901px) and (max-width: 1199px) { body .principis-grid { grid-template-columns: 1fr 1fr; } body .principi:nth-child(3) { grid-column: 1 / -1; } body .principi:nth-child(3) p { max-width: 68ch; } }
/* la línea de enlaces: cada enlace entero (en móvil salta de línea entre enlaces, no dentro de uno) */
body .qs-enllacos a { display: inline-block; white-space: nowrap; }

/* ── Abanico (como el de primalwine.com): una tarjeta abierta y las otras como tiras de color. Solo ≥901 px y con JavaScript (qui-som.js); sin JS queda la rejilla de arriba ── */
@media (min-width: 901px) {
  body .principis-grid.abanico { display: flex; gap: clamp(14px, 1.6vw, 22px); align-items: stretch; min-height: 280px; }
  body .abanico .principi { position: relative; display: block; flex: 1 1 0; min-width: 104px; padding: 0; overflow: hidden; background: var(--pc); border-radius: 4px; box-shadow: 5px 5px 0 rgba(26, 51, 24, .2); cursor: pointer;
    transition: flex-grow .6s cubic-bezier(.22, .8, .22, 1), background-color .35s ease, box-shadow .25s ease, transform .2s ease; }
  body .abanico .principi.is-open { flex-grow: 5.4; background: #fff; cursor: default; box-shadow: 6px 6px 0 var(--pc); }
  body .abanico .principi:not(.is-open):hover { transform: translate(-2px, -2px); box-shadow: 7px 7px 0 rgba(26, 51, 24, .28); }
  body .abanico .principi.is-open:hover { transform: none; box-shadow: 6px 6px 0 var(--pc); }
  /* botón: en la tira cerrada = número arriba, etiqueta en vertical y «+» abajo; en la abierta = fila superior con número y etiqueta */
  body .abanico .principi-toggle { all: unset; box-sizing: border-box; position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 22px; padding: 22px 0 26px; color: var(--pt); cursor: pointer; }
  body .abanico .principi-toggle:focus-visible { outline: 3px solid #1A3318; outline-offset: -7px; border-radius: 4px; }
  body .abanico .principi-toggle::after { content: "+"; margin-top: auto; font: 700 1.9rem/1 var(--ff-body); }
  body .abanico .principi-num { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 50%; background: #fff; color: #1A3318; font: 800 .95rem/1 var(--ff-cond); letter-spacing: .04em; opacity: 1; }
  body .abanico .principi-tag { align-self: auto; writing-mode: vertical-rl; transform: rotate(180deg); padding: 0; border-radius: 0; background: none; color: var(--pt); font: 700 1.3rem/1 var(--ff-display); letter-spacing: .02em; white-space: nowrap; }
  body .abanico .principi.is-open .principi-toggle { inset: 0 0 auto 0; flex-direction: row; justify-content: flex-start; align-items: center; gap: 12px; padding: 28px clamp(24px, 3vw, 38px) 0; cursor: default; pointer-events: none; }
  body .abanico .principi.is-open .principi-toggle::after { content: none; }
  body .abanico .principi.is-open .principi-num { width: 34px; height: 34px; background: var(--pc); color: var(--pt); font-size: .8rem; }
  body .abanico .principi.is-open .principi-tag { writing-mode: horizontal-tb; transform: none; padding: 4px 13px 3px; border-radius: 999px; background: var(--pc); color: var(--pt); font: 700 .92rem/1.2 var(--ff-body); }
  /* contenido: anchura fija (la que tendrá abierta) para que el texto no se recoloque mientras la tarjeta se abre */
  body .abanico .principi-body { position: absolute; left: 0; top: 0; bottom: 0; width: var(--ab-open, 640px); box-sizing: border-box; display: flex; flex-direction: column; gap: 14px; padding: 84px clamp(24px, 3vw, 38px) 30px; color: #1A3318;
    opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility 0s linear .25s; }
  body .abanico .principi.is-open .principi-body { opacity: 1; visibility: visible; transition: opacity .4s ease .22s, visibility 0s; }
  body .abanico .principi-body p { flex: none; max-width: 64ch; margin: 0; }
  /* el texto de las tarjetas cortas queda centrado entre la cabecera y la fila de etiquetas (el hueco se reparte arriba y abajo) */
  body .abanico .principi-body h3 { margin-top: auto; }
  body .abanico .principi-body p:last-of-type { margin-bottom: auto; }
  body .abanico .principi-body .principi-source { margin-top: 0; }
}
@media (prefers-reduced-motion: reduce) { body .abanico .principi, body .abanico .principi-body { transition: none !important; } }