/* =========================================================
   AFECCIONES V12 — BORDERLESS EDITORIAL
   Rediseño visual únicamente. Mantiene filtros y datos del CRUD.
   ========================================================= */

.conditions.section{
  width:min(1440px,calc(100% - 48px)) !important;
  max-width:1440px !important;
  margin:0 auto !important;
  padding:clamp(5rem,8vw,8rem) 0 !important;
  position:relative !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  overflow:visible !important;
}

.conditions.section::before,
.conditions.section::after{
  display:none !important;
}

.conditions.section>*{
  width:100% !important;
  max-width:none !important;
}

/* ---------- Cabecera editorial ---------- */
.conditions-heading{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:clamp(3rem,8vw,8rem);
  margin:0 0 clamp(2.25rem,4vw,3.75rem);
  padding:0 0 clamp(2rem,4vw,3rem);
  border-bottom:1px solid color-mix(in srgb,var(--primary) 13%,transparent);
}

.conditions-heading-main{
  min-width:0;
}

.conditions-heading .eyebrow{
  margin-bottom:.75rem;
}

.conditions-heading h2{
  margin:0;
  color:var(--primary);
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(3.4rem,5.8vw,6rem);
  font-weight:500;
  letter-spacing:-.05em;
  line-height:.92;
}

.conditions-intro{
  width:min(100%,520px);
  margin:0 0 .35rem;
  color:#625b61;
  font-size:clamp(.96rem,1.1vw,1.08rem);
  line-height:1.75;
}

/* ---------- Filtros sin pills / sin cajas ---------- */
.conditions .condition-filters{
  display:flex !important;
  flex-wrap:wrap !important;
  align-items:center !important;
  gap:.35rem 1.5rem !important;
  margin:0 0 clamp(2.5rem,4vw,4rem) !important;
  padding:0 !important;
  border:0 !important;
  background:transparent !important;
}

.conditions .condition-filters button{
  position:relative;
  min-height:40px !important;
  padding:.45rem 0 !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  color:#776e75 !important;
  font-size:.7rem !important;
  font-weight:800 !important;
  letter-spacing:.09em !important;
  text-transform:uppercase !important;
  box-shadow:none !important;
  cursor:pointer;
}

.conditions .condition-filters button::after{
  content:"";
  position:absolute;
  left:0;
  right:100%;
  bottom:3px;
  height:1.5px;
  background:var(--accent);
  transition:right .25s ease;
}

.conditions .condition-filters button:hover,
.conditions .condition-filters button[aria-pressed="true"]{
  color:var(--primary) !important;
}

.conditions .condition-filters button[aria-pressed="true"]::after,
.conditions .condition-filters button:hover::after{
  right:0;
}

/* ---------- Grid de afecciones ---------- */
.conditions .condition-list{
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:clamp(4.5rem,7vw,7rem) clamp(2.5rem,4vw,4rem) !important;
  align-items:start !important;
  border:0 !important;
  background:transparent !important;
}

/* Sin card, sin borde, sin fondo, sin sombra */
.conditions .condition-item,
.conditions .condition-list article,
.conditions .condition-list article.condition-no-media{
  display:flex !important;
  flex-direction:column !important;
  gap:0 !important;
  min-width:0 !important;
  min-height:0 !important;
  margin:0 !important;
  padding:0 !important;
  overflow:visible !important;
  background:transparent !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  transform:none !important;
}

.conditions .condition-item[hidden]{
  display:none !important;
}

/* ---------- Imagen superior ---------- */
.conditions .condition-item .condition-media{
  order:0;
  position:relative;
  width:100% !important;
  height:auto !important;
  aspect-ratio:4/3 !important;
  margin:0 0 1.45rem !important;
  overflow:hidden !important;
  background:#eee8e3 !important;
  border:0 !important;
  border-radius:18px !important;
  box-shadow:none !important;
}

.conditions .condition-item .condition-media img{
  display:block !important;
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  object-position:center !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  transform:scale(1) !important;
  transition:transform .7s cubic-bezier(.2,.7,.2,1) !important;
}

.conditions .condition-item:hover .condition-media img{
  transform:scale(1.05) !important;
}

