* { box-sizing: border-box; }

:root{
  --bg: #fbf7f3;
  --card: rgba(255,255,255,0.92);
  --muted: #5f5f5f;
  --accent: #e07a5f;
  --accent-2: #3d405b;
  --shadow: 0 10px 30px rgba(16,24,40,0.14);
  --radius: 16px;
  font-family: 'Montserrat', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  color-scheme: light;
  --bg-image: url('/sea_bg.png');
  --watercolor-1: radial-gradient(1200px 400px at 10% 10%, rgba(224,122,95,0.16), transparent 12%),
                   radial-gradient(900px 320px at 90% 30%, rgba(61,64,91,0.12), transparent 14%),
                   linear-gradient(180deg, rgba(255,255,255,0.2), transparent 22%);
  --watercolor-btn: linear-gradient(135deg, rgba(224,122,95,0.98), rgba(235,150,120,0.94));
}

/* Layout - single screen, no vertical scrolling */
html,body,#app{
  height:100%;
  margin:0;
  line-height:1.6;
  scroll-behavior: smooth;
  overflow-x: hidden;
  background-image: var(--bg-image), linear-gradient(180deg, var(--bg), #f5eee6 60%);
  background-size: cover, auto;
  background-position: center top, center;
  background-repeat: no-repeat;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

#app{
  display:flex;
  flex-direction:column;
  min-height:100vh;
  /* allow natural page scrolling when content exceeds viewport */
  backdrop-filter: blur(4px);
}

/* Banner */
.banner{
  width:100%;
  padding:18px 12px 12px;
  display:flex;
  align-items:center;
  justify-content:center;
  background-image: var(--watercolor-1);
  background-size:cover;
  border-bottom-left-radius:18px;
  border-bottom-right-radius:18px;
  margin-bottom:6px;
}
.banner-inner{ text-align:center; max-width:920px; width:100%; }
.banner-title{ margin:0; font-size:23px; color:var(--accent-2); font-weight:700; letter-spacing:0.01em; }
.banner-sub{ margin:6px 0 0 0; color:var(--muted); font-size:15px; font-weight:500; }

/* Tabbar - full width minimalist nav (centered) */
.tabbar{
  display:flex;
  gap:10px;
  padding:8px 12px;
  align-items:center;
  justify-content:center; /* center the whole nav content */
  background:#ffffff; /* changed to white */
  color:#000; /* text in bar black */
  width:100%;
  margin:0; /* remove bottom gap so hero can sit flush under nav */
  border-radius:0;
  box-shadow:none;
  position:sticky;
  top:0;
  left:0;
  z-index:1000;
  border-bottom:1px solid rgba(0,0,0,0.06);
}
.tabbar .logo{
  width:44px;
  height:44px;
  object-fit:contain;
  border-radius:8px;
  box-shadow:none;
  background:transparent;
  padding:0;
  flex:0 0 auto;
  margin-right:10px; /* small gap so logo sits next to centered tabs */
  filter: none; /* keep original logo colors (black) */
}

/* Mobile nav fixes: compact two-row grid layout so nav never exceeds two rows on phones */
@media (max-width:420px){
  .tabbar{
    display:flex;
    flex-wrap:nowrap;
    align-items:center;
    gap:8px;
    padding:8px 10px;
  }
  /* make logo smaller and inline */
  .tabbar .logo{
    display:block;
    height:30px;
    width:auto;
    flex:0 0 auto;
    margin:0 6px 0 0;
  }

  /* Convert tabs to a compact 3-column grid for primary buttons; limit to two rows */
  .tabbar .tabs{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    grid-auto-rows:minmax(36px,auto);
    gap:6px;
    width:100%;
    align-items:center;
    justify-items:center;
    padding:0;
  }

  /* Compact tab sizing */
  .tab{
    padding:6px 8px;
    font-size:13px;
    min-height:36px;
    white-space:nowrap;
  }

  /* Keep instagram and admin compact and place them on the second row */
  .tab.instagram, .tab.admin{
    grid-row:2;
    justify-self:center;
    align-self:center;
    padding:6px;
    height:36px;
    width:36px;
    border-radius:8px;
    font-size:12px;
  }
  .tab.admin{ width:auto; padding:6px 8px; min-width:72px; }

  /* ensure the main action tabs occupy the first row (implicit by grid placement) */
  .tab[data-target="presentacion"], .tab[data-target="talleres"], .tab[data-target="blog"]{
    grid-row:1;
  }
}

