/* EN GENERAL */


*{
    box-sizing:border-box;
    margin:0;
    padding:0;
}

body{
    font-family:'Inter',sans-serif;
    background-color: #f2f2f2;
    color:#408645;
    line-height: 1.6;
}

img{
    max-width: 100%;
    display: block;
    border-radius:100%;
}

a{
    text-decoration: none;
    color: #408645;
}

header{
    background:#afd9a3
    ;padding: 3rem 1.5rem;
    text-align: center;
}

header h1{
    font-family: 'Playfair Display',serif;
    color:white;
    font-size: 5em;
    margin-bottom: 0.5rem;
    line-height: 1em;
}
header p{
    color:white;
    font-size: 1em;
    margin:auto
}

main{
    max-width:1100px;
    margin:auto;
    padding:3rem 1.5rem;
}
footer{
    text-align:center;
    padding:2rem;
    font-size:.85rem;
    color:#777;
}

.circle-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  
}

/* BOTONCITOS */

.grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
    gap:2rem;
}

.card{
    background:#ffffff87;
    padding:2rem;
    border-radius:16px;
    box-shadow:0 10px 20px rgba(103, 125, 99, 0.05);
    transition:.3s;
}

.card:hover{
    transform:translateY(-4px);
}

.ethical-image {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 4rem 0;
}

.ethical-circle {
  width: 260px;
  height: 260px;
  border-radius: 50%;
  overflow: hidden;
  position: relative;
}

/* todas las imágenes */
.ethical-circle img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* animales rotando */
.animal {
  opacity: 0;
  animation: animalCycle 15s infinite;
}

.gallina { animation-delay: 0s; }
.cordero { animation-delay: 3s; }
.vaca    { animation-delay: 6s; }
.pato    { animation-delay: 9s; }
.pescado { animation-delay: 12s; }

/* carne única */
.meat {
  opacity: 0;
  z-index: 2;
  transition: opacity 0.3s ease;
}

/* hover: se apagan animales, aparece carne */
.ethical-circle:hover .animal {
  opacity: 0;
  animation-play-state: paused;
}

.ethical-circle:hover .meat {
  opacity: 1;
}

/* animación animales */
@keyframes animalCycle {
  0%   { opacity: 0; }
  10%  { opacity: 1; }
  30%  { opacity: 1; }
  40%  { opacity: 0; }
  100% { opacity: 0; }
}



/* PRESENTACIION */

.section{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:2rem;
    margin-bottom:4rem;
    align-items:center;
}

.gallery img{
    height:180px;
    object-fit:cover;
    width:100%;
    border-radius: 0%;
    margin-bottom: 1em;
}

.gallery a{
    line-height: 1.4em;
}
.columnas{
    column-count: 2;
}

.acto{
    display: flex;
    flex-direction: column;
    gap:2rem;
    margin-bottom:4rem;
    align-items:center;
}

.acto img{
    border-radius: 0%;
}

.acto h2{
    font-family: 'Playfair Display',serif;
    font-size: 2em;
    line-height: 1.2em;
}

.acto p{
    margin-bottom: 2em;
}


/* RESPONSIVE */
@media(max-width:768px){
.section{
    grid-template-columns:1fr;
    }

header h1{
    font-size:1.9rem;
    }

.acto h2{
    margin-left: 0px;
}

.columnas{
    column-count: 1;
}
}