/* Design refinements layered on top of the original theme.
   No brand colors are introduced or changed here — only spacing,
   depth, typography rhythm and interaction polish. */

:root{
  --brand-mint:#1FCE9C;
  --brand-green:#2CA36F;
  --brand-green-dark:#005a39;
  --brand-blue:#0E8BD6;
  --ink:#3e3432;
  --paper:#ffffff;
  --shadow:0 4px 20px rgba(62,52,50,.10);
  --shadow-hover:0 10px 30px rgba(62,52,50,.16);
  --radius:14px;
}

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

html{ scroll-behavior:smooth; }

body{
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}

::selection{ background:var(--brand-mint); color:#0b3b2c; }

/* content cards */
.widget-wrapper{
  background:var(--paper);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:22px;
  margin:10px 7px 18px !important;
  transition:box-shadow .25s ease,transform .25s ease;
}
.widget-wrapper:hover{
  box-shadow:var(--shadow-hover);
  transform:translateY(-3px);
}

/* subtly call out the services card as a featured section */
.widget-wrapper:has(.services-grid){
  background:#f7fbf9;
  border:1px solid #e6f2ec;
}

/* map gets its own rounded frame instead of card padding */
.google-maps{
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:var(--shadow);
}

/* content photos */
.freetext-image img{
  border-radius:10px;
  display:block;
  margin:0 auto;
  box-shadow:0 2px 10px rgba(0,0,0,.08);
}

/* heading rhythm — colors stay inline/untouched */
h1,h2,h3{ letter-spacing:.2px; line-height:1.25; margin-top:0; }
.freetextarea p,.freetextarea div{ line-height:1.65; }

/* content links */
#content a{ transition:opacity .2s ease; }
#content a:hover{ opacity:.72; }

/* buttons */
.buttons{
  border-radius:8px !important;
  transition:transform .2s ease,box-shadow .2s ease;
}
.buttons:hover{
  transform:translateY(-2px);
  box-shadow:0 6px 16px rgba(62,52,50,.25);
}

/* header — the logo renders at its native 144px height (nothing scales it),
   and skin.min.css's header{padding:20px 0 !important;margin-bottom:20px
   !important} stacks on top, making the whole header disproportionately
   tall; cap the logo and tighten the padding to match (needs !important to
   beat that same skin.min.css rule). */
header.clearfix{
  position:relative;
  padding:16px 0 !important;
  margin-bottom:16px !important;
}
/* header lives inside .sk-container (a centered 960px/95% box, not the
   viewport), so a background on header.clearfix itself stops at that box's
   edges instead of reaching the screen edges. This pseudo-element breaks out
   to full viewport width behind it; z-index:-1 keeps it behind the header's
   own (non-positioned, normal-flow) content per stacking-order rules. */
header.clearfix::before{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  left:50%;
  width:100vw;
  margin-left:-50vw;
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(6px);
  box-shadow:0 2px 12px rgba(0,0,0,.06);
  z-index:-1;
}
.logo-container{ text-align:left; }
.logo-container img{ max-height:92px; width:auto; }

/* nav — right-align the desktop menu row (Inicio / Geriátrico / Contacto).
   Scoped to the >=768px breakpoint where main.min.css floats the <li>s left;
   inside a flex row those floats are ignored, so this doesn't touch the
   <=767px collapsed dropdown menu, which needs its items full-width/left.
   #nav and .wp-menu are the same <ul>, and main.min.css's same-breakpoint
   .wp-menu{display:block !important} otherwise wins over this regardless of
   selector specificity — must match its !important to actually take effect. */
@media only screen and (min-width:768px){
  #nav{ display:flex !important; justify-content:flex-end; align-items:center; margin-top:12px !important; }
}
.wp-menu a{
  border-radius:6px;
  transition:background .2s ease,color .2s ease;
}
.wp-menu li.current > a{
  position:relative;
}
.wp-menu li.current > a::after{
  content:"";
  position:absolute;
  left:14px;
  right:14px;
  bottom:4px;
  height:2px;
  background:var(--brand-mint);
  border-radius:2px;
}

/* footer layout cleanup (uses !important — a later inline <style> block
   on every page re-declares #footer-hibu/.data-fiscal-img at the same
   specificity and would otherwise win by document order) */
#footer-hibu{
  border-top:1px solid #ececec;
  padding-top:18px !important;
  display:flex !important;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
#footer-hibu #copyright{ margin:0 !important; }
#footer-hibu .data-fiscal-img{ float:none !important; margin:0 !important; }
#footer-hibu ul{ margin:0 !important; }

/* mobile floating action button */
#circle-action{ box-shadow:0 6px 20px rgba(0,0,0,.25); }

/* circle-menu icons — these used to come from a sprite (and, for the '+'
   toggle, a second image) loaded from the old site-builder platform's CDN
   this template shipped from. Both are gone now; every icon below is a
   self-contained inline SVG / solid color instead, so the menu no longer
   depends on that external host at all. */
#circle-action li.phone a{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='white' d='M164.9 24.6c-7.7-18.6-28-28.5-47.4-23.2l-88 24C12.1 30.2 0 46 0 64C0 311.4 200.6 512 448 512c18 0 33.8-12.1 38.6-29.5l24-88c5.3-19.4-4.6-39.7-23.2-47.4l-96-40c-16.3-6.8-35.2-2.1-46.3 11.6L304.7 368C234.3 334.7 177.3 277.7 144 207.3L193.3 167c13.7-11.1 18.4-30 11.6-46.3l-40-96z'/%3E%3C/svg%3E") !important;
  background-repeat:no-repeat;
  background-position:center;
  background-size:18px 18px;
}
#circle-action li.map a{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3Cpath fill='white' d='M215.7 499.2C267 435 384 279.4 384 192C384 86 298 0 192 0S0 86 0 192c0 87.4 117 243 168.3 307.2c12.3 15.3 35.1 15.3 47.4 0zM192 128a64 64 0 1 1 0 128 64 64 0 1 1 0-128z'/%3E%3C/svg%3E") !important;
  background-repeat:no-repeat;
  background-position:center;
  background-size:18px 18px;
}
#circle-action li.mail a{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='white' d='M48 64C21.5 64 0 85.5 0 112c0 15.1 7.1 29.3 19.2 38.4L236.8 313.6c11.4 8.5 27 8.5 38.4 0L492.8 150.4c12.1-9.1 19.2-23.3 19.2-38.4c0-26.5-21.5-48-48-48H48zM0 176V384c0 35.3 28.7 64 64 64H448c35.3 0 64-28.7 64-64V176L275.2 339.2c-11.4 8.5-27 8.5-38.4 0L0 176z'/%3E%3C/svg%3E") !important;
  background-repeat:no-repeat;
  background-position:center;
  background-size:18px 18px;
}
/* the '+' toggle: skin.min.css hides all #circle-action <a> text via
   text-indent and used to show a '+' glyph from a background image instead
   — bring the actual character back now that the image is gone. */