/* Placeholder cuando todavía no hay foto cargada */
.conditions .condition-item .condition-photo-placeholder{
  position:relative !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:100% !important;
  height:100% !important;
  flex-direction:column !important;
  gap:.35rem !important;
  background:
    linear-gradient(145deg,
      color-mix(in srgb,var(--paper) 70%,white),
      color-mix(in srgb,var(--secondary) 15%,white)
    ) !important;
  color:#756d73 !important;
  text-align:center !important;
}

.conditions .condition-item .condition-photo-placeholder::before{
  display:none !important;
}

.conditions .condition-item .condition-photo-placeholder>span{
  display:grid !important;
  place-items:center !important;
  width:44px !important;
  height:44px !important;
  margin:0 0 .3rem !important;
  border:1px solid color-mix(in srgb,var(--primary) 20%,transparent) !important;
  border-radius:50% !important;
  background:rgba(255,255,255,.38) !important;
  color:var(--accent) !important;
  font-family:Georgia,"Times New Roman",serif !important;
  font-size:1.55rem !important;
}

.conditions .condition-item .condition-photo-placeholder strong{
  font-family:Georgia,"Times New Roman",serif !important;
  font-size:1.05rem !important;
  font-weight:500 !important;
  letter-spacing:0 !important;
  text-transform:none !important;
}

.conditions .condition-item .condition-photo-placeholder small{
  font-size:.62rem !important;
  font-weight:800 !important;
  letter-spacing:.1em !important;
  text-transform:uppercase !important;
}

/* ---------- Contenido ---------- */
.condition-content{
  order:1;
  min-width:0;
}

.condition-meta{
  display:flex;
  align-items:center;
  gap:.9rem;
  margin:0 0 .85rem;
}

.condition-meta .condition-index{
  display:inline !important;
  width:auto !important;
  height:auto !important;
  padding:0 !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  color:var(--primary) !important;
  font-family:Georgia,"Times New Roman",serif !important;
  font-size:1.55rem !important;
  font-style:italic !important;
  font-weight:400 !important;
  line-height:1 !important;
}

.condition-rule{
  display:block;
  width:2rem;
  height:1px;
  flex:0 0 2rem;
  background:color-mix(in srgb,var(--primary) 25%,transparent);
}

.condition-tag{
  color:var(--accent);
  font-size:.68rem;
  font-weight:850;
  letter-spacing:.14em;
  line-height:1;
  text-transform:uppercase;
}

.conditions .condition-item h3{
  max-width:24ch;
  margin:0 !important;
  color:#302a30 !important;
  font-family:Georgia,"Times New Roman",serif !important;
  font-size:clamp(1.75rem,2.25vw,2.55rem) !important;
  font-weight:500 !important;
  letter-spacing:-.025em !important;
  line-height:1.08 !important;
  transition:color .25s ease !important;
}

.conditions .condition-item:hover h3{
  color:var(--accent) !important;
}

.condition-summary{
  max-width:58ch;
  margin:.9rem 0 0 !important;
  color:#6e666d !important;
  font-size:.9rem !important;
  line-height:1.7 !important;
}

/* ---------- Responsive ---------- */
@media(max-width:900px){
  .conditions.section{
    width:min(100% - 40px,1440px) !important;
  }

  .conditions-heading{
    align-items:flex-start;
    flex-direction:column;
    gap:1.25rem;
  }

  .conditions-intro{
    width:min(100%,640px);
  }

  .conditions .condition-list{
    gap:4rem 2rem !important;
  }
}

@media(max-width:700px){
  .conditions.section{
    width:calc(100% - 28px) !important;
    padding:4.5rem 0 !important;
  }

  .conditions-heading{
    margin-bottom:1.8rem;
    padding-bottom:1.8rem;
  }

  .conditions-heading h2{
    font-size:clamp(3rem,15vw,4.5rem);
  }

  .conditions .condition-filters{
    gap:.3rem 1.15rem !important;
    margin-bottom:2.3rem !important;
  }

  .conditions .condition-list{
    grid-template-columns:1fr !important;
    gap:4rem !important;
  }

  .conditions .condition-item .condition-media{
    margin-bottom:1.2rem !important;
    border-radius:15px !important;
  }

  .condition-meta{
    margin-bottom:.7rem;
  }

  .condition-meta .condition-index{
    font-size:1.4rem !important;
  }

  .conditions .condition-item h3{
    max-width:none;
    font-size:clamp(1.75rem,8vw,2.3rem) !important;
  }
}

