/* La portada. Lo compartido (letras, colores, cinta, pie, botones) está en sitio.css. */
:root{
  --leche:#ffffff;
  --rojo:#b3261e;       /* solo para la leche que no se vende */
}
html{scroll-behavior:smooth;scroll-padding-top:12px}
body{background:var(--monte);color:var(--tinta);font:400 1.125rem/1.45 var(--texto)}
.simbolos{position:absolute}
img{display:block;max-width:100%;height:auto}
h1,h2,h3,p,ul,ol,dl,dd{margin:0;padding:0}
ul,ol{list-style:none}
a{color:inherit}

/* Portada: el arete cuelga sobre la foto y lleva el mensaje */
.portada{position:relative;background:var(--monte);overflow:hidden;padding-bottom:36px}
/* La foto va en su propia banda, encima del arete: la vaca entera y la ubre no quedan tapadas */
.portada-foto{display:block;position:relative;background:var(--pasto);padding-top:max(0px,calc(124px - 27vw))} /* Que la cinta no tape el lomo ni la cabeza */
.portada-foto img{width:100%;height:auto}
/* La foto de arriba la pone rotar.js: la caja le guarda el sitio para que nada brinque. Todas miden igual */
.portada-foto[data-portada]::before{content:"";display:block;aspect-ratio:768/735}
.portada-foto[data-portada] img{position:absolute;left:0;bottom:0}
/* Estas fotos no se arrastran ni sacan el menú de dejar el dedo encima (el clic derecho: rotar.js) */
.portada-foto img,.senal-foto img,.banda-foto img{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;-webkit-user-drag:none}
.portada-foto::after{content:"";position:absolute;inset:auto 0 0 0;height:36px;background:linear-gradient(to bottom,rgba(18,48,31,0),var(--monte))}
.portada .sitio-cinta{position:absolute;inset:0 0 auto 0;z-index:2;background:rgba(18,48,31,.82)}
.portada .sitio-menu{column-gap:6px}
.portada .sitio-menu a{font-size:clamp(.8125rem,4vw,1rem)}

