/* Ternera del Bajo Tormes. Mismo aire que la web anterior (fondo azul, caja blanca, menú negro, Open Sans), adaptable al móvil. */
@font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/open-sans-latin-400-normal.woff2) format('woff2'); }
@font-face { font-family: 'Open Sans'; font-style: italic; font-weight: 400; font-display: swap; src: url(/assets/fonts/open-sans-latin-400-italic.woff2) format('woff2'); }
@font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url(/assets/fonts/open-sans-latin-600-normal.woff2) format('woff2'); }
@font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 700; font-display: swap; src: url(/assets/fonts/open-sans-latin-700-normal.woff2) format('woff2'); }

:root {
  --fondo: #207daf;
  --azul: #2270b0;
  --azul-oscuro: #1a5a8f;
  --negro: #232323;
  --texto: #3a3a3a;
  --suave: #f3f7fa;
  --linea: #dde5ec;
  --verde: #25d366;
  --verde-eco: #2f7d32;
  --bs-body-font-family: 'Open Sans', system-ui, sans-serif;
  --bs-body-color: var(--texto);
  --bs-link-color: var(--azul);
  --bs-link-color-rgb: 34, 112, 176;
  --bs-link-hover-color: var(--azul-oscuro);
  --bs-link-hover-color-rgb: 26, 90, 143;
}
html { overflow-x: hidden; }
body { background: var(--fondo); font-size: 1.0625rem; line-height: 1.7; }
h1, h2, h3, h4 { color: var(--negro); font-weight: 600; line-height: 1.25; }
h1 { font-size: clamp(1.7rem, 4vw, 2.3rem); margin-bottom: 1.2rem; }
h2 { font-size: clamp(1.35rem, 3vw, 1.75rem); margin-bottom: 1rem; }
strong { font-weight: 600; color: #222; }
img { max-width: 100%; height: auto; }
svg { width: 1em; height: 1em; vertical-align: -.125em; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.saltar { position: absolute; z-index: 1000; background: #fff; padding: .5rem 1rem; }
.pagina { max-width: 1200px; margin: 10px auto; background: #fff; box-shadow: 0 0 20px rgba(0, 0, 0, .15); }
@media (max-width: 1219.98px) { .pagina { margin: 0 auto; } }

/* Cabecera y menú */
.cabecera { padding: 22px 16px 18px; text-align: center; }
.logo img { width: 1000px; max-width: 100%; }
.menu { background: var(--negro); padding: 0; border-top: 4px solid #fff; }
.menu .navbar-brand { font-size: 1rem; text-transform: uppercase; letter-spacing: .05em; }
.menu .navbar-toggler { border-color: rgba(255, 255, 255, .3); margin: .5rem 0; }
.menu .nav-link { color: #fff; text-transform: uppercase; font-weight: 600; font-size: .95rem; padding: .85rem 1rem !important; }
.menu .nav-link:hover, .menu .nav-link:focus-visible { background: #3a3a3a; color: #fff; }
.menu .nav-link[aria-current] { background: var(--azul); color: #fff; }
.menu .dropdown { display: flex; flex-wrap: wrap; align-items: stretch; }
.menu .dropdown .nav-link { padding-right: .35rem !important; }
.menu .sub { background: none; border: 0; color: #fff; padding: 0 .9rem 0 .2rem; }
.menu .sub:hover { background: #3a3a3a; }
.menu .dropdown-menu { border-radius: 0; border: 0; border-top: 3px solid var(--azul); margin: 0; }
.menu .dropdown-item { padding: .5rem 1.2rem; }
.menu .dropdown-item[aria-current] { color: var(--azul); font-weight: 600; background: none; }
.menu .dropdown-item:active { background: var(--azul); color: #fff; }
@media (max-width: 991.98px) {
  .menu .navbar-nav { padding-bottom: .5rem; }
  .menu .dropdown .nav-link { flex: 1; }
  .menu .dropdown-menu { width: 100%; background: #2e2e2e; border-top: 0; }
  .menu .dropdown-item { color: #ddd; padding-left: 2rem; }
  .menu .dropdown-item:hover { background: #3a3a3a; color: #fff; }
  .menu .dropdown-divider { border-color: #444; }
}
@media (min-width: 992px) {
  .menu .dropdown-menu { top: 100%; left: 0; }
  /* Con ratón, el submenú se abre al pasar por encima */
  @media (hover: hover) { .menu .dropdown:hover > .dropdown-menu, .menu .dropdown:focus-within > .dropdown-menu { display: block; } }
}

/* Contenido */
.contenido { padding: 0 0 1rem; }
.seccion { padding: 2.5rem clamp(16px, 4vw, 30px) 1rem; }
.seccion.fondo { background: var(--suave); padding-bottom: 2.5rem; margin-top: 1.5rem; }
.breadcrumb { font-size: .85rem; margin-bottom: 1rem; }
.lead { font-size: 1.15rem; }
.destacado { font-weight: 600; color: #222; border-left: 4px solid var(--azul); padding-left: 1rem; }
.btn-azul { background: var(--azul); color: #fff; border: 0; font-weight: 600; }
.btn-azul:hover, .btn-azul:focus-visible { background: var(--azul-oscuro); color: #fff; }
.btn-claro { background: #fff; color: var(--azul); border: 2px solid var(--azul); font-weight: 600; }
.btn-claro:hover { background: var(--suave); color: var(--azul-oscuro); }

/* Portada */
.portada { position: relative; }
.portada-img { display: block; width: 100%; height: clamp(320px, 48vw, 520px); object-fit: cover; object-position: 50% 22%; }
.portada-texto { position: absolute; right: clamp(16px, 4vw, 30px); top: clamp(16px, 4vw, 30px); max-width: 560px; background: rgba(255, 255, 255, .94); padding: 1.4rem 1.6rem; border-top: 5px solid var(--azul); }
.portada-texto h1 { font-size: clamp(1.4rem, 3.2vw, 2rem); margin-bottom: .6rem; }
.portada-texto p { font-size: 1rem; }
@media (max-width: 575.98px) {
  .portada-img { height: 240px; }
  .portada-texto { position: static; max-width: none; border-top: 0; border-bottom: 1px solid var(--linea); }
}

/* Vídeos */
.video { margin: 0; }
.video video { display: block; width: 100%; height: auto; background: #000; }
.video.vertical video { max-height: 70vh; width: auto; max-width: 100%; margin: 0 auto; }
.video.sin-pie figcaption { display: none; }
.franja-video { background: var(--negro); color: #ddd; padding: 2.5rem clamp(16px, 4vw, 30px); margin: 1.5rem 0 .5rem; }
.franja-video h2 { color: #fff; font-size: clamp(1.5rem, 3.4vw, 2.1rem); }
.franja-video .antetitulo { color: #9cc7ea; text-transform: uppercase; letter-spacing: .08em; font-size: .8rem; font-weight: 600; margin-bottom: .4rem; }
.franja-video video { border-radius: 6px; box-shadow: 0 8px 30px rgba(0, 0, 0, .5); }
.video figcaption { font-size: .85rem; color: #666; margin-top: .5rem; line-height: 1.5; }

/* Tarjetas de los ganaderos */
.tarjeta { background: #fff; border: 1px solid var(--linea); height: 100%; display: flex; flex-direction: column; }
.tarjeta img { aspect-ratio: 3 / 2; object-fit: cover; width: 100%; }
.tarjeta-cuerpo { padding: 1.1rem 1.2rem 1.3rem; display: flex; flex-direction: column; flex: 1; }
.tarjeta h2, .tarjeta h3 { font-size: 1.2rem; margin-bottom: .2rem; }
.tarjeta h2 a, .tarjeta h3 a { color: var(--negro); text-decoration: none; }
.tarjeta .lugar { color: var(--azul); font-weight: 600; font-size: .9rem; margin-bottom: .5rem; }
.tarjeta p { font-size: .95rem; }
.tarjeta .mas { margin-top: auto; font-weight: 600; text-decoration: none; }

/* Galería y visor */
.galeria { margin-top: 1.5rem; }
.galeria img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; transition: opacity .2s; }
.galeria a:hover img { opacity: .85; }
.visor { border: 0; padding: 0; background: transparent; max-width: 100vw; max-height: 100vh; width: 100vw; height: 100vh; }
.visor::backdrop { background: rgba(0, 0, 0, .9); }
.visor figure { margin: 0; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 3rem 3.5rem; }
.visor img { max-width: 100%; max-height: calc(100vh - 8rem); object-fit: contain; }
.visor figcaption { color: #eee; margin-top: .75rem; text-align: center; }
.visor button { position: fixed; background: rgba(0, 0, 0, .5); color: #fff; border: 0; font-size: 2rem; line-height: 1; width: 3rem; height: 3rem; border-radius: 50%; }
.visor .cerrar { top: 1rem; right: 1rem; }
.visor .ant { left: .5rem; top: 50%; }
.visor .sig { right: .5rem; top: 50%; }

/* Fichas */
.datos { display: grid; grid-template-columns: auto 1fr; gap: .3rem 1rem; background: var(--suave); padding: 1rem 1.2rem; margin-bottom: 1rem; }
.datos dt { font-weight: 600; color: #222; }
.datos dd { margin: 0; }
.ficha-contacto { border: 1px solid var(--linea); padding: 1rem 1.2rem; margin-bottom: 1rem; }
.ficha-contacto.destacada { border: 2px solid var(--azul); }
.ficha-contacto h2 a, .ficha-contacto h3 a { color: var(--negro); }
.ficha-contacto .btn svg { margin-right: .3rem; }
.mapa { border: 1px solid var(--linea); padding: 1rem 1.2rem; }
.mapa iframe { width: 100%; height: 280px; border: 0; margin-top: .75rem; }
.otros { font-size: .95rem; }

/* Teléfonos y correo */
.telefono { display: inline-flex; align-items: center; gap: .5rem; }
.tel, .correo { text-decoration: none; font-weight: 600; white-space: nowrap; }
.correo { display: inline-flex; align-items: baseline; white-space: normal; max-width: 100%; }
.correo span { overflow-wrap: anywhere; min-width: 0; }
.correo svg { flex-shrink: 0; align-self: center; }
.tel svg, .correo svg { margin-right: .4rem; color: var(--azul); }
.wa { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--verde); color: #fff; }
.wa:hover { color: #fff; filter: brightness(.92); }
.wa svg { width: 1.15rem; height: 1.15rem; }
.quien { color: #777; font-size: .9rem; }

/* Bloque de pedido */
.pedido { background: var(--azul); color: #fff; padding: 1.8rem clamp(16px, 4vw, 2rem); }
.pedido h2 { color: #fff; margin-bottom: .3rem; }
.pedido a, .pedido .tel svg, .pedido .correo svg { color: #fff; }
.pedido .quien { color: #d6e6f4; }
.pedido .tels li { margin-bottom: .3rem; }

/* Qué y cómo */
.clave { background: var(--suave); border-top: 4px solid var(--azul); padding: .9rem 1rem; height: 100%; }
.clave strong { display: block; font-size: 1.05rem; }
.clave span { font-size: .9rem; line-height: 1.5; display: block; }
.pasos { margin: 1.5rem 0; padding: 0; }
.paso { border: 1px solid var(--linea); padding: 1.2rem; height: 100%; }
.paso .num { display: inline-flex; width: 2.2rem; height: 2.2rem; border-radius: 50%; background: var(--azul); color: #fff; font-weight: 700; align-items: center; justify-content: center; margin-bottom: .6rem; }

/* Qué ofrecemos */
.foto-lateral { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }

/* Formas de compra */
.forma { background: #fff; border: 1px solid var(--linea); border-left: 5px solid var(--azul); padding: 1.1rem 1.2rem; height: 100%; }
.forma-dato { display: block; font-size: 1.5rem; font-weight: 700; color: var(--azul); line-height: 1.2; margin-bottom: .3rem; }
.forma h3 { margin-bottom: .3rem; }

/* Envasado al vacío */
.ventaja { position: relative; background: #fff; border-radius: 10px; box-shadow: 0 2px 10px rgba(20, 60, 100, .08); padding: 1.1rem 1.2rem 1.1rem 4.2rem; height: 100%; display: flex; flex-direction: column; justify-content: center; }
.ventaja p { margin: 0; line-height: 1.55; }
.ventaja .num { position: absolute; left: 1.1rem; top: 50%; transform: translateY(-50%); width: 2.3rem; height: 2.3rem; border-radius: 50%; background: var(--suave); color: var(--azul); border: 2px solid var(--azul); font-weight: 700; display: flex; align-items: center; justify-content: center; }
.ventaja.consejo { background: var(--azul); color: #fff; padding-left: 1.2rem; }
.ventaja.consejo h3 { color: #fff; margin: .2rem 0 .3rem; font-size: 1.05rem; }
.ventaja .etiqueta { font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; color: #d6e6f4; font-weight: 600; }

/* Precios */
.precios-cabecera { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 1.5rem; }
.precios-cabecera h1 { margin-bottom: .4rem; }
.leyenda { display: flex; gap: .5rem; flex-wrap: wrap; }
.chip { background: var(--negro); color: #fff; font-weight: 600; font-size: .85rem; padding: .3rem .8rem; border-radius: 99px; }
.chip.eco { background: var(--verde-eco); }
.grupo-precios { border: 1px solid var(--linea); border-radius: 10px; overflow: hidden; height: 100%; background: #fff; }
.grupo-precios h2 { margin: 0; padding: .8rem 1.2rem; background: var(--azul); color: #fff; font-size: 1.2rem; }
.grupo-precios table { font-size: 1rem; --bs-table-bg: transparent; }
.grupo-precios thead th { font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; color: #777; font-weight: 600; text-align: right; border-bottom: 2px solid var(--linea); padding-top: .6rem; }
.grupo-precios thead th.eco { color: var(--verde-eco); }
.grupo-precios th[scope=row] { font-weight: 600; color: #222; padding-left: 1.2rem; }
.grupo-precios td { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; font-weight: 600; font-size: 1.05rem; width: 7.5rem; }
.grupo-precios td:last-child, .grupo-precios thead th:last-child { padding-right: 1.2rem; }
.grupo-precios td.eco { color: var(--verde-eco); }
.grupo-precios td small { font-weight: 400; font-size: .72rem; color: #888; }
.grupo-precios tbody tr:hover { background: var(--suave); }
.grupo-precios tbody tr:last-child > * { border-bottom: 0; }
.grupo-precios .detalle { display: block; font-weight: 400; font-size: .85rem; color: #666; }
.grupo-precios .no { color: #bbb; font-weight: 400; }
@media (max-width: 575.98px) {
  .grupo-precios td { width: auto; font-size: .95rem; padding-left: .2rem; }
  .grupo-precios td small { display: none; }
}

/* Pie */
.pie { background: var(--negro); color: #ccc; padding: 2rem clamp(16px, 4vw, 30px) 1rem; font-size: .92rem; }
.pie a { color: #fff; }
.pie .correo svg { color: #9cc7ea; }
.pie-marca { color: #fff; font-weight: 600; font-size: 1.1rem; margin-bottom: .4rem; }
.pie-fin { border-top: 1px solid #3a3a3a; margin: 1.5rem 0 0; padding-top: 1rem; font-size: .85rem; color: #999; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }