/* ==========================================================================
   Un Mar de Redes — hoja de estilos del sitio
   Pegar completo en: Apariencia > Personalizar > CSS adicional
   (o en el CSS del tema si usas un plugin de tipo "Custom CSS")
   ========================================================================== */

/* Fuente Varela Round, cargada desde Google Fonts. Debe ir en la primera
   línea del CSS para que el navegador la acepte. */
@import url('https://fonts.googleapis.com/css2?family=Varela+Round&display=swap');

:root{
  --color-primary:#14324F;       /* azul marino: cabecera, footer, botones */
  --color-primary-light:#1F4A73;
  --color-secondary:#3E7CA6;     /* azul acero: decorativo, iconos, fondos grandes */
  --color-deep:#1B2245;          /* azul profundo casi índigo, del logo 3D: sombras, degradados */
  --color-sky:#9FC7E8;           /* azul cielo claro, del logo 3D: detalles y acentos suaves */
  --color-link:#1F5C82;          /* enlaces de texto (contraste AAA) */
  --color-accent:#6FB8B5;        /* verde-azulado: hover, foco, detalles */
  --color-bg:#FFFFFF;
  --color-bg-alt:#F2F6F8;
  --color-text:#1B2530;
  --color-text-muted:#4C5A66;
  --color-border:#DCE4E9;
  --radius:10px;
  --max-width:1140px;
  --font-base:'Varela Round',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}

/* Aplica Varela Round a TODO el sitio, incluida la cabecera y el menú que
   pone el propio tema (no solo al contenido dentro de .umr). El !important
   es necesario porque el tema fija su propia tipografía con bastante fuerza. */
body, .wp-site-blocks, .wp-site-blocks *{
  font-family:'Varela Round',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif !important;
}

/* WordPress.com (tema de bloques): oculta el título automático de la página
   solo en la portada (Inicio), porque ya tenemos nuestro propio título dentro
   del hero. En el resto de páginas (Aviso legal, Privacidad, Cookies) el
   título automático de WordPress se deja tal cual. */
.home .wp-block-post-title{ display:none; }

/* El título oculto de arriba deja un hueco vacío (su contenedor sigue
   ocupando espacio con su margen). Lo quitamos solo en la portada, para que
   el azul del hero quede pegado a la cabecera. */
.home .wp-site-blocks > .wp-block-group.is-layout-constrained,
.home .wp-site-blocks > main{
  margin-top:0 !important;
  margin-bottom:0 !important;
}

.umr{ box-sizing:border-box; }
.umr *, .umr *::before, .umr *::after{ box-sizing:inherit; }

.umr{
  font-family:var(--font-base);
  color:var(--color-text);
  background:var(--color-bg);
  line-height:1.6;
  font-size:16px;
}

.umr h1,.umr h2,.umr h3,.umr h4{
  color:var(--color-primary);
  line-height:1.25;
  margin:0 0 .6em;
  font-weight:700;
}
.umr h1{ font-size:clamp(2rem,4vw,2.9rem); }
.umr h2{ font-size:clamp(1.5rem,3vw,2.1rem); }
.umr h3{ font-size:1.25rem; }
.umr p{ margin:0 0 1em; color:var(--color-text); }
.umr a{ color:var(--color-link); text-decoration:underline; text-decoration-thickness:1px; }
.umr a:hover{ color:var(--color-primary); }

/* Foco visible obligatorio para accesibilidad (WCAG 2.4.7) */
.umr a:focus-visible,
.umr button:focus-visible,
.umr input:focus-visible,
.umr textarea:focus-visible{
  outline:3px solid var(--color-accent);
  outline-offset:2px;
  border-radius:4px;
}

.umr .contenedor{
  width:100%;
  max-width:var(--max-width);
  margin:0 auto;
  padding:0 1.25rem;
}

.umr .salto-enlace{
  position:absolute;
  left:-999px;
  top:auto;
}
.umr .salto-enlace:focus{
  left:1rem;
  top:1rem;
  z-index:1000;
  background:var(--color-primary);
  color:#fff;
  padding:.6rem 1rem;
  border-radius:var(--radius);
  text-decoration:none;
}

