/* Hero de Veracruz.cc y cuerpo editorial municipal de PAÍS MX. */
.beach-section{--accent:#24c5c0;--beach-pink:#24c5c0;--beach-orange:#eacb87;--beach-green:#89ded1;--beach-blue:#26a9d0;padding-top:0}.beach-section .title-mark{background:var(--beach-pink)}
.beach-hero{position:relative;overflow:hidden;isolation:isolate;background:#102432;color:#fff;margin:0 0 26px;min-height:480px}.beach-hero-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;z-index:-3;transition:transform 1s}.beach-hero:hover .beach-hero-photo{transform:scale(1.015)}.beach-hero-shade{position:absolute;inset:0;z-index:-2;background:linear-gradient(90deg,#021b2bf0 0%,#042b3bb0 38%,#082b3b30 72%,#08142665 100%)}
.beach-hero-inner{position:relative;max-width:1320px;margin:auto;display:grid;grid-template-columns:minmax(0,1fr) 240px;gap:26px 50px;padding:22px 5% 88px;align-items:center}.beach-breadcrumb{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:8px;margin:0;color:#edf2f5;font-size:11px;letter-spacing:.04em}.beach-breadcrumb a:hover{color:var(--accent)}.beach-hero-copy{max-width:740px;min-width:0}.beach-kicker{display:block;color:#7be2de;font-size:11px;font-weight:800;letter-spacing:.18em;text-transform:uppercase}.beach-hero h1{font:400 clamp(38px,5.4vw,76px)/1.06 MunicipalDisplay,'Arial Narrow',sans-serif;letter-spacing:-.025em;margin:16px 0 0;overflow-wrap:anywhere;text-shadow:0 3px 18px #0007}.beach-rule{display:block;width:90px;height:3px;margin:20px 0;background:linear-gradient(90deg,var(--beach-pink) 0 42%,var(--beach-orange) 42% 62%,var(--beach-green) 62% 80%,var(--beach-blue) 80%)}.beach-hero-copy p{font:17px/1.75 Georgia,serif;margin:0 0 18px;max-width:620px;color:#f0f6f7;text-shadow:0 1px 5px #0008}.beach-location{display:block;font-size:13px;color:#e3ebee;margin:0 0 18px}
.beach-button{display:inline-flex;align-items:center;gap:15px;padding:12px 18px;border:1px solid #24c5c070;border-radius:7px;background:#063841a8;color:#fff;font-size:13px;transition:background .2s,box-shadow .2s,transform .2s}.beach-button:hover{background:#087f8c;box-shadow:0 7px 25px #24c5c025;transform:translateY(-2px)}.beach-button svg{width:18px;height:18px}
.beach-seal{width:240px;justify-self:end;border:1px solid #24c5c085;background:linear-gradient(145deg,#081c2abd,#082f3ba6);backdrop-filter:blur(8px);border-radius:24px;padding:25px 20px;box-shadow:0 20px 55px #0004;transition:border-color .3s,transform .3s}.beach-seal:hover{border-color:#7be2de;transform:translateY(-3px)}.beach-official-mark{display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px}.beach-official-mark img{width:104px;height:104px;object-fit:contain}.beach-official-mark strong{font:500 30px/.92 Georgia,serif;color:#fff}.beach-municipal-mark{margin-top:22px;padding-top:20px;border-top:1px solid #24c5c040;display:flex;align-items:center;gap:14px}.beach-municipal-mark img{width:60px;height:68px;object-fit:contain}.beach-municipal-mark span{font-size:12px;line-height:1.6}.beach-wave{position:absolute;bottom:-1px;left:0;width:100%;height:65px;pointer-events:none}
.beach-states{scroll-margin-top:110px}.beach-state-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px}.beach-state-card{border-radius:10px;overflow:hidden;border:1px solid #24c5c040;background:#101e23;display:block;transition:transform .25s,border-color .25s,box-shadow .25s}.beach-state-card:nth-child(4n+2){border-color:#eacb8745}.beach-state-card:nth-child(4n+3){border-color:#89ded145}.beach-state-card:nth-child(4n+4){border-color:#26a9d045}.beach-state-card img{width:100%;height:105px;object-fit:cover;display:block;transition:transform .5s}.beach-state-card>div{position:relative;padding:15px 34px 15px 14px}.beach-state-card h3{font:600 18px/1.25 Georgia,serif;margin:0 0 7px;overflow-wrap:anywhere}.beach-state-card span{font-size:12px;color:#ccd5d8}.beach-state-card svg{position:absolute;width:16px;right:12px;bottom:17px;color:var(--accent)}.beach-state-card:hover{transform:translateY(-4px);border-color:var(--accent);box-shadow:0 10px 28px #24c5c015}.beach-state-card:hover img{transform:scale(1.04)}
.beach-browser{margin-top:38px;scroll-margin-top:110px}.beach-tools{display:flex;align-items:center;justify-content:space-between;gap:25px}.beach-tools h2{font:30px/1.2 Georgia,serif;margin:0}.beach-tools form{width:min(430px,100%)}.beach-tools label{font-size:12px;color:#becbd0}.beach-tools form>div{display:flex;align-items:center;border:1px solid #24c5c060;background:#0d1d25;border-radius:8px;overflow:hidden;padding-left:12px}.beach-tools svg{width:18px;flex-shrink:0;color:var(--accent)}.beach-tools input{min-width:0;flex:1;width:100%;background:transparent;border:0;box-shadow:none;padding:12px;color:#fff}.beach-tools button{flex-shrink:0;background:#087f8c;color:white;border:0;border-radius:0;font-size:12px;padding:14px 15px}.beach-tools button:hover{background:#0ba7b3}.beach-count{font-size:13px;color:#c1cdd2;margin:15px 0}.beach-browser [data-beach-notice]:empty{display:none}.beach-browser [aria-busy=true]{opacity:.55}.beach-town-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}.beach-town-card{border:1px solid #24c5c035;border-radius:12px;overflow:hidden;background:#101e23;transition:border-color .25s,transform .25s,box-shadow .25s}.beach-card-photo{height:145px;overflow:hidden}.beach-card-photo img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .5s}.beach-card-copy{padding:18px}.beach-card-copy h3{font:600 22px/1.2 Georgia,serif;margin:0 0 8px;overflow-wrap:anywhere}.beach-card-copy small{color:#80dfdf;font-size:11px}.beach-card-copy p{font:14px/1.6 Georgia,serif;color:#bfccd1;margin:12px 0 18px}.beach-card-copy b{display:flex;align-items:center;justify-content:space-between;font-size:12px;color:#7be2de}.beach-card-copy svg{width:17px}.beach-town-card:hover{transform:translateY(-4px);border-color:var(--accent);box-shadow:0 15px 28px #24c5c018}.beach-town-card:hover img{transform:scale(1.045)}.beach-pagination{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:28px}.beach-pagination a{display:flex;align-items:center;justify-content:center;min-width:42px;min-height:42px;border:1px solid #24c5c050;border-radius:7px}.beach-pagination a:hover,.beach-pagination a[aria-current=page]{background:#087f8c;border-color:#24c5c0}.beach-empty{color:#bbcbd2}.beach-section .municipality-chapter:hover{border-color:#24c5c050}.beach-section .municipality-chapter-number{color:var(--accent)}.beach-section .municipality-index a:hover{color:var(--accent)}
@media(max-width:1100px){.beach-state-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.beach-hero-inner{grid-template-columns:minmax(0,1fr) 200px;gap:22px 30px}.beach-seal{width:200px;padding:20px}.beach-official-mark img{width:86px;height:86px}.beach-official-mark strong{font-size:27px}.beach-town-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:800px){.beach-state-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.beach-town-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.beach-tools{align-items:stretch;flex-direction:column;gap:18px}.beach-tools form{width:100%}.beach-hero-inner{padding:20px 25px 78px;grid-template-columns:minmax(0,1fr) 145px;gap:24px}.beach-seal{width:145px;padding:18px 12px;border-radius:18px}.beach-official-mark img{width:68px;height:68px}.beach-official-mark strong{font-size:22px}.beach-municipal-mark{flex-direction:column;text-align:center}.beach-hero h1{font-size:clamp(34px,6vw,50px)}.beach-hero-copy p{font-size:15px;line-height:1.65}}
@media(max-width:560px){.beach-state-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.beach-state-card img{height:92px}.beach-state-card h3{font-size:17px}.beach-state-card>div{padding:13px 26px 13px 11px}.beach-state-card svg{right:9px;width:13px}.beach-state-card span{font-size:11px}.beach-hero-inner{grid-template-columns:minmax(0,1fr);padding:16px 18px 68px;gap:20px}.beach-hero{min-height:0}.beach-hero h1{font-size:clamp(34px,9.5vw,48px)}.beach-hero-shade{background:linear-gradient(90deg,#021b2bd6,#042b3b60),linear-gradient(0deg,#071014cc,transparent)}.beach-seal{width:100%;padding:12px 16px;display:flex;align-items:center;justify-content:space-between;gap:12px;border-radius:14px}.beach-official-mark{flex-direction:row;text-align:left;gap:12px}.beach-official-mark img{width:58px;height:58px}.beach-official-mark strong{font-size:21px}.beach-municipal-mark{margin:0;padding:0 0 0 13px;border-top:0;border-left:1px solid #24c5c040;flex-direction:row;gap:8px}.beach-municipal-mark img{width:40px;height:48px}.beach-municipal-mark span{font-size:10px;max-width:82px}.beach-kicker{font-size:10px}.beach-wave{height:40px}.beach-card-photo{height:115px}.beach-card-copy{padding:13px}.beach-card-copy h3{font-size:19px}.beach-card-copy p{font-size:13px}.beach-town-grid{gap:12px}.beach-tools h2{font-size:26px}}
@media(max-width:359px){.beach-town-grid{grid-template-columns:minmax(0,1fr)}.beach-municipal-mark span{display:none}.beach-button{font-size:12px;gap:10px;padding:11px 13px}}
@media(prefers-reduced-motion:reduce){.beach-section *{transition:none!important;scroll-behavior:auto!important}.beach-hero:hover .beach-hero-photo,.beach-town-card:hover,.beach-state-card:hover,.beach-seal:hover,.beach-button:hover,.beach-town-card:hover img,.beach-state-card:hover img{transform:none}}

.beach-section{--accent:#24c5c0}.beach-seal-icon svg{width:74px;height:74px;color:#eacb87}.beach-official-mark strong{font-family:MunicipalDisplay,sans-serif}.beach-official-mark small{color:#9cddd9;font-size:12px}.beach-section .municipality-shortcuts a:hover{border-color:var(--accent)}.beach-section .municipality-state-link{color:#7be2de}

@media(max-width:560px){.beach-seal .beach-official-mark{width:100%;justify-content:space-between;flex-wrap:wrap}.beach-seal-icon svg{width:50px;height:50px}.beach-official-mark small{max-width:130px;text-align:right}}

.beach-section{--red:#24c5c0}.beach-section .municipality-shortcuts a span{white-space:nowrap;flex-shrink:0}.beach-section .municipality-shortcuts a:after{background:var(--accent)}
@media(max-width:560px){.beach-seal .beach-official-mark{display:grid;grid-template-columns:50px minmax(0,1fr) auto;gap:10px;width:100%}.beach-official-mark small{max-width:90px;font-size:11px}.beach-official-mark strong{font-size:20px;text-align:center}}
