/* Segundo paso de la guía: elegir el área y entender su alcance. */
.guide-result[data-mode="areas"],.guide-result[data-mode="area"]{align-items:stretch}
.guide-result[data-mode="areas"]{min-height:0}
.guide-result[data-mode="areas"] h3{font-size:27px;line-height:1.3;margin-bottom:19px}
.area-picker{display:grid;gap:9px;margin-bottom:2px}
.area-picker button{position:relative;display:flex;align-items:center;flex-wrap:wrap;gap:0 8px;width:100%;min-height:52px;padding:13px 34px 13px 14px;text-align:left;border:1px solid #a6c8d8;border-radius:8px;background:#fff;color:#184661;font-size:16px;line-height:1.5;font-weight:600;transition:background .2s,border-color .2s}
.area-picker button:hover{background:#e5f5f1;border-color:#52a98e}
.area-picker button>span{position:absolute;right:13px;top:13px;font-size:20px;color:#43856f}
.area-picker small{display:block;width:100%;font-size:13px;line-height:1.7;font-weight:400;color:#4c7185}
.area-picker button:focus-visible,.area-back:focus-visible,.area-comparison summary:focus-visible{outline:3px solid #298f78;outline-offset:4px}
.area-back{display:flex;align-items:center;align-self:flex-start;gap:9px;width:fit-content;min-height:44px;padding:5px 0;margin:0 0 15px;color:#3e6e83;font-size:14px;text-align:left;font-weight:600;order:-1}
.area-back:hover{color:#1b6f55}
.area-offer{padding:19px 0 18px;margin:1px 0 15px;border-top:1px solid #a8cdbc;border-bottom:1px solid #a8cdbc}
.guide-result .area-price-label{font-size:15px;color:#276a51;font-weight:600;margin-bottom:6px}
.area-price{display:block;color:#175b43;font-size:clamp(27px,2.6vw,37px);line-height:1.25;letter-spacing:-.04em;font-weight:600;overflow-wrap:anywhere}
.area-price-unit{display:block;margin-top:5px;color:#376f59;font-size:14px;line-height:1.7}
.guide-result .area-plan{font-size:14px;color:#235e47;font-weight:600;margin-top:15px;line-height:1.7}
.guide-result .area-conditions{font-size:14px;color:#385f70;line-height:1.8;margin-top:6px}
.guide-result .area-price-note{font-size:13px;color:#476c7e;line-height:1.8;margin-top:9px}
.area-offer[data-priced="false"] .area-price{font-size:27px;line-height:1.4}
.area-comparison{margin-top:15px;border-top:1px solid #b7d5c8;padding-top:1px}
.area-comparison summary{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:46px;font-size:14px;color:#2a7256;line-height:1.6;font-weight:600}
.area-comparison summary>span{font-size:21px;font-weight:400}
.area-comparison[open] summary>span{transform:rotate(45deg)}
.area-comparison label{display:block;font-size:13px;font-weight:600;line-height:1.7;color:#355e70;margin:9px 0 7px}
.area-comparison input{display:block;width:100%;min-height:46px;border:1px solid #accdbd;border-radius:6px;background:white;color:#1d4e3a;font-family:inherit;font-size:16px;padding:10px 11px}
.area-comparison input:focus-visible{outline:2px solid #268465;outline-offset:3px}
.area-comparison input::placeholder{font-size:13px;color:#557b6d;opacity:1}
.area-comparison output{display:block;min-height:46px;padding:12px;margin-top:13px;border-radius:6px;background:#dfeee7;font-size:14px;line-height:1.8;color:#255e46}
.area-comparison output[data-level="fourfold"]{background:#ccebdc;border:1px solid #7dbf9b;font-weight:600}
.guide-result .area-comparison>p{font-size:12px;line-height:1.8;color:#527485;margin-top:9px;margin-bottom:4px}
.guide-result[data-mode="area"] #guide-result-title{font-size:27px;line-height:1.3}
.guide-result[data-mode="area"] .check-list{margin:17px 0 21px}
.guide-result[data-mode="area"] .guide-service-link{align-self:stretch}
@media(min-width:881px) and (max-width:1190px){
  .guide-result[data-mode="areas"],.guide-result[data-mode="area"]{display:flex;min-height:0}
  .guide-result[data-mode="areas"] .area-picker{grid-template-columns:repeat(2,minmax(0,1fr));width:100%}
  .guide-result[data-mode="areas"] .area-picker button:last-child{grid-column:1/-1}
  .area-offer{width:100%;max-width:none}
  .guide-result[data-mode="area"] .guide-contact{align-self:stretch;margin-top:0}
}
@media(max-width:880px){
  .area-picker{grid-template-columns:repeat(2,minmax(0,1fr));gap:11px}
  .area-picker button:last-child{grid-column:1/-1}
  .area-picker button{min-height:59px}
  .area-price{font-size:37px}
  .area-price-note,.guide-result .area-price-note{font-size:14px}
  .area-back{margin-bottom:13px;font-size:15px}
  .area-offer{margin-bottom:2px}
}
@media(max-width:600px){
  .area-picker{grid-template-columns:1fr;gap:9px}
  .area-picker button:last-child{grid-column:auto}
  .area-picker button{min-height:54px;font-size:16px;padding-top:13px;padding-bottom:13px}
  .guide-result[data-mode="areas"] h3,.guide-result[data-mode="area"] #guide-result-title{font-size:27px}
  .area-price{font-size:36px}
  .area-offer[data-priced="false"] .area-price{font-size:26px}
  .guide-result .area-conditions,.guide-result .area-plan{font-size:14px}
  .guide-result .area-price-note{font-size:13px}
  .area-comparison summary{font-size:14px;min-height:48px}
}
@media(prefers-reduced-motion:reduce){.area-picker button{transition:none}}
.guide-result[data-mode="areas"],.guide-result[data-mode="area"]{scroll-margin-top:110px}
@media(max-width:600px){.guide-result[data-mode="areas"],.guide-result[data-mode="area"]{scroll-margin-top:95px}}