#circle-action li:first-child a{
  text-indent:0 !important;
  text-align:center;
}
#circle-action li.whatsapp{ background-color:#25D366; }
#circle-action li.whatsapp a{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath fill='white' d='M380.9 97.1C339 55.1 283.2 32 223.9 32c-122.4 0-222 99.6-222 222 0 39.1 10.2 77.3 29.6 111L0 480l117.7-30.9c32.4 17.7 68.9 27 106.1 27h.1c122.3 0 224.1-99.6 224.1-222 0-59.3-25.2-115-67.1-157zm-157 341.6c-33.2 0-65.7-8.9-94-25.7l-6.7-4-69.8 18.3L72 359.2l-4.4-7c-18.5-29.4-28.2-63.3-28.2-98.2 0-101.7 82.8-184.5 184.6-184.5 49.3 0 95.6 19.2 130.4 54.1 34.8 34.9 56.2 81.2 56.1 130.5 0 101.8-84.9 184.6-186.6 184.6zm101.2-138.2c-5.5-2.8-32.8-16.2-37.9-18-5.1-1.9-8.8-2.8-12.5 2.8-3.7 5.6-14.3 18-17.6 21.8-3.2 3.7-6.5 4.2-12 1.4-32.6-16.3-54-29.1-75.5-66-5.7-9.8 5.7-9.1 16.3-30.3 1.8-3.7.9-6.9-.5-9.7-1.4-2.8-12.5-30.1-17.1-41.2-4.5-10.8-9.1-9.3-12.5-9.5-3.2-.2-6.9-.2-10.6-.2-3.7 0-9.7 1.4-14.8 6.9-5.1 5.6-19.4 19-19.4 46.3 0 27.3 19.9 53.7 22.6 57.4 2.8 3.7 39.1 59.7 94.8 83.8 35.2 15.2 49 16.5 66.6 13.9 10.7-1.6 32.8-13.4 37.4-26.4 4.6-13 4.6-24.1 3.2-26.4-1.3-2.5-5-3.9-10.5-6.6z'/%3E%3C/svg%3E") !important;
  background-repeat:no-repeat;
  background-position:center;
  background-size:20px 20px;
}

/* standalone WhatsApp button — the single, always-visible way to reach
   WhatsApp, on any screen size. #fixed_mobile_action (the '+' menu with
   phone/whatsapp/map/mail, further below) is force-hidden below so this
   is the only option, instead of the two swapping at the 767px breakpoint. */
.whatsapp-float{
  position:fixed;
  right:24px;
  bottom:24px;
  width:56px;
  height:56px;
  background:#25D366;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 6px 20px rgba(0,0,0,.25);
  color:#fff;
  z-index:999;
  text-decoration:none;
  transition:transform .2s ease,box-shadow .2s ease;
}
.whatsapp-float svg{ width:28px; height:28px; }
.whatsapp-float:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 26px rgba(0,0,0,.32);
  color:#fff;
  opacity:1;
}
/* main.min.css turns #fixed_mobile_action (the '+' menu) on below 767px
   with a plain display:block (no !important) — override it so it stays
   hidden at every width and .whatsapp-float is the only button shown. */