/* ---------- Cabecera ---------- */
.umr-cabecera{
  background:var(--color-primary);
  color:#fff;
  position:sticky;
  top:0;
  z-index:500;
}
.umr-cabecera .contenedor{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:.75rem 1.25rem;
  gap:1rem;
}
.umr-logo{ display:flex; align-items:center; gap:.6rem; text-decoration:none; }
.umr-logo img{ height:42px; width:auto; display:block; }
.umr-logo span{ color:#fff; font-weight:700; font-size:1.05rem; }
.umr-nav{ display:flex; align-items:center; gap:1.5rem; }
.umr-nav a{
  color:#fff;
  text-decoration:none;
  font-weight:600;
  font-size:.95rem;
  padding:.4rem 0;
  border-bottom:2px solid transparent;
}
.umr-nav a:hover, .umr-nav a:focus-visible{
  border-bottom-color:var(--color-accent);
}
.umr-nav a.umr-boton-nav{
  background:var(--color-accent);
  color:var(--color-primary);
  padding:.55rem 1.1rem;
  border-radius:var(--radius);
  border-bottom:none;
}
.umr-menu-toggle{
  display:none;
  background:none;
  border:2px solid #fff;
  color:#fff;
  border-radius:6px;
  padding:.4rem .6rem;
  font-size:1rem;
  cursor:pointer;
}

@media (max-width:820px){
  .umr-menu-toggle{ display:inline-block; }
  .umr-nav{
    position:absolute;
    top:100%;
    left:0;
    right:0;
    background:var(--color-primary);
    flex-direction:column;
    align-items:flex-start;
    padding:0 1.25rem;
    max-height:0;
    overflow:hidden;
    transition:max-height .25s ease;
  }
  .umr-nav.umr-nav-abierto{ max-height:320px; padding:1rem 1.25rem 1.5rem; }
  .umr-nav a{ width:100%; padding:.6rem 0; }
}

/* ---------- Hero ---------- */
.umr-hero{
  background:linear-gradient(135deg,var(--color-primary) 0%,var(--color-primary-light) 55%,var(--color-secondary) 85%,var(--color-sky) 100%);
  color:#fff;
  padding:5.5rem 0 6rem;
  position:relative;
  overflow:hidden;
}
.umr-hero .contenedor{ max-width:760px; text-align:center; position:relative; z-index:1; }
.umr-hero h1{ color:#fff; letter-spacing:-.01em; }
.umr-hero p.umr-intro{
  font-size:1.15rem;
  color:#E7F1F5;
  margin-bottom:2rem;
}
.umr-plataformas{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:.6rem;
  margin-top:1.75rem;
}
.umr-plataformas span{
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.4);
  color:#fff;
  font-size:.82rem;
  font-weight:600;
  padding:.35rem .85rem;
  border-radius:999px;
}
.umr-ola{
  position:absolute;
  left:0;
  bottom:-1px;
  width:100%;
  height:50px;
  display:block;
}
a.umr-boton{
  display:inline-block;
  background:var(--color-accent);
  color:var(--color-primary);
  font-weight:700;
  padding:.85rem 1.8rem;
  border-radius:var(--radius);
  text-decoration:none;
  border:2px solid transparent;
}
a.umr-boton:hover, a.umr-boton:focus-visible{
  background:#fff;
  color:var(--color-primary);
}
a.umr-boton-outline{
  background:transparent;
  color:#fff;
  border:2px solid #fff;
}
a.umr-boton-outline:hover, a.umr-boton-outline:focus-visible{
  background:#fff;
  color:var(--color-primary);
}

/* ---------- Franja de imagen (foto de ambiente, sin texto) ---------- */
.umr-franja-imagen{
  width:100%;
  height:280px;
  overflow:hidden;
}
.umr-franja-imagen img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
@media (max-width:700px){
  .umr-franja-imagen{ height:170px; }
}

/* ---------- Secciones generales ---------- */
.umr-seccion{ padding:4rem 0; position:relative; }
.umr-seccion-alt{ background:var(--color-bg-alt); }
.umr-cabecera-seccion{ max-width:640px; margin:0 auto 2.5rem; text-align:center; }
.umr-cabecera-seccion p{ color:var(--color-text-muted); }

/* Manchas de fondo decorativas, muy suaves, sin fotos: solo para romper el
   blanco plano en algunas secciones. */
.umr-seccion-decorada{ overflow:hidden; }
.umr-seccion-decorada::before{
  content:"";
  position:absolute;
  top:-90px;
  right:-90px;
  width:320px;
  height:320px;
  border-radius:50%;
  background:radial-gradient(circle, var(--color-sky) 0%, transparent 70%);
  opacity:.3;
  z-index:0;
  pointer-events:none;
}
.umr-seccion-decorada::after{
  content:"";
  position:absolute;
  bottom:-70px;
  left:-70px;
  width:220px;
  height:220px;
  border-radius:50%;
  background:radial-gradient(circle, var(--color-accent) 0%, transparent 70%);
  opacity:.18;
  z-index:0;
  pointer-events:none;
}
.umr-seccion-decorada > .contenedor{ position:relative; z-index:1; }

.umr-eyebrow{
  display:inline-block;
  text-transform:uppercase;
  letter-spacing:.14em;
  font-size:.78rem;
  font-weight:700;
  color:var(--color-secondary);
  margin-bottom:.6rem;
}

/* ---------- Servicios ---------- */
.umr-rejilla-servicios{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:1.25rem;
}
@media (min-width:960px){
  .umr-rejilla-servicios{ grid-template-columns:repeat(5,1fr); }
}
.umr-tarjeta{
  position:relative;
  background:#fff;
  border:1px solid var(--color-border);
  border-radius:var(--radius);
  padding:1.75rem;
  overflow:hidden;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.umr-tarjeta:hover{
  transform:translateY(-4px);
  box-shadow:0 16px 28px -12px rgba(20,50,79,.22);
  border-color:var(--color-secondary);
}
.umr-tarjeta .umr-numero{
  position:absolute;
  top:.5rem;
  right:1rem;
  font-size:2.4rem;
  font-weight:700;
  color:var(--color-sky);
  opacity:.35;
  line-height:1;
  z-index:0;
}
.umr-tarjeta .umr-icono{
  position:relative;
  z-index:1;
  width:48px;
  height:48px;
  border-radius:50%;
  background:var(--color-bg-alt);
  color:var(--color-secondary);
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:1rem;
  font-size:1.4rem;
}
.umr-tarjeta h3{ position:relative; z-index:1; margin-bottom:.5rem; }
.umr-tarjeta p{ position:relative; z-index:1; color:var(--color-text-muted); margin-bottom:0; font-size:.97rem; }

/* ---------- Sobre mí ---------- */
.umr-sobre-mi{
  display:grid;
  grid-template-columns:220px 1fr;
  gap:2.5rem;
  align-items:center;
}
.umr-foto{
  width:100%;
  aspect-ratio:1/1;
  border-radius:50%;
  background:var(--color-primary);
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--color-text-muted);
  font-size:.85rem;
  text-align:center;
  padding:.6rem;
  overflow:hidden;
}
.umr-foto img{
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:50%;
  display:block;
}
@media (max-width:700px){
  .umr-sobre-mi{ grid-template-columns:1fr; text-align:center; }
  .umr-foto{ max-width:200px; margin:0 auto; }
}

/* ---------- Contacto ---------- */
.umr-contacto-rejilla{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:1.5rem;
  max-width:820px;
  margin:0 auto;
}
.umr-contacto-item{
  background:#fff;
  border:1px solid var(--color-border);
  border-radius:var(--radius);
  padding:1.5rem;
  text-align:center;
}
.umr-contacto-item h3{ font-size:1rem; margin-bottom:.4rem; }
.umr-redes-sociales{
  display:flex;
  justify-content:center;
  gap:1rem;
  margin-top:2.5rem;
}
.umr-redes-sociales a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:44px;
  height:44px;
  border-radius:50%;
  background:var(--color-primary);
  color:#fff;
  text-decoration:none;
  font-weight:700;
}
.umr-redes-sociales a:hover, .umr-redes-sociales a:focus-visible{
  background:var(--color-secondary);
}