/* Slightly reduce horizontal padding and font-size for very narrow screens (<480px)
   so tabs take up less space and can wrap cleanly. */
@media (max-width:480px){
  .tabbar .tabs{
    justify-content:center;
    flex-wrap:wrap;
  }
  .tab{
    padding:7px 9px;
    font-size:13px;
    min-height:36px;
  }
  .tab.instagram{
    width:38px;
    height:38px;
  }
}
.tabbar .tabs{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  flex:0 1 auto; /* don't force tabs to grow full width */
  padding:0 8px;
  justify-content:center; /* center the tab buttons */
  align-items:center;
}

/* Minimal tabs — no pills, no heavy decoration */
.tab{
  flex:0 0 auto;
  background:transparent;
  border:none;
  padding:10px 12px;
  border-radius:6px;
  font-weight:600;
  color:#000; /* tab text black */
  font-size:14px;
  line-height:1;
  position:relative;
  min-height:36px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  white-space:nowrap;
  transition:color .14s ease, background-color .14s ease;
  box-shadow:none;
  backdrop-filter: none;
}

/* subtle underline indicator for active tab */
.tab::after{
  content:'';
  position:absolute;
  height:3px;
  left:12%;
  right:12%;
  bottom:6px;
  background:transparent;
  border-radius:4px;
  transition:background .12s ease, transform .12s ease;
}
.tab.active{
  color:#000;
}
.tab.active::after{
  background: #000; /* underline black when active */
  transform:translateY(0);
}