#fixed_mobile_action{ display:none !important; }

/* accessible focus states */
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{
  outline:3px solid var(--brand-mint);
  outline-offset:2px;
}

/* contact form inputs */
.fm-el-textbox,.fm-el-email,.fm-el-number,.fm-el-textarea{
  border-radius:8px !important;
  transition:border-color .2s ease,box-shadow .2s ease;
}
.fm-el-textbox:focus,.fm-el-email:focus,.fm-el-number:focus,.fm-el-textarea:focus{
  border-color:var(--brand-green) !important;
  box-shadow:0 0 0 3px rgba(44,163,111,.15);
  outline:none;
}

/* sitemap list */
#site_map.navigation{
  background:var(--paper);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:22px;
  margin:10px 7px 18px;
}
#site_map ul{ padding-left:0 !important; max-width:640px; margin:0 auto !important; }
#site_map ul a{
  background:#f2faf6 !important;
  color:var(--brand-green-dark) !important;
  font-weight:bold;
  padding:.7em 1em !important;
  border-radius:8px;
  border-left:3px solid var(--brand-green);
}
#site_map ul a:hover{
  background:var(--brand-green) !important;
  color:#fff !important;
}
#site_map li span{
  display:block;
  font-size:13px;
  font-weight:normal;
  color:#7a7472;
  margin:.35em 0 .9em 1em;
}

/* legal / privacy pages */
.legal-content{
  background:var(--paper);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:28px 32px;
  margin:10px 7px 18px;
  max-width:820px;
  margin-left:auto;
  margin-right:auto;
}
.legal-content h1{ color:var(--brand-green-dark); margin-bottom:18px; }
.legal-content h2{
  color:var(--brand-green);
  font-size:18px;
  margin:32px 0 12px;
  padding-top:14px;
  border-top:1px solid #eee;
  scroll-margin-top:24px;
}
.legal-content h2:first-of-type{ border-top:none; padding-top:0; margin-top:8px; }
.legal-content p{ line-height:1.7; margin:0 0 14px; color:#4a4442; }
.legal-list{ padding-left:22px; line-height:1.8; }
.legal-list li{ margin-bottom:14px; color:#4a4442; }

.legal-toc{
  background:#f7f9f8;
  border:1px solid #eee;
  border-radius:10px;
  padding:16px 22px;
  margin:20px 0 28px;
}
.legal-toc ol{ margin:0; padding-left:20px; columns:2; gap:24px; }
.legal-toc li{ break-inside:avoid; margin-bottom:6px; }
.legal-toc a{
  color:var(--brand-green-dark);
  text-decoration:none;
  transition:opacity .2s ease;
}
.legal-toc a:hover{ opacity:.7; text-decoration:underline; }
@media only screen and (max-width:600px){
  .legal-toc ol{ columns:1; }
  .legal-content{ padding:22px 18px; }
}

/* geriátrico services grid */
.services-heading{
  color:var(--brand-green);
  font-size:19px;
  font-weight:bold;
  font-family:arial,helvetica,sans-serif;
  text-align:center;
  margin:6px 0 18px;
}
.services-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:12px;
  list-style:none;
  padding:0;
  margin:0 0 24px;
}
.services-grid li{
  position:relative;
  background:#f2faf6;
  border-left:3px solid var(--brand-green);
  border-radius:8px;
  padding:.85em 1em .85em 1.7em;
  font-size:14px;
  font-weight:bold;
  text-align:left;
  color:var(--brand-green-dark);
  transition:background .2s ease,transform .2s ease;
}
.services-grid li::before{
  content:"✓";
  position:absolute;
  left:.65em;
  color:var(--brand-green);
}
.services-grid li:hover{ background:#e6f5ee; transform:translateY(-2px); }
@media only screen and (max-width:900px){
  .services-grid{ grid-template-columns:repeat(2,1fr); }
}
@media only screen and (max-width:480px){
  .services-grid{ grid-template-columns:1fr; }
}

/* contáctenos CTA button reused on the Geriátrico page */
.cta-button{
  display:inline-block;
  margin-top:6px;
  background:var(--brand-green) !important;
  color:#fff !important;
  border-color:var(--brand-green) !important;
}
.cta-button:hover{
  background:var(--brand-green-dark) !important;
  border-color:var(--brand-green-dark) !important;
}
/* #content a{color:#005a39 !important} (inline, per-page) outranks .cta-button
   on specificity alone; re-assert white text with a matching #content selector */
#content a.cta-button,
#content a.cta-button:hover{
  color:#fff !important;
}

/* equal-height side-by-side cards
   (e.g. text vs. photo, text vs. map columns) */
.horizontal .diy-splitter-inner{
  display:flex;
  flex-wrap:wrap;
  align-items:stretch;
}
.horizontal .diy-splitter-inner > .vertical{
  display:flex;
  flex-direction:column;
}
.horizontal .diy-splitter-inner > .vertical > .widget-wrapper{
  flex:1;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.horizontal .diy-splitter-inner > .vertical > .widget-wrapper > .widget-body{
  width:100%;
}