.arete{--w:min(100vw - 2*var(--margen),470px);--cab:calc(var(--w)*.3);position:relative;z-index:1;width:var(--w);margin:-22px auto 0;transform-origin:50% 40px;filter:drop-shadow(0 16px 22px rgba(7,22,14,.5))}
.arete-cabeza{display:block;width:100%;height:var(--cab);margin-bottom:-1px;fill:var(--arete)}
.agujero{position:absolute;left:50%;top:calc(var(--cab)*.235 - 15px);width:30px;height:30px;margin-left:-15px;border-radius:50%;background:#2b2a05;box-shadow:inset 0 3px 0 #4a4810,0 2px 0 rgba(255,255,255,.5)}
.arete-cuerpo{background:var(--arete);color:var(--arete-tinta);border-radius:0 0 22px 22px;padding:0 20px 24px;text-align:center;box-shadow:0 12px 0 var(--arete-borde)}
/* Los títulos grandes ya son grandes: la letra del sistema no los agranda más. A 320 px con la letra al 130 % se salían de la pantalla. */
.arete h1,.quien h2,.senal h2,.banda h2,.venta h2,.gremio h2,.tambien h2,.conseguir h2,.datos h2,.contacto h2{-webkit-text-size-adjust:100%;text-size-adjust:100%}
.arete h1{font:700 clamp(3.2rem,18.4vw,5.5rem)/.98 var(--titulo);text-transform:uppercase;letter-spacing:.002em}
.arete h1 span{display:block;white-space:nowrap}
.arete-sub{font-size:1.1875rem;line-height:1.3;margin:10px 0 14px;text-wrap:balance}
.arete .botones{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.sin-costo{font-weight:700;margin-top:12px}

/* Para quién */
.quien{background:var(--leche);padding:48px var(--margen) 52px}
.quien-dentro{max-width:var(--ancho);margin:0 auto;display:grid;gap:24px}
.quien h2{font:700 clamp(2.5rem,11.4vw,6.25rem)/.98 var(--titulo);text-transform:uppercase;color:var(--pasto);text-wrap:balance}
.quien-texto{max-width:38rem;font-size:1.1875rem}
.quien dl{display:grid;gap:14px}
.quien dt{font:700 1.875rem/1 var(--titulo);text-transform:uppercase;color:var(--pasto)}

/* Sin señal: la foto entera */
.senal{background:var(--monte);color:#fff}
.senal-foto img{width:100%;height:clamp(180px,50vw,560px);object-fit:cover;object-position:50% 70%}
.senal-dentro{padding:22px var(--margen) 44px}
.senal h2{font:700 clamp(3.5rem,17vw,10.5rem)/.94 var(--titulo);text-transform:uppercase;color:var(--arete)}
.senal p{max-width:34rem;font-size:1.1875rem;margin-top:12px}

/* Un día: las horas cuelgan de un alambre, como aretes */
.dia{background:var(--cal);padding:48px 0 40px}
.dia-cab{max-width:calc(var(--ancho) + 2*var(--margen));margin:0 auto;padding:0 var(--margen)}
.dia h2{font:700 clamp(3.25rem,15vw,7.5rem)/.9 var(--titulo);text-transform:uppercase;color:var(--pasto)}
.dia-nota{margin-top:12px;max-width:38rem}
.dia-seguir{display:flex;align-items:center;gap:8px;margin-top:10px;font-weight:700;color:var(--pasto)}
.dia-seguir svg{flex:none;width:22px;height:22px}
.horas{display:grid;grid-auto-flow:column;grid-auto-columns:min(76vw,272px);gap:20px;margin-top:22px;padding:0 var(--margen) 18px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--margen);scrollbar-width:thin;scrollbar-color:var(--pasto) transparent}
.momento{position:relative;display:flex;flex-direction:column;scroll-snap-align:start;padding-top:0}
/* El alambre pasa por el hueco de cada arete y sigue hasta el próximo */
.momento::before{content:"";position:absolute;left:0;right:-20px;top:17px;height:3px;background:var(--suave)}
.momento:last-child::before{right:0}
.hora{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;width:88px;height:113px;padding-bottom:13px;margin:0 0 12px;color:var(--arete-tinta);font:700 2rem/.95 var(--titulo)}
.hora svg{position:absolute;inset:0;width:100%;height:100%}
.hora span{position:relative}
.hora small{position:relative;font:700 .9375rem/1 var(--texto)}
.momento h3{font:700 2.25rem/1 var(--titulo);color:var(--pasto)}
.momento p{margin:8px 0 16px;font-size:1.0625rem;line-height:1.4}
.pantalla{margin:auto 0 0;}
.pantalla img{width:100%;max-width:252px;border-radius:24px;border:7px solid var(--tinta);background:var(--tinta)}

/* Lo que hace: una banda por tema, la palabra grande muerde la foto */
.banda{--fondo:var(--leche);--color:var(--tinta);--grande:var(--pasto);--linea:rgba(23,36,28,.2);background:var(--fondo);color:var(--color);padding-bottom:44px}
.banda-verde{--fondo:var(--pasto);--color:#fff;--grande:var(--arete);--linea:rgba(255,255,255,.28)}
.banda-amarilla{--fondo:var(--arete);--color:var(--arete-tinta);--grande:var(--arete-tinta);--linea:rgba(28,27,4,.28)}
.banda-foto{background:var(--pasto)}
.banda-foto img{width:100%;height:auto;object-fit:cover}
.banda-dentro{padding:0 var(--margen)}
.banda h2{display:inline-block;position:relative;max-width:100%;overflow-wrap:anywhere;margin:-.42em 0 0 -.16em;padding:.08em .16em 0;background:var(--fondo);color:var(--grande);font:700 clamp(5.5rem,31vw,15rem)/.82 var(--titulo);text-transform:uppercase;letter-spacing:.005em;border-radius:0 12px 0 0}
.banda-cuerpo{display:grid;gap:14px;margin-top:12px}
.banda .lema{font:700 clamp(2rem,8.6vw,3.25rem)/1.04 var(--titulo);max-width:16em}
.lista li{padding:11px 0;border-top:2px solid var(--linea);max-width:38rem}
.lista li:last-child{border-bottom:2px solid var(--linea)}
.lista b{font-weight:700}
.sello{display:inline-block;background:var(--rojo);color:#fff;font-weight:700;padding:3px 11px;border-radius:8px}
.manda{font-weight:700;margin-top:14px;max-width:38rem}

/* Ganado en venta: cada arete del alambre abre la lista de ese animal */
.venta{background:var(--monte);color:#fff;padding:52px 0 56px}
.venta-dentro{max-width:calc(var(--ancho) + 2*var(--margen));margin:0 auto}
.venta h2,.venta-sub,.venta-pie{padding-inline:var(--margen)}
.venta h2{font:700 clamp(3.25rem,15vw,7.5rem)/.9 var(--titulo);text-transform:uppercase;color:var(--arete)}
.venta-sub{max-width:calc(38rem + 2*var(--margen));margin-top:12px;font-size:1.1875rem}
.alambre{display:flex;gap:20px;margin-top:26px;padding:0 var(--margen) 10px;overflow-x:auto;scrollbar-width:thin;scrollbar-color:var(--arete) transparent}
.alambre li{position:relative;flex:none}
.alambre li::before{content:"";position:absolute;left:-20px;right:-20px;top:16px;height:3px;background:#a9b9ae}
.alambre li:first-child::before{left:0}
.alambre li:last-child::before{right:0}
.alambre a{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;width:112px;height:144px;padding:0 10px 17px;color:var(--arete-tinta);font:700 1.625rem/.95 var(--titulo);text-align:center;text-decoration:none}
.alambre svg{position:absolute;inset:0;width:100%;height:100%}
.alambre span{position:relative}
.alambre a:hover{transform:translateY(3px)}
.venta-botones{display:grid;gap:10px;max-width:calc(620px + 2*var(--margen));padding-inline:var(--margen);margin-top:22px}
.btn-arete{background:var(--arete);color:var(--arete-tinta)}
.btn-arete:hover{background:#fff}
.btn-claro{border-color:#fff;color:#fff}
.btn-claro:hover{background:#fff;color:var(--monte)}
.venta-pie{max-width:calc(38rem + 2*var(--margen));margin-top:16px;font-size:1rem;color:#d7e1d9}

/* Asociaciones */
.gremio{background:var(--leche);padding:48px var(--margen) 52px;text-align:center}
.gremio h2{font:700 clamp(2.75rem,12vw,6rem)/.92 var(--titulo);text-transform:uppercase;color:var(--pasto);text-wrap:balance}
.gremio p{max-width:34rem;margin:12px auto 0;font-size:1.1875rem}
.gremio .btn{max-width:440px;margin:20px auto 0}

/* Y también */
.tambien{background:var(--cal);padding:48px var(--margen) 52px}
.tambien-dentro{max-width:var(--ancho);margin:0 auto}
.tambien h2,.conseguir h2,.datos h2,.contacto h2{font:700 clamp(3.25rem,15vw,7.5rem)/.9 var(--titulo);text-transform:uppercase;text-align:center}
.tambien h2{color:var(--pasto)}
.tambien ul{display:grid;gap:10px;margin-top:24px}
.tambien li{background:var(--leche);border-radius:14px;padding:16px 18px;text-align:center}
.tambien h3{font:700 2.125rem/1 var(--titulo);color:var(--pasto);margin-bottom:6px}
.prueba{display:inline-block;vertical-align:.25em;background:var(--arete);color:var(--arete-tinta);font:700 1rem/1 var(--texto);padding:5px 8px;border-radius:7px}

/* Lo primero en las portadas de cada público (servidor/src/audiencias.js) */
.audiencia-notas{max-width:44rem;margin:24px auto 0;text-align:center}
.audiencia-notas li{padding:9px 0;border-top:2px solid rgba(23,36,28,.14);border-radius:0;background:none}
.arete h1.larga{font-size:clamp(2.8rem,15.4vw,4.75rem)}
.audiencia-notas li:last-child{border-bottom:2px solid rgba(23,36,28,.14)}
.audiencia .tambien-dentro>ul.audiencia-notas{display:block}
.audiencia-botones{display:grid;gap:10px;max-width:620px;margin:22px auto 0}
.audiencia-botones .btn-borde{border-color:var(--pasto);color:var(--pasto)}
.audiencia-botones .btn-borde:hover{background:var(--pasto);color:#fff}

/* Cómo conseguirla */
.conseguir{background:var(--pasto);color:#fff;padding:52px var(--margen) 56px}
.conseguir h2{color:var(--arete)}
.conseguir-sub{text-align:center;max-width:32rem;margin:12px auto 0;font-size:1.1875rem}
.dos{max-width:1100px;margin:28px auto 0;display:grid;gap:14px}
.tarjeta{background:var(--leche);color:var(--tinta);border-radius:16px;padding:24px 18px 18px;text-align:center;display:flex;flex-direction:column;gap:14px;scroll-margin-top:12px}
.tarjeta h3{font:700 3rem/1 var(--titulo);text-transform:uppercase;color:var(--pasto)}
.pasos{display:grid;gap:12px;counter-reset:paso;flex:1;align-content:start}
.pasos li{counter-increment:paso}
.pasos li::before{content:counter(paso);display:block;width:38px;height:38px;margin:0 auto 4px;border-radius:50%;background:var(--pasto);color:#fff;font:700 1.5rem/38px var(--titulo)}
.fina{font-size:1rem;line-height:1.35;color:var(--suave)}
.abajo{display:grid;gap:8px}
.dorado{font-size:.9375rem;display:flex;align-items:center;justify-content:center;gap:6px;color:var(--suave)}
.dorado svg{width:18px;height:18px}

/* Sus datos */
.datos{background:var(--leche);padding:52px var(--margen) 56px}
.datos h2{color:var(--pasto)}
.datos-dentro{max-width:var(--ancho);margin:0 auto}
.datos-sub{text-align:center;max-width:32rem;margin:12px auto 0;font-size:1.1875rem}
.cuatro{display:grid;gap:10px;margin-top:24px}
.cuatro li{background:var(--cal);border-radius:14px;padding:18px;text-align:center}
.cuatro h3{font:700 2rem/1 var(--titulo);color:var(--pasto);margin-bottom:6px}
.claro{max-width:44rem;margin:24px auto 0;text-align:center}
.claro p+p{margin-top:10px}
.claro a{font-weight:700;display:inline-flex;align-items:center;min-height:48px}

/* Contacto */
.contacto{background:var(--arete);color:var(--arete-tinta);padding:52px var(--margen) 56px;text-align:center}
.contacto-dentro{max-width:980px;margin:0 auto}
.contacto-dos{display:grid;gap:28px;margin-top:14px}
.contacto p{max-width:30rem;margin:0 auto;font-size:1.1875rem}
.contacto .btn{max-width:440px;margin:18px auto 0}
.contacto h2{max-width:11em;margin:0 auto}
.contacto .correo{display:inline-flex;align-items:center;min-height:48px;font-weight:700;word-break:break-word}
.contacto p.correo-linea{margin-top:6px;font-size:1.0625rem}
.contacto .enlace-fb{vertical-align:middle}
.pasarla{padding-top:26px;border-top:3px solid rgba(28,27,4,.25);width:100%;max-width:440px;margin:0 auto}
.pasarla h3{font:700 2.5rem/1 var(--titulo)}
.contacto .pasarla .btn{margin-top:14px}

.pendiente{background:#fff;color:var(--arete-tinta);border:2px dashed var(--arete-tinta);padding:1px 6px;border-radius:6px;font-weight:700;font-size:.9375rem;line-height:1.5;-webkit-box-decoration-break:clone;box-decoration-break:clone}

/* Teléfono ancho: las tarjetas caben de dos en dos */
@media (min-width:600px){
  .audiencia-botones{grid-template-columns:1fr 1fr}
  .venta-botones{grid-template-columns:1fr 1fr}
  .tambien ul,.cuatro,.dos{grid-template-columns:1fr 1fr}
  .tarjeta{padding:28px 24px 22px}
  .abajo{min-height:5.25rem;align-content:start}
}

/* Tableta parada (768) */
@media (min-width:700px){
  body{font-size:1.1875rem}
  .arete{--w:440px;--cab:130px;margin:-10px auto 16px}
  .arete h1{font-size:5.25rem}

  .quien{padding:64px var(--margen) 68px}
  .quien-dentro{gap:20px}
  .quien h2{font-size:clamp(4rem,9.4vw,6.25rem)}
  .quien-texto{max-width:none;text-wrap:balance}
  .quien dl{grid-template-columns:repeat(3,minmax(0,1fr));gap:32px;margin-top:16px}
  .quien dd{text-wrap:pretty}

  .senal-foto img{height:44vw;max-height:420px}
  .senal-dentro{padding:28px var(--margen) 48px}
  .senal h2{font-size:clamp(4.5rem,10.4vw,6rem)}
  .senal p{max-width:40rem}

  .dia{padding:64px 0 44px}
  .dia-cab{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px 32px;align-items:center}
  .dia h2{grid-column:1/-1;font-size:clamp(5.5rem,12vw,7.5rem)}
  .dia-nota,.dia-seguir{margin-top:0}
  .horas{margin-top:30px}

  .banda-foto img{height:48vw}
  .banda-foto img[src*="parto.webp"],.banda-foto img[src*="salud.webp"]{object-position:50% 0}
  .banda h2{font-size:clamp(9rem,23vw,11rem)}
  .banda-cuerpo{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:32px;margin-top:18px}

  .tambien,.datos,.conseguir{padding-block:64px 68px}
  .tambien h2,.conseguir h2,.datos h2,.contacto h2{font-size:clamp(5rem,11.5vw,7.5rem)}

  .contacto{padding-block:64px 68px}
  /* Las dos columnas comparten renglones: texto, botón, correo. Así los botones quedan parejos, y la raya en el medio. */
  .contacto-dos{position:relative;grid-template-columns:1fr 1fr;grid-template-rows:auto auto auto;column-gap:80px;row-gap:0;margin-top:28px}
  .contacto-dos::before{content:"";position:absolute;left:50%;top:0;bottom:0;width:3px;margin-left:-1.5px;background:rgba(28,27,4,.25)}
  .contacto-dos>div{display:grid;grid-row:span 3;grid-template-rows:subgrid;justify-items:center;align-items:center}
  .pasarla{padding:0;border-top:0;max-width:none}
  .contacto .btn,.contacto .pasarla .btn{margin-top:16px;font-size:1.125rem;white-space:nowrap}
}

/* La foto de /vendedores es más alta: en la tableta no se come la pantalla */
@media (min-width:700px){
  .portada-foto[data-portada]{padding-top:28px}
  .portada-foto[data-portada]::before{aspect-ratio:1344/768}
  .portada-foto img[src*="vendedores.webp"]{aspect-ratio:16/9;object-fit:cover;object-position:50% 90%}
}

/* Tableta acostada (1024) y computadora */
@media (min-width:960px){
  .portada{padding-bottom:0;min-height:min(860px,calc(100vh - 38px))}
  .portada-foto{position:absolute;inset:0;height:100%;padding-top:0}
  .portada-foto img{height:100%;object-fit:cover;object-position:100% 40%}
  .portada-foto[data-portada]{padding-top:0}
  .portada-foto[data-portada]::before{content:none}
  .portada-foto[data-portada] img{position:static}
  .portada-foto::after{display:none}
  .arete{--w:490px;--cab:140px;margin:96px 0 48px max(var(--margen),calc((100vw - var(--ancho))/2))}
  .arete h1{font-size:5.75rem}

  .quien-texto{font-size:1.375rem}
  .quien dl{gap:56px;margin-top:20px}

  /* Sin señal y las cuatro bandas: foto a un lado y palabras al otro, para que nada se estire */
  .senal{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);min-height:500px}
  .senal-foto{order:2;position:relative}
  .senal-foto img{position:absolute;inset:0;height:100%;max-height:none}
  .senal-dentro{align-self:center;padding:56px 32px 56px max(var(--margen),calc((100vw - var(--ancho))/2))}
  .senal h2{font-size:clamp(5rem,8.4vw,7.5rem)}
  .senal p{margin-top:18px}

  .banda{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);min-height:540px;padding-bottom:0}
  .banda-par{grid-template-columns:minmax(0,5fr) minmax(0,6fr)}
  .banda-foto{position:relative}
  .banda-foto img{position:absolute;inset:0;height:100%;max-height:none}
  .banda-dentro{padding:0 max(var(--margen),calc((100vw - var(--ancho))/2)) 52px 48px;align-self:start}
  .banda h2{z-index:2;display:block;width:max-content;margin:0 0 0 -96px;padding:.1em .14em 0 .14em;font-size:clamp(8rem,12.6vw,11rem);border-radius:0 0 12px 0}
  .banda-cuerpo{grid-template-columns:1fr;gap:14px;margin-top:10px}
  /* La foto va a la derecha en una banda sí y otra no */
  .banda-par .banda-foto{order:2}
  .banda-par .banda-dentro{padding:0 48px 52px max(var(--margen),calc((100vw - var(--ancho))/2))}
  .banda-par h2{margin:0 -96px 0 auto;border-radius:0 0 0 12px}

  /* El alambre cruza toda la banda */
  .alambre{justify-content:space-between;overflow:hidden;background:linear-gradient(#a9b9ae,#a9b9ae) 0 16px/100% 3px no-repeat}
  .alambre li::before{content:none}
  .tambien ul{grid-template-columns:repeat(4,1fr)}
  .contacto-dos{column-gap:128px}
}

/* Tableta acostada: arete más chico, para que no tape la vaca */
@media (min-width:960px) and (max-width:1199px){
  .portada{min-height:0}
  .arete{--w:400px;--cab:116px;margin-top:84px;margin-bottom:36px}
  .arete h1{font-size:4.75rem}
}

/* En la computadora la foto va a un lado y se corta por los lados. Preñez va en espejo, para que la palabra no tape la cabeza */
@media (min-width:960px){
  .portada-foto img[src*="vendedores.webp"]{object-position:100% 85%}
  .senal-foto img{object-position:0 50%}
  .banda-foto img[src*="parto.webp"]{object-position:15% 50%;transform:scaleX(-1)}
  .banda-foto img[src*="salud.webp"]{object-position:0 50%}
  .banda-foto img[src*="plan.webp"]{object-position:100% 50%}
}
/* Con más ancho caben la cabeza y la ubre */
@media (min-width:1200px){
  .banda-foto img[src*="parto.webp"]{object-position:37% 50%}
  .banda-foto img[src*="salud.webp"]{object-position:10% 50%}
}
/* Salud tiene más texto: su foto no llega hasta abajo y la nota de la etiqueta va debajo de ella */
@media (min-width:960px) and (max-width:1699px){
  .banda-amarilla{position:relative;min-height:calc(39vw + 110px)}
  .banda-amarilla .banda-foto{align-self:start}
  .banda-amarilla .banda-foto img{position:static;height:auto;aspect-ratio:7/5}
  .banda-amarilla .manda{position:absolute;left:max(var(--margen),calc((100vw - var(--ancho))/2));width:calc(54.5% - 2*var(--margen));bottom:30px;margin:0;padding:0;border:0}
}

/* Leche: el chorro va a un lado y las vacas al otro, y a la foto hay que verla casi entera. Hasta 1999 px va arriba, a todo lo ancho */
@media (min-width:960px) and (max-width:1999px){
  .banda-ancha{display:block;min-height:0;padding-bottom:44px}
  .banda-ancha .banda-foto img{position:static;height:min(48vw,max(540px,36vw));object-position:50% 30%}
  .banda-ancha .banda-dentro{padding:0 max(var(--margen),calc((100vw - var(--ancho))/2))}
  .banda-ancha h2{display:inline-block;width:auto;margin:-.42em 0 0 -.16em;padding:.08em .16em 0;font-size:clamp(9rem,23vw,11rem);border-radius:0 12px 0 0}
  .banda-ancha .banda-cuerpo{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:32px;margin-top:18px}
}
/* Desde 2000 cabe al lado, si la banda no pasa del alto del texto */
@media (min-width:2000px){
  .banda-ancha{min-height:0}
  .banda-ancha .banda-foto img{object-position:70% 50%}
  .banda-ancha .banda-dentro{padding-bottom:28px}
}

/* Cada foto de los juegos con su recorte y sin que el título tape una cabeza. Se midió ancho por ancho */
@media (min-width:960px) and (max-width:1199px){
  .banda-foto img[src*="plan-girolando-holstein-potrero"]{object-position:5% 50%}
  .banda-foto img[src*="plan-holstein-potrero"]{object-position:60% 50%}
  .banda-foto img[src*="plan-jersey-potrero"]{object-position:50% 50%}
  .banda-foto img[src*="prenez-jersey-becerro"]{object-position:0% 50%}
  .senal-foto img[src*="sombra-gyr-sombra"]{object-position:15% 50%}
  .senal-foto img[src*="sombra-holstein-sombra"]{object-position:80% 50%}
  .senal-foto img[src*="sombra-roja-jersey-sombra"]{object-position:10% 50%}
}
@media (min-width:960px) and (max-width:1999px){
  .banda-foto img[src*="leche-girolando-tarro"]{object-position:50% 10%}
  .banda-foto img[src*="leche-gyr-balde"]{object-position:50% 20%}
  .banda-foto img[src*="leche-holstein-balde-tarro"]{object-position:50% 20%}
  .banda-foto img[src*="leche-jersey-balde-tarro"]{object-position:50% 40%}
}
@media (min-width:960px){
  .banda-foto img[src*="plan-holstein-roja-bebedero"]{object-position:85% 50%}
  .banda-foto img[src*="prenez-girolando-becerro"]{object-position:80% 50%}
  .banda-foto img[src*="prenez-holstein-prenada"]{object-position:15% 50%}
  .banda-foto img[src*="prenez-holstein-roja-becerra"]{object-position:35% 50%}
  .banda-foto img[src*="salud-gyr-comedero"]{object-position:35% 50%}
  .banda-foto img[src*="salud-holstein-roja-comedero"]{object-position:55% 50%}
  .banda-foto img[src*="salud-holstein-veterinario"]{object-position:15% 50%}
  .banda-foto img[src*="salud-pardo-suizo-mano"]{object-position:50% 50%}
}
@media (min-width:1200px) and (max-width:1299px){
  .senal-foto img[src*="sombra-holstein-sombra"]{object-position:95% 50%}
}
@media (min-width:1200px) and (max-width:1399px){
  .senal-foto img[src*="sombra-roja-jersey-sombra"]{object-position:0% 50%}
}
@media (min-width:1200px) and (max-width:1599px){
  .banda-foto img[src*="plan-holstein-potrero"]{object-position:95% 50%}
  .banda-foto img[src*="plan-jersey-potrero"]{object-position:10% 50%}
  .senal-foto img[src*="sombra-gyr-sombra"]{object-position:0% 50%}
}
@media (min-width:1200px){
  .banda-foto img[src*="plan-girolando-holstein-potrero"]{object-position:50% 50%}
  .banda-foto img[src*="prenez-jersey-becerro"]{object-position:20% 50%}
}
@media (min-width:1300px) and (max-width:1399px){
  .senal-foto img[src*="sombra-holstein-sombra"]{object-position:50% 50%}
}
@media (min-width:1400px) and (max-width:1599px){
  .senal-foto img[src*="sombra-holstein-sombra"]{object-position:50% 50%}
  .senal-foto img[src*="sombra-roja-jersey-sombra"]{object-position:35% 50%}
}
@media (min-width:1600px){
  .banda-foto img[src*="plan-holstein-potrero"]{object-position:0% 50%}
  .banda-foto img[src*="plan-jersey-potrero"]{object-position:45% 50%}
  .senal-foto img[src*="sombra-gyr-sombra"]{object-position:50% 50%}
  .senal-foto img[src*="sombra-holstein-sombra"]{object-position:50% 50%}
  .senal-foto img[src*="sombra-roja-jersey-sombra"]{object-position:50% 50%}
}
@media (min-width:2000px){
  .banda-foto img[src*="leche-girolando-tarro"]{object-position:50% 20%}
  .banda-foto img[src*="leche-gyr-balde"]{object-position:50% 30%}
  .banda-foto img[src*="leche-holstein-balde-tarro"]{object-position:60% 30%}
  .banda-foto img[src*="leche-jersey-balde-tarro"]{object-position:50% 50%}
}
@media (min-width:960px){
  .banda-foto img[src*="salud-gyr-comedero"],.banda-foto img[src*="plan-holstein-potrero"]{transform:scaleX(-1)}
}
/* La de arriba en la computadora: el arete tapa la izquierda, por eso van en espejo con la cabeza a la derecha. En las pantallas anchas se corta arriba o abajo */
@media (min-width:960px){
  .portada-foto picture:has(source[srcset*="portada-ancha-holstein-vaca"]) img,.portada-foto picture:has(source[srcset*="portada-ancha-jersey-vaca"]) img{object-position:100% 70%}
  .portada-foto picture:has(source[srcset*="portada-ancha-gyr-toro"]) img,.portada-foto picture:has(source[srcset*="portada-ancha-holstein-toro"]) img,.portada-foto picture:has(source[srcset*="portada-ancha-girolando-vaca"]) img{object-position:100% 30%}
}

/* El día entero se ve de una vez */
@media (min-width:1200px){
  .cuatro{grid-template-columns:repeat(4,1fr)}
  .dia-seguir{display:none}
  .horas{grid-auto-flow:row;grid-auto-columns:auto;grid-template-columns:repeat(5,minmax(0,1fr));max-width:calc(var(--ancho) + 2*var(--margen));margin-inline:auto;overflow:visible;scroll-snap-type:none;padding-bottom:0}
  .pantalla img{max-width:100%}
}
@media (prefers-reduced-motion:no-preference){
  /* Lo único que se mueve solo: el arete se asienta al abrir, como colgado. */
  .arete{animation:colgar 1.5s cubic-bezier(.3,.7,.3,1) both}
  @keyframes colgar{0%{transform:rotate(-5deg)}35%{transform:rotate(2.4deg)}65%{transform:rotate(-1deg)}100%{transform:none}}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}