/* small admin button aligned to the right */
.tab.admin{ max-width:88px; font-size:13px; padding:8px 10px; border-radius:8px; background:rgba(0,0,0,0.06); color:#000; }
.tab.admin.hidden{ display:none !important; }

/* Instagram link: icon-only (no button chrome) */
.tab.instagram{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:44px;
  height:44px;
  padding:0;
  background:transparent;
  color:var(--accent-2);
  border-radius:8px;
  font-weight:700;
  font-size:13px;
  text-decoration:none;
  border:none;
  position:relative;
  box-sizing:border-box;
}
.tab.instagram img{
  display:block;
  width:18px;
  height:18px;
  object-fit:contain;
  margin:0;
}
.tab.instagram:hover{
  background:rgba(224,122,95,0.06);
  color:var(--accent);
}
.tab.instagram.active,
.tab.instagram[aria-current="true"]{
  color:var(--accent);
}
.hidden{ display:none !important; }

/* Buttons with watercolor texture (kept for primary CTA elements) */
.btn{
  background:var(--watercolor-btn);
  color:white;
  border:none;
  padding:9px 14px;
  border-radius:999px;
  font-weight:600;
  font-size:14px;
  min-width:112px;
  box-shadow: 0 10px 24px rgba(224,122,95,0.18);
  background-blend-mode: multiply;
  position:relative;
  overflow:hidden;
  cursor:pointer;
}
.btn::after{
  content:'';
  position:absolute;
  inset:0;
  background: var(--watercolor-1);
  mix-blend-mode: overlay;
  opacity:0.35;
  z-index:0;
}
.btn *{ position:relative; z-index:1; }
.btn.ghost{
  background:transparent;
  color:rgba(255,255,255,0.95);
  border:1px solid rgba(255,255,255,0.12);
  box-shadow:none;
}
.btn:active{
  transform:translateY(1px);
}

/* Panels */
.panel-wrap{
  flex:1;
  display:flex;
  justify-content:flex-start; /* allow panels to start at top so hero height adapts naturally */
  align-items:flex-start;
  padding:0; /* remove outer padding so child .hero can span edge-to-edge */
}
.panel{
  width:100%;
  max-width:none; /* allow children (hero) to span full viewport */
  background:transparent;
  display:none;
  align-items:stretch;
  justify-content:center;
}
.panel.active{ display:flex; }

/* Content panels (Talleres / Blog) get internal margins without affecting the hero/bio */
.content-panel{
  padding:24px 28px;
  box-sizing:border-box;
}

/* Hero / Presentation - full-width presentation bar (spans viewport like nav) */
.hero{
  /* full-bleed block like the nav: span edge-to-edge and adapt to content height */
  width:100%;
  max-width:none;
  background:#ffffff;
  padding:14px 16px;
  border-radius:0;
  box-shadow:none;
  display:flex;
  flex-direction:column;
  gap:10px;
  align-items:center;
  text-align:center;
  position:relative;
  left:0;
  transform:none;
  border-top:1px solid rgba(0,0,0,0.04);
  border-bottom:1px solid rgba(0,0,0,0.04);
  backdrop-filter: none;
  box-sizing:border-box;
}
.avatar{
  width:82px;
  max-width:100%;
  height:auto;
  aspect-ratio:1/1;
  border-radius:999px;
  object-fit:cover;
  border:3px solid #fff;
  box-shadow:0 8px 24px rgba(0,0,0,0.12);
  margin-top:6px;
}
h1{ margin:0; font-size:20px; color:var(--accent-2); letter-spacing:0.01em; }

/* Lead paragraph is part of the full-width hero and uses internal width */
.lead{
  margin:0;
  color:var(--muted);
  text-align:center;
  font-size:14px;
  line-height:1.45;
  width:100%;
  box-sizing:border-box;
  background:transparent;
  padding:6px 8px 12px;
  border-radius:0;
  box-shadow:none;
  border:none;
  position:relative;
  left:0;
  transform:none;
  display:flex;
  flex-direction:column;
  gap:8px;
  align-items:center;
}

/* Hierarchical lead text styles for attractive emphasis */
.lead-large{
  font-size:17px;
  font-weight:700;
  color:var(--accent-2);
  display:block;
  letter-spacing:0.01em;
}
.lead-medium{
  font-size:15px;
  font-weight:600;
  color:var(--accent-2);
  display:block;
}
.lead-body{
  font-size:14px;
  color:var(--muted);
  line-height:1.5;
  max-width:720px;
  display:block;
  padding:0 8px;
}
.lead-cta{
  font-size:14px;
  font-weight:700;
  color:var(--accent);
  display:block;
  margin-top:4px;
}

/* Strong/emphasis styling inside the lead */
.lead strong.emph, .lead strong {
  font-weight:800;
  color:var(--accent);
}
.lead em{
  font-style:italic;
  color:var(--muted);
}

/* Slight adjustments for very small screens */
@media (max-width:420px){
  .lead-large{ font-size:15px; }
  .lead-medium{ font-size:14px; }
  .lead-body{ font-size:13px; padding:0 6px; max-width:640px; }
  .lead-cta{ font-size:13px; }
  .lead{ padding:10px 12px; font-size:13px; }

  /* avatar and buttons slightly smaller to fit header area */
  .avatar{ width:72px; height:72px; }
  .btn{ min-width:100px; padding:8px 10px; font-size:13px; }
}
.meta{ display:flex; gap:8px; justify-content:center; color:var(--muted); font-size:12px; flex-wrap:wrap; }
.actions{ display:flex; gap:10px; justify-content:center; margin-top:2px; }

/* Talleres / Blog cards */
.list, .posts{
  width:100%;
  display:flex;
  flex-direction:column;
  gap:20px;
}
.card{
  background:var(--card);
  padding:12px 13px;
  border-radius:14px;
  box-shadow:var(--shadow);
  display:flex;
  flex-direction:column;
  gap:5px;
  backdrop-filter: blur(10px);
}
.card-soft{
  background:rgba(255,255,255,0.9);
  box-shadow:0 8px 20px rgba(16,24,40,0.16);
}
.card h3{ margin:0; color:var(--accent-2); font-size:15px; }
.card p{ margin:0; color:var(--muted); font-size:13px; }
.card-actions{
  display:flex;
  gap:8px;
  justify-content:flex-end;
  margin-top:6px;
}
.small{ font-size:12px; color:var(--muted); }

/* Controls */
.controls{ margin-top:16px; display:flex; justify-content:center; gap:8px; }

/* Modal */
.modal{
  position:fixed;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  background:rgba(7,11,19,0.32);
  backdrop-filter: blur(6px);
}
.modal[aria-hidden="false"]{ display:flex; }
.modal-content{
  width:92%;
  max-width:720px;
  background:var(--card);
  padding:16px 15px 14px;
  border-radius:16px;
  box-shadow:0 22px 60px rgba(16,24,40,0.38);
  position:relative;
  /* allow modal body to scroll if content is large while keeping modal centered */
  max-height: calc(100vh - 56px);
  overflow:auto;
  -webkit-overflow-scrolling: touch;
}

/* Ensure images inside modal and cards are responsive and visible.
   In modal keep image proportions and allow it to scale within modal area. */
.modal-content img{
  width:100%;
  height:auto;
  max-height: none;
  object-fit:contain;
  display:block;
  border-radius:10px;
  margin-bottom:10px;
  box-shadow:0 10px 30px rgba(0,0,0,0.12);
}

/* Cards keep a fixed-ish image area but preserve proportions */
.card img{
  width:100%;
  height:auto;
  max-height:220px;
  object-fit:cover;
  display:block;
  border-radius:10px;
  margin-bottom:10px;
  box-shadow:0 8px 20px rgba(0,0,0,0.12);
}
.close{
  position:absolute;
  right:11px;
  top:9px;
  border:none;
  background:transparent;
  font-size:18px;
  color:var(--muted);
}

/* Footer */
.footer{
  width:100%;
  padding:8px 12px 10px;
  text-align:center;
  font-size:11px;
  color:#ffffff;
  background-color:#000000;
}

.footer-links{
  display:flex;
  justify-content:center;
  gap:10px;
  margin-bottom:4px;
}

.footer-link{
  border:none;
  background:rgba(255,255,255,0.9);
  color:var(--accent-2);
  font-size:11px;
  padding:6px 10px;
  border-radius:999px;
  box-shadow:0 4px 10px rgba(0,0,0,0.08);
  cursor:pointer;
}

.footer-link:active{
  transform:translateY(1px);
}

/* Small screens adjustments */
@media (max-width:420px){
  .hero{ padding:16px 14px 14px; }
  .avatar{ width:72px; height:72px; }
  .btn{ min-width:100px; padding:8px 11px; font-size:13px; }
}

/* WhatsApp floating button */
.wa-btn{
  position:fixed;
  bottom:25px;
  right:25px;
  z-index:9999;
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:9px 12px;
  border-radius:999px;
  background:#25D366;
  color:white;
  box-shadow: 0 10px 30px rgba(37,211,102,0.25);
  font-weight:600;
  font-size:13px;
  text-decoration:none;
  min-height:44px;
  align-self:flex-end;
}
.wa-btn:active{ transform:translateY(1px); }

/* Services full-width horizontal blocks */
.service-section{
  width:100%;
  box-sizing:border-box;
  display:block;
  padding:80px 0;
}
.service-inner{
  max-width:1200px; /* keep content from stretching on wide screens */
  width:100%;
  margin:0 auto;
  padding:0 20px;
  box-sizing:border-box;
  text-align:left;
  display:flex;
  align-items:center;
  gap:28px;
  justify-content:space-between;
  flex-wrap:wrap;
}
.service-image{
  width:48%;
  max-width:100%;
  height:auto;
  border-radius:12px;
  object-fit:cover;
  box-shadow:0 8px 30px rgba(0,0,0,0.18);
  flex:1 1 48%;
  min-width:0;
}
.service-text{
  flex:1 1 48%;
  min-width:240px;
}
.service-text h2{
  margin:0 0 12px 0;
  font-size:28px;
  line-height:1.05;
  color:inherit;
  font-weight:800;
}
.service-text p{
  margin:0;
  font-size:16px;
  color:inherit;
  max-width:820px;
  line-height:1.6;
}

/* Section-specific backgrounds / colors */
.service-dark{
  background:#000000;
  color:#ffffff;
}
.service-dark a{ color: #ffd5c8; }

.service-deepblue{
  /* Sea photo background with a dark overlay to preserve text contrast */
  background:
    linear-gradient(rgba(44,62,80,0.55), rgba(44,62,80,0.55)),
    url('/sea_bg.png') center/cover no-repeat;
  color:#ffffff;
  /* ensure text and child elements render above the background */
  background-attachment: scroll;
}
.service-deepblue a{ color: #b8d3ea; }

.service-light{
  background:#ffffff;
  color:#000000;
}
.service-light a{ color: var(--accent); }

/* Zig-zag: reverse the inner flex for the group section so text appears left, image right */
#service-grupo .service-inner{
  flex-direction:row-reverse;
}

/* Mobile: stack image above text for all sections */
@media (max-width:820px){
  .service-inner{
    flex-direction:column;
    align-items:stretch;
    gap:14px;
    padding:0 16px;
  }
  .service-image, .service-text{
    width:100%;
    flex:1 1 100%;
    min-width:0;
  }
  .service-text h2{ font-size:22px; }
  .service-text p{ font-size:15px; }

  /* Presentación specific tweaks: ensure the profile image sits on top on mobile,
     is centered, and appears circular and proportionally larger compared to desktop.
     Desktop layout remains unchanged. */
  #presentacion .service-inner{
    /* keep stacking explicitly for presentacion to avoid conflicts */
    flex-direction:column;
    align-items:center;
    text-align:center;
  }
  #presentacion .service-image{
    max-width:360px; /* allow a larger portrait on mobile */
    width:100%;
    height:auto;
    margin:0 auto;
    border-radius:999px !important; /* force rounded avatar */
    object-fit:cover;
    flex:0 0 auto;
    box-shadow:0 8px 24px rgba(0,0,0,0.12);
  }
  #presentacion .service-text{
    width:100%;
    padding:0 6px 0 6px;
    text-align:center;
  }
}