/* ---------- Pie de página ---------- */
.umr-pie{
  background:var(--color-primary);
  color:#DCE7ED;
  padding:2.5rem 0 1.5rem;
  font-size:.9rem;
}
.umr-pie a{ color:#fff; }
.umr-pie-enlaces{
  display:flex;
  flex-wrap:wrap;
  gap:1.25rem;
  justify-content:center;
  margin-bottom:1.25rem;
  list-style:none;
  padding:0;
}
.umr-pie-enlaces a{ text-decoration:none; }
.umr-pie-enlaces a:hover{ text-decoration:underline; }
.umr-pie-copyright{ text-align:center; color:#AFC4D2; }
.umr-boton-cookies-pref{
  background:none;
  border:none;
  color:#fff;
  text-decoration:underline;
  cursor:pointer;
  font-size:inherit;
  padding:0;
  font-family:inherit;
}

/* ---------- Páginas legales ---------- */
.umr-legal{ max-width:760px; margin:0 auto; padding:3rem 1.25rem 4rem; }
.umr-legal h2{ margin-top:2rem; }
.umr-legal table{ width:100%; border-collapse:collapse; margin:1.5rem 0; font-size:.92rem; }
.umr-legal th, .umr-legal td{
  border:1px solid var(--color-border);
  padding:.6rem .75rem;
  text-align:left;
  vertical-align:top;
}
.umr-legal th{ background:var(--color-bg-alt); }

/* ---------- Banner y modal de cookies ---------- */
#umr-cookie-banner{
  position:fixed;
  left:0; right:0; bottom:0;
  background:var(--color-primary);
  color:#fff;
  z-index:2000;
  padding:1.25rem;
  box-shadow:0 -4px 18px rgba(0,0,0,.25);
}
#umr-cookie-banner[hidden]{ display:none; }
.umr-cookie-caja{
  max-width:var(--max-width);
  margin:0 auto;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:1.25rem;
  justify-content:space-between;
}
.umr-cookie-texto{ flex:1 1 320px; font-size:.92rem; color:#E7F1F5; margin:0; }
.umr-cookie-texto a{ color:#fff; }
.umr-cookie-botones{ display:flex; flex-wrap:wrap; gap:.6rem; }
.umr-cookie-botones button{
  font-family:inherit;
  font-size:.92rem;
  font-weight:700;
  padding:.6rem 1.1rem;
  border-radius:var(--radius);
  cursor:pointer;
  border:2px solid #fff;
}
#umr-cookies-aceptar{ background:var(--color-accent); color:var(--color-primary); border-color:var(--color-accent); }
#umr-cookies-rechazar{ background:transparent; color:#fff; }
#umr-cookies-configurar{ background:transparent; color:#fff; text-decoration:underline; border:none; }

#umr-cookie-modal{
  position:fixed;
  inset:0;
  z-index:2100;
  background:rgba(10,20,30,.55);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:1rem;
}
#umr-cookie-modal[hidden]{ display:none; }
.umr-cookie-modal-caja{
  background:#fff;
  color:var(--color-text);
  max-width:520px;
  width:100%;
  border-radius:var(--radius);
  padding:1.75rem;
  max-height:85vh;
  overflow:auto;
}
.umr-cookie-modal-caja h2{ margin-top:0; }
.umr-cookie-categoria{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:1rem;
  border-top:1px solid var(--color-border);
  padding:1rem 0;
}
.umr-cookie-categoria:first-of-type{ border-top:none; }
.umr-cookie-categoria p{ margin:.25rem 0 0; font-size:.9rem; color:var(--color-text-muted); }
.umr-switch{
  position:relative;
  width:46px;
  height:26px;
  flex:none;
}
.umr-switch input{ opacity:0; width:100%; height:100%; margin:0; position:absolute; cursor:pointer; }
.umr-switch .umr-switch-riel{
  position:absolute; inset:0;
  background:#C7D2D9;
  border-radius:999px;
  transition:background .15s;
}
.umr-switch .umr-switch-bola{
  position:absolute;
  top:3px; left:3px;
  width:20px; height:20px;
  background:#fff;
  border-radius:50%;
  transition:left .15s;
}
.umr-switch input:checked + .umr-switch-riel{ background:var(--color-secondary); }
.umr-switch input:checked + .umr-switch-riel .umr-switch-bola{ left:23px; }
.umr-switch input:disabled + .umr-switch-riel{ background:var(--color-accent); opacity:.7; }
.umr-switch input:focus-visible + .umr-switch-riel{ outline:3px solid var(--color-accent); outline-offset:2px; }
.umr-cookie-modal-acciones{
  display:flex;
  flex-wrap:wrap;
  gap:.6rem;
  margin-top:1.5rem;
}
.umr-cookie-modal-acciones button{
  font-family:inherit;
  font-size:.92rem;
  font-weight:700;
  padding:.6rem 1.1rem;
  border-radius:var(--radius);
  cursor:pointer;
  border:2px solid var(--color-primary);
}
#umr-cookies-guardar{ background:var(--color-primary); color:#fff; }
#umr-cookies-modal-cerrar{ background:transparent; color:var(--color-primary); }