@import url("portal-v6.css");

/* Portal v7: lanzador compacto y totalmente presionable. */
.tools-section{
  padding-top:64px;
  padding-bottom:70px;
}
.section-heading{
  margin-bottom:24px;
}
.section-heading h2{
  max-width:none;
}
.tools-grid{
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:16px;
}
.tool-card,
.tool-card-community{
  position:relative;
  min-width:0;
  min-height:230px;
  padding:24px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  color:var(--navy);
  background:#fff;
  border:1px solid var(--border);
  border-radius:22px;
  box-shadow:0 10px 26px rgb(18 50 74 / 9%);
  text-align:left;
  text-decoration:none;
  cursor:pointer;
  appearance:none;
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}
.tool-card:hover{
  transform:translateY(-4px);
  border-color:rgb(11 92 173 / 32%);
  box-shadow:0 17px 38px rgb(18 50 74 / 14%);
}
.tool-card:active{
  transform:translateY(1px) scale(.985);
  box-shadow:0 5px 14px rgb(18 50 74 / 10%);
}
.tool-card:focus-visible{
  outline:3px solid rgb(11 92 173 / 34%);
  outline-offset:4px;
}
.tool-card:before{
  height:5px;
}
.tool-card .tool-icon{
  width:58px;
  height:58px;
  margin-bottom:20px;
  border-radius:17px;
}
.tool-card .pharmacy-icon:before{width:32px;height:11px}
.tool-card .pharmacy-icon:after{width:11px;height:32px}
.tool-card .calendar-icon:before{inset:14px 9px 9px}
.tool-card .calendar-icon:after{width:23px;height:23px;font-size:.85rem}
.tool-card .phone-icon span{font-size:1.65rem}
.tool-card h3,
.tool-card-community h3{
  margin:0 34px 8px 0;
  color:var(--navy);
  font-size:clamp(1.25rem,1.7vw,1.6rem);
  line-height:1.08;
}
.tool-card>p:not(.tool-label){
  margin:0;
  color:var(--muted);
  font-size:.92rem;
  line-height:1.35;
}
.card-arrow{
  position:absolute;
  right:19px;
  bottom:19px;
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  color:var(--blue);
  background:var(--blue-soft);
  border-radius:50%;
  font-size:1.2rem;
  font-weight:900;
  transition:transform .18s ease;
}
.tool-card:hover .card-arrow{transform:translateX(3px)}
.tool-card-pharmacy .card-arrow{color:var(--green);background:var(--green-soft)}
.tool-card-san-juan:before{background:#087F73}
.tool-card-san-juan .card-arrow{color:#087F73;background:#E7F8F3}
.tool-card-urgencias:before{background:#D62828}
.tool-card-urgencias .card-arrow{color:#B91C1C;background:#FDECEC}
.ambulance-icon{color:#B91C1C;background:#FDECEC;border:2px solid rgb(214 40 40 / 14%)}
.ambulance-icon span{font-size:1.75rem;line-height:1}
.tool-card-community:before{background:var(--orange)}
.tool-card-community:after{display:none}
.tool-card-community .tool-icon{background:#FFF0E7}
.tool-card-community .card-arrow{color:#B54C12;background:#FFF0E7}

@media(max-width:1050px){
  .tools-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media(max-width:700px){
  .hero{
    min-height:500px;
    padding-top:32px;
    padding-bottom:36px;
  }
  .hero-copy{max-width:100%}
  .hero h1{
    max-width:10ch;
    font-size:clamp(2.7rem,13vw,4.1rem);
  }
  .hero-lead{
    max-width:34ch;
    font-size:1rem;
    line-height:1.5;
  }
  .hero-actions{margin-top:22px}
  .hero-actions .button-secondary{display:none}
  .principles{display:none}
  .hero-art{
    top:59%;
    right:-60%;
    bottom:-18%;
    left:18%;
  }
  .tools-section{
    padding-top:42px;
    padding-bottom:52px;
  }
  .section-heading{
    gap:6px;
    margin-bottom:18px;
  }
  .section-heading .eyebrow{margin-bottom:5px}
  .section-heading h2{font-size:clamp(2rem,9vw,2.7rem)}
  .section-heading>p{font-size:.92rem}
  .tools-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px;
  }
  .tool-card,
  .tool-card-community{
    min-height:188px;
    padding:17px 15px;
    border-radius:18px;
  }
  .tool-card .tool-icon{
    width:48px;
    height:48px;
    margin-bottom:15px;
    border-radius:14px;
  }
  .tool-card .pharmacy-icon:before{width:28px;height:9px}
  .tool-card .pharmacy-icon:after{width:9px;height:28px}
  .tool-card h3,
  .tool-card-community h3{
    margin-right:0;
    margin-bottom:6px;
    font-size:clamp(1.02rem,5vw,1.25rem);
  }
  .tool-card>p:not(.tool-label){
    max-width:12ch;
    font-size:.78rem;
    line-height:1.3;
  }
  .card-arrow{
    right:13px;
    bottom:13px;
    width:32px;
    height:32px;
    font-size:1rem;
  }
}

@media(max-width:370px){
  .hero{min-height:475px}
  .tools-grid{gap:9px}
  .tool-card,
  .tool-card-community{
    min-height:180px;
    padding:15px 13px;
  }
}

@media(prefers-reduced-motion:reduce){
  .tool-card,
  .card-arrow{transition:none}
}