@media(prefers-reduced-motion:reduce){
  .conditions .condition-item .condition-media img,
  .conditions .condition-item h3,
  .conditions .condition-filters button::after{
    transition:none !important;
  }

  .conditions .condition-item:hover .condition-media img{
    transform:none !important;
  }
}


/* =========================================================
   AFECCIONES V13 — ESCALA + RESPONSIVE
   SOLO modifica la sección #afecciones.
   Escritorio: 3 columnas
   Tablet: 2 columnas
   Móvil: 1 columna
   ========================================================= */

/* Escritorio amplio */
@media (min-width:1100px){

  .conditions.section{
    width:min(1500px,calc(100% - 56px)) !important;
    max-width:1500px !important;
  }

  .conditions .condition-list{
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    gap:clamp(4rem,5vw,5.5rem) clamp(1.7rem,2.5vw,2.6rem) !important;
  }

  .conditions .condition-item .condition-media{
    margin-bottom:1.2rem !important;
    border-radius:16px !important;
  }

  .condition-meta{
    gap:.72rem !important;
    margin-bottom:.72rem !important;
  }

  .condition-meta .condition-index{
    font-size:1.35rem !important;
  }

  .condition-rule{
    width:1.65rem !important;
    flex-basis:1.65rem !important;
  }

  .condition-tag{
    font-size:.62rem !important;
    letter-spacing:.13em !important;
  }

  .conditions .condition-item h3{
    max-width:22ch !important;
    font-size:clamp(1.55rem,1.72vw,2rem) !important;
    line-height:1.1 !important;
  }

  .condition-summary{
    max-width:48ch !important;
    margin-top:.72rem !important;
    font-size:.82rem !important;
    line-height:1.65 !important;
  }
}


/* Tablet / laptop pequeño */
@media (min-width:701px) and (max-width:1099px){

  .conditions.section{
    width:min(100% - 40px,1300px) !important;
  }

  .conditions .condition-list{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:4rem 2rem !important;
  }

  .conditions .condition-item h3{
    max-width:24ch !important;
    font-size:clamp(1.65rem,2.7vw,2.15rem) !important;
  }

  .condition-summary{
    font-size:.86rem !important;
  }
}


/* Móvil */
@media (max-width:700px){

  .conditions.section{
    width:calc(100% - 28px) !important;
    padding:4rem 0 !important;
  }

  .conditions-heading{
    gap:1rem !important;
    margin-bottom:1.55rem !important;
    padding-bottom:1.55rem !important;
  }

  .conditions-heading h2{
    font-size:clamp(3rem,14vw,4.2rem) !important;
  }

  .conditions-intro{
    max-width:34rem !important;
    font-size:.92rem !important;
    line-height:1.65 !important;
  }

  .conditions .condition-filters{
    gap:.25rem 1rem !important;
    margin-bottom:2rem !important;
  }

  .conditions .condition-filters button{
    min-height:36px !important;
    font-size:.65rem !important;
  }

  .conditions .condition-list{
    grid-template-columns:1fr !important;
    gap:3.4rem !important;
  }

  /*
   * En móvil mantenemos 4:3, pero evitamos que la imagen
   * se vuelva excesivamente alta en pantallas grandes.
   */
  .conditions .condition-item .condition-media{
    width:100% !important;
    max-height:420px !important;
    margin-bottom:1.05rem !important;
    border-radius:14px !important;
  }

  .condition-meta{
    gap:.65rem !important;
    margin-bottom:.65rem !important;
  }

  .condition-meta .condition-index{
    font-size:1.28rem !important;
  }

  .condition-rule{
    width:1.5rem !important;
    flex-basis:1.5rem !important;
  }

  .condition-tag{
    font-size:.62rem !important;
  }

  .conditions .condition-item h3{
    max-width:none !important;
    font-size:clamp(1.7rem,7.8vw,2.2rem) !important;
    line-height:1.1 !important;
  }

  .condition-summary{
    margin-top:.7rem !important;
    font-size:.84rem !important;
    line-height:1.62 !important;
  }
}


/* Móviles estrechos */
@media (max-width:430px){

  .conditions.section{
    width:calc(100% - 22px) !important;
  }

  .conditions .condition-list{
    gap:3rem !important;
  }

  .conditions .condition-item .condition-media{
    max-height:340px !important;
  }

  .conditions .condition-item h3{
    font-size:clamp(1.6rem,8vw,2rem) !important;
  }
}