/* Legal bar: thin white strip above footer */
.legal-bar{
  width:100%;
  background:#ffffff;
  color:#000000;
  text-align:center;
  font-size:12px;
  padding:8px 12px;
  border-top:1px solid rgba(0,0,0,0.04);
  box-shadow: 0 -4px 10px rgba(0,0,0,0.03);
}

/* Bio layout for presentacion: full-width section with centered padded content wrapper */
#presentacion{
  width:100%;
  background-color: #ffffff;
  padding: 60px 0;
  box-sizing: border-box;
}
.bio-content-wrapper{
  max-width:1200px;
  width:90%;
  margin:0 auto;
  box-sizing:border-box;
  padding:18px 0;
  display:flex;
  justify-content:center;
}

/* Internal flex row that contains image + text block
   NOTE: styled to match the service-section .service-text / service-inner visual treatment */
.bio{
  display:flex;
  gap:28px;
  align-items:flex-start;
  width:100%;
  padding:64px 20px; /* larger vertical padding to match service sections */
  box-sizing:border-box;
  background:#ffffff; /* same as service-light background */
  border-radius:12px;
  box-shadow:0 8px 30px rgba(0,0,0,0.08);
  /* remove top/bottom hairline borders so it visually matches service blocks */
}

/* Image container: fixed basis on desktop */
.bio-left{
  flex:0 0 300px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.bio-avatar{
  width:220px;
  height:220px;
  border-radius:999px;
  object-fit:cover;
  border:3px solid #fff;
  box-shadow:0 8px 24px rgba(0,0,0,0.12);
}

/* Text block visual parity with service-text: use same proportions and type scale */
.bio-right{
  flex:1;
  min-width:0;
  text-align:left;
  display:flex;
  flex-direction:column;
  gap:14px;
  padding-left:28px;
  padding-right:20px;
  margin:0;
  max-width:1000px;
  line-height:1.6;
  font-size:16px; /* slightly larger to match service text */
}

/* Text block takes remaining space and gets left padding to avoid "stuck text" */
.bio-right{
  flex:1;
  min-width:0;
  text-align:left;
  display:flex;
  flex-direction:column;
  gap:14px;
  padding-left:50px;
  padding-right:32px;
  margin:0;
  max-width:1000px;
  line-height:1.65;
  font-size:15px;
}

/* Emphasize keywords in the bio using the accent color */
.bio-right strong,
.bio-right .emph{
  color: var(--accent);
  font-weight:800;
}

/* Desktop tweak: make image positioned on the right visually if desired (kept ordering) */
@media (min-width:1100px){
  .bio-left{ flex:0 0 320px; }
  .bio-avatar{ width:240px; height:240px; }
}

/* Responsive: stack on smaller screens */
@media (max-width:768px){
  .bio-content-wrapper{ width:94%; padding:10px 0; }
  .bio{
    flex-direction:column;
    gap:14px;
    padding:12px;
    align-items:center;
    text-align:center;
  }
  .bio-left{
    flex:0 0 auto;
    width:100%;
    display:flex;
    justify-content:center;
  }
  .bio-avatar{
    width:120px;
    height:120px;
  }
  .bio-right{
    padding-left:0;
    padding-right:20px;
    width:100%;
    text-align:center;
    font-size:14px;
  }
}

/* Help list grid: 2 columns on desktop, 1 compact column on narrow screens */
.help-list{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:8px 18px;
  padding-left:0;
  margin-top:6px;
  color:var(--muted);
  font-size:14px;
}
@media (max-width:768px){
  .help-list{
    grid-template-columns:1fr;
    gap:6px 0;
    font-size:13px;
  }
}

/* Help list grid: 2 columns on desktop, 1 compact column on narrow screens */
.help-list{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:8px 18px;
  padding-left:0;
  margin-top:6px;
  color:var(--muted);
  font-size:14px;
}
.help-list li{
  margin:0;
  padding-left:0;
  list-style:none;
}

/* Mobile: stack bio and center avatar; make help list single compact column */
@media (max-width:820px){
  .bio{
    flex-direction:column;
    align-items:center;
    text-align:center;
    padding:14px 12px;
  }
  .bio-left{ width:100%; display:flex; justify-content:center; }
  .bio-avatar{ width:92px; height:92px; border-radius:999px; }
  .bio-right{ width:100%; text-align:center; padding-right:0; font-size:14px; line-height:1.5; }
  .help-list{
    grid-template-columns:1fr;
    gap:6px 0;
    font-size:13px;
  }
  .help-list li{ padding:4px 0; }
}

/* Map / Local SEO: dark background with white text for high contrast */
.local-seo{
  background-color:#000000;
  color:#ffffff;
  padding:20px 0;
}
.local-seo .local-inner{
  color:inherit; /* inherit white from .local-seo */
}
.local-seo p, .local-seo a, .local-seo div {
  color: #ffffff;
}
.local-seo a{
  color:#ffd5c8; /* slight accent for links while keeping contrast */
  font-weight:600;
  text-decoration:underline;
}
.local-seo iframe{
  background-color:#000000; /* ensure iframe container appears dark until map loads */
}

@media screen and (max-width: 768px) {
  /* 1. Reset the container to a vertical stack and force normal document flow */
  #presentacion .service-inner {
    display: block !important; /* Switch from flex to block to force vertical flow */
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 12px 10px !important;
  }

  /* 2. Force the image to be a block element with its own space */
  #presentacion .service-image {
    display: block !important;
    margin: 0 auto 30px auto !important; /* Large bottom margin to push text down */
    max-width: 200px !important;
    width: 100% !important;
    height: auto !important;
    border-radius: 999px !important;
    object-fit: cover !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12) !important;
    order: initial !important;
    float: none !important;
  }

  /* 3. Force the text container to start AFTER the image */
  #presentacion .service-text {
    display: block !important;
    width: 100% !important;
    clear: both !important; /* Break any lingering float */
    text-align: left !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 0 12px !important;
    visibility: visible !important;
  }

  /* Make help list single-column and readable on small screens */
  #presentacion .service-text ul,
  #presentacion .service-text .help-list{
    display: block !important;
    list-style: none;
    padding: 0;
    margin: 8px 0 0 0;
    text-align: left !important;
  }
  #presentacion .service-text ul li,
  #presentacion .service-text .help-list li{
    margin: 6px 0;
    padding-left: 0;
    font-size: 14px;
    color: var(--muted);
    text-align: left !important;
    max-width: 560px;
  }

  /* Ensure headings and paragraphs scale nicely */
  #presentacion .service-text h3{ font-size: 18px; margin-top: 12px; }
  #presentacion .service-text p{ font-size: 15px; line-height: 1.6; }
}