:root { --ink:#002b70; --blue:#003893; --muted:#667185; --paper:#f8f7f2; --cream:#efede4; --yellow:#fcd116; --line:#d9d9d2; --white:#fff; --red:#ce1126; }
* { box-sizing:border-box; }
img { max-width:100%; }
.card-photo { display:block; width:100%; height:150px; object-fit:cover; border-radius:4px; margin-bottom:15px; background:var(--cream); }
.card-photo[hidden] { display:none; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:Manrope, Arial, sans-serif; }
.container { width:min(1120px, calc(100% - 48px)); margin:0 auto; }
.topline { height:9px; background:linear-gradient(90deg, var(--yellow) 0 50%, var(--blue) 50% 75%, var(--red) 75%); }
.site-header { min-height:92px; display:flex; align-items:center; justify-content:space-between; gap:24px; }
.brand { color:var(--ink); text-decoration:none; display:inline-flex; gap:10px; align-items:center; font-size:14px; line-height:1.02; letter-spacing:-.5px; font-weight:700; }
.brand strong { font-weight:800; font-size:16px; }.brand-mark { width:28px; height:28px; border-radius:50%; display:grid; place-items:center; background:var(--ink); color:var(--yellow); font-size:25px; line-height:1; font-family:Arial; }
nav { display:flex; gap:28px; } nav a, .admin-trigger { color:var(--ink); background:none; text-decoration:none; font-size:13px; font-weight:700; border:0; cursor:pointer; font-family:inherit; } nav a:hover, .text-link:hover { text-decoration:underline; }
.admin-trigger { border:1px solid var(--ink); padding:10px 14px; border-radius:5px; }.admin-trigger:hover { background:var(--ink); color:white; }
.hero { padding:80px 0 110px; min-height:530px; position:relative; }.hero-copy { max-width:730px; }.eyebrow { margin:0 0 18px; color:#4c5e79; font-family:"DM Mono",monospace; font-size:11px; font-weight:500; letter-spacing:1.1px; }.eyebrow span { display:inline-block; width:8px; height:8px; margin-right:8px; background:var(--yellow); border:1px solid var(--ink); }
h1,h2,h3,p { margin-top:0; }h1,h2 { letter-spacing:-2.7px; line-height:.98; } h1 { font-size:clamp(48px, 7vw, 84px); margin-bottom:27px; } h1 em { color:var(--red); font-family:Georgia,serif; font-weight:400; } .hero-text { max-width:565px; color:var(--muted); font-size:17px; line-height:1.7; }.hero-actions { display:flex; align-items:center; gap:26px; margin-top:34px; }.button { display:inline-flex; align-items:center; justify-content:center; gap:14px; border:0; border-radius:5px; padding:15px 19px; font:700 14px Manrope,sans-serif; text-decoration:none; cursor:pointer; }.button-primary { color:var(--ink); background:var(--yellow); }.button-primary:hover { background:#ffca00; }.text-link { color:var(--ink); font-size:13px; font-weight:800; text-decoration:none; }.hero-note { position:absolute; right:24px; bottom:56px; display:flex; max-width:319px; gap:14px; padding:18px; border-top:3px solid var(--red); background:white; box-shadow:0 9px 28px #1a31501c; }.note-icon { background:var(--red); color:var(--white); border-radius:50%; flex:0 0 23px; height:23px; display:grid; place-items:center; font-family:Georgia,serif; font-weight:bold; }.hero-note p { color:var(--muted); font-size:12px; line-height:1.55; margin-bottom:0; }.hero-note .note-title { color:var(--ink); font-size:13px; font-weight:800; margin-bottom:4px; }
.help-types { padding:64px 0 94px; }.section-heading h2 { font-size:clamp(34px,4vw,50px); margin-bottom:0; }.type-grid { margin-top:47px; display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--line); }.type-grid article { padding:27px 30px 10px 0; border-right:1px solid var(--line); min-height:190px; }.type-grid article+article { padding-left:30px; }.type-grid article:last-child { border-right:0; }.type-number { color:#8b94a2; font:12px "DM Mono",monospace; }.type-grid h3 { font-size:18px; letter-spacing:-.7px; margin:23px 0 10px; }.type-grid p { color:var(--muted); font-size:13px; line-height:1.65; max-width:267px; }
.directory-section { background:var(--blue); padding:80px 0 91px; color:white; }.directory-section .eyebrow { color:#ccd5e1; }.directory-section .eyebrow span { background:var(--yellow); }.section-intro { color:#c3cdda; margin:18px 0 0; font-size:14px; line-height:1.6; }.directory-top { display:flex; justify-content:space-between; align-items:end; gap:24px; }.result-count { color:#c3cdda; font:12px "DM Mono",monospace; white-space:nowrap; padding-bottom:6px; }.toolbar { margin:38px 0 28px; display:flex; justify-content:space-between; gap:18px; }.search-box { border-bottom:1px solid #718099; display:flex; align-items:center; gap:10px; width:340px; color:#d9e2ef; }.search-box span { font-size:25px; line-height:1; }.search-box input { padding:10px 0; flex:1; background:none; border:0; color:white; font:13px Manrope,sans-serif; outline:0; }.search-box input::placeholder { color:#aebaca; }.filters { display:flex; gap:8px; flex-wrap:wrap; }.filter { padding:8px 11px; color:#d5deeb; border:1px solid #596b86; background:transparent; border-radius:99px; font:12px Manrope,sans-serif; cursor:pointer; }.filter.active,.filter:hover { color:var(--ink); background:var(--yellow); border-color:var(--yellow); }.cards { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }.org-card { background:#fff; color:var(--ink); padding:22px; min-height:276px; display:flex; flex-direction:column; border-bottom:4px solid transparent; }.org-card:hover { transform:translateY(-3px); transition:.18s ease; border-color:var(--yellow); }.card-top { display:flex; align-items:center; justify-content:space-between; }.org-symbol { height:26px; width:26px; background:var(--ink); clip-path:polygon(45% 0,55% 0,55% 45%,100% 45%,100% 55%,55% 55%,55% 100%,45% 100%,45% 55%,0 55%,0 45%,45% 45%); }.verified { color:#39754f; font:10px "DM Mono",monospace; }.card-type { margin:22px 0 8px; color:#6b788a; text-transform:uppercase; font:10px "DM Mono",monospace; letter-spacing:.6px; }.org-card h3 { font-size:20px; letter-spacing:-.8px; margin-bottom:9px; }.card-description { color:#697588; font-size:12px; line-height:1.6; margin-bottom:20px; }.donate-link { margin-top:auto; color:var(--ink); text-decoration:none; border-top:1px solid #dce1e7; padding-top:14px; font-size:12px; font-weight:800; }.donate-link:hover { color:var(--red); }.empty-state { color:#d2dce9; text-align:center; padding:25px; }
.centers-section { padding:86px 0; background:var(--yellow); }.centers-heading { display:flex; justify-content:space-between; gap:24px; align-items:end; }.centers-section .section-intro { color:#3a4a64; max-width:525px; }.map-badge { padding:9px 12px; border:1px solid var(--ink); border-radius:99px; color:var(--ink); font:11px "DM Mono",monospace; white-space:nowrap; }.center-cards { margin-top:36px; display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }.center-card { background:var(--white); padding:21px; display:flex; flex-direction:column; min-height:267px; border-top:4px solid var(--red); box-shadow:0 7px 22px #002b7014; }.center-card-top { display:flex; justify-content:space-between; align-items:center; }.center-pin { width:29px; height:29px; display:grid; place-items:center; border-radius:50%; color:var(--white); background:var(--red); font-size:18px; }.center-card h3 { margin:22px 0 8px; font-size:19px; letter-spacing:-.7px; }.center-address,.center-items,.center-hours { color:#5e6c80; font-size:12px; line-height:1.55; margin:0 0 7px; }.center-items { color:#314a75; }.route-link { margin-top:auto; padding-top:14px; border-top:1px solid #dde3e9; color:var(--blue); font-size:12px; font-weight:800; text-decoration:none; }.route-link:hover { color:var(--red); }.centers-empty { text-align:center; color:#354567; padding:28px; }
.verify { padding:105px 0; display:grid; grid-template-columns:1.15fr 1fr; gap:95px; }.verify-title h2 { font-size:clamp(37px,4.2vw,56px); }.verify ol { list-style:none; padding:0; margin:0; }.verify li { display:flex; gap:20px; padding:19px 0; border-bottom:1px solid var(--line); }.verify li:first-child { border-top:1px solid var(--line); }.verify li span { font:13px "DM Mono",monospace; color:#b57c00; }.verify li p { margin:0; font-size:14px; line-height:1.65; color:var(--muted); }.verify li strong { color:var(--ink); }
footer { background:var(--cream); padding:51px 0; }.footer-inner { display:flex; justify-content:space-between; gap:35px; }.footer-admin { margin-top:38px; padding-top:26px; border-top:1px solid var(--line); display:flex; justify-content:center; }.footer-brand { margin-bottom:16px; }.footer-inner p { color:#697588; margin:0; font-size:12px; line-height:1.7; }.footer-note { max-width:270px; }
.admin-dialog { width:min(660px, calc(100% - 32px)); max-height:calc(100dvh - 48px); overflow-y:auto; overscroll-behavior:contain; border:0; padding:0; color:var(--ink); box-shadow:0 20px 70px #07162d61; }.admin-dialog::backdrop { background:#111c2bd1; }.dialog-header { display:flex; justify-content:space-between; align-items:start; padding:28px 30px 18px; border-bottom:1px solid var(--line); }.dialog-header .eyebrow { margin-bottom:9px; }.dialog-header h2 { font-size:32px; margin:0; }.close-dialog { font-size:32px; line-height:1; border:0; background:transparent; cursor:pointer; color:var(--ink); }.admin-warning { margin:20px 30px 0; padding:13px; background:#fff7d7; border-left:3px solid var(--yellow); color:#715b1c; font-size:12px; line-height:1.5; }.publish-form { padding:22px 30px; display:grid; grid-template-columns:1fr 1fr; gap:15px; }.publish-form label { display:grid; gap:6px; color:#41516a; font-size:11px; font-weight:800; }.publish-form .field-wide,.checkbox-label,.publish-form button,.form-error,.editing-banner { grid-column:1 / -1; }.publish-form small { color:#7b8798; font-size:10px; font-weight:600; }.publish-form input,.publish-form select,.publish-form textarea { width:100%; color:var(--ink); font:13px Manrope,sans-serif; border:1px solid #c9cfd7; border-radius:4px; background:white; padding:10px; }.publish-form textarea { min-height:78px; resize:vertical; }.checkbox-label { display:flex!important; align-items:center; gap:9px; }.checkbox-label input { width:auto; }.publish-form button { justify-self:start; }.manage-list { margin:0 30px 30px; border-top:1px solid var(--line); }.manage-list:empty { display:none; }.manage-item { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:12px 0; border-bottom:1px solid var(--line); font-size:12px; }.manage-item p { margin:0; }.manage-item span { color:#78859a; }.manage-actions { display:flex; gap:14px; flex-shrink:0; }.edit-item,.link-button { background:none; border:0; color:var(--blue); cursor:pointer; font:700 11px Manrope,sans-serif; text-decoration:underline; }.edit-item:hover,.link-button:hover { color:var(--ink); }.editing-banner { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:11px 13px; border-left:3px solid var(--blue); background:#eaf0fb; color:#2c4472; font-size:12px; }.editing-banner p { margin:0; }.delete-item,.admin-status button { background:none; border:0; color:#a23a31; cursor:pointer; font:700 11px Manrope,sans-serif; }.admin-status { margin:18px 30px 0; display:flex; justify-content:space-between; align-items:center; color:#526078; font:12px "DM Mono",monospace; }.form-error { min-height:16px; margin:0; color:#a23a31; font-size:12px; }
.form-success,.form-actions,.confirm-box { grid-column:1 / -1; }.form-success { margin:0; color:#2f6b45; font-size:12px; font-weight:700; }.form-success:empty { display:none; }.confirm-box { padding:14px; border:1px dashed var(--blue); border-radius:5px; background:#f2f6fd; }.confirm-box p { margin:0 0 12px; color:#41516a; font-size:12px; line-height:1.5; }.confirm-actions { display:flex; flex-wrap:wrap; gap:10px; }.button-ghost { color:var(--ink); background:transparent; border:1px solid var(--ink); }.button-ghost:hover { background:var(--ink); color:var(--white); }.confirm-actions button:disabled { cursor:progress; opacity:.65; }
.admin-divider { display:flex; align-items:center; gap:12px; margin:10px 30px 0; color:var(--blue); font:700 13px Manrope,sans-serif; }.admin-divider::before,.admin-divider::after { content:""; height:1px; background:var(--line); flex:1; }
/* Tablet: tres columnas es demasiado estrecho antes de los 1024 px. */
@media (max-width:1024px) {
  .cards,.center-cards { grid-template-columns:repeat(2,1fr); }
  .hero { padding:64px 0 96px; }
  .hero-note { position:static; max-width:none; margin-top:38px; }
  .verify { gap:48px; padding:84px 0; }
}

/* Móvil: la mayoría del tráfico. Una sola columna, sin desbordes y con áreas táctiles amplias. */
@media (max-width:750px) {
  .container { width:min(100% - 32px,1120px); }
  .site-header { flex-wrap:wrap; min-height:0; padding-top:18px; padding-bottom:6px; gap:14px; }
  nav { order:3; width:100%; gap:20px; overflow-x:auto; padding-bottom:12px; scrollbar-width:none; }
  nav::-webkit-scrollbar { display:none; }
  nav a { white-space:nowrap; padding:6px 0; }
  .hero { padding:44px 0 66px; min-height:0; }
  .hero-actions { align-items:stretch; flex-direction:column; gap:16px; }
  .hero-actions .button { width:100%; }
  .type-grid,.cards,.center-cards { grid-template-columns:1fr; }
  .type-grid article,.type-grid article+article { padding:24px 0; border-right:0; border-bottom:1px solid var(--line); min-height:0; }
  .type-grid p { max-width:none; }
  .directory-top,.toolbar,.footer-inner,.centers-heading { align-items:flex-start; flex-direction:column; }
  .toolbar,.search-box { width:100%; }
  .filter { padding:10px 14px; font-size:13px; }
  .org-card,.center-card { min-height:0; }
  .card-description,.center-address,.center-items { overflow-wrap:anywhere; }
  .verify { grid-template-columns:1fr; gap:35px; padding:64px 0; }
  .footer-inner { gap:26px; }
  .footer-admin { margin-top:30px; }
  .admin-trigger { width:100%; padding:14px; text-align:center; }
  /* El panel ocupa toda la pantalla: los formularios son largos y el teclado tapa media vista. */
  .admin-dialog { width:100%; max-width:none; height:100dvh; max-height:100dvh; margin:0; }
  .dialog-header { padding:24px 18px 18px; position:sticky; top:0; background:var(--white); z-index:1; }
  .dialog-header h2 { font-size:26px; }
  .publish-form { grid-template-columns:1fr; padding:22px 18px; }
  /* 16 px evita que iOS haga zoom automático al enfocar un campo. */
  .publish-form input,.publish-form select,.publish-form textarea { font-size:16px; padding:12px; }
  .publish-form button,.confirm-actions button { width:100%; justify-self:stretch; }
  .confirm-actions { flex-direction:column; }
  .manage-item { flex-direction:column; align-items:flex-start; gap:8px; }
  .manage-actions { gap:20px; }
  .edit-item,.delete-item { padding:6px 0; font-size:12px; }
  .admin-warning,.manage-list,.admin-status,.admin-divider { margin-left:18px; margin-right:18px; }
}

@media (max-width:420px) {
  .container { width:calc(100% - 24px); }
  h1 { letter-spacing:-1.6px; }
  h2 { letter-spacing:-1.4px; }
  .card-photo { height:180px; }
  .editing-banner { flex-direction:column; align-items:flex-start; gap:6px; }
}