/* V4 — edición premium de Servicios: una imagen completa por tarjeta y exploración por categoría */
html{scroll-padding-top:100px}
.services{padding-top:104px;padding-bottom:106px}
.service-tabs{margin-bottom:34px}
.service-tabs a{box-shadow:0 4px 16px rgba(23,32,7,.035)}
.v3-services-list{gap:23px}
.v4-service-card{
  display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);
  gap:clamp(22px,4vw,66px);align-items:center;
  border:1px solid rgba(148,192,47,.62);
  border-radius:29px;padding:clamp(15px,2.3vw,25px);
  background:rgba(255,255,255,.93);
  box-shadow:0 22px 55px rgba(25,34,9,.055);
  min-height:345px;transition:box-shadow .25s ease, transform .25s ease;
  scroll-margin-top:108px;
}
.v4-service-card:hover{transform:translateY(-2px);box-shadow:0 24px 58px rgba(20,30,9,.09)}
.v4-service-media{
  position:relative;min-width:0;aspect-ratio:1200/748;
  border-radius:21px;background:#edeee8;
  overflow:hidden;border:1px solid rgba(140,176,53,.2);
  display:grid;place-items:center;
}
.v4-service-media img{display:block;width:100%;height:100%;object-fit:contain;object-position:center;transition:transform .45s ease}
.v4-service-card:hover .v4-service-media img{transform:scale(1.018)}
.v4-media-index{position:absolute;bottom:14px;left:14px;background:rgba(255,255,255,.93);color:#273016;font-weight:800;font-size:.60rem;letter-spacing:.13em;border-radius:999px;padding:8px 12px;backdrop-filter:blur(10px)}
.v4-service-info{min-width:0;padding:12px 3px 12px 0;display:flex;flex-direction:column;align-items:flex-start}
.v4-service-info .service-id{font-size:.73rem;letter-spacing:.17em;font-weight:800;color:#747c67}
.v4-service-info .service-id b{color:#78a900}
.v4-service-info h3{font-size:clamp(2.8rem,4.3vw,4.65rem);line-height:.88;letter-spacing:-.01em;margin:17px 0 20px}
.v4-service-info p{font-size:1.04rem;line-height:1.65;color:#4d5148;max-width:430px;margin:0 0 24px}
.v4-service-action{display:flex;align-items:center;gap:16px;border:none;background:transparent;padding:0;font-size:.81rem;letter-spacing:.07em;font-weight:900;color:#161b15;cursor:pointer}
.v4-service-action span{display:grid;place-items:center;background:#c0f318;border-radius:50%;width:47px;height:47px;font-size:1.5rem;transition:transform .2s ease,background .2s}
.v4-service-action:hover span{transform:translateX(4px);background:#d2fb44}
.v4-service-info small{font-size:.76rem;color:#777c70;margin-top:17px}
.v4-extra-services{display:flex;align-items:center;justify-content:space-between;gap:25px;padding:28px 34px;margin-top:26px;border:1px solid #dce7c4;border-radius:28px;background:#fbfbf8}
.v4-extra-kicker{font-size:.73rem;letter-spacing:.17em;font-weight:800;color:#6b7d49}
.v4-extra-services h3{font-family:'Barlow Condensed',Impact,sans-serif;font-weight:900;line-height:.89;font-size:clamp(1.8rem,3vw,3rem);margin:8px 0 0}
.v4-extra-services h3 em{font-style:normal;background:#d6f888;padding:0 .08em}
.v4-extra-links{min-width:min(100%,410px);display:flex;flex-direction:column;gap:10px}
.v4-extra-links button{background:#f3f5ed;color:#21261d;border:1px solid #e0e8d0;padding:13px 15px;font-size:.8rem;font-weight:900;letter-spacing:.04em;border-radius:14px;display:flex;align-items:center;justify-content:space-between;cursor:pointer;text-align:left}
.v4-extra-links button b{color:#668e00;font-size:1.1rem}
.v4-extra-links button:hover{background:#eaffc6}
.v4-modal[hidden]{display:none!important}
.v4-modal{position:fixed;inset:0;z-index:10000;display:flex;align-items:center;justify-content:center;padding:16px}
.v4-modal-backdrop{position:absolute;inset:0;background:rgba(11,15,9,.78);backdrop-filter:blur(9px)}
.v4-modal-panel{position:relative;z-index:1;width:min(1130px,100%);max-height:min(92dvh,900px);background:#fbfaf6 url('../img/papel_editorial_v3.webp') repeat;border:1px solid #b8e774;border-radius:27px;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 30px 100px rgba(0,0,0,.35);color:#1e2219}
.v4-modal-header{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:18px 25px;border-bottom:1px solid #e1e6d7}
.v4-modal-header span{font-size:.7rem;color:#6c7d4e;font-weight:800;letter-spacing:.16em}
.v4-modal-header h3{font-family:'Barlow Condensed',Impact,sans-serif;font-weight:900;font-size:1.75rem;line-height:.95;margin:7px 0 0}
.v4-close{flex-shrink:0;border:1px solid #cdd4bf;border-radius:100px;padding:11px 15px;background:#fff;cursor:pointer;font-weight:800;font-size:.78rem;letter-spacing:.05em}
.v4-modal-main{padding:23px;display:grid;grid-template-columns:minmax(0,1.48fr) minmax(260px,.75fr);gap:24px;overflow-y:auto}
.v4-featured{min-width:0}
.v4-featured>img{display:block;width:100%;height:auto;aspect-ratio:1200 / 748;object-fit:contain;border:1px solid #c6dc91;border-radius:20px;background:#ecece5}
.v4-image-footer{display:flex;justify-content:space-between;gap:12px;margin:12px 2px;font-weight:800;letter-spacing:.05em;font-size:.78rem;color:#5a6350}
.v4-modal-side{display:flex;flex-direction:column;align-items:stretch;gap:15px}
.v4-label{font-size:.67rem;letter-spacing:.18em;font-weight:800;color:#759c13}
.v4-modal-side>p{font-size:.96rem;line-height:1.58;color:#424c39;margin:0}
.v4-thumbs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}
.v4-thumbs button{border:2px solid #e6e9dd;background:white;border-radius:13px;padding:5px;cursor:pointer;overflow:hidden;min-width:0;position:relative}
.v4-thumbs button[aria-pressed=true]{border-color:#a5d521;background:#f3fbd7}
.v4-thumbs button img{width:100%;height:auto;display:block;border-radius:8px;aspect-ratio:1200/748;object-fit:contain}
.v4-thumbs button span{display:block;font-size:.65rem;font-weight:800;margin:5px 0 2px}
.v4-modal-nav{display:flex;gap:10px}
.v4-modal-nav button{flex:1;min-width:0;background:white;border:1px solid #d7ddca;border-radius:12px;padding:12px 7px;font-size:.70rem;font-weight:800;cursor:pointer}
.v4-modal-nav button:hover{background:#e9ffb6}
.v4-watch-link,.v4-quote{display:block;text-align:center;text-decoration:none;padding:13px;border-radius:13px;font-weight:900;font-size:.76rem;letter-spacing:.04em}
.v4-watch-link{border:1px solid #a0be55;background:white}
.v4-watch-link[hidden]{display:none}
.v4-quote{background:#c0f318}
.v4-modal-side small{font-size:.69rem;color:#72776e;line-height:1.5}
@media(max-width:900px){
 .v4-service-card{grid-template-columns:minmax(0,1fr) minmax(0,.89fr);gap:22px}
 .v4-service-info h3{font-size:clamp(2.55rem,4vw,3.9rem)}
 .v4-service-info p{font-size:.96rem}
}
@media(max-width:700px){
 .v4-service-card{grid-template-columns:minmax(0,1fr);gap:0;padding:12px;border-radius:24px}
 .v4-service-media{border-radius:17px}
 .v4-service-info{padding:24px 13px 21px}
 .v4-service-info h3{font-size:clamp(2.7rem,10.5vw,4.1rem);line-height:.89;margin:15px 0 15px}
 .v4-service-info p{margin-bottom:17px}
 .v4-extra-services{padding:22px;align-items:flex-start;flex-direction:column;gap:23px}
 .v4-extra-links{width:100%}
 .v4-modal{padding:9px}
 .v4-modal-panel{max-height:95dvh;border-radius:22px}
 .v4-modal-header{padding:13px 15px}
 .v4-modal-header h3{font-size:1.45rem}
 .v4-modal-header span{font-size:.59rem}
 .v4-close{font-size:.66rem;padding:10px 12px}
 .v4-modal-main{grid-template-columns:1fr;gap:14px;padding:13px}
 .v4-modal-side{gap:12px}
 .v4-modal-side>p{font-size:.82rem}
 .v4-modal-nav button{font-size:.67rem}
 .v4-media-index{font-size:.54rem;bottom:9px;left:9px}
}
@media(max-width:370px){
 .v4-service-info h3{font-size:2.65rem}
 .v4-modal-header h3{font-size:1.3rem}
 .v4-modal-header span{letter-spacing:.04em}
}
@media(prefers-reduced-motion:reduce){.v4-service-card,.v4-service-media img,.v4-service-action span{transition:none!important}}
/* prevent actual content clipping on very narrow phones */
@media (max-width:660px){
 .centered-mast{min-width:0;width:100%}
 .centered-heading{font-size:clamp(2.65rem,8.6vw,4.2rem);max-width:100%;line-height:.94}
 .centered-mast>p{width:100%;max-width:100%}
 .v4-service-info h3{font-size:clamp(2.10rem,8.9vw,3.9rem);line-height:.94;overflow-wrap:normal}
}
@media (max-width:380px){
 .centered-heading{font-size:clamp(2.45rem,8vw,2.85rem)}
 .v4-service-info h3{font-size:clamp(2rem,8.2vw,2.5rem)}
}
@media(max-width:380px){.v4-service-info h3{font-size:1.8rem}}
