/* Estilos de Mamás Del Amor · Plaza Mariposa
   Colores principales: se cambian en :root */
:root{
  --fondo:#FBF7F1; --papel:#FFFFFF; --texto:#2A2733; --suave:#5A5563;
  --ciruela:#5B3A6E; --ciruela-osc:#462B56; --verde:#2E6249; --linea:#E6DED3;
  --marcador:#FFF1A8; --marcador-borde:#C9A400; --nota:#E8F1FA; --nota-borde:#2F6FA7;
  --e-conf:#6B6B6B; --e-com:#2F5E8C; --e-mar:#8A5A00; --e-ok:#2E6249;
  --radio:14px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--fondo);color:var(--texto);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans",Arial,sans-serif;
  font-size:1.0625rem;line-height:1.6}
h1,h2,h3{font-family:Georgia,"Noto Serif","Times New Roman",serif;line-height:1.25;color:var(--ciruela-osc);margin:0 0 .5em}
h1{font-size:2rem} h2{font-size:1.6rem} h3{font-size:1.2rem}
p{margin:0 0 1em}
a{color:var(--ciruela)}
img{max-width:100%;height:auto;display:block}
:focus-visible{outline:3px solid var(--ciruela);outline-offset:3px;border-radius:6px}
.saltar{position:absolute;left:-999px;top:0;background:var(--ciruela);color:#fff;padding:.75rem 1rem;z-index:20}
.saltar:focus{left:0}
.envoltura{max-width:1120px;margin:0 auto;padding:0 1rem}

/* Marcadores de información pendiente: cuando se complete el dato, borrar la etiqueta <span class="pend"> */
.pend{background:var(--marcador);border:1px dashed var(--marcador-borde);border-radius:4px;padding:0 .3em;font-weight:600;color:#3D3300}

/* Mariposas decorativas: estáticas, detrás del contenido */
.deco{position:relative;overflow:hidden}
.mariposas{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:0}
.mariposas svg{position:absolute;opacity:.28}
.deco>.envoltura{position:relative;z-index:1}
.solo-grande{display:none}

/* Encabezado y menú */
.encabezado{background:var(--papel);border-bottom:1px solid var(--linea);position:relative;z-index:5}
.barra{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:64px}
.marca{display:flex;align-items:center;gap:.5rem;text-decoration:none;color:var(--ciruela-osc);font-family:Georgia,"Noto Serif",serif;font-size:1.25rem;font-weight:700}
.marca svg{width:34px;height:26px;fill:var(--ciruela)}
.boton-menu{display:none;min-height:48px;min-width:48px;padding:.5rem 1rem;border:2px solid var(--ciruela);background:#fff;color:var(--ciruela);border-radius:999px;font:inherit;font-weight:600}
.js .boton-menu{display:inline-block}
.menu ul{list-style:none;margin:0;padding:.5rem 0 1rem;display:flex;flex-direction:column}
.menu a{display:block;padding:.8rem .25rem;min-height:48px;text-decoration:none;color:var(--texto);font-weight:600;border-bottom:1px solid var(--linea)}
.menu a[aria-current]{color:var(--ciruela)}
.js .menu{display:none}
.js .menu.abierto{display:block}

/* Botones */
.boton{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:.7rem 1.3rem;border-radius:999px;font-weight:700;text-decoration:none;border:2px solid var(--ciruela);font:inherit;font-weight:700;cursor:pointer}
.boton.principal{background:var(--ciruela);color:#fff}
.boton.secundario{background:#fff;color:var(--ciruela)}
.acciones{display:flex;flex-direction:column;gap:.75rem;margin:1.25rem 0 0}

/* Secciones */
section{padding:2.5rem 0}
.etiqueta-seccion{display:inline-block;font-size:.8rem;letter-spacing:.06em;text-transform:uppercase;color:var(--verde);font-weight:700;margin-bottom:.4rem}
.portada{padding:2.25rem 0 2.5rem}
.lema{font-size:1.2rem;color:var(--suave);font-style:italic}
.tarjeta{background:var(--papel);border:1px solid var(--linea);border-radius:var(--radio);padding:1.25rem;margin:0 0 1rem}
.grilla{display:grid;gap:1rem}
.cita{font-family:Georgia,"Noto Serif",serif;font-size:1.25rem;color:var(--ciruela-osc);border-left:4px solid var(--verde);padding-left:1rem;margin:1.5rem 0}
.foto-ref{border-radius:var(--radio);overflow:hidden;background:#E9E4DA;border:1px solid var(--linea)}
.foto-ref figcaption{font-size:.9rem;color:var(--suave);padding:.6rem .9rem;background:#fff}
.separador{border:0;border-top:1px solid var(--linea);margin:0}

/* Plano interactivo */
.leyenda{display:flex;gap:.6rem;align-items:flex-start;background:#fff;border:1px solid var(--linea);border-radius:10px;padding:.75rem 1rem;margin:0 0 1rem;font-size:.97rem}
.leyenda .pin-muestra{flex:0 0 auto;width:32px;height:32px;border-radius:50%;background:var(--ciruela);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;border:3px solid #fff;box-shadow:0 0 0 2px var(--ciruela)}
.plano{position:relative;border-radius:var(--radio);overflow:hidden;background:#DCE6D5;border:1px solid var(--linea)}
.plano img{width:100%}
.pin{position:absolute;transform:translate(-50%,-50%);width:40px;height:40px;border-radius:50%;
  background:var(--ciruela);color:#fff;font-weight:800;font-size:1rem;display:flex;align-items:center;justify-content:center;
  text-decoration:none;border:3px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.45)}
.pin::after{content:"";position:absolute;top:-6px;right:-6px;bottom:-6px;left:-6px;border-radius:50%}
.pin.activo{background:#fff;color:var(--ciruela);box-shadow:0 0 0 4px var(--ciruela)}
.plano-error{display:none;padding:1rem;background:#fff;border:1px solid var(--linea);border-radius:var(--radio)}
.sin-plano .plano{display:none}
.sin-plano .plano-error{display:block}

.sectores{list-style:none;margin:0;padding:0}
.sector{background:#fff;border:1px solid var(--linea);border-radius:12px;margin:0 0 .6rem}
.sector summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:.75rem;min-height:56px;padding:.6rem .9rem;font-weight:700}
.sector summary::-webkit-details-marker{display:none}
.sector summary .num{flex:0 0 auto;width:32px;height:32px;border-radius:50%;background:var(--ciruela);color:#fff;display:flex;align-items:center;justify-content:center;font-size:.95rem}
.sector summary .tit{flex:1}
.sector summary .flecha{display:inline-block;font-size:1.1rem;color:var(--suave)}
.sector[open] summary .flecha{transform:rotate(180deg)}
.sector[open]{border-color:var(--ciruela);box-shadow:0 0 0 1px var(--ciruela)}
.ficha{padding:0 1rem 1rem}
.ficha dl{display:grid;grid-template-columns:auto 1fr;gap:.25rem .75rem;margin:.75rem 0 0;font-size:.95rem}
.ficha dt{color:var(--suave)} .ficha dd{margin:0}

/* Estados */
.estado{display:inline-flex;align-items:center;gap:.35rem;font-size:.85rem;font-weight:700;padding:.15rem .6rem;border-radius:999px;border:2px solid currentColor;background:#fff;white-space:nowrap}
.estado.conf{color:var(--e-conf);border-style:dashed}
.estado.com{color:var(--e-com)}
.estado.mar{color:var(--e-mar)}
.estado.ok{color:#fff;background:var(--e-ok);border-color:var(--e-ok)}
.leyenda-estados{display:flex;flex-wrap:wrap;gap:.5rem;margin:.5rem 0 1rem}

/* Etapas */
.etapas{list-style:none;margin:0;padding:0;border-left:3px solid var(--linea);margin-left:.6rem}
.etapas li{position:relative;padding:0 0 1.25rem 1.25rem}
.etapas li::before{content:"";position:absolute;left:-11px;top:.35rem;width:16px;height:16px;border-radius:50%;background:#fff;border:3px dashed var(--e-conf)}
.etapas h3{margin:0 0 .25rem}

/* Novedades */
.novedad{background:#fff;border:2px dashed var(--linea);border-radius:var(--radio);padding:1rem}
.novedad .foto-vacia{aspect-ratio:4/3;background:#EFEAE2;border-radius:10px;display:flex;align-items:center;justify-content:center;color:var(--suave);text-align:center;padding:1rem;margin:0 0 .75rem}
.fecha{font-size:.9rem;color:var(--suave);font-weight:600}

/* Colaborar */
.datos-banco{background:#fff;border:2px solid var(--verde);border-radius:var(--radio);padding:1.25rem}
.dato{display:flex;flex-direction:column;gap:.15rem;padding:.6rem 0;border-bottom:1px solid var(--linea)}
.dato:last-of-type{border-bottom:0}
.dato span:first-child{font-size:.9rem;color:var(--suave)}
.dato span:last-child{font-weight:700;font-size:1.1rem;word-break:break-word}
.formas{columns:1;padding-left:1.2rem}
.copiado{font-weight:700;color:var(--verde);min-height:1.5em;margin:.5rem 0 0}

.pie{background:#2A2733;color:#F3EFEA;padding:2rem 0;font-size:.95rem}
.pie a{color:#F3EFEA}
.pie h2{color:#fff;font-size:1.2rem}

/* Tableta */
@media (min-width:600px){
  h1{font-size:2.5rem}
  .acciones{flex-direction:row;flex-wrap:wrap}
  .grilla.dos{grid-template-columns:1fr 1fr}
  .formas{columns:2}
  .solo-grande{display:block}
}
/* Computadora */
@media (min-width:960px){
  body{font-size:1.125rem}
  .js .boton-menu{display:none}
  .js .menu,.menu{display:block}
  .menu ul{flex-direction:row;gap:.25rem;padding:0}
  .menu a{border:0;padding:.8rem .7rem;border-radius:8px}
  .menu a:hover{background:#F2ECF5}
  .grilla.tres{grid-template-columns:repeat(3,1fr)}
  .portada-grilla{display:grid;grid-template-columns:1.05fr 1fr;gap:2.5rem;align-items:center}
  .explorar{display:grid;grid-template-columns:1.45fr 1fr;gap:1.5rem;align-items:start}
  .explorar .lista-col{max-height:640px;overflow:auto;padding-right:.25rem}
  .pin{width:36px;height:36px}
}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}
@media print{.mariposas,.boton-menu,.saltar{display:none}}

.oculto{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.texto{max-width:760px}
.nota-chica{font-size:.92rem;color:var(--suave)}
.fotos{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:.5rem;margin:.75rem 0}
.fotos img{border-radius:8px;width:100%;aspect-ratio:4/3;object-fit:cover;background:#EFEAE2}
.novedad-real{background:#fff;border:1px solid var(--linea);border-radius:var(--radio);padding:1rem;margin:0 0 1rem}
.contacto-botones{display:flex;flex-direction:column;gap:.6rem;margin-top:.75rem}
.portada-imagen{display:none;margin:0}
.siguiente{margin-top:2rem;padding-top:1.25rem;border-top:1px solid var(--linea)}
.pie ul{list-style:none;padding:0;margin:0 0 1rem;display:flex;flex-wrap:wrap;gap:.25rem 1.25rem}
.pie a{display:inline-block;padding:.4rem 0;min-height:44px}
@media (min-width:600px){.contacto-botones{flex-direction:row;flex-wrap:wrap}}
@media (min-width:960px){.portada-imagen{display:block}}

/* Mariposas de los costados: viven en el margen libre a izquierda y derecha.
   En celulares no se muestran, porque no hay margen libre sin tapar texto. */
.mariposas .lado{display:none}
@media (min-width:600px){
  .envoltura{padding-left:3.25rem;padding-right:3.25rem}
  .mariposas .lado{display:block}
  .mariposas .izq{left:8px;left:max(8px,calc((100% - 1120px)/2 - var(--w) - 24px))}
  .mariposas .der{right:8px;right:max(8px,calc((100% - 1120px)/2 - var(--w) - 24px))}
}

/* --- Agregados para WordPress --- */
.novedad-real h2{font-size:1.3rem;margin:.25rem 0 .5rem}
.novedad-real h2 a{text-decoration:none;color:var(--ciruela-osc)}
.novedad-real .relacion{font-size:.95rem;color:var(--suave)}
.paginacion{display:flex;flex-wrap:wrap;gap:.5rem;margin:1.5rem 0}
.paginacion a,.paginacion span{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:0 .75rem;border:1px solid var(--linea);border-radius:8px;background:#fff;text-decoration:none}
.paginacion .current{background:var(--ciruela);color:#fff;border-color:var(--ciruela)}
.aviso-admin{background:#FFF1A8;border:1px dashed #C9A400;padding:.75rem 1rem;border-radius:8px;margin:1rem}
.formas{margin:0 0 1rem}
