/* Extraído del <style> actual del index para externalizar CSS sin cambiar la base visual. */

:root{
      --rojo:#D32F2F; --titulo:#2D3A3F; --texto:#6A747D; --bg:#FFFDFB; --ok:#22c55e;
      --wrap:1200px;
      --celeste-umana:#79CAE9;      /* celeste tipo backend */
      --celeste-umana-ink:#25647E;  /* texto */
    }

    *{box-sizing:border-box}
    html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
    html,body{margin:0;padding:0;background:var(--bg);color:#111}
    body{font-family:Inter,system-ui,Arial,sans-serif;line-height:1.5;overflow-x:hidden}
    img{max-width:100%;height:auto;display:block}
    .wrap{max-width:var(--wrap);margin:0 auto;padding:0 28px}
/* ========== Micro-animación: fade in suave del hero ========== */
@keyframes um-hero-fade-up{
  from{
    opacity:0;
    transform:translateY(18px);
  }
  to{
    opacity:1;
    transform:translateY(0);
  }
}

    /* =================== Header =================== */
   header{
  position:sticky;
  top:0;
  z-index:120;
  background:rgba(25,32,38,.96);
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(255,255,255,.06);
  transition:
    background .22s ease-out,
    box-shadow .22s ease-out,
    border-color .22s ease-out;
}

/* Cuando hay scroll se marca un poco más */
header.is-scrolled{
  background:rgba(18,24,30,.98);
  border-bottom-color:rgba(15,23,42,.7);
  box-shadow:0 14px 30px rgba(15,23,42,.55);
}

    .top{display:flex;align-items:center;justify-content:space-between;padding:14px 0}

    .brand-badge{display:flex;align-items:center;gap:10px;cursor:pointer;transition:transform .22s ease-out}
    .brand-badge:hover{transform:scale(1.04)}
    .u-dot{display:inline-flex;width:36px;height:36px;border-radius:14px;align-items:center;justify-content:center;background:var(--rojo);color:#fff;font-weight:800}
    .brand-badge .name{font-family:"Playfair Display",serif;font-size:clamp(18px,3.2vw,24px);letter-spacing:.4px;color:#F2F5F7}

    nav{display:flex}
    nav ul{list-style:none;margin:0;padding:0;display:flex;gap:26px;align-items:center}
nav a{
  position:relative;
  color:rgba(255,255,255,.92);
  text-decoration:none;
  font-weight:500;
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:clamp(13px,1.25vw,15px);
  letter-spacing:.03em;
  padding:4px 0;
  isolation:isolate;
  will-change:transform;
  transition:transform .18s ease-out, color .18s ease-out;
}

/* Línea fina animada debajo de cada item */
nav a::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-6px;
  height:2px;
  border-radius:999px;
  background:linear-gradient(90deg, rgba(255,255,255,.75), rgba(255,255,255,0));
  transform:scaleX(0);
  transform-origin:center;
  opacity:0;
  transition:transform .22s ease-out, opacity .22s ease-out;
}

/* Hover / focus → muestra la línea */
nav a:hover::after,
nav a:focus-visible::after{
  transform:scaleX(1);
  opacity:1;
}

/* Inicio siempre con una línea suave (como "activo") */
#link-home::after{
  transform:scaleX(.55); /* más corto = más fino (0.40–0.65) */
}


/* Al pasar por INICIO → se estira la línea */
#link-home:hover::after,
#link-home:focus-visible::after{
  transform:scaleX(1);          /* se estira a todo el ancho */
  opacity:1;
}


    nav a:hover,
nav a:focus-visible{
  color:#fff;
  transform:translateY(-1px);
}


    /* Íconos ocultos hasta hover */
    header nav a i,
    header nav .submenu a i{
      opacity:0;
      transform:translateX(-6px);
      transition:opacity .25s, transform .25s;
    }
    header nav a:hover i,
    header nav a:focus-visible i,
    header nav .submenu a:hover i,
    header nav .submenu a:focus-visible i{
      opacity:1;
      transform:none;
    }
/* Desktop: el menú va SIN íconos, salvo LOGIN */
@media (min-width:901px){
  header nav a i,
  header nav .submenu a i{
    display:none !important;
  }

  /* excepción: mostrar el icono de login en desktop */
  .nav-login a i{
    display:inline-block !important;
    opacity:1 !important;
    transform:none !important;
  }
}


    /* Ícono login siempre visible */
    .nav-login a i{
      opacity:1 !important;
      transform:none !important;
    }
    .nav-login a{
      padding-left:4px;
      padding-right:0;
    }

    /* Submenús */
    nav > ul > li{position:relative}
 nav .submenu{
  position:absolute;
  left:0;
  top:100%;
  background:rgba(25,32,38,.96);           /* mismo color que el header */
  border:1px solid rgba(148,163,184,.25);  /* borde suave */
  border-radius:14px;
  padding:8px 0;
  min-width:230px;
  box-shadow:0 16px 40px rgba(15,23,42,.55); /* sombra un poco más “premium” */
  display:none;
  z-index:9999;
}

  nav .submenu li a{
  display:flex;
  justify-content:space-between;
  gap:10px;
  padding:10px 14px;

  color:rgba(255,255,255,.82);   /* menos contraste (más premium) */
  font-size:13px;                /* un toque más fino */
  font-weight:500;
  letter-spacing:.02em;

  white-space:nowrap;
}

/* Especialidades: títulos y separadores dentro del dropdown */
nav .submenu-especialidades{
  min-width:260px;
}

nav .submenu-especialidades .submenu-heading{
  padding:8px 14px 4px;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.12em;
  color:rgba(249,250,251,.7);
  font-weight:600;
}

nav .submenu-especialidades .submenu-divider{
  margin:6px 10px;
  border-top:1px solid rgba(148,163,184,.28);
}

nav .submenu li a:hover{
  background:rgba(255,255,255,.08);
  color:rgba(255,255,255,.95);   /* sube pero sin “gritar” */
  /* sin font-weight acá */
}

   @media (min-width:901px){
  nav > ul > li:hover > .submenu,
  nav > ul > li.open  > .submenu{display:block}
}


/* Botón hamburguesa más prolijo */
.menu-toggle{
  display:none;
  border:0;
  background:rgba(15,23,42,.6);
  font-size:20px;
  line-height:1;
  color:#F9FAFB;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.24);
  display:none;
  align-items:center;
  justify-content:center;
}
.menu-toggle i{color:inherit;}

@media (max-width:900px){
  nav{display:none}
  .menu-toggle{display:inline-flex}
}

/* Panel mobile tipo “app”, con blur y animación */
.mobile{
  position:fixed;
  top:56px;              /* aprox alto del header */
  left:0;
  right:0;
  background:rgba(15,23,42,.97);
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
  border-top:1px solid rgba(255,255,255,.10);
  display:none;
  opacity:0;
  transform:translateY(-8px);
  pointer-events:none;
  transition:opacity .22s ease-out, transform .22s ease-out;
  z-index:110;
}

.mobile.show{
  display:block;         /* .show ya pone display:block, reforzamos */
  opacity:1;
  transform:translateY(0);
  pointer-events:auto;
}

.mobile ul{
  list-style:none;
  margin:0;
  padding:8px 0 14px;
}

.mobile a{
  display:flex;
  align-items:center;
  gap:10px;
  padding:11px 20px;
  color:#E5E7EB;
  text-decoration:none;
  font-size:14px;
  border-top:1px solid rgba(255,255,255,.04);
}

/* Ícono más minimal y alineado */
.mobile a i{
  width:16px;             /* ancho fijo, todo queda alineado */
  font-size:14px;         /* un toque más chico */
  flex-shrink:0;
  opacity:.65;
  color:#9ca3af;          /* gris suave por defecto */
}

/* Hover/touch: se “enciende” el item */
.mobile a:hover{
  background:rgba(255,255,255,.05);
  color:#fff;
}

.mobile a:hover i{
  color:#ffffff;
  opacity:.95;
}


/* Submenús mobile */
/* Submenús mobile: cerrados por defecto */
.mobile .submenu{
  display:none;
  padding:0;
  margin:0;
  border-top:1px dashed rgba(255,255,255,.18);
}

/* Cuando JS agrega show-submenu → se abre */
.mobile .submenu.show-submenu{
  display:block;
}

.mobile .submenu a{
  padding-left:44px;
  font-size:13px;
  font-weight:500;
  color:rgba(229,231,235,.88);   /* menos contraste */
}

.mobile .submenu a:hover{
  color:#fff;
}


/* Íconos del submenú, un poquito más chicos y suaves */
.mobile .submenu a i{
  font-size:14px;
  opacity:.8;
}


.caret{
  margin-left:auto;
  font-size:12px;
  transform:rotate(0deg);
  transition:transform .25s, opacity .25s;
  opacity:.85;
}
.caret.open{
  transform:rotate(180deg);
}


    /* =================== HERO =================== */
    .hero{
      padding:clamp(26px,6vw,54px) 0;
      background:
        radial-gradient(1200px 600px at 10% -10%, rgba(211,47,47,.08), transparent 20%),
        radial-gradient(800px 500px at 90% 10%, rgba(211,47,47,.05), transparent 20%),
        var(--bg);
    }
    .grid{
      display:grid;
      grid-template-columns:minmax(240px,420px) 1fr;
      gap:clamp(16px,4.2vw,40px);
      align-items:center
    }
/* El contenido del hero entra con un fade-in suave al cargar */
.hero .grid{
  animation:um-hero-fade-up .70s cubic-bezier(.22,.61,.36,1) .12s both;
  will-change:transform, opacity;
}

.title{
  font-family:"Playfair Display",serif;
  color:var(--titulo);
  font-weight:700;
  font-size:clamp(32px,6.2vw,64px);
  line-height:1.08;
  margin:0 0 16px;
  position:relative;
}

/* Subrayado suave “de diseño” detrás del título */
.title::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-4px;
  width:62%;
  height:14px;
  border-radius:999px;
  background:linear-gradient(90deg, rgba(211,47,47,.16), rgba(211,47,47,0));
  pointer-events:none;
}

/* “Nutrición” con degradé sutil en el texto */
.title .nutri{
  font-style:italic;
  letter-spacing:.04em;
  background:linear-gradient(120deg, #111827, #4b5563);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

/* Cápsula +40 */
.title .age-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:4px 14px;
  border-radius:999px;
  background:rgba(211,47,47,.06);
  border:1px solid rgba(211,47,47,.30);
  font-size:0.9em;
  letter-spacing:.08em;
  text-transform:uppercase;
}
/* Botón principal: cápsula + base suave, a juego con el +40 */
.cta{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;

  padding:11px 24px;
  border-radius:999px;

  background:var(--rojo);
  color:#fff;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.14em;
  font-size:14px;

  text-decoration:none;
  border:none;
  cursor:pointer;

  box-shadow:0 12px 26px rgba(211,47,47,.32);
  transition:
    transform .22s ease-out,
    box-shadow .22s ease-out,
    filter .22s ease-out;
}

/* “Base” debajo del botón, similar a la línea del +40 */
.cta::before{
  content:"";
  position:absolute;
  left:18px;
  right:18px;
  bottom:-7px;
  height:12px;
  border-radius:999px;
  background:rgba(211,47,47,.10); /* mismo espíritu que la línea del +40 */
  z-index:-1;
}

.cta:hover{
  filter:brightness(.97);
  transform:translateY(-1px);
  box-shadow:0 16px 34px rgba(211,47,47,.40);
}

.cta:active{
  transform:translateY(0);
  box-shadow:0 8px 20px rgba(211,47,47,.30);
}

    .cta:hover{
      filter:brightness(.95);
      box-shadow:0 6px 16px rgba(0,0,0,.15);
      transform:translateY(-2px)
}
/* Contenedor de la foto: un poco más de aire */
.figure{
  display:flex;
  justify-content:center;
  align-items:center;
  position:relative;
  padding:10px 12px;        /* antes 16px */
  margin-top:4px;           /* la bajamos un toque */
}

/* Foto: más chica, sin tanto fondo blanco pegado al borde */
.photo{
  max-width:clamp(220px,34vw,340px);  /* un pelín más chica */
  width:100%;
  height:auto;
  background:transparent;             /* sacamos el fondo blanco sólido */
  border-radius:24px;
  border:3px solid #E5E7EB;          /* borde un poquito más fino */
  box-shadow:0 18px 40px rgba(15,23,42,.22);
  display:block;
}

/* Victoria sigue pudiendo “mirar” desde la izquierda si lo usás */
.photo.pos-left{
  object-position:left center;
}


/* ✅ NUEVO: cuando sea Victoria, pegamos la imagen a la izquierda (sin zoom) */
.photo.pos-left{
  object-position: left center;
}


    @media (max-width:900px){
      .wrap{padding:0 18px}
      .grid{grid-template-columns:1fr}
      .brand-badge .name{font-size:20px}
    }
    @media (max-width:640px){
      .hero{padding:24px 0}
      .wrap{padding:0 16px}
    }

/* =================== POPOVER TURNOS DESDE PÍLDORA =================== */
.p-tags .tn-open.is-active{
  transform:translateY(-1px) scale(1.02);
  background:rgba(121,202,233,.30) !important;
  border-color:rgba(121,202,233,.96) !important;
  box-shadow:0 14px 30px rgba(15,23,42,.12);
}

#tnPopover{
  --tn-origin-x:50%;
  --tn-tail-x:50%;
  position:fixed;
  left:0;
  top:0;
  width:min(430px, calc(100vw - 20px));
  z-index:3002;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:
    translate3d(0,-10px,0)
    perspective(900px)
    rotateX(-18deg)
    scaleX(.18)
    scaleY(.06);
  transform-origin:var(--tn-origin-x) 0%;
  filter:blur(2px);
}

#tnPopover.is-open{
  visibility:visible;
  pointer-events:auto;
  animation:tnPopoverOpen .36s cubic-bezier(.22,.61,.36,1) forwards;
}

#tnPopover.is-closing{
  visibility:visible;
  pointer-events:none;
  animation:tnPopoverClose .24s cubic-bezier(.4,0,.2,1) forwards;
}

#tnPopover.is-above{
  transform-origin:var(--tn-origin-x) 100%;
}

@keyframes tnPopoverOpen{
  0%{
    opacity:0;
    transform:
      translate3d(0,-10px,0)
      perspective(900px)
      rotateX(-18deg)
      scaleX(.18)
      scaleY(.06);
    filter:blur(2px);
  }
  60%{
    opacity:1;
    transform:
      translate3d(0,0,0)
      perspective(900px)
      rotateX(0deg)
      scaleX(1.02)
      scaleY(.94);
    filter:blur(0);
  }
  100%{
    opacity:1;
    transform:
      translate3d(0,0,0)
      perspective(900px)
      rotateX(0deg)
      scaleX(1)
      scaleY(1);
    filter:blur(0);
  }
}

@keyframes tnPopoverClose{
  0%{
    opacity:1;
    transform:
      translate3d(0,0,0)
      perspective(900px)
      rotateX(0deg)
      scaleX(1)
      scaleY(1);
    filter:blur(0);
  }
  100%{
    opacity:0;
    transform:
      translate3d(0,-8px,0)
      perspective(900px)
      rotateX(-18deg)
      scaleX(.16)
      scaleY(.05);
    filter:blur(2px);
  }
}

#tnPopover .tn-pop-card{
  position:relative;
  overflow:visible;
  border-radius:22px;
  padding:16px 16px 14px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.97), rgba(250,251,253,.94)),
    radial-gradient(circle at 18% 0%, rgba(255,255,255,.92), transparent 34%);
  border:1px solid rgba(226,232,240,.92);
  box-shadow:
    0 28px 72px rgba(15,23,42,.26),
    0 10px 28px rgba(15,23,42,.10),
    inset 0 1px 0 rgba(255,255,255,.88);
  -webkit-backdrop-filter:blur(24px) saturate(135%);
  backdrop-filter:blur(24px) saturate(135%);
}

#tnPopover .tn-pop-card::before{
  content:"";
  position:absolute;
  left:calc(var(--tn-tail-x) - 10px);
  top:-10px;
  width:20px;
  height:20px;
  transform:rotate(45deg);
  background:rgba(255,255,255,.95);
  border-left:1px solid rgba(226,232,240,.92);
  border-top:1px solid rgba(226,232,240,.92);
  box-shadow:-8px -8px 20px rgba(15,23,42,.05);
}

#tnPopover.is-above .tn-pop-card::before{
  top:auto;
  bottom:-10px;
  border-left:none;
  border-top:none;
  border-right:1px solid rgba(226,232,240,.92);
  border-bottom:1px solid rgba(226,232,240,.92);
}

#tnPopover .tn-pop-card::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  border-radius:inherit;
  background:
    linear-gradient(180deg, rgba(255,255,255,.16), transparent 30%),
    linear-gradient(115deg, transparent 0 42%, rgba(255,255,255,.08) 50%, transparent 58%);
  opacity:.42;
}

.tn-pop-head{
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:10px;
}

.tn-pop-title{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin:0;
  font-size:15px;
  font-weight:800;
  letter-spacing:.02em;
  color:#0f172a;
}

.tn-pop-title::before{
  content:"";
  width:8px;
  height:8px;
  border-radius:999px;
  background:rgba(121,202,233,.95);
  box-shadow:0 0 0 5px rgba(121,202,233,.15);
}

.tn-pop-title[data-tone="red"]{
  color:#7f1d1d;
}
.tn-pop-title[data-tone="red"]::before{
  background:rgba(211,47,47,.92);
  box-shadow:0 0 0 5px rgba(211,47,47,.12);
}

.tn-pop-title[data-tone="green"]{
  color:#166534;
}
.tn-pop-title[data-tone="green"]::before{
  background:rgba(34,197,94,.92);
  box-shadow:0 0 0 5px rgba(34,197,94,.12);
}

#tnPopClose{
  position:relative;
  z-index:1;
  width:31px;
  height:31px;
  border-radius:999px;
  border:1px solid rgba(15,23,42,.08);
  background:rgba(255,255,255,.72);
  color:#334155;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:13px;
  transition:transform .18s ease, background .18s ease, box-shadow .18s ease;
}

#tnPopClose:hover{
  transform:translateY(-1px);
  background:rgba(255,255,255,.92);
  box-shadow:0 10px 24px rgba(15,23,42,.10);
}

#tnPopBody{
  position:relative;
  z-index:1;
  display:grid;
  gap:10px;
}

.tn-pop-list{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:8px;
}

.tn-pop-list li{
  position:relative;
  padding-left:15px;
  color:#334155;
  font-size:13px;
  line-height:1.46;
}

.tn-pop-list li::before{
  content:"";
  position:absolute;
  left:0;
  top:.56em;
  width:6px;
  height:6px;
  border-radius:999px;
  background:rgba(121,202,233,.95);
}

.tn-pop-box{
  display:grid;
  gap:6px;
  padding:12px;
  border-radius:15px;
  background:rgba(255,255,255,.42);
  border:1px solid rgba(255,255,255,.40);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45);
}

.tn-pop-box p{
  margin:0;
  color:#334155;
  font-size:13px;
  line-height:1.42;
}

.tn-pop-box p strong{
  color:#0f172a;
}

@media (max-width:640px){
  #tnPopover{
    width:min(390px, calc(100vw - 16px));
  }

  #tnPopover .tn-pop-card{
    border-radius:18px;
    padding:14px 14px 12px;
  }

  .tn-pop-title{
    font-size:14px;
  }

  .tn-pop-list li,
  .tn-pop-box p{
    font-size:12.5px;
  }
}

    /* =================== OVERLAY TURNOS =================== */
    #turnosMask{
      position:fixed;inset:0;background:rgba(0,0,0,.45);
      display:none;z-index:2000
    }
    #turnosModal{
      position:fixed;left:50%;transform:translateX(-50%);
      width:min(1100px,96vw);background:#fff;border-radius:14px;
      box-shadow:0 18px 50px rgba(0,0,0,.25);
      border:1px solid #eee;overflow:hidden;
      display:none;z-index:2001
    }
    #turnosModal .close{
      position:absolute;right:10px;top:10px;
      width:36px;height:36px;border:1px solid #e5e7eb;
      border-radius:10px;background:#fff;cursor:pointer;font-size:16px
    }
/* ===== Turnos: shrink-to-fit SOLO desktop/tablet ===== */
@media (min-width: 641px){
  #turnosModal{
    --tnScale: .84;
    overflow:hidden;
  }

  @media (max-width:900px){
    #turnosModal{ --tnScale: .84; }
  }
  @media (max-width:520px){
    #turnosModal{ --tnScale: .80; }
  }

  #turnosFrame{
    border:0;
    display:block;
    width:  calc(100% / var(--tnScale));
    height: calc(100% / var(--tnScale));
    transform: scale(var(--tnScale));
    transform-origin: 0 0;
  }

  #turnosModal .close{ z-index:10; }
}

/* ✅ Turnos MOBILE: full-screen + iframe normal (mejor scroll) */
@media (max-width: 640px){
  #turnosModal{
    width:100vw !important;
    height:100vh !important;
    left:0 !important;
    top:0 !important;
    transform:none !important;
    border-radius:0 !important;
    overflow:hidden !important;
  }

  #turnosFrame{
    transform:none !important;
    width:100% !important;
    height:100% !important;
  }

  #turnosModal .close{
    width:34px;
    height:34px;
  }
}

/* =================== OVERLAY LOGIN (solo login) =================== */
#loginMask{
  position:fixed;inset:0;background:rgba(0,0,0,.45);
  display:none;z-index:2200
}
#loginModal{
  position:fixed;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  width:min(420px,96vw);
  max-height:calc(100vh - 24px);
  background:#F7F1EB !important;
  border:1px solid rgba(255,255,255,.72) !important;
  border-radius:28px;
  box-shadow:0 10px 30px rgba(15,23,42,.10) !important;
  overflow:hidden;
  display:none;
  z-index:2201;
  -webkit-backdrop-filter:none !important;
  backdrop-filter:none !important;
}

#loginModal .close{
  position:absolute;
  right:10px;
  top:10px;
  width:32px;
  height:32px;
  border:1px solid #d1d5db;
  border-radius:999px;
  background:#fff;
  cursor:pointer;
  font-size:14px;
  display:flex;
  align-items:center;
  justify-content:center;
}

#loginFrame{
  width:100%;
  height:340px;
  min-height:280px;
  border:0;
  display:block;
  overflow:hidden;
  border-radius:28px;
  background:#F7F1EB;
}

@media (max-width:640px){
  #loginModal{
    width:min(420px, calc(100vw - 16px));
    max-height:calc(100dvh - 16px);
  }
}

/* Máscoaras oscuras con blur sutil */
#tnInfoMask,
#turnosMask,
#cursosMask,
#loginMask{
  background:rgba(15,23,42,.60);
  -webkit-backdrop-filter:blur(4px);
  backdrop-filter:blur(4px);
}

/* Modales grandes unificados (Turnos / Cursos / Login) */
#turnosModal,
#cursosModal{
  background:linear-gradient(145deg,#ffffff,#f9fafb);
  border-radius:20px;
  border:1px solid #e5e7eb;
  box-shadow:0 24px 70px rgba(15,23,42,.55);
}

/* barrita decorativa arriba de cada modal grande */
#turnosModal::before,
#cursosModal::before,
#loginModal::before{
  content:"";
  position:absolute;
  left:22px;
  right:22px;
  top:12px;
  height:3px;
  border-radius:999px;
  background:linear-gradient(90deg, rgba(211,47,47,.8), rgba(211,47,47,0));
  opacity:.95;
}

/* botones de cierre de todos los modales grandes */
#turnosModal .close,
#cursosModal .close,
#loginModal .close{
  border:1px solid #e5e7eb;
  border-radius:999px;
  width:32px;
  height:32px;
  background:#ffffff;
  cursor:pointer;
  font-size:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:background .18s, transform .18s, box-shadow .18s;
}

#turnosModal .close:hover,
#cursosModal .close:hover,
#loginModal .close:hover{
  background:#f9fafb;
  transform:translateY(-1px);
  box-shadow:0 8px 20px rgba(15,23,42,.20);
}

   /* WhatsApp flotante más integrado */
.wh-btn{
  position:fixed;
  right:18px;
  bottom:18px;
  width:56px;
  height:56px;
  border-radius:999px;
  background:radial-gradient(circle at 30% 0, #5af28b, #25D366);
  color:#fff;
  display:grid;
  place-items:center;
  text-decoration:none;
  box-shadow:0 16px 40px rgba(15,23,42,.45);
  z-index:1500;
  font-size:26px;
  border:2px solid #ffffff;
  overflow:hidden;
}

/* Anillo de pulso suave */
.wh-btn::before{
  content:"";
  position:absolute;
  inset:-6px;
  border-radius:inherit;
  border:1px solid rgba(37,211,102,.4);
  opacity:0;
  transform:scale(.8);
  pointer-events:none;
  animation:wh-pulse 2.2s infinite;
}

@keyframes wh-pulse{
  0%{
    opacity:0;
    transform:scale(.8);
  }
  35%{
    opacity:1;
  }
  100%{
    opacity:0;
    transform:scale(1.2);
  }
}

.wh-btn:hover{
  filter:brightness(.98);
  transform:translateY(-1px);
  box-shadow:0 20px 46px rgba(15,23,42,.55);
}
/* ===== Hero Slider (solo portada) ===== */
.hero-fade{
  transition:opacity .28s ease-out, transform .28s ease-out;
  will-change:opacity, transform;
}
.hero-fade.is-out{
  opacity:0;
  transform:translateY(6px);
}

.hero-dots{
  display:flex;
  gap:8px;
  margin-top:14px;
}
.hero-dots button{
  width:7px;
  height:7px;
  border-radius:999px;
  border:0;
  background:#d1d5db;
  cursor:pointer;
  transition:transform .18s ease-out, background .18s ease-out, width .18s;
}
.hero-dots button[aria-selected="true"]{
  background:var(--rojo);
  width:18px;
  transform:translateY(-1px);
}
/* Rótulo chiquito del profesional (sutil, sin cambiar el look) */
.hero-pro{
  margin-top:10px;
  color:var(--texto);
  font-size:13px;
  font-weight:600;
  display:inline-flex;
  align-items:center;
  gap:8px;
}
.hero-pro::before{
  content:"";
  width:7px;
  height:7px;
  border-radius:999px;
  background:var(--rojo);
  box-shadow:0 0 0 4px rgba(211,47,47,.12);
  opacity:.95;
}
:root{
  --menu-font: "Manrope", Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}


/* Menu: más moderno y menos “pesado” */
nav a,
.mobile a{
  font-family: var(--menu-font);
  font-weight:500;            /* más fino */
  letter-spacing:.006em;      /* más elegante */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: geometricPrecision;
}


nav .submenu li a,
.mobile .submenu a{
  font-family: var(--menu-font);
  font-weight:500;
  font-size:13px;
  letter-spacing:.004em;
}

/* Legal visible en mobile (porque el footer se oculta en <=640px) */
.um-legal-mobile{
  display:none;
  text-align:center;
  font-size:12px;
  color:#6b7280;
  padding:14px 0 18px;
}

.um-legal-mobile a{
  color:#6b7280;
  text-decoration:none;
}

.um-legal-mobile a:hover{
  color:var(--rojo);
  text-decoration:underline;
}

.um-legal-mobile .sep{
  opacity:.55;
  margin:0 6px;
}

@media (max-width:640px){
  .um-legal-mobile{ display:block; }
}

/* =================== EQUIPO & TURNOS (HOME) =================== */
#equipo-turnos{ scroll-margin-top:90px; }

.team{
  padding:56px 0 64px;
  background:
    radial-gradient(900px 520px at 10% 0%, rgba(211,47,47,.06), transparent 60%),
    radial-gradient(900px 520px at 90% 10%, rgba(211,47,47,.04), transparent 60%),
    #fff;
  border-top:1px solid #eee;
}

.team-head{
  display:block;
  margin-bottom:18px;
}


.team-kicker{
  color:#6b7280;
  font-size:14px;
  max-width:720px;
  margin:10px 0 0;
}

.team-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  justify-content:flex-end;
}

.btn-ghost{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:10px 16px;
  border-radius:999px;
  border:1px solid #e5e7eb;
  background:#fff;
  color:#111827;
  text-decoration:none;
  font-weight:700;
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.12em;
  box-shadow:0 10px 24px rgba(15,23,42,.06);
  transition:transform .18s ease-out, box-shadow .18s ease-out, background .18s ease-out;
}
.btn-ghost:hover{
  background:#f9fafb;
  transform:translateY(-1px);
  box-shadow:0 14px 30px rgba(15,23,42,.10);
}

/* ===== Conocé al equipo: animación del icono (fa-users) ===== */
.hero a.btn-ghost i.fa-users{
  display:inline-block;                 /* necesario para transform */
  transform-origin:50% 70%;             /* punto de giro “natural” */
  transition:transform .18s ease-out;
  will-change:transform;
}

/* al hover, un “wiggle” corto y fino */
.hero a.btn-ghost:hover i.fa-users,
.hero a.btn-ghost:focus-visible i.fa-users{
  animation:um-users-wiggle .55s cubic-bezier(.22,.61,.36,1) both;
}

@keyframes um-users-wiggle{
  0%   { transform:translateY(0) rotate(0deg); }
  25%  { transform:translateY(-1px) rotate(-10deg); }
  55%  { transform:translateY(-1px) rotate(10deg); }
  80%  { transform:translateY(0) rotate(-6deg); }
  100% { transform:translateY(0) rotate(0deg); }
}

/* accesibilidad */
@media (prefers-reduced-motion: reduce){
  .hero a.btn-ghost:hover i.fa-users,
  .hero a.btn-ghost:focus-visible i.fa-users{
    animation:none !important;
  }
}

.team-grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:14px;
}

@media (max-width:1100px){
  .team-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
}
@media (max-width:640px){
  .team-head{ align-items:flex-start; flex-direction:column; }
  .team-actions{ justify-content:flex-start; }
  .team-grid{ grid-template-columns:1fr; }
}

.pcard{
  background:linear-gradient(145deg,#ffffff,#f9fafb);
  border:1px solid #e5e7eb;
  border-radius:18px;
  padding:14px;
  box-shadow:0 16px 40px rgba(15,23,42,.08);
  display:flex;
  flex-direction:column;
  gap:10px;
  min-height:240px;
}

.p-top{
  display:flex;
  align-items:center;
  gap:12px;
}

.p-avatar{
  width:46px;
  height:46px;
  border-radius:999px;
  border:1px solid rgba(211,47,47,.25);
  background:#fff;
  overflow:hidden;              /* recorta dentro del círculo */
  flex-shrink:0;
  display:block;
  box-shadow:0 10px 24px rgba(15,23,42,.08);

  /* ✅ nuevo: el círculo “sale hacia adelante” */
  position:relative;
  transform:scale(1);
  transform-origin:center;
  transition:transform .22s ease-out, box-shadow .22s ease-out;
  will-change:transform;
  z-index:1;
}

.p-avatar img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  display:block;

  /* opcional: un mini-zoom de la foto para que se sienta más “pro” */
  transform:scale(1);
  transition:transform .22s ease-out;
}
.p-avatar img.av-soloro{
  object-position: center 10%; /* probá 10%–30% */
}

/* ✅ hover: crece el círculo completo (hacia adelante) */
.p-avatar:hover{
  transform:scale(2);
  z-index:3;
  box-shadow:0 22px 60px rgba(15,23,42,.35);
}

.p-avatar:hover img{
  transform:scale(1.06);
}

.pcard:hover .p-avatar img,
.p-avatar:hover img{
  transform: scale(1.12); /* ajustá 1.08–1.18 a gusto */
}


.p-name{
  font-weight:800;
  color:#111827;
  font-size:14px;
  margin:0;
  line-height:1.2;
}
.p-spec{
  color:#6b7280;
  font-size:12px;
  margin-top:2px;
}

.p-tags{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
.tag{
  display:inline-flex;
  align-items:center;
  padding:3px 10px;
  border-radius:999px;
  border:1px solid rgba(148,163,184,.35);
  background:rgba(148,163,184,.08);
  font-size:11px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#374151;

}
.tag.red{
  border-color:rgba(211,47,47,.35);
  background:rgba(211,47,47,.06);
  color:#7f1d1d;
}
/* ===== Grageas de modalidad (Virtual/Presencial/Exprés) en celeste UMANA ===== */
/* Solo afecta a las pills dentro de .p-tags y NO toca las rojas (.tag.red) */
.p-tags .tag:not(.red){
  border-color: rgba(121,202,233,.70);
  background: rgba(121,202,233,.22);
  color: var(--celeste-umana-ink);
}

/* Asegura que <button class="tag ..."> se vea igual en todos los navegadores */
.p-tags button.tag{
  appearance:none;
  -webkit-appearance:none;
}

/* Hover/Foco (las que son clickeables) */
.p-tags .tag.tn-open:not(.red):hover,
.p-tags .tag.tn-open:not(.red):focus-visible{
  background: rgba(121,202,233,.28);
  border-color: rgba(121,202,233,.92);
}

/* Click */
.p-tags .tag.tn-open:not(.red):active{
  background: rgba(121,202,233,.18);
}

/* Si alguna modalidad es <a> (link), evita que cambie a violeta “visited” */
.p-tags a.tag:not(.red):visited{
  color: var(--celeste-umana-ink);
}

/* Tags clickeables (Virtual/Presencial/Exprés): nunca subrayado */
.p-tags a.tag{
  text-decoration:none !important;
}
.p-tags a.tag:hover,
.p-tags a.tag:focus{
  text-decoration:none !important;
}
.p-tags a.tag:visited{
  text-decoration:none !important;
  color:inherit;
}
/* ===== Tags clickeables (Virtual/Presencial/Exprés) ===== */
.p-tags .tag.tn-open{
  cursor:pointer;
  text-decoration:none; /* por si son <a> */
  transition:
    transform .18s ease-out,
    box-shadow .18s ease-out,
    background .18s ease-out,
    border-color .18s ease-out;
  box-shadow:0 0 0 rgba(15,23,42,0); /* base */
}

/* Hover / foco: mismo “premium lift” que el resto */
.p-tags .tag.tn-open:hover,
.p-tags .tag.tn-open:focus-visible{
  transform:translateY(-1px);
  box-shadow:0 14px 30px rgba(15,23,42,.10);
  background:rgba(148,163,184,.10);           /* leve */
  border-color:rgba(148,163,184,.45);
  outline:none;
}

/* Click */
.p-tags .tag.tn-open:active{
  transform:translateY(0);
  box-shadow:0 8px 18px rgba(15,23,42,.08);
}
.p-tags .tag.red.tn-open:hover,
.p-tags .tag.red.tn-open:focus-visible{
  background:rgba(211,47,47,.08);
  border-color:rgba(211,47,47,.42);
}


.p-desc{
  color:#374151;
  font-size:13px;
  margin:0;
  line-height:1.45;
  flex:1;
}

.p-cta{ display:flex; gap:10px; flex-wrap:nowrap; }
@media (max-width:640px){
  .p-cta{ flex-direction:column; }
}

.p-cta a{
  flex:1;
  text-align:center;
  min-width:150px;

}
/* ===== Botones dentro de las cards de equipo (Ver perfil / Agendar) ===== */
.pcard .p-cta .btn-ghost,
.pcard .p-cta .cta{
  padding: 9px 14px;
  font-size: 11px;
  letter-spacing: .10em;
  line-height: 1.1;
}

/* El rojo suele verse “más grande” por el padding: lo bajamos un toque */
.pcard .p-cta .cta{
  padding: 10px 18px;
}

/* Para que no te parta "VER PERFIL" en 2 líneas */
.pcard .p-cta a{
  white-space: nowrap;
  min-width: 0; /* (esto reemplaza el min-width:150px si querés que no crezcan tanto) */
}

/* ===== Perfil profesional INLINE (no modal) ===== */
.prof-inline{
  padding:18px 0 10px;
}

.prof-card{
  background:linear-gradient(145deg,#ffffff,#f9fafb);
  border:1px solid #e5e7eb;
  border-radius:20px;
  box-shadow:0 24px 70px rgba(15,23,42,.12);
  overflow:hidden;
}

.prof-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:16px 18px 12px;
  border-bottom:1px solid #e5e7eb;
}

.prof-title{
  font-family:"Playfair Display",serif;
  font-size:20px;
  color:#111827;
  line-height:1.2;
}

.prof-close{
  border:1px solid #e5e7eb;
  border-radius:999px;
  width:34px;
  height:34px;
  background:#fff;
  cursor:pointer;
  font-size:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:background .18s ease, transform .18s ease, box-shadow .18s ease;
}

.prof-close:hover{
  background:#f9fafb;
  transform:translateY(-1px);
  box-shadow:0 10px 22px rgba(15,23,42,.12);
}

.prof-frame-shell{
  position:relative;
  background:#fff;
}

.prof-frame-wrap{
  position:relative;
  overflow:hidden;
  background:#fff;
  transition:max-height .34s cubic-bezier(.22,.61,.36,1);
}

#profInlineFrame{
  width:100%;
  border:0;
  display:block;
  min-height:520px;
  height:780px;
  background:#fff;
}

.prof-inline-fade{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:124px;
  pointer-events:none;
  z-index:1;
  opacity:0;
  transition:opacity .24s ease;
  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,0) 0%,
      rgba(249,250,251,.80) 44%,
      rgba(249,250,251,.96) 100%
    );
}

.prof-frame-wrap.is-collapsed .prof-inline-fade{
  opacity:1;
}

.prof-expand-wrap{
  position:absolute;
  left:50%;
  bottom:16px;
  transform:translateX(-50%);
  z-index:2;
  width:100%;
  display:flex;
  justify-content:center;
  pointer-events:none;
}

.prof-frame-shell.is-expanded .prof-expand-wrap{
  position:static;
  transform:none;
  margin:14px 0 18px;
  width:auto;
}

.prof-expand-btn{
  pointer-events:auto;
  appearance:none;
  -webkit-appearance:none;
  width:46px;
  height:46px;
  padding:0;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.34);
  background:
    linear-gradient(180deg, rgba(255,255,255,.28), rgba(255,255,255,.14));
  -webkit-backdrop-filter:blur(18px) saturate(150%);
  backdrop-filter:blur(18px) saturate(150%);
  box-shadow:
    0 14px 34px rgba(15,23,42,.22),
    0 6px 16px rgba(15,23,42,.12),
    inset 0 1px 0 rgba(255,255,255,.34);
  color:#243041;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:
    transform .18s ease,
    box-shadow .18s ease,
    background .18s ease,
    border-color .18s ease,
    opacity .18s ease;
  animation:umProfHintDown 1.9s ease-in-out infinite;
}

.prof-expand-btn:hover{
  transform:translateY(-1px);
  border-color:rgba(255,255,255,.44);
  background:
    linear-gradient(180deg, rgba(255,255,255,.34), rgba(255,255,255,.18));
  box-shadow:
    0 18px 40px rgba(15,23,42,.26),
    0 8px 18px rgba(15,23,42,.14),
    inset 0 1px 0 rgba(255,255,255,.42);
}

.prof-expand-btn:active{
  transform:translateY(0);
}

.prof-expand-btn i{
  font-size:14px;
  line-height:1;
  opacity:.96;
  transition:transform .22s ease, opacity .18s ease;
}

.prof-frame-shell.is-expanded .prof-expand-btn{
  animation:umProfHintUp 1.9s ease-in-out infinite;
}

.prof-frame-shell.is-expanded .prof-expand-btn i{
  transform:rotate(180deg);
}

@keyframes umProfHintDown{
  0%,100%{
    transform:translateY(0);
    box-shadow:
      0 14px 34px rgba(15,23,42,.22),
      0 6px 16px rgba(15,23,42,.12),
      inset 0 1px 0 rgba(255,255,255,.34);
  }
  50%{
    transform:translateY(3px);
    box-shadow:
      0 18px 38px rgba(15,23,42,.24),
      0 10px 18px rgba(15,23,42,.14),
      inset 0 1px 0 rgba(255,255,255,.36);
  }
}

@keyframes umProfHintUp{
  0%,100%{
    transform:translateY(0);
    box-shadow:
      0 14px 34px rgba(15,23,42,.22),
      0 6px 16px rgba(15,23,42,.12),
      inset 0 1px 0 rgba(255,255,255,.34);
  }
  50%{
    transform:translateY(-3px);
    box-shadow:
      0 18px 38px rgba(15,23,42,.24),
      0 10px 18px rgba(15,23,42,.14),
      inset 0 1px 0 rgba(255,255,255,.36);
  }
}

@media (max-width:640px){
  .prof-expand-btn{
    width:42px;
    height:42px;
  }

  .prof-expand-btn i{
    font-size:13px;
  }
}

@media (prefers-reduced-motion: reduce){
  .prof-expand-btn,
  .prof-frame-shell.is-expanded .prof-expand-btn{
    animation:none !important;
  }
}

/* ✅ Turnos: MOBILE — scroll dentro del iframe (no del modal) */
@media (max-width: 640px){
  #turnosModal{
    left: 0 !important;
    right: 0 !important;
    top: 0 !important;
    transform: none !important;
    width: 100vw !important;
    height: 100dvh !important;  /* iOS moderno */
    height: 100vh !important;   /* fallback */
    border-radius: 0 !important;

    overflow: hidden !important; /* CLAVE: no scrollea el modal */
    -webkit-overflow-scrolling: auto;
  }

  #turnosFrame{
    width: 100% !important;
    height: 100% !important;
    border: 0 !important;
    display: block !important;

    transform: none !important; /* CLAVE: sin scale en iOS */
  }
}
/* ✅ Mobile: rail lateral para scrollear cómodo (evita el iframe “tragándose” el gesto) */
@media (max-width: 640px){
  #turnosModal{
    overflow:auto !important;
    -webkit-overflow-scrolling: touch;
  }

  /* Dejamos un espacio para el rail (zona “segura” de scroll) */
  #turnosFrame{
    width: calc(100% - 28px) !important;
    height: 160vh !important;       /* alto grande para que el modal tenga contenido para scrollear */
    transform: none !important;
  }

  /* Rail fijo al costado */
  #turnosScrollRail{
    position:absolute;
    top:0; right:0;
    width:28px;
    height:100%;
    z-index:11;
    border-left:1px solid rgba(15,23,42,.10);
    background:linear-gradient(180deg,
      rgba(15,23,42,.08),
      rgba(15,23,42,.02) 30%,
      rgba(15,23,42,.08));
  }

  /* Hint apunta al rail (más útil) */
  #turnosScrollHint{
    right: 34px;
    left: auto;
    transform:none;
    bottom: 16px;
    z-index:12;
  }
}
/* =================== UMANA NAV PILL (override) =================== */

/* para poder centrar el nav absoluto sin romper el brand/burger */
.top{ position:relative; min-height:78px; }

/* centra la píldora como en la referencia */
.umNavCenter{
  position:absolute;
  left: calc(50% + 80px) !important;
  top:50%;
  transform:translate(-50%,-50%);
  width: min(980px, 78vw);
  pointer-events:none; /* el wrapper no captura, el nav sí */
}
.umNavPill{ pointer-events:auto; }

/* la píldora blanca */
.umNavPill{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  background:#fff;
  border-radius:999px;
  padding:10px 12px;
  box-shadow:0 18px 50px rgba(0,0,0,.22);
  border:1px solid rgba(15,23,42,.08);
  overflow:visible;
}

/* lista dentro de la pill */
.umNavPill ul{
  display:flex;
  align-items:center;
  gap:6px;
  margin:0;
  padding:0 6px;
  list-style:none;
}

/* links: mismos fonts tuyos, pero look “píldora” */
.umNavPill a{
  color: var(--celeste-umana-ink);
  text-decoration:none;
  font-family: var(--menu-font);
  font-weight:700;
  font-size:16px;
  letter-spacing:.002em;
  padding:10px 14px;
  border-radius:999px;
  transition:background .18s ease-out, transform .18s ease-out, color .18s ease-out;
}

/* apagamos tu underline animada SOLO dentro de la pill */
.umNavPill a::after{ content:none !important; }

/* hover sutil como el ejemplo */
.umNavPill a:hover,
.umNavPill a:focus-visible{
  background: rgba(121,202,233,.18);
  transform: translateY(-1px);
  color: var(--celeste-umana-ink);
}

/* caret del dropdown (solo desktop) */
.umCaret{
  margin-left:8px;
  font-size:14px;
  opacity:.85;
  transform: translateY(1px);
}

/* login: mini botón redondo dentro de la pill */
.umNavPill .nav-login a{
  padding:10px 12px;
  background:rgba(15,23,42,.06);
}
.umNavPill .nav-login a:hover{
  background:rgba(121,202,233,.22);
}

/* CTA (mantiene colores UMANA) */
.umNavCTA{
  margin-left:8px;
  background: var(--rojo);
  color:#fff !important;
  font-weight:800;
  padding:14px 22px;
  border-radius:999px;
  box-shadow:0 14px 28px rgba(211,47,47,.26);
  white-space:nowrap;
}
.umNavCTA:hover{ filter:brightness(.98); transform:translateY(-1px); }

/* ========== Submenu: animación suave (fade + slide) ========== */
/* IMPORTANTE: dejamos de usar display:none para permitir animar */
.umNavPill .submenu{
  display:block !important;
  visibility:hidden;
  opacity:0;
  pointer-events:none;
  transform: translateY(10px) scale(.98);
  transition:
    opacity .18s ease-out,
    transform .18s ease-out,
    visibility 0s linear .18s;
}

/* estado abierto por hover o por class open del JS */
@media (min-width:901px){
  .umNavPill > ul > li:hover > .submenu,
  header nav > ul > li.open > .submenu,
  .umNavPill > ul > li:focus-within > .submenu{
    visibility:visible;
    opacity:1;
    pointer-events:auto;
    transform: translateY(0) scale(1);
    transition:
      opacity .18s ease-out,
      transform .18s ease-out,
      visibility 0s;
  }
}

/* look del submenu acorde al nuevo header */
.umNavPill .submenu{
  background:#fff;
  border:1px solid rgba(15,23,42,.10);
  border-radius:18px;
  padding:8px 0;
  box-shadow:0 22px 60px rgba(15,23,42,.22);
}

.umNavPill .submenu li a{
  color:#0f172a;
  font-weight:650;
  font-size:13px;
  padding:10px 14px;
  border-radius:12px;
}

.umNavPill .submenu li a:hover{
  background:rgba(121,202,233,.18);
  color:#0f172a;
}

/* heading dentro del submenu */
.umNavPill .submenu-heading{
  padding:8px 14px 6px;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.12em;
  color:rgba(15,23,42,.55);
  font-weight:700;
}

/* mobile: dejamos tu comportamiento actual (nav hidden, burger + panel) */
@media (max-width:900px){
  .umNavCenter{ display:none; }
}

/* ===== FIX: pill más chica y que no invada logo/burger ===== */
.top{ position:relative; min-height:74px; }

/* deja “márgenes” reales a izquierda y derecha */
.umNavCenter{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);

  /* clave: no puede ocupar todo el ancho */
  width: min(760px, calc(100vw - 360px)); /* ajustá 320–420 si querés */
  pointer-events:none;
}

.umNavPill{ pointer-events:auto; }

/* pill más baja */
.umNavPill{
  padding: 8px 10px;
  gap: 10px;
}

/* links más compactos */
.umNavPill ul{ gap: 4px; padding: 0 4px; }

.umNavPill a{
  font-size: 15px;
  padding: 8px 12px;
}

/* login redondito más chico */
.umNavPill .nav-login a{
  padding: 8px 10px;
}

/* si la pantalla se achica, directamente ocultamos la pill (queda tu menú mobile) */
@media (max-width: 1020px){
  .umNavCenter{ display:none; }
}

/* =================== NAV PILL DARK + BRAND PILL =================== */

.top{ position:relative; min-height:78px; }

/* pill del logo separada */
.umBrandPill{
  display:inline-flex;
  align-items:center;
  padding:8px 12px;
  border-radius:999px;
  background:rgba(0,0,0,.75);
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 18px 45px rgba(0,0,0,.35);
}

/* el logo sigue igual, solo aseguramos blanco */
.umBrandPill .brand-badge .name{ color:#fff; }
.umBrandPill .brand-badge:hover{ transform:none; } /* opcional: que no agrande */

/* centro del nav: shrink-to-fit (no ocupa el hueco del CTA) */
.umNavCenter{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  width:auto;               /* clave: no “forzamos” ancho */
  max-width:calc(100% - 360px); /* reserva espacio para logo+burger */
  pointer-events:none;
}

/* pill negra */
.umNavPill{ pointer-events:auto; }
.umNavPill--dark{
  display:inline-flex;          /* shrink-to-fit */
  align-items:center;
  justify-content:flex-start;  /* no space-between */
  gap:10px;

  background:rgba(0,0,0,.78);
  border:1px solid rgba(255,255,255,.12);
  border-radius:999px;
  padding:8px 10px;
  box-shadow:0 18px 50px rgba(0,0,0,.35);
}

/* lista compacta */
.umNavPill--dark ul{
  display:flex;
  align-items:center;
  gap:4px;
  margin:0;
  padding:0 4px;
  list-style:none;
  white-space:nowrap;
}

/* links blancos */
.umNavPill--dark a{
  color:rgba(255,255,255,.92);
  text-decoration:none;
  font-family:var(--menu-font);
  font-weight:650;
  font-size:15px;
  padding:8px 12px;
  border-radius:999px;
  transition:background .18s ease-out, transform .18s ease-out, color .18s ease-out;
}

/* apagamos tu underline animada SOLO dentro de esta pill */
.umNavPill--dark a::after{ content:none !important; }

.umNavPill--dark a:hover,
.umNavPill--dark a:focus-visible{
  background:rgba(255,255,255,.10);
  color:#fff;
  transform:translateY(-1px);
}

.umCaret{
  margin-left:8px;
  font-size:13px;
  opacity:.85;
}

/* login: circulito gris dentro de pill negra */
.umNavPill--dark .nav-login a{
  padding:8px 10px;
  background:rgba(255,255,255,.10);
}
.umNavPill--dark .nav-login a:hover{
  background:rgba(255,255,255,.16);
}

/* ===== Submenu dark (mantiene tu animación) ===== */
.umNavPill--dark .submenu{
  background:rgba(0,0,0,.92);
  border:1px solid rgba(255,255,255,.14);
  border-radius:18px;
  box-shadow:0 22px 60px rgba(0,0,0,.45);
}

.umNavPill--dark .submenu-heading{
  color:rgba(255,255,255,.65);
}

.umNavPill--dark .submenu li a{
  color:rgba(255,255,255,.86);
}
.umNavPill--dark .submenu li a:hover{
  background:rgba(255,255,255,.10);
  color:#fff;
}

/* mobile: seguimos como antes (pill se oculta) */
@media (max-width:900px){
  .umNavCenter{ display:none; }
}

/* ===== Sacar la franja de fondo del header (dejarlo transparente) ===== */
header{
  background: transparent !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
}

/* aunque se active el scroll, que no pinte nada atrás */
header.is-scrolled{
  background: transparent !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
}

/* ===== Unificar colores: submenu = mismo color que menu pill ===== */
:root{
  /* si querés, ajustá este negro UNA sola vez */
  --um-pill-bg: rgba(0,0,0,.78);
  --um-pill-bd: rgba(255,255,255,.12);
  --um-pill-tx: rgba(255,255,255,.92);
}

/* MENU pill (por si quedó algo distinto) */
.umNavPill--dark{
  background: var(--um-pill-bg) !important;
  border-color: var(--um-pill-bd) !important;
}

/* SUBMENU igual al menú */
.umNavPill--dark .submenu{
  background: var(--um-pill-bg) !important;
  border-color: var(--um-pill-bd) !important;
  -webkit-backdrop-filter:none !important;
  backdrop-filter:none !important;
  box-shadow:0 22px 60px rgba(0,0,0,.45) !important;
}

/* Texto y heading del submenu */
.umNavPill--dark .submenu-heading{
  color: rgba(255,255,255,.68) !important;
}
.umNavPill--dark .submenu li a{
  color: var(--um-pill-tx) !important;
}
.umNavPill--dark .submenu li a:hover{
  background: rgba(255,255,255,.10) !important;
  color:#fff !important;
}
/* ===== Brand pill: colapsa en scroll (solo logo) ===== */
.umBrandPill{
  overflow:hidden;                 /* clave para esconder el texto */
  transition: width .22s ease-out, padding .22s ease-out, border-radius .22s ease-out;
  will-change: width, padding;
}

/* la “pastilla” completa (estado normal) */
.umBrandPill{
  padding:8px 12px;
  border-radius:999px;
}

/* el texto UMANA */
.umBrandPill .brand-badge .name{
  display:inline-block;
  max-width:200px;
  opacity:1;
  transform:translateX(0);
  transition:max-width .22s ease-out, opacity .18s ease-out, transform .22s ease-out;
  will-change:max-width, opacity, transform;
}

/* estado colapsado */
header.is-scrolled .umBrandPill{
  padding:8px;                     /* más compacto */
}

/* oculta “UMANA” suavemente */
header.is-scrolled .umBrandPill .brand-badge .name{
  max-width:0;
  opacity:0;
  transform:translateX(-8px);
  margin:0;
  padding:0;
}

/* ajusta el gap cuando colapsa (para que no quede aire) */
header.is-scrolled .umBrandPill .brand-badge{
  gap:0;
}

/* opcional: el punto rojo queda centrado y más “badge” */
header.is-scrolled .umBrandPill .u-dot{
  width:38px;
  height:38px;
  border-radius:999px;
}
/* =========================================================
   COLAPSO EN SCROLL (logo pill + menú pill) — ROBUSTO
   Usa clase: header.um-collapsed
   ========================================================= */

/* --- Logo pill: colapsa a solo "U." --- */
.umBrandPill{ overflow:hidden; }
.umBrandPill .brand-badge{ gap:10px; transition:gap .2s ease; }
.umBrandPill .brand-badge .name{
  display:inline-block;
  max-width:220px;
  opacity:1;
  transform:translateX(0);
  transition:max-width .22s ease, opacity .18s ease, transform .22s ease;
}

/* estado colapsado */
header.um-collapsed .umBrandPill{ padding:8px !important; }
header.um-collapsed .umBrandPill .brand-badge{ gap:0 !important; }
header.um-collapsed .umBrandPill .brand-badge .name{
  max-width:0 !important;
  opacity:0 !important;
  transform:translateX(-8px) !important;
}

/* --- Menú pill: se cierra hacia la derecha y deja libre el centro --- */
.umNavCenter{
  transition: opacity .20s ease, transform .20s ease;
  will-change: opacity, transform;
}

header.um-collapsed .umNavCenter{
  opacity:0 !important;
  visibility:hidden !important;
  pointer-events:none !important;
  /* mantiene el centrado pero “se va” hacia la derecha */
  transform: translate(-50%,-50%) translateX(260px) scale(.96) !important;
}

/* IMPORTANTE: desactiva también la pill interna invisible */
header.um-collapsed .umNavCenter .umNavPill,
header.um-collapsed .umNavCenter .umNavPill *{
  pointer-events:none !important;
}

/* --- Burger: en desktop aparece SOLO cuando el menú se colapsa --- */
@media (min-width:901px){
  #menu-toggle{ display:none !important; }
  header.um-collapsed #menu-toggle{ display:inline-flex !important; }

  header.um-collapsed #menu-toggle{
    background: rgba(0,0,0,.78) !important;
    border: 1px solid rgba(255,255,255,.12) !important;
    box-shadow: 0 18px 50px rgba(0,0,0,.35) !important;
    padding: 8px 12px !important;
  }

  /* Panel hamburguesa en desktop: reusa #mobileNav como dropdown a la derecha */
  header{ overflow:visible; }

  #mobileNav.mobile{
    top: calc(var(--um-header-h, 72px) + 12px) !important;
    right: 28px !important;
    left: auto !important;
    width: 360px !important;
    max-width: calc(100vw - 36px) !important;

    border-radius: 18px !important;
    background: rgba(0,0,0,.92) !important;
    border: 1px solid rgba(255,255,255,.12) !important;
    box-shadow: 0 22px 70px rgba(0,0,0,.55) !important;
  }

  #mobileNav.mobile a{
    border-top: 1px solid rgba(255,255,255,.06) !important;
    color: rgba(255,255,255,.90) !important;
  }
  #mobileNav.mobile a:hover{
    background: rgba(255,255,255,.08) !important;
    color:#fff !important;
  }
}
/* ===== Ajuste fino: menú más bajo + logo más protagonista ===== */

/* 1) MENÚ: más bajo (NO cambia el ancho) */
.umNavPill--dark{
  padding: 6px 10px !important;   /* antes 8px 10px */
}

.umNavPill--dark ul{
  gap: 4px !important;
}

.umNavPill--dark a{
  padding: 6px 11px !important;   /* antes 8px 12px */
  font-size: 14px !important;     /* antes 15px */
  line-height: 1 !important;
}

/* login pill más compacta también */
.umNavPill--dark .nav-login a{
  padding: 6px 9px !important;
}

/* 2) LOGO: mantener tamaño de pill (como antes) */
.umBrandPill{
  padding: 8px 12px !important;   /* tamaño anterior */
}

/* “se nota más” sin agrandar la pill: leve énfasis visual */
.umBrandPill{
  box-shadow: 0 22px 60px rgba(0,0,0,.42) !important; /* un toque más de presencia */
  border-color: rgba(255,255,255,.16) !important;     /* borde apenas más visible */
}

/* mantenemos el dot como estaba */
.umBrandPill .u-dot{
  width: 36px !important;
  height: 36px !important;
  border-radius: 14px !important;
  font-size: 14px !important;
}

/* subimos apenas el texto, pero sin agrandar la pill */
.umBrandPill .brand-badge .name{
  font-size: clamp(18px, 3.2vw, 24px) !important; /* vuelve al rango anterior */
  letter-spacing: .6px !important;                 /* se percibe más “logo” */
}
/* 3) Colapsado: que siga viéndose lindo (solo “U.”) */
header.um-collapsed .umBrandPill{
  padding: 8px !important;
}
header.um-collapsed .umBrandPill .u-dot{
  width: 40px !important;
  height: 40px !important;
  border-radius: 999px !important; /* badge redondo al colapsar */
}

/* ===== Login modal: fondo del contenedor = mismo color que el menú ===== */
:root{
  --um-pill-bg: rgba(0,0,0,.78);  /* ya lo estás usando en el menú */
  --um-pill-bd: rgba(255,255,255,.12);
}

/* el “marco” del modal (afuera del iframe/card) */
#loginModal{
  background: var(--um-pill-bg) !important;
  border-color: var(--um-pill-bd) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

/* opcional: la barrita decorativa de arriba en gris suave (no roja) */
#loginModal::before{
  background: linear-gradient(90deg, rgba(255,255,255,.14), rgba(255,255,255,0)) !important;
  opacity: 1 !important;
}

/* =================== PEDIDO DE RECETAS INLINE =================== */
#pedido-recetas{ scroll-margin-top:90px; }

.rx-inline{
  padding:10px 0 26px;
}

.rx-card{
  background:linear-gradient(145deg,#ffffff,#f9fafb);
  border:1px solid #e5e7eb;
  border-radius:22px;
  box-shadow:0 24px 70px rgba(15,23,42,.12);
  overflow:hidden;
}

.rx-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  padding:18px 20px 14px;
  border-bottom:1px solid #e5e7eb;
  background:
    radial-gradient(700px 280px at 0% 0%, rgba(211,47,47,.05), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(249,250,251,.98));
}

.rx-eyebrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.14em;
  font-weight:800;
  color:#6b7280;
  margin-bottom:8px;
}

.rx-eyebrow::before{
  content:"";
  width:8px;
  height:8px;
  border-radius:999px;
  background:var(--rojo);
  box-shadow:0 0 0 5px rgba(211,47,47,.10);
}

.rx-title{
  margin:0;
  font-family:"Playfair Display",serif;
  font-size:clamp(26px,3vw,34px);
  line-height:1.1;
  color:#111827;
}

.rx-sub{
  margin:10px 0 0;
  color:#6b7280;
  font-size:14px;
  max-width:860px;
}

.rx-close{
  border:1px solid #e5e7eb;
  border-radius:999px;
  width:36px;
  height:36px;
  background:#fff;
  cursor:pointer;
  font-size:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  transition:background .18s ease, transform .18s ease, box-shadow .18s ease;
}

.rx-close:hover{
  background:#f9fafb;
  transform:translateY(-1px);
  box-shadow:0 10px 22px rgba(15,23,42,.12);
}

#rxInlineFrame{
  width:100%;
  height:640px;      /* altura inicial compacta */
  min-height:520px;
  border:0;
  display:block;
  background:#fff;
  transition:height .22s ease;
}

@media (max-width:640px){
  .rx-head{
    flex-direction:column;
    align-items:flex-start;
  }

  .rx-close{
    align-self:flex-end;
    margin-top:-46px;
  }

  #rxInlineFrame{
    height:760px;    /* base mobile, pero después JS la ajusta */
    min-height:620px;
  }
}

/* =================== MODAL ÉXITO RECETAS =================== */
#rxSuccessMask{
  position:fixed;
  inset:0;
  background:rgba(15,23,42,.60);
  -webkit-backdrop-filter:blur(4px);
  backdrop-filter:blur(4px);
  display:none;
  z-index:2300;
}

#rxSuccessModal{
  position:fixed;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  width:min(860px,96vw);
  background:var(--um-pill-bg);
  border:1px solid var(--um-pill-bd);
  border-radius:28px;
  box-shadow:0 24px 70px rgba(15,23,42,.55);
  display:none;
  z-index:2301;
  overflow:hidden;
}

#rxSuccessModal::before{
  content:"";
  position:absolute;
  left:22px;
  right:22px;
  top:12px;
  height:3px;
  border-radius:999px;
  background:linear-gradient(90deg, rgba(255,255,255,.14), rgba(255,255,255,0));
}

#rxSuccessModal .close{
  position:absolute;
  right:16px;
  top:16px;
  width:34px;
  height:34px;
  border-radius:999px;
  border:1px solid #d1d5db;
  background:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  z-index:2;
}

.rxSuccessShell{
  padding:34px;
}

.rxSuccessCard{
  background:#F7F1EB;
  border:1px solid rgba(255,255,255,.72);
  border-radius:28px;
  box-shadow:0 10px 30px rgba(15,23,42,.08);
  padding:36px 34px 28px;
}

.rxSuccessBrand{
  display:flex;
  align-items:center;
  gap:18px;
  margin-bottom:28px;
}

.rxSuccessLogo{
  width:92px;
  height:92px;
  border-radius:999px;
  background:#4a4a4a;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:inset 0 0 0 6px rgba(255,255,255,.12);
}

.rxSuccessLogo span{
  width:58px;
  height:58px;
  border-radius:999px;
  background:var(--rojo);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:800;
  font-size:28px;
}

.rxSuccessBrandName{
  font-size:26px;
  line-height:1;
  font-weight:800;
  color:#1f2937;
}

.rxSuccessBrandSub{
  font-size:17px;
  color:#6b7280;
  margin-top:4px;
}

.rxSuccessTitle{
  margin:0 0 12px;
  font-size:clamp(36px,4.2vw,64px);
  line-height:.98;
  letter-spacing:-.03em;
  color:#1f2937;
}

.rxSuccessText{
  margin:0 0 22px;
  font-size:16px;
  color:#6b7280;
}

.rxSuccessBox{
  margin:0 0 26px;
  padding:18px 20px;
  border-radius:20px;
  border:1px solid rgba(34,197,94,.28);
  background:rgba(34,197,94,.10);
  display:grid;
  gap:8px;
}

.rxSuccessBox span{
  color:#166534;
  font-size:14px;
  font-weight:600;
}

.rxSuccessBox strong{
  color:#065f46;
  font-size:clamp(26px,3vw,40px);
  line-height:1.08;
  word-break:break-word;
}

.rxSuccessActions{
  display:flex;
  justify-content:flex-start;
}

.rxSuccessActions .cta{
  min-width:170px;
}

@media (max-width:640px){
  #rxSuccessModal{
    width:min(420px, calc(100vw - 16px));
  }

  .rxSuccessShell{
    padding:16px;
  }

  .rxSuccessCard{
    padding:26px 18px 22px;
    border-radius:24px;
  }

  .rxSuccessBrand{
    gap:14px;
    margin-bottom:20px;
  }

  .rxSuccessLogo{
    width:72px;
    height:72px;
  }

  .rxSuccessLogo span{
    width:48px;
    height:48px;
    font-size:22px;
  }

  .rxSuccessBrandName{
    font-size:22px;
  }

  .rxSuccessBrandSub{
    font-size:14px;
  }

  .rxSuccessTitle{
    font-size:26px;
  }

  .rxSuccessBox strong{
    font-size:24px;
  }

  .rxSuccessActions .cta{
    width:100%;
  }
}
/* ===== Stream dentro del menú principal ===== */

/* contenedor */
.umNavPill .nav-stream{
  display:flex;
  align-items:center;
}

/* desktop: que parezca un item más del menú, no un botón aparte */
.umNavPill .nav-stream .um-stream-access{
  appearance:none;
  -webkit-appearance:none;
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  min-height:auto;
  margin:0;
  padding:6px 11px !important;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  gap:10px;
  color:rgba(255,255,255,.92) !important;
  font-family:var(--menu-font);
  font-weight:650;
  font-size:14px !important;
  line-height:1 !important;
  cursor:pointer;
  transition:background .18s ease-out, transform .18s ease-out, color .18s ease-out;
}

/* hover igual que el resto del menú */
.umNavPill .nav-stream .um-stream-access:hover,
.umNavPill .nav-stream .um-stream-access:focus-visible{
  background:rgba(255,255,255,.10) !important;
  color:#fff !important;
  transform:translateY(-1px);
  outline:none;
}

/* texto principal */
.umNavPill .nav-stream .um-stream-access__text{
  white-space:nowrap;
  line-height:1;
  color:inherit;
}

/* en desktop ocultamos el texto largo de estado */
.umNavPill .nav-stream .um-stream-access__meta{
  display:none !important;
}

/* puntito */
.umNavPill .nav-stream .um-stream-access__dot{
  width:10px;
  height:10px;
  min-width:10px;
  border-radius:999px;
  display:inline-block;
  background:#D32F2F;
  box-shadow:0 0 0 4px rgba(211,47,47,.12);
}

/* estados del puntito */
.umNavPill .nav-stream .um-stream-access.is-live .um-stream-access__dot{
  background:#19b45a;
  box-shadow:0 0 0 4px rgba(25,180,90,.16);
  animation:umStreamPulse 1.25s ease-in-out infinite;
}

.umNavPill .nav-stream .um-stream-access.is-countdown .um-stream-access__dot{
  background:#ff9800;
  box-shadow:0 0 0 4px rgba(255,152,0,.16);
}

.umNavPill .nav-stream .um-stream-access.is-ended .um-stream-access__dot,
.umNavPill .nav-stream .um-stream-access.is-off .um-stream-access__dot{
  background:#D32F2F;
  box-shadow:0 0 0 4px rgba(211,47,47,.12);
}

/* opcional: si querés que el item diga solo "Radio" en desktop */
.umNavPill .nav-stream .um-stream-access__text{
  max-width:none;
}

/* MOBILE */
#mobileNav .nav-stream-mobile{
  padding:0;
  border-top:1px solid rgba(255,255,255,.04);
}

#mobileNav .nav-stream-mobile .um-stream-access{
  width:100%;
  min-height:auto;
  padding:11px 20px;
  gap:8px;
  justify-content:flex-start;
  background:transparent !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  color:#E5E7EB;
}

#mobileNav .nav-stream-mobile .um-stream-access:hover,
#mobileNav .nav-stream-mobile .um-stream-access:focus-visible{
  background:rgba(255,255,255,.05) !important;
  color:#fff !important;
  transform:none !important;
  outline:none;
}

#mobileNav .nav-stream-mobile .um-stream-access__dot{
  width:10px;
  height:10px;
  min-width:10px;
  flex:0 0 10px;
  margin-right:2px;
}

#mobileNav .nav-stream-mobile .um-stream-access__text{
  font-size:14px;
  font-weight:400;
  line-height:1;
  color:#E5E7EB;
  white-space:nowrap;
}

#mobileNav .nav-stream-mobile .um-stream-access__meta{
  display:inline-block;
  margin-left:auto;
  font-size:12px;
  font-weight:400;
  font-style:italic;
  line-height:1;
  color:rgba(229,231,235,.62);
  white-space:nowrap;
}

/* estados: solo cambia la bolita, no toda la fila */
#mobileNav .nav-stream-mobile .um-stream-access.is-live{
  color:#E5E7EB;
}

#mobileNav .nav-stream-mobile .um-stream-access.is-live .um-stream-access__dot{
  background:#22c55e;
}

#mobileNav .nav-stream-mobile .um-stream-access.is-countdown{
  color:#E5E7EB;
}

#mobileNav .nav-stream-mobile .um-stream-access.is-countdown .um-stream-access__dot{
  background:#f59e0b;
}

#mobileNav .nav-stream-mobile .um-stream-access.is-ended,
#mobileNav .nav-stream-mobile .um-stream-access.is-off{
  color:#E5E7EB;
}

#mobileNav .nav-stream-mobile .um-stream-access.is-ended .um-stream-access__dot,
#mobileNav .nav-stream-mobile .um-stream-access.is-off .um-stream-access__dot{
  background:#d32f2f;
}

.um-stream-access{
  display:inline-flex;
  align-items:center;
  gap:12px;
  padding:8px 14px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.10);
  background:transparent;
  color:#fff;
  font:inherit;
  font-weight:700;
  cursor:pointer;
  transition:background .18s ease, border-color .18s ease, transform .18s ease;
}

.um-stream-access:hover{
  background:rgba(255,255,255,.08);
  transform:translateY(-1px);
}

/* en mobile no queremos efecto de “botón aparte” */
#mobileNav .um-stream-access:hover{
  transform:none;
}

.um-stream-access__dot{
  width:14px;
  height:14px;
  border-radius:999px;
  flex:0 0 14px;
  background:#d32f2f;
  box-shadow:0 0 0 0 rgba(211,47,47,.35);
}

.um-stream-access__text{
  font-weight:800;
  color:#fff;
  line-height:1;
}

.um-stream-access__meta{
  display:none;
}

/* estados */
.um-stream-access.is-live .um-stream-access__dot{
  background:#22c55e;
  box-shadow:0 0 0 0 rgba(34,197,94,.45);
  animation:umStreamPulse 1.4s infinite;
}

.um-stream-access.is-countdown .um-stream-access__dot{
  background:#f59e0b;
}

.um-stream-access.is-ended .um-stream-access__dot,
.um-stream-access.is-off .um-stream-access__dot{
  background:#d32f2f;
}

@keyframes umStreamPulse{
  0%   { box-shadow:0 0 0 0 rgba(34,197,94,.45); }
  70%  { box-shadow:0 0 0 10px rgba(34,197,94,0); }
  100% { box-shadow:0 0 0 0 rgba(34,197,94,0); }
}
/* =================== GUIAS & CURSOS INLINE =================== */
#guias-cursos{ scroll-margin-top:90px; }

.cursos-inline{
  padding:10px 0 28px;
}

.cursos-card{
  background:linear-gradient(145deg,#ffffff,#f9fafb);
  border:1px solid #e5e7eb;
  border-radius:22px;
  box-shadow:0 24px 70px rgba(15,23,42,.12);
  overflow:hidden;
}

.cursos-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  padding:18px 20px 14px;
  border-bottom:1px solid #e5e7eb;
  background:
    radial-gradient(700px 280px at 0% 0%, rgba(121,202,233,.10), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(249,250,251,.98));
}

.cursos-eyebrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.14em;
  font-weight:800;
  color:#6b7280;
  margin-bottom:8px;
}

.cursos-eyebrow::before{
  content:"";
  width:8px;
  height:8px;
  border-radius:999px;
  background:var(--celeste-umana);
  box-shadow:0 0 0 5px rgba(121,202,233,.14);
}

.cursos-title{
  margin:0;
  font-family:"Playfair Display",serif;
  font-size:clamp(26px,3vw,34px);
  line-height:1.1;
  color:#111827;
}

.cursos-sub{
  margin:10px 0 0;
  color:#6b7280;
  font-size:14px;
  max-width:860px;
}

.cursos-close{
  border:1px solid #e5e7eb;
  border-radius:999px;
  width:36px;
  height:36px;
  background:#fff;
  cursor:pointer;
  font-size:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  transition:background .18s ease, transform .18s ease, box-shadow .18s ease;
}

.cursos-close:hover{
  background:#f9fafb;
  transform:translateY(-1px);
  box-shadow:0 10px 22px rgba(15,23,42,.12);
}

#cursosInlineFrame{
  width:100%;
  height:480px;
  min-height:380px;
  border:0;
  display:block;
  background:transparent;
  transition:height .22s ease;
}

@media (max-width:640px){
  .cursos-head{
    flex-direction:column;
    align-items:flex-start;
  }

  .cursos-close{
    align-self:flex-end;
    margin-top:-46px;
  }

  #cursosInlineFrame{
    height:620px;
    min-height:520px;
  }
}

/* =================== PACK UMANA NAV + MODAL =================== */

/* Desktop */
.um-pack-item{
  position:relative;
  flex:0 0 92px;
  width:92px;
  min-width:92px;
  height:34px;
  margin:0;
  overflow:visible !important;
}

.umNavPill--dark .um-pack-link{
  position:relative;
  display:block;
  width:92px;
  height:34px;
  padding:0 !important;
  margin:0 !important;
  background:transparent !important;
  border-radius:0 !important;
  overflow:visible !important;
  isolation:isolate;
  text-decoration:none !important;
  transform:translateY(0) !important;
  transition:transform .14s ease-out;
}

.umNavPill--dark .um-pack-link::after{
  content:none !important;
}

.um-pack-splash{
  position:absolute;
  left:50%;
  top:50%;
  width:84px;              /* más chica para no invadir */
  height:58px;
  transform:translate(-50%,-56%);
  display:block;
  overflow:visible !important;
  pointer-events:none;
  filter:drop-shadow(0 8px 14px rgba(211,47,47,.18));
  transition:filter .16s ease-out;
}

.um-pack-label{
  position:absolute;
  left:50%;
  top:50%;
  width:84px;
  height:58px;
  transform:translate(-50%,-56%);
  z-index:2;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  line-height:.84;
  font-family:"Playfair Display", serif;
  font-weight:700;
  font-size:13px;
  letter-spacing:0;
  color:#fff;
  text-align:center;
  pointer-events:none;
  text-shadow:0 1px 2px rgba(0,0,0,.12);
}

/* Hover MUY sutil: sin scale */
.um-pack-link:hover .um-pack-splash,
.um-pack-link:focus-visible .um-pack-splash{
  filter:drop-shadow(0 6px 10px rgba(211,47,47,.18));
}

.um-pack-link:hover,
.um-pack-link:focus-visible{
  background:transparent !important;
  color:#fff !important;
  transform:translateY(1px) !important;
}

.um-pack-link:active{
  transform:translateY(2px) !important;
}

/* nada recorta arriba/abajo */
header,
header .top,
.umNavCenter,
.umNavPill,
.umNavPill--dark,
.umNavPill--dark ul,
.umNavPill--dark li{
  overflow:visible !important;
}

/* Mobile */
.um-pack-mobile a{
  position:relative;
  color:#fff;
  font-weight:600;
}

.um-pack-mobile-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:10px;
  height:10px;
  border-radius:999px;
  background:var(--rojo);
  box-shadow:0 0 0 4px rgba(211,47,47,.12);
  margin-right:2px;
  flex:0 0 10px;
}

/* Modal Pack */
/* =================== PACK UMANA INLINE =================== */
#pack-umana{ scroll-margin-top:90px; }

.pack-inline{
  padding:10px 0 26px;
}

.pack-card{
  background:linear-gradient(145deg,#ffffff,#f9fafb);
  border:1px solid #e5e7eb;
  border-radius:22px;
  box-shadow:0 24px 70px rgba(15,23,42,.12);
  overflow:hidden;
}

.pack-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  padding:18px 20px 14px;
  border-bottom:1px solid #e5e7eb;
  background:
    radial-gradient(700px 280px at 0% 0%, rgba(211,47,47,.08), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(249,250,251,.98));
}

.pack-tags{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin:4px 0 10px;
}

.pack-chip{
  cursor:pointer;
  border-color:rgba(34,197,94,.34) !important;
  background:rgba(34,197,94,.10) !important;
  color:#166534 !important;
  box-shadow:0 10px 22px rgba(34,197,94,.10);
}

.pack-chip:hover,
.pack-chip:focus-visible{
  background:rgba(34,197,94,.16) !important;
  border-color:rgba(34,197,94,.48) !important;
  color:#14532d !important;
}

.pack-eyebrow{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-family:"Playfair Display", serif;
  font-size:clamp(22px,2.5vw,30px);
  line-height:1.02;
  text-transform:none;
  letter-spacing:.02em;
  font-weight:700;
  color:var(--rojo);
  margin-bottom:8px;
  text-shadow:
    0 2px 0 rgba(255,255,255,.55),
    0 6px 16px rgba(120, 20, 20, .28);
}

.pack-eyebrow::before{
  content:"";
  width:10px;
  height:10px;
  border-radius:999px;
  background:var(--rojo);
  box-shadow:0 0 0 7px rgba(211,47,47,.10);
}

.pack-sub{
  margin:10px 0 0;
  color:#6b7280;
  font-size:14px;
  max-width:860px;
}

.pack-close{
  border:1px solid #e5e7eb;
  border-radius:999px;
  width:36px;
  height:36px;
  background:#fff;
  cursor:pointer;
  font-size:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  transition:background .18s ease, transform .18s ease, box-shadow .18s ease;
}

.pack-close:hover{
  background:#f9fafb;
  transform:translateY(-1px);
  box-shadow:0 10px 22px rgba(15,23,42,.12);
}

#packInlineFrame{
  width:100%;
  height:700px;
  min-height:560px;
  border:0;
  display:block;
  background:#fff;
  transition:height .22s ease;
}

@media (max-width:640px){
  .pack-head{
    flex-direction:column;
    align-items:flex-start;
  }

  .pack-close{
    align-self:flex-end;
    margin-top:-46px;
  }

  #packInlineFrame{
    height:760px;
    min-height:620px;
  }
}
  

/* =================== HERO V2 (reemplazo visual del hero actual) =================== */
.hero.hero-v2{
  padding:clamp(18px,3vw,30px) 0 26px;
  background:
    radial-gradient(1200px 620px at 0% 0%, rgba(211,47,47,.08), transparent 36%),
    radial-gradient(900px 560px at 100% 8%, rgba(121,202,233,.14), transparent 32%),
    linear-gradient(180deg, #f4efea 0%, #f8f4f0 100%);
}

.hero-v2 .hero-shell{
  position:relative;
  overflow:hidden;
  min-height:min(79vh,760px);
  border-radius:42px;
  border:1px solid rgba(255,255,255,.78);
  background:
    linear-gradient(135deg, rgba(255,255,255,.70), rgba(244,238,234,.84));
  box-shadow:
    0 36px 90px rgba(66,49,41,.12),
    inset 0 1px 0 rgba(255,255,255,.75);
}

.hero-v2 .hero-shell::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg, rgba(255,255,255,.16) 0%, rgba(255,255,255,0) 42%),
    linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,0) 24%);
  pointer-events:none;
}

.hero-v2 .hero-orb{
  position:absolute;
  border-radius:999px;
  filter:blur(10px);
  opacity:.58;
  pointer-events:none;
}
.hero-v2 .hero-orb--1{
  width:min(34vw,480px); height:min(34vw,480px);
  right:-7%; top:-8%;
  background:radial-gradient(circle at 35% 35%, rgba(240,172,162,.95), rgba(223,154,146,.68) 54%, rgba(223,154,146,0) 72%);
}
.hero-v2 .hero-orb--2{
  width:min(28vw,360px); height:min(28vw,360px);
  left:10%; bottom:8%;
  background:radial-gradient(circle at 35% 35%, rgba(169,203,221,.78), rgba(121,202,233,.34) 58%, rgba(121,202,233,0) 76%);
}
.hero-v2 .hero-orb--3{
  width:min(22vw,280px); height:min(22vw,280px);
  left:32%; top:12%;
  background:radial-gradient(circle at 40% 40%, rgba(255,255,255,.88), rgba(255,255,255,.26) 58%, rgba(255,255,255,0) 78%);
  filter:blur(14px);
}

.hero-v2 .hero-stage{
  position:relative;
  z-index:1;
  min-height:inherit;
  display:grid;
  grid-template-columns:minmax(320px, 42%) 1fr;
  gap:clamp(28px,5vw,72px);
  align-items:center;
  padding:clamp(26px,4vw,54px);
}

.hero-v2 .figure{
  margin:0;
  padding:0;
  min-height:540px;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  position:relative;
}

.hero-v2 .figure::before{
  content:"";
  position:absolute;
  inset:7% 8% 2% 6%;
  border-radius:36px;
  background:linear-gradient(180deg, rgba(255,255,255,.46), rgba(255,255,255,.10));
  border:1px solid rgba(255,255,255,.38);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.42);
}

.hero-v2 .figure::after{
  content:"";
  position:absolute;
  left:4%;
  right:16%;
  bottom:3%;
  height:18%;
  border-radius:999px;
  background:radial-gradient(ellipse at center, rgba(43,35,31,.18) 0%, rgba(43,35,31,0) 72%);
  filter:blur(18px);
}

.hero-v2 .hero-photo-frame{
  position:relative;
  z-index:1;
  width:min(100%, 470px);
  display:flex;
  align-items:flex-end;
  justify-content:center;
}

.hero-v2 .photo{
  width:min(100%, 430px);
  max-width:none;
  aspect-ratio:4 / 5.2;
  object-fit:cover;
  object-position:center top;
  border-radius:34px 34px 28px 28px;
  border:1px solid rgba(255,255,255,.72);
  background:transparent;
  box-shadow:0 32px 70px rgba(34,26,22,.18);
}

.hero-v2 .photo.pos-left{ object-position:left center; }

.hero-v2 .hero-copy{
  position:relative;
  z-index:1;
  max-width:620px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
}

.hero-v2 .hero-eyebrow{
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin-bottom:18px;
  padding:8px 14px;
  border-radius:999px;
  background:rgba(255,255,255,.56);
  border:1px solid rgba(255,255,255,.68);
  color:#6b625d;
  font-size:12px;
  letter-spacing:.16em;
  text-transform:uppercase;
  backdrop-filter:blur(10px);
}

.hero-v2 .hero-eyebrow::before{
  content:"";
  width:8px; height:8px; border-radius:999px;
  background:var(--rojo);
  box-shadow:0 0 0 5px rgba(211,47,47,.12);
}

.hero-v2 .title{
  margin:0;
  font-size:clamp(38px,5.3vw,78px);
  line-height:.98;
  color:#f7f4f1;
  text-shadow:0 10px 34px rgba(43,33,28,.14);
}

.hero-v2 .title::after{
  width:min(68%, 340px);
  height:16px;
  bottom:-8px;
  background:linear-gradient(90deg, rgba(211,47,47,.22), rgba(211,47,47,0));
}

.hero-v2 .title .nutri{
  background:linear-gradient(120deg, #f8f7f4, #eadfd9);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.hero-v2 #heroLine1,
.hero-v2 #heroLine2{
  color:#fffdfb;
}

.hero-v2 .age-pill{
  margin-top:10px;
  background:rgba(255,255,255,.14);
  border-color:rgba(255,255,255,.34);
  color:#fff;
  backdrop-filter:blur(8px);
}

.hero-v2 .hero-sub{
  max-width:520px;
  margin:24px 0 0;
  color:rgba(255,255,255,.88);
  font-size:16px;
  line-height:1.65;
}

.hero-v2 .hero-pro{
  margin-top:18px;
  padding:10px 14px;
  border-radius:999px;
  background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.28);
  color:var(--rojo);
  font-size:13px;
  font-weight:700;
  letter-spacing:.04em;
  box-shadow:0 12px 28px rgba(15,23,42,.10);
  backdrop-filter:blur(10px);
}

.hero-v2 .hero-pro::before{
  background:var(--rojo);
  box-shadow:0 0 0 5px rgba(211,47,47,.12);
}

.hero-v2 .hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:22px;
}

.hero-v2 .cta{
  min-height:48px;
}

.hero-v2 .btn-ghost{
  min-height:48px;
  border-color:rgba(255,255,255,.24);
  background:rgba(255,255,255,.12);
  color:#fff;
  box-shadow:none;
  backdrop-filter:blur(10px);
}

.hero-v2 .btn-ghost:hover{
  background:rgba(255,255,255,.18);
  color:#fff;
}

.hero-v2 .hero-dots{
  margin-top:26px;
}

.hero-v2 .hero-dots button{
  background:rgba(255,255,255,.34);
}

.hero-v2 .hero-dots button[aria-selected="true"]{
  background:#fff;
}

@media (max-width: 980px){
  .hero-v2 .hero-stage{
    grid-template-columns:1fr;
    gap:20px;
  }

  .hero-v2 .figure{
    min-height:400px;
    order:2;
  }

  .hero-v2 .hero-copy{
    max-width:none;
    order:1;
    padding-top:12px;
  }

  .hero-v2 .title{
    font-size:clamp(34px, 9vw, 62px);
  }
}

@media (max-width: 640px){
  .hero.hero-v2{
    padding:12px 0 18px;
  }

  .hero-v2 .hero-shell{
    min-height:auto;
    border-radius:28px;
  }

  .hero-v2 .hero-stage{
    padding:18px 16px 20px;
    gap:16px;
  }

  .hero-v2 .hero-eyebrow{
    margin-bottom:14px;
    padding:7px 12px;
    font-size:11px;
    letter-spacing:.14em;
  }

  .hero-v2 .hero-sub{
    margin-top:18px;
    font-size:14px;
  }

  .hero-v2 .hero-actions{
    width:100%;
    flex-direction:column;
  }

  .hero-v2 .hero-actions .cta,
  .hero-v2 .hero-actions .btn-ghost{
    width:100%;
    justify-content:center;
  }

  .hero-v2 .figure{
    min-height:300px;
  }

  .hero-v2 .figure::before{
    inset:4% 4% 0 4%;
    border-radius:24px;
  }

  .hero-v2 .photo{
    width:min(100%, 290px);
    border-radius:24px 24px 20px 20px;
  }
}

/* =========================================================
   AJUSTE · FONDO CONTINUO DETRÁS DEL MENÚ
   Hace que el hero suba por detrás del header para evitar
   la franja clara cortada debajo del menú.
========================================================= */
:root{
  --um-header-space: 112px;
}

html,
body{
  background:
    radial-gradient(1200px 620px at 0% 0%, rgba(211,47,47,.08), transparent 36%),
    radial-gradient(900px 560px at 100% 8%, rgba(121,202,233,.14), transparent 32%),
    linear-gradient(180deg, #cbc8cb 0%, #c3c0c3 20%, #f1ece8 52%, #f8f4f0 100%) !important;
}

header{
  margin-bottom: calc(-1 * var(--um-header-space)) !important;
  background: transparent !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
}

main#app{
  position: relative;
  z-index: 1;
  padding-top: var(--um-header-space);
  background: transparent !important;
}

#inicio.hero.hero-v2{
  background:
    radial-gradient(1200px 620px at 0% 0%, rgba(211,47,47,.08), transparent 36%),
    radial-gradient(900px 560px at 100% 8%, rgba(121,202,233,.14), transparent 32%),
    linear-gradient(180deg, #cbc8cb 0%, #c3c0c3 20%, #f1ece8 52%, #f8f4f0 100%) !important;
}

@media (max-width: 900px){
  :root{
    --um-header-space: 98px;
  }
}

/* =========================================================
   AJUSTE FINO · HERO INTERIOR
   Mantiene el fondo continuo logrado y recupera el look
   prolijo del interior del hero sin tocar el resto.
========================================================= */
.hero-v2 .hero-shell{
  background:
    linear-gradient(180deg, rgba(255,255,255,.46), rgba(255,255,255,.22)) !important;
  border:1px solid rgba(255,255,255,.40) !important;
  box-shadow:
    0 28px 60px rgba(15,23,42,.10),
    inset 0 1px 0 rgba(255,255,255,.44) !important;
  -webkit-backdrop-filter:blur(14px) saturate(120%);
  backdrop-filter:blur(14px) saturate(120%);
}

.hero-v2 .hero-shell::before{
  background:linear-gradient(180deg, rgba(255,255,255,0), rgba(255,255,255,.08) 24%, rgba(255,255,255,.20) 100%) !important;
}

.hero-v2 .hero-eyebrow{
  background:rgba(255,255,255,.44) !important;
  border:1px solid rgba(255,255,255,.46) !important;
  color:#6b625d !important;
  box-shadow:0 12px 26px rgba(15,23,42,.06) !important;
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
}

.hero-v2 .hero-eyebrow::before{
  background:var(--rojo) !important;
  box-shadow:0 0 0 5px rgba(211,47,47,.12) !important;
}

.hero-v2 .title{
  color:#fff !important;
  text-shadow:
    0 2px 8px rgba(15,23,42,.20),
    0 16px 34px rgba(15,23,42,.16) !important;
}

.hero-v2 .title::after{
  width:min(56%, 320px) !important;
  height:12px !important;
  bottom:-6px !important;
  background:linear-gradient(90deg, rgba(255,255,255,.38), rgba(255,255,255,0)) !important;
}

.hero-v2 .title .nutri{
  background:none !important;
  -webkit-background-clip:border-box !important;
  background-clip:border-box !important;
  color:#fff !important;
}

.hero-v2 #heroLine1,
.hero-v2 #heroLine2{
  color:#fff !important;
}

#heroAgePill,
.hero-v2 .age-pill{
  background:linear-gradient(180deg, rgba(255,255,255,.20), rgba(255,255,255,.10)) !important;
  border:1px solid rgba(255,255,255,.34) !important;
  color:#fff !important;
  box-shadow:
    0 18px 42px rgba(15,23,42,.12),
    inset 0 1px 0 rgba(255,255,255,.22) !important;
  -webkit-backdrop-filter:blur(12px) saturate(120%);
  backdrop-filter:blur(12px) saturate(120%);
}

.hero-v2 .hero-sub{
  color:rgba(255,255,255,.92) !important;
  text-shadow:0 2px 8px rgba(15,23,42,.12) !important;
}

.hero-v2 .hero-pro{
  background:rgba(255,255,255,.14) !important;
  border:1px solid rgba(255,255,255,.28) !important;
  color:var(--rojo) !important;
  box-shadow:0 14px 32px rgba(15,23,42,.10) !important;
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
}

.hero-v2 .hero-pro::before{
  background:var(--rojo) !important;
  box-shadow:0 0 0 5px rgba(211,47,47,.12) !important;
}

.hero-v2 .hero-photo-frame{
  padding:16px;
  border-radius:34px;
  background:linear-gradient(180deg, rgba(255,255,255,.30), rgba(255,255,255,.10)) !important;
  border:1px solid rgba(255,255,255,.34) !important;
  box-shadow:
    0 28px 56px rgba(15,23,42,.10),
    inset 0 1px 0 rgba(255,255,255,.28) !important;
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
}

.hero-v2 .btn-ghost{
  background:rgba(255,255,255,.16) !important;
  border:1px solid rgba(255,255,255,.24) !important;
  color:#fff !important;
  box-shadow:0 16px 30px rgba(15,23,42,.10) !important;
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
}

.hero-v2 .btn-ghost:hover{
  background:rgba(255,255,255,.22) !important;
  color:#fff !important;
}

.hero-v2 .hero-dots button{
  background:rgba(255,255,255,.34) !important;
}

.hero-v2 .hero-dots button[aria-selected="true"]{
  background:#fff !important;
}

/* =========================================================
   AJUSTE MINIMO · subtítulo y gragea ghost del hero
   Solo corrige visibilidad, sin tocar el resto.
========================================================= */
.hero-v2 .hero-sub{
  color:#f7f3ef !important;
  text-shadow:
    0 2px 10px rgba(15,23,42,.14),
    0 8px 20px rgba(15,23,42,.10) !important;
}

.hero-v2 .btn-ghost{
  background:rgba(255,255,255,.24) !important;
  border:1px solid rgba(255,255,255,.34) !important;
  color:#f7f3ef !important;
  box-shadow:
    0 16px 30px rgba(15,23,42,.10),
    inset 0 1px 0 rgba(255,255,255,.18) !important;
}

.hero-v2 .btn-ghost i{
  color:inherit !important;
  opacity:.96 !important;
}

.hero-v2 .btn-ghost:hover{
  background:rgba(255,255,255,.30) !important;
  color:#fff !important;
}

/* =========================================================
   FIX MINIMO · hero-sub + btn ghost visibles
   Solo corrige estas 2 piezas del hero.
========================================================= */
.hero-v2 .hero-sub{
  color:rgba(96,84,78,.88) !important;
  text-shadow:0 1px 0 rgba(255,255,255,.22) !important;
}

.hero-v2 .btn-ghost{
  background:rgba(255,255,255,.34) !important;
  border:1px solid rgba(255,255,255,.50) !important;
  color:#6b5f59 !important;
  box-shadow:
    0 14px 28px rgba(15,23,42,.08),
    inset 0 1px 0 rgba(255,255,255,.26) !important;
}

.hero-v2 .btn-ghost i{
  color:#6b5f59 !important;
  opacity:.96 !important;
}

.hero-v2 .btn-ghost:hover{
  background:rgba(255,255,255,.42) !important;
  border-color:rgba(255,255,255,.58) !important;
  color:#5f544f !important;
}


/* =========================================================
   AJUSTE · FONDO ÚNICO HOME (hero + equipo + testimonios)
   No cambia cards ni contenido; solo elimina los bloques marcados
   para que todo flote sobre una misma atmósfera.
========================================================= */
:root{
  --um-home-stage:
    radial-gradient(1200px 620px at 0% 0%, rgba(211,47,47,.08), transparent 36%),
    radial-gradient(900px 560px at 100% 8%, rgba(121,202,233,.14), transparent 32%),
    linear-gradient(180deg, #cbc8cb 0%, #c3c0c3 20%, #f1ece8 52%, #f8f4f0 100%);
}

html,
body,
main#app{
  background:var(--um-home-stage) !important;
}

/* el hero mantiene su contenido actual pero deja de ser un bloque aparte */
#inicio.hero,
#inicio.hero.hero-v2{
  background:transparent !important;
  border:0 !important;
}

/* sacamos el “sector marcado” de equipo y testimonios */
#equipo-turnos.team,
.team,
.testimonials{
  background:transparent !important;
  border-top:0 !important;
  box-shadow:none !important;
}

/* un pelín de continuidad visual debajo del hero, sin crear otro bloque */
#equipo-turnos.team{
  position:relative;
  margin-top:-10px !important;
  padding-top:46px !important;
}

#equipo-turnos.team::before,
.testimonials::before{
  content:none !important;
}

@media (max-width:680px){
  #equipo-turnos.team{
    margin-top:-6px !important;
    padding-top:34px !important;
  }
}

/* =========================================================
   TEAM CARDS V2 · look editorial / umana v2
   Mantiene HTML y funciones actuales (grageas, links, popovers)
========================================================= */
#equipo-turnos.team{
  padding-top:52px !important;
}

#equipo-turnos .team-grid{
  gap:24px !important;
}

#equipo-turnos .pcard{
  position:relative;
  padding:18px 18px 16px !important;
  border-radius:30px !important;
  border:1px solid rgba(255,255,255,.58) !important;
  background:linear-gradient(180deg, rgba(255,255,255,.74), rgba(255,255,255,.52)) !important;
  box-shadow:
    0 22px 50px rgba(15,23,42,.08),
    0 8px 18px rgba(15,23,42,.05),
    inset 0 1px 0 rgba(255,255,255,.78) !important;
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
  overflow:hidden;
  transition:transform .22s ease-out, box-shadow .22s ease-out, border-color .22s ease-out;
}

#equipo-turnos .pcard::before{
  content:"";
  position:absolute;
  left:20px;
  right:20px;
  top:0;
  height:4px;
  border-radius:999px;
  background:linear-gradient(90deg, rgba(211,47,47,.56), rgba(121,202,233,.46), rgba(121,202,233,0));
  opacity:.95;
}

#equipo-turnos .pcard::after{
  content:"";
  position:absolute;
  right:-26px;
  bottom:-34px;
  width:128px;
  height:128px;
  border-radius:999px;
  background:radial-gradient(circle, rgba(211,47,47,.07), rgba(211,47,47,0) 70%);
  pointer-events:none;
}

#equipo-turnos .pcard:hover{
  transform:translateY(-6px);
  border-color:rgba(255,255,255,.72) !important;
  box-shadow:
    0 28px 62px rgba(15,23,42,.11),
    0 12px 24px rgba(15,23,42,.06),
    inset 0 1px 0 rgba(255,255,255,.82) !important;
}

#equipo-turnos .p-top{
  display:grid !important;
  grid-template-columns:64px 1fr;
  gap:14px !important;
  align-items:center;
}

#equipo-turnos .p-avatar{
  width:64px !important;
  height:64px !important;
  border-radius:999px !important;
  border:2px solid rgba(255,255,255,.92) !important;
  box-shadow:
    0 12px 28px rgba(15,23,42,.10),
    0 0 0 1px rgba(211,47,47,.12) !important;
  transform:none !important;
}

#equipo-turnos .pcard:hover .p-avatar{
  box-shadow:
    0 16px 34px rgba(15,23,42,.14),
    0 0 0 1px rgba(211,47,47,.18) !important;
}

#equipo-turnos .p-avatar img,
#equipo-turnos .pcard:hover .p-avatar img,
#equipo-turnos .p-avatar:hover img{
  width:100%;
  height:100%;
  object-fit:cover;
  transform:none !important;
  transition:none !important;
}

#equipo-turnos .p-name{
  margin:0 !important;
  font-size:clamp(18px, 1.2vw, 22px) !important;
  line-height:1.08 !important;
  letter-spacing:-.02em;
  color:#162131 !important;
}

#equipo-turnos .p-spec{
  margin-top:6px !important;
  color:#6d7784 !important;
  font-size:15px !important;
  line-height:1.42 !important;
}

#equipo-turnos .p-tags{
  gap:9px !important;
  margin-top:4px;
}

#equipo-turnos .tag{
  min-height:36px;
  padding:7px 14px !important;
  border-radius:999px !important;
  font-size:12px !important;
  font-weight:700 !important;
  letter-spacing:.10em !important;
  text-transform:uppercase;
  box-shadow:none !important;
}

#equipo-turnos .tag.red{
  color:#8a2e2e !important;
  background:rgba(211,47,47,.05) !important;
  border-color:rgba(211,47,47,.24) !important;
}

#equipo-turnos .p-tags .tag:not(.red){
  color:var(--celeste-umana-ink) !important;
  background:rgba(121,202,233,.16) !important;
  border-color:rgba(121,202,233,.48) !important;
}

#equipo-turnos .p-tags .tag.tn-open:hover,
#equipo-turnos .p-tags .tag.tn-open:focus-visible{
  transform:translateY(-1px);
  background:rgba(121,202,233,.22) !important;
  border-color:rgba(121,202,233,.72) !important;
  box-shadow:0 10px 22px rgba(15,23,42,.08) !important;
}

#equipo-turnos .p-desc{
  color:#374454 !important;
  font-size:15px !important;
  line-height:1.68 !important;
  margin-top:2px !important;
}

#equipo-turnos .p-cta{
  display:grid !important;
  grid-template-columns:1fr 1fr;
  gap:12px !important;
  margin-top:auto;
}

#equipo-turnos .pcard .p-cta a{
  min-width:0 !important;
  white-space:nowrap;
}

#equipo-turnos .pcard .p-cta .btn-ghost,
#equipo-turnos .pcard .p-cta .cta{
  min-height:48px;
  padding:12px 16px !important;
  border-radius:999px !important;
  font-size:12px !important;
  letter-spacing:.11em !important;
}

#equipo-turnos .pcard .p-cta .btn-ghost{
  background:rgba(255,255,255,.84) !important;
  border:1px solid rgba(15,23,42,.08) !important;
  color:#1f2b36 !important;
  box-shadow:0 10px 20px rgba(15,23,42,.05) !important;
}

#equipo-turnos .pcard .p-cta .btn-ghost:hover{
  background:#fff !important;
  transform:translateY(-1px);
}

#equipo-turnos .pcard .p-cta .cta{
  background:linear-gradient(135deg, #e23232, #d32f2f 58%, #bf2626 100%) !important;
  color:#fff !important;
  box-shadow:
    0 14px 28px rgba(211,47,47,.22),
    0 4px 10px rgba(211,47,47,.10) !important;
}

#equipo-turnos .pcard .p-cta .cta::before{
  left:20px !important;
  right:20px !important;
  bottom:-6px !important;
  height:10px !important;
  background:rgba(211,47,47,.10) !important;
}

@media (max-width:1100px){
  #equipo-turnos .team-grid{
    grid-template-columns:repeat(2, minmax(0,1fr)) !important;
  }
}

@media (max-width:680px){
  #equipo-turnos.team{
    padding-top:38px !important;
  }

  #equipo-turnos .team-grid{
    grid-template-columns:1fr !important;
    gap:16px !important;
  }

  #equipo-turnos .pcard{
    border-radius:24px !important;
    padding:16px !important;
  }

  #equipo-turnos .p-top{
    grid-template-columns:56px 1fr;
    gap:12px !important;
  }

  #equipo-turnos .p-avatar{
    width:56px !important;
    height:56px !important;
  }

  #equipo-turnos .p-name{
    font-size:20px !important;
  }

  #equipo-turnos .p-spec{
    font-size:14px !important;
  }

  #equipo-turnos .p-desc{
    font-size:14px !important;
    line-height:1.62 !important;
  }

  #equipo-turnos .p-cta{
    grid-template-columns:1fr !important;
  }
}
/* ===== EQUIPO · quitar línea superior + pills glass iPhone/macOS ===== */

/* 1) sacamos la línea rojo→celeste arriba de cada card */
.pcard::before{
  content:none !important;
}

/* 2) modalidad: glass visible, no transparente */
.p-tags .tag:not(.red){
  position:relative;
  overflow:hidden;
  min-height:38px;
  padding:8px 15px !important;
  border-radius:999px !important;

  color:var(--celeste-umana-ink) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.72), rgba(255,255,255,.44)) !important;
  border:1px solid rgba(121,202,233,.42) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.88),
    0 8px 18px rgba(15,23,42,.06) !important;

  -webkit-backdrop-filter:blur(10px) saturate(140%);
  backdrop-filter:blur(10px) saturate(140%);

  transition:
    transform .18s ease-out,
    color .18s ease-out,
    border-color .18s ease-out,
    background .18s ease-out,
    box-shadow .18s ease-out;
}

/* brillo interno tipo glass */
.p-tags .tag:not(.red)::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  background:
    linear-gradient(180deg, rgba(255,255,255,.42), rgba(255,255,255,0) 46%),
    linear-gradient(115deg, transparent 0 42%, rgba(255,255,255,.16) 50%, transparent 58%);
  opacity:.9;
}

/* hover/focus: pasa de glass a celeste */
.p-tags .tag.tn-open:not(.red):hover,
.p-tags .tag.tn-open:not(.red):focus-visible{
  color:#fff !important;
  background:
    linear-gradient(180deg, rgba(121,202,233,.94), rgba(92,186,224,.90)) !important;
  border-color:rgba(121,202,233,.96) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.24),
    0 12px 26px rgba(121,202,233,.22) !important;
  transform:translateY(-1px);
  outline:none;
}

/* activo: un poco más sólido */
.p-tags .tag.tn-open:not(.red):active,
.p-tags .tag.tn-open.is-active:not(.red){
  color:#fff !important;
  background:
    linear-gradient(180deg, rgba(78,174,214,.98), rgba(64,160,201,.96)) !important;
  border-color:rgba(64,160,201,.98) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    0 8px 18px rgba(121,202,233,.20) !important;
  transform:translateY(0);
}

/* si alguna es link visitado, no cambia */
.p-tags a.tag:not(.red):visited{
  color:var(--celeste-umana-ink) !important;
}
.p-tags a.tag.tn-open:not(.red):hover:visited,
.p-tags a.tag.tn-open.is-active:not(.red):visited{
  color:#fff !important;
}

/* ===== PACK UMANA · sin base propia, apoyado directo en la barra ===== */

.um-pack-item{
  position:relative;
  flex:0 0 84px !important;
  width:84px !important;
  min-width:84px !important;
  height:34px !important;
  margin:0 4px !important;
  overflow:visible !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
}

.umNavPill--dark .um-pack-link{
  position:relative;
  display:block;
  width:84px !important;
  height:34px !important;
  padding:0 !important;
  margin:0 !important;
  background:transparent !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  overflow:visible !important;
  isolation:isolate;
  text-decoration:none !important;
  transform:translateY(0) !important;
  -webkit-backdrop-filter:none !important;
  backdrop-filter:none !important;
  transition:transform .14s ease-out;
}

.umNavPill--dark .um-pack-link::before,
.umNavPill--dark .um-pack-link::after{
  content:none !important;
}

.um-pack-splash{
  width:82px !important;
  height:56px !important;
  transform:translate(-50%,-56%) !important;
  filter:drop-shadow(0 6px 10px rgba(211,47,47,.16)) !important;
}

.um-pack-label{
  width:82px !important;
  height:56px !important;
  transform:translate(-50%,-56%) !important;
  font-size:12px !important;
  line-height:.82 !important;
  text-shadow:0 1px 2px rgba(0,0,0,.10) !important;
}

/* hover muy sutil, sin crear “botón” de fondo */
.um-pack-link:hover,
.um-pack-link:focus-visible{
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  transform:translateY(1px) !important;
}

.um-pack-link:hover .um-pack-splash,
.um-pack-link:focus-visible .um-pack-splash{
  filter:drop-shadow(0 8px 12px rgba(211,47,47,.20)) !important;
}

.um-pack-link:active{
  transform:translateY(2px) !important;
}
.pack-sub-list{
  margin:8px 0 0;
  padding:0;
  list-style:none;
  display:grid;
  gap:6px;
  max-width:520px;
}

.pack-sub-list li{
  position:relative;
  margin:0;
  padding-left:16px;
  color:#6d635b;
  font-size:13.5px;
  line-height:1.45;
}

.pack-sub-list li::before{
  content:"";
  position:absolute;
  left:0;
  top:8px;
  width:7px;
  height:7px;
  border-radius:50%;
  background:#6E8750;
  box-shadow:0 0 0 3px rgba(110,135,80,.12);
}

.pack-sub-list strong{
  font-weight:800;
  color:#4d4741;
}

@media (max-width:640px){
  .pack-sub-list{
    margin-top:6px;
    gap:5px;
    max-width:100%;
  }

  .pack-sub-list li{
    font-size:13px;
    line-height:1.4;
    padding-left:15px;
  }

  .pack-sub-list li::before{
    top:7px;
    width:6px;
    height:6px;
  }
}
/* =========================================================
   MENU GLASS V2 · más sutil, cálido y premium
   con submenu satinado y flotante
========================================================= */

:root{
  --um-pill-bg: rgba(74, 72, 78, .42);
  --um-pill-bg-2: rgba(98, 95, 102, .26);
  --um-pill-bd: rgba(255,255,255,.26);
  --um-pill-bd-soft: rgba(255,255,255,.18);
  --um-pill-tx: rgba(255,255,255,.94);
  --um-pill-tx-soft: rgba(255,255,255,.72);
}

/* pastilla principal del menú */
.umNavPill--dark{
  position:relative;
  background:
    linear-gradient(180deg,
      rgba(255,255,255,.10) 0%,
      rgba(255,255,255,.03) 100%),
    linear-gradient(135deg,
      var(--um-pill-bg) 0%,
      var(--um-pill-bg-2) 100%) !important;

  border:1px solid var(--um-pill-bd) !important;

  box-shadow:
    0 18px 46px rgba(53,45,49,.18),
    0 8px 18px rgba(15,23,42,.10),
    inset 0 1px 0 rgba(255,255,255,.18) !important;

  -webkit-backdrop-filter: blur(18px) saturate(145%) !important;
  backdrop-filter: blur(18px) saturate(145%) !important;
}

/* brillo sutil superior */
.umNavPill--dark::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:999px;
  pointer-events:none;
  background:
    linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,0) 38%),
    linear-gradient(115deg, transparent 0 42%, rgba(255,255,255,.06) 50%, transparent 58%);
  opacity:.85;
}

/* links */
.umNavPill--dark a{
  color:var(--um-pill-tx) !important;
  text-shadow:0 1px 1px rgba(0,0,0,.10);
}

/* hover más glass y menos “negro duro” */
.umNavPill--dark a:hover,
.umNavPill--dark a:focus-visible{
  background:rgba(255,255,255,.10) !important;
  color:#fff !important;
  transform:translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    0 8px 18px rgba(15,23,42,.08);
}

/* login */
.umNavPill--dark .nav-login a{
  background:rgba(255,255,255,.10) !important;
  border:1px solid rgba(255,255,255,.10);
}
.umNavPill--dark .nav-login a:hover{
  background:rgba(255,255,255,.16) !important;
}

/* submenu: satinado, más opaco y flotante */
.umNavPill--dark .submenu{
  position:absolute !important;
  left:0 !important;
  top:calc(100% + 12px) !important;
  min-width:260px;
  border-radius:22px !important;
  overflow:hidden;

  background:
    linear-gradient(180deg,
      rgba(97,92,99,.94) 0%,
      rgba(84,79,86,.92) 54%,
      rgba(74,70,76,.94) 100%) !important;

  border:1px solid rgba(255,255,255,.20) !important;

  box-shadow:
    0 24px 64px rgba(28,24,28,.34),
    0 10px 22px rgba(15,23,42,.12),
    inset 0 1px 0 rgba(255,255,255,.14) !important;

  -webkit-backdrop-filter: blur(8px) saturate(120%) !important;
  backdrop-filter: blur(8px) saturate(120%) !important;

  z-index:9999;
}

/* velo satinado del submenu */
.umNavPill--dark .submenu::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  border-radius:inherit;
  background:
    linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,0) 34%),
    linear-gradient(115deg, transparent 0 42%, rgba(255,255,255,.045) 50%, transparent 58%);
  opacity:.92;
}

/* leve profundidad abajo */
.umNavPill--dark .submenu::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:20%;
  pointer-events:none;
  background:linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.05));
  opacity:.9;
}

.umNavPill--dark .submenu-heading{
  position:relative;
  z-index:1;
  color:rgba(255,255,255,.76) !important;
}

.umNavPill--dark .submenu li,
.umNavPill--dark .submenu li a{
  position:relative;
  z-index:1;
}

.umNavPill--dark .submenu li a{
  color:var(--um-pill-tx) !important;
}

.umNavPill--dark .submenu li a:hover{
  background:rgba(255,255,255,.09) !important;
  color:#fff !important;
}

/* pastilla del logo, para que quede en la misma familia */
.umBrandPill{
  background:
    linear-gradient(180deg,
      rgba(255,255,255,.10) 0%,
      rgba(255,255,255,.03) 100%),
    linear-gradient(135deg,
      rgba(68,66,72,.52) 0%,
      rgba(55,53,58,.44) 100%) !important;

  border:1px solid rgba(255,255,255,.20) !important;

  box-shadow:
    0 18px 46px rgba(53,45,49,.18),
    inset 0 1px 0 rgba(255,255,255,.16) !important;

  -webkit-backdrop-filter: blur(18px) saturate(140%) !important;
  backdrop-filter: blur(18px) saturate(140%) !important;
}

/* mobile nav en la misma línea estética */
#mobileNav.mobile{
  background:
    linear-gradient(180deg,
      rgba(78,75,82,.92) 0%,
      rgba(58,56,62,.90) 100%) !important;

  border:1px solid rgba(255,255,255,.16) !important;

  -webkit-backdrop-filter: blur(18px) saturate(140%) !important;
  backdrop-filter: blur(18px) saturate(140%) !important;

  box-shadow:
    0 22px 60px rgba(35,30,34,.30),
    inset 0 1px 0 rgba(255,255,255,.10) !important;
}

/* =========================================================
   TEAM · CAPSULE GLASS EDITORIAL
========================================================= */

#equipo-turnos.team{
  position: relative;
  background: transparent !important;
  border-top: 0 !important;
  padding: 58px 0 72px !important;
}

#equipo-turnos .team-head{
  margin-bottom: 24px;
}

#equipo-turnos .team-kicker{
  max-width: 760px;
  color: rgba(92,104,114,.88) !important;
  font-size: 15px !important;
  line-height: 1.68 !important;
}

#equipo-turnos .team-grid{
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 18px !important;
  align-items: stretch;
}

#equipo-turnos .pcard{
  --mx: 50%;
  --my: 26%;
  --tone-a: rgba(211,47,47,.10);
  --tone-b: rgba(121,202,233,.11);
  --tone-line: linear-gradient(
    90deg,
    #d95a5a 0%,
    #e7b8b8 26%,
    #b7dced 68%,
    #79CAE9 100%
  );

  position: relative;
  overflow: hidden;
  min-height: 100%;
  padding: 18px 18px 16px !important;
  border-radius: 28px !important;
  border: 1px solid rgba(255,255,255,.42) !important;
  background:
    radial-gradient(
      180px 130px at var(--mx) var(--my),
      rgba(255,255,255,.24),
      rgba(255,255,255,0) 64%
    ),
    radial-gradient(
      220px 180px at 8% 0%,
      var(--tone-a),
      transparent 72%
    ),
    radial-gradient(
      220px 180px at 100% 100%,
      var(--tone-b),
      transparent 74%
    ),
    linear-gradient(
      180deg,
      rgba(255,255,255,.34),
      rgba(255,255,255,.16)
    ) !important;
  box-shadow:
    0 26px 60px rgba(15,23,42,.10),
    0 8px 20px rgba(15,23,42,.05),
    inset 0 1px 0 rgba(255,255,255,.68) !important;
  -webkit-backdrop-filter: blur(18px) saturate(145%);
  backdrop-filter: blur(18px) saturate(145%);
  display: flex !important;
  flex-direction: column;
  gap: 12px !important;
  transform: translateY(0);
  transition:
    transform .28s cubic-bezier(.22,.61,.36,1),
    box-shadow .28s cubic-bezier(.22,.61,.36,1),
    border-color .24s ease,
    background .24s ease;
}

#equipo-turnos .pcard::before{
  content: "";
  position: absolute;
  left: 16px;
  right: 16px;
  top: 12px;
  height: 4px;
  border-radius: 999px;
  background: var(--tone-line);
  opacity: .95;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.18),
    0 10px 18px rgba(121,202,233,.10);
  pointer-events: none;
}

#equipo-turnos .pcard::after{
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  pointer-events: none;
  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.42),
      rgba(255,255,255,0) 22%
    ),
    radial-gradient(
      220px 160px at var(--mx) var(--my),
      rgba(255,255,255,.18),
      rgba(255,255,255,0) 68%
    ),
    linear-gradient(
      118deg,
      transparent 0 42%,
      rgba(255,255,255,.10) 50%,
      transparent 58%
    );
  opacity: .95;
}

#equipo-turnos .pcard:hover{
  transform: translateY(-5px);
  border-color: rgba(255,255,255,.56) !important;
  box-shadow:
    0 34px 78px rgba(15,23,42,.14),
    0 12px 26px rgba(15,23,42,.08),
    inset 0 1px 0 rgba(255,255,255,.74) !important;
}

#equipo-turnos .pcard:nth-child(2n){
  --tone-a: rgba(121,202,233,.10);
  --tone-b: rgba(211,47,47,.08);
  --tone-line: linear-gradient(
    90deg,
    #79CAE9 0%,
    #d1ecf7 28%,
    #f0b7b7 70%,
    #D32F2F 100%
  );
}

#equipo-turnos .pcard:nth-child(3n){
  --tone-a: rgba(110,135,80,.10);
  --tone-b: rgba(121,202,233,.10);
  --tone-line: linear-gradient(
    90deg,
    #7f9b62 0%,
    #cfe0bf 30%,
    #c8e7f2 68%,
    #79CAE9 100%
  );
}

#equipo-turnos .p-top{
  position: relative;
  z-index: 1;
  display: grid !important;
  grid-template-columns: 60px 1fr;
  gap: 14px !important;
  align-items: start !important;
  padding-top: 10px;
}

#equipo-turnos .p-avatar{
  width: 60px !important;
  height: 60px !important;
  border-radius: 999px !important;
  padding: 3px;
  background: linear-gradient(
    180deg,
    rgba(255,255,255,.82),
    rgba(255,255,255,.50)
  );
  border: 1px solid rgba(255,255,255,.52) !important;
  box-shadow:
    0 14px 30px rgba(15,23,42,.10),
    inset 0 1px 0 rgba(255,255,255,.82) !important;
  overflow: hidden;
  transform: none !important;
}

#equipo-turnos .p-avatar img{
  width: 100%;
  height: 100%;
  border-radius: 999px;
  object-fit: cover;
  transform: none !important;
}

#equipo-turnos .p-name{
  margin: 0 !important;
  font-size: clamp(20px,1.34vw,24px) !important;
  line-height: 1 !important;
  letter-spacing: -.035em !important;
  color: #1d2834 !important;
  font-weight: 800 !important;
  text-wrap: balance;
}

#equipo-turnos .p-spec{
  margin-top: 7px !important;
  color: #6c7682 !important;
  font-size: 14px !important;
  line-height: 1.42 !important;
  max-width: 95%;
}

#equipo-turnos .p-tags{
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 8px !important;
  align-items: center;
}

#equipo-turnos .tag{
  position: relative;
  overflow: hidden;
  min-height: 37px;
  padding: 8px 14px !important;
  border-radius: 999px !important;
  font-size: 11.5px !important;
  font-weight: 800 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase;
  border: 1px solid rgba(255,255,255,.46) !important;
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  backdrop-filter: blur(10px) saturate(140%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.76),
    0 10px 18px rgba(15,23,42,.05);
}

#equipo-turnos .tag::before{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.34),
      rgba(255,255,255,0) 46%
    ),
    linear-gradient(
      118deg,
      transparent 0 42%,
      rgba(255,255,255,.10) 50%,
      transparent 58%
    );
  pointer-events: none;
}

#equipo-turnos .tag.red{
  background: linear-gradient(
    180deg,
    rgba(255,255,255,.74),
    rgba(255,244,244,.54)
  ) !important;
  border-color: rgba(211,47,47,.22) !important;
  color: #973333 !important;
}

#equipo-turnos .p-tags .tag:not(.red){
  background: linear-gradient(
    180deg,
    rgba(255,255,255,.74),
    rgba(239,250,255,.54)
  ) !important;
  border-color: rgba(121,202,233,.32) !important;
  color: var(--celeste-umana-ink) !important;
}

#equipo-turnos .p-tags .tag.tn-open:hover,
#equipo-turnos .p-tags .tag.tn-open:focus-visible{
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.76),
    0 12px 24px rgba(15,23,42,.08) !important;
}

#equipo-turnos .p-desc{
  position: relative;
  z-index: 1;
  margin: 2px 0 0 !important;
  color: #42505f !important;
  font-size: 14.5px !important;
  line-height: 1.72 !important;
  flex: 1;
}

#equipo-turnos .p-cta{
  position: relative;
  z-index: 1;
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 12px !important;
  margin-top: auto;
}

#equipo-turnos .pcard .p-cta a{
  min-width: 0 !important;
  white-space: nowrap;
}

#equipo-turnos .pcard .p-cta .btn-ghost,
#equipo-turnos .pcard .p-cta .cta{
  min-height: 46px;
  padding: 11px 14px !important;
  border-radius: 999px !important;
  font-size: 11.5px !important;
  letter-spacing: .12em !important;
  font-weight: 800 !important;
}

#equipo-turnos .pcard .p-cta .btn-ghost{
  background: linear-gradient(
    180deg,
    rgba(255,255,255,.78),
    rgba(255,255,255,.50)
  ) !important;
  border: 1px solid rgba(255,255,255,.48) !important;
  color: #23303f !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.80),
    0 10px 18px rgba(15,23,42,.05) !important;
}

#equipo-turnos .pcard .p-cta .btn-ghost:hover{
  transform: translateY(-1px);
  background: linear-gradient(
    180deg,
    rgba(255,255,255,.88),
    rgba(255,255,255,.60)
  ) !important;
}

#equipo-turnos .pcard .p-cta .cta{
  background: linear-gradient(
    135deg,
    #e33a3a,
    #d32f2f 58%,
    #bf2525 100%
  ) !important;
  color: #fff !important;
  box-shadow:
    0 14px 30px rgba(211,47,47,.20),
    0 5px 12px rgba(211,47,47,.10) !important;
}

#equipo-turnos .pcard .p-cta .cta::before{
  left: 18px !important;
  right: 18px !important;
  bottom: -6px !important;
  height: 10px !important;
  background: rgba(211,47,47,.10) !important;
}

#equipo-turnos .pcard .p-cta .cta:hover{
  transform: translateY(-1px);
  box-shadow:
    0 18px 36px rgba(211,47,47,.24),
    0 6px 14px rgba(211,47,47,.12) !important;
}

@media (max-width: 1100px){
  #equipo-turnos .team-grid{
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
  }
}

@media (max-width: 680px){
  #equipo-turnos.team{
    padding: 42px 0 56px !important;
  }

  #equipo-turnos .team-grid{
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  #equipo-turnos .pcard{
    padding: 16px !important;
    border-radius: 24px !important;
  }

  #equipo-turnos .pcard::before{
    left: 14px;
    right: 14px;
    top: 10px;
  }

  #equipo-turnos .p-top{
    grid-template-columns: 56px 1fr;
    gap: 12px !important;
  }

  #equipo-turnos .p-avatar{
    width: 56px !important;
    height: 56px !important;
  }

  #equipo-turnos .p-name{
    font-size: 20px !important;
  }

  #equipo-turnos .p-desc{
    font-size: 14px !important;
    line-height: 1.64 !important;
  }

  #equipo-turnos .p-cta{
    grid-template-columns: 1fr !important;
  }
}

@supports not ((backdrop-filter: blur(8px)) or (-webkit-backdrop-filter: blur(8px))){
  #equipo-turnos .pcard{
    background: linear-gradient(
      180deg,
      rgba(255,255,255,.94),
      rgba(248,249,251,.96)
    ) !important;
  }
}/* =========================================================
   TEAM GLASS V3 · UMANA
   Re-skin completo de “Nuestro equipo”
   Sin tocar HTML
========================================================= */

#equipo-turnos.team{
  position:relative;
  padding:58px 0 72px !important;
  background:transparent !important;
  border-top:0 !important;
  box-shadow:none !important;
}

#equipo-turnos .wrap{
  position:relative;
  z-index:1;
}

#equipo-turnos .team-head{
  margin-bottom:22px;
}

#equipo-turnos .team-kicker{
  max-width:760px;
  color:rgba(89,101,112,.88) !important;
  font-size:15px !important;
  line-height:1.68 !important;
}

/* grilla un poco más respirada */
#equipo-turnos .team-grid{
  display:grid !important;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:18px !important;
  align-items:stretch;
}

/* ---------- CARD ---------- */
#equipo-turnos .pcard{
  --mx: 50%;
  --my: 30%;
  --glass-bg: linear-gradient(180deg, rgba(255,255,255,.34), rgba(255,255,255,.18));
  --glass-stroke: rgba(255,255,255,.36);
  --glass-highlight: rgba(255,255,255,.70);
  --glass-shadow: 0 24px 60px rgba(25,32,42,.10), 0 8px 20px rgba(25,32,42,.06);
  --tone-red: rgba(211,47,47,.10);
  --tone-blue: rgba(121,202,233,.12);

  position:relative;
  overflow:hidden;
  min-height:100%;
  padding:18px 18px 16px !important;
  border-radius:26px !important;
  border:1px solid var(--glass-stroke) !important;
  background:
    radial-gradient(140px 120px at var(--mx) var(--my), rgba(255,255,255,.30), rgba(255,255,255,0) 62%),
    radial-gradient(220px 160px at 12% 0%, var(--tone-red), transparent 70%),
    radial-gradient(220px 160px at 100% 100%, var(--tone-blue), transparent 70%),
    var(--glass-bg) !important;
  box-shadow:var(--glass-shadow) !important;
  -webkit-backdrop-filter:blur(18px) saturate(145%);
  backdrop-filter:blur(18px) saturate(145%);
  display:flex !important;
  flex-direction:column;
  gap:12px !important;
  transform:translateY(0);
  transition:
    transform .28s cubic-bezier(.22,.61,.36,1),
    box-shadow .28s cubic-bezier(.22,.61,.36,1),
    border-color .24s ease,
    background .24s ease;
}

#equipo-turnos .pcard::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  background:
    linear-gradient(180deg, rgba(255,255,255,.44), rgba(255,255,255,0) 26%),
    linear-gradient(120deg, transparent 0 38%, rgba(255,255,255,.14) 50%, transparent 62%);
  opacity:.95;
}

#equipo-turnos .pcard::after{
  content:"";
  position:absolute;
  inset:1px;
  border-radius:25px;
  pointer-events:none;
  border:1px solid rgba(255,255,255,.20);
  mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  opacity:.45;
}

#equipo-turnos .pcard:hover{
  transform:translateY(-4px);
  border-color:rgba(255,255,255,.48) !important;
  box-shadow:
    0 34px 72px rgba(25,32,42,.14),
    0 10px 26px rgba(25,32,42,.08) !important;
}

/* alternancia sutil por card */
#equipo-turnos .pcard:nth-child(2n){
  --tone-red: rgba(121,202,233,.10);
  --tone-blue: rgba(211,47,47,.10);
}

#equipo-turnos .pcard:nth-child(3n){
  --tone-red: rgba(211,47,47,.08);
  --tone-blue: rgba(110,135,80,.10);
}

/* ---------- TOP ---------- */
#equipo-turnos .p-top{
  display:grid !important;
  grid-template-columns:58px 1fr;
  gap:14px !important;
  align-items:start !important;
  position:relative;
  z-index:1;
}

#equipo-turnos .p-avatar{
  width:58px !important;
  height:58px !important;
  border-radius:999px !important;
  padding:3px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.78), rgba(255,255,255,.46));
  border:1px solid rgba(255,255,255,.46) !important;
  box-shadow:
    0 14px 28px rgba(15,23,42,.10),
    inset 0 1px 0 rgba(255,255,255,.72) !important;
  transform:none !important;
  overflow:hidden;
}

#equipo-turnos .p-avatar img{
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:999px;
  transform:none !important;
}

#equipo-turnos .pcard:hover .p-avatar{
  box-shadow:
    0 18px 34px rgba(15,23,42,.14),
    inset 0 1px 0 rgba(255,255,255,.78) !important;
}

#equipo-turnos .p-name{
  margin:0 !important;
  font-size:clamp(19px,1.32vw,24px) !important;
  line-height:1.02 !important;
  letter-spacing:-.03em !important;
  color:#1b2531 !important;
  font-weight:800 !important;
  text-wrap:balance;
}

#equipo-turnos .p-spec{
  margin-top:6px !important;
  color:#6e7783 !important;
  font-size:14px !important;
  line-height:1.42 !important;
}

/* ---------- TAGS ---------- */
#equipo-turnos .p-tags{
  display:flex;
  flex-wrap:wrap;
  gap:8px !important;
  align-items:center;
  position:relative;
  z-index:1;
}

#equipo-turnos .tag{
  position:relative;
  overflow:hidden;
  min-height:36px;
  padding:8px 14px !important;
  border-radius:999px !important;
  font-size:11.5px !important;
  font-weight:800 !important;
  letter-spacing:.11em !important;
  text-transform:uppercase;
  border:1px solid rgba(255,255,255,.42) !important;
  -webkit-backdrop-filter:blur(10px) saturate(135%);
  backdrop-filter:blur(10px) saturate(135%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.70),
    0 8px 18px rgba(15,23,42,.05);
}

#equipo-turnos .tag::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:
    linear-gradient(180deg, rgba(255,255,255,.34), rgba(255,255,255,0) 48%),
    linear-gradient(120deg, transparent 0 42%, rgba(255,255,255,.12) 50%, transparent 58%);
  pointer-events:none;
}

#equipo-turnos .tag.red{
  color:#8f3030 !important;
  background:linear-gradient(180deg, rgba(255,255,255,.74), rgba(255,243,243,.52)) !important;
  border-color:rgba(211,47,47,.24) !important;
}

#equipo-turnos .p-tags .tag:not(.red){
  color:var(--celeste-umana-ink) !important;
  background:linear-gradient(180deg, rgba(255,255,255,.74), rgba(239,250,255,.52)) !important;
  border-color:rgba(121,202,233,.34) !important;
}

#equipo-turnos .p-tags .tag.tn-open:hover,
#equipo-turnos .p-tags .tag.tn-open:focus-visible{
  transform:translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.68),
    0 12px 24px rgba(15,23,42,.08) !important;
}

/* ---------- DESC ---------- */
#equipo-turnos .p-desc{
  position:relative;
  z-index:1;
  margin:2px 0 0 !important;
  color:#43505f !important;
  font-size:14.5px !important;
  line-height:1.72 !important;
  flex:1;
}

/* ---------- CTA ---------- */
#equipo-turnos .p-cta{
  position:relative;
  z-index:1;
  display:grid !important;
  grid-template-columns:1fr 1fr;
  gap:12px !important;
  margin-top:auto;
}

#equipo-turnos .pcard .p-cta a{
  min-width:0 !important;
  white-space:nowrap;
}

#equipo-turnos .pcard .p-cta .btn-ghost,
#equipo-turnos .pcard .p-cta .cta{
  min-height:46px;
  padding:11px 14px !important;
  border-radius:999px !important;
  font-size:11.5px !important;
  letter-spacing:.12em !important;
  font-weight:800 !important;
}

#equipo-turnos .pcard .p-cta .btn-ghost{
  background:linear-gradient(180deg, rgba(255,255,255,.74), rgba(255,255,255,.46)) !important;
  border:1px solid rgba(255,255,255,.46) !important;
  color:#243140 !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.74),
    0 10px 18px rgba(15,23,42,.05) !important;
}

#equipo-turnos .pcard .p-cta .btn-ghost:hover{
  background:linear-gradient(180deg, rgba(255,255,255,.84), rgba(255,255,255,.56)) !important;
  transform:translateY(-1px);
}

#equipo-turnos .pcard .p-cta .cta{
  background:linear-gradient(135deg, #e23a3a, #d32f2f 58%, #bb2525 100%) !important;
  color:#fff !important;
  box-shadow:
    0 14px 28px rgba(211,47,47,.20),
    0 4px 10px rgba(211,47,47,.10) !important;
}

#equipo-turnos .pcard .p-cta .cta::before{
  left:18px !important;
  right:18px !important;
  bottom:-6px !important;
  height:10px !important;
  background:rgba(211,47,47,.10) !important;
}

#equipo-turnos .pcard .p-cta .cta:hover{
  transform:translateY(-1px);
  box-shadow:
    0 18px 34px rgba(211,47,47,.24),
    0 6px 12px rgba(211,47,47,.12) !important;
}

/* ---------- RESPONSIVE ---------- */
@media (max-width:1100px){
  #equipo-turnos .team-grid{
    grid-template-columns:repeat(2, minmax(0,1fr)) !important;
  }
}

@media (max-width:680px){
  #equipo-turnos.team{
    padding:42px 0 56px !important;
  }

  #equipo-turnos .team-grid{
    grid-template-columns:1fr !important;
    gap:16px !important;
  }

  #equipo-turnos .pcard{
    border-radius:24px !important;
    padding:16px !important;
  }

  #equipo-turnos .p-top{
    grid-template-columns:56px 1fr;
    gap:12px !important;
  }

  #equipo-turnos .p-avatar{
    width:56px !important;
    height:56px !important;
  }

  #equipo-turnos .p-name{
    font-size:20px !important;
  }

  #equipo-turnos .p-spec{
    font-size:14px !important;
  }

  #equipo-turnos .p-desc{
    font-size:14px !important;
    line-height:1.64 !important;
  }

  #equipo-turnos .p-cta{
    grid-template-columns:1fr !important;
  }
}

/* fallback si el browser no soporta blur */
@supports not ((backdrop-filter: blur(8px)) or (-webkit-backdrop-filter: blur(8px))){
  #equipo-turnos .pcard{
    background:linear-gradient(180deg, rgba(255,255,255,.92), rgba(248,249,251,.96)) !important;
  }

  #equipo-turnos .tag,
  #equipo-turnos .pcard .p-cta .btn-ghost{
    background:rgba(255,255,255,.92) !important;
  }
}/* =========================================================
   TEAM · CAPSULE GLASS EDITORIAL
========================================================= */

#equipo-turnos.team{
  position: relative;
  background: transparent !important;
  border-top: 0 !important;
  padding: 58px 0 72px !important;
}

#equipo-turnos .team-head{
  margin-bottom: 24px;
}

#equipo-turnos .team-kicker{
  max-width: 760px;
  color: rgba(92,104,114,.88) !important;
  font-size: 15px !important;
  line-height: 1.68 !important;
}

#equipo-turnos .team-grid{
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 18px !important;
  align-items: stretch;
}

#equipo-turnos .pcard{
  --mx: 50%;
  --my: 26%;
  --tone-a: rgba(211,47,47,.10);
  --tone-b: rgba(121,202,233,.11);
  --tone-line: linear-gradient(
    90deg,
    #d95a5a 0%,
    #e7b8b8 26%,
    #b7dced 68%,
    #79CAE9 100%
  );

  position: relative;
  overflow: hidden;
  min-height: 100%;
  padding: 18px 18px 16px !important;
  border-radius: 28px !important;
  border: 1px solid rgba(255,255,255,.42) !important;
  background:
    radial-gradient(
      180px 130px at var(--mx) var(--my),
      rgba(255,255,255,.24),
      rgba(255,255,255,0) 64%
    ),
    radial-gradient(
      220px 180px at 8% 0%,
      var(--tone-a),
      transparent 72%
    ),
    radial-gradient(
      220px 180px at 100% 100%,
      var(--tone-b),
      transparent 74%
    ),
    linear-gradient(
      180deg,
      rgba(255,255,255,.34),
      rgba(255,255,255,.16)
    ) !important;
  box-shadow:
    0 26px 60px rgba(15,23,42,.10),
    0 8px 20px rgba(15,23,42,.05),
    inset 0 1px 0 rgba(255,255,255,.68) !important;
  -webkit-backdrop-filter: blur(18px) saturate(145%);
  backdrop-filter: blur(18px) saturate(145%);
  display: flex !important;
  flex-direction: column;
  gap: 12px !important;
  transform: translateY(0);
  transition:
    transform .28s cubic-bezier(.22,.61,.36,1),
    box-shadow .28s cubic-bezier(.22,.61,.36,1),
    border-color .24s ease,
    background .24s ease;
}

#equipo-turnos .pcard::before{
  content: "";
  position: absolute;
  left: 16px;
  right: 16px;
  top: 12px;
  height: 4px;
  border-radius: 999px;
  background: var(--tone-line);
  opacity: .95;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.18),
    0 10px 18px rgba(121,202,233,.10);
  pointer-events: none;
}

#equipo-turnos .pcard::after{
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  pointer-events: none;
  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.42),
      rgba(255,255,255,0) 22%
    ),
    radial-gradient(
      220px 160px at var(--mx) var(--my),
      rgba(255,255,255,.18),
      rgba(255,255,255,0) 68%
    ),
    linear-gradient(
      118deg,
      transparent 0 42%,
      rgba(255,255,255,.10) 50%,
      transparent 58%
    );
  opacity: .95;
}

#equipo-turnos .pcard:hover{
  transform: translateY(-5px);
  border-color: rgba(255,255,255,.56) !important;
  box-shadow:
    0 34px 78px rgba(15,23,42,.14),
    0 12px 26px rgba(15,23,42,.08),
    inset 0 1px 0 rgba(255,255,255,.74) !important;
}

#equipo-turnos .pcard:nth-child(2n){
  --tone-a: rgba(121,202,233,.10);
  --tone-b: rgba(211,47,47,.08);
  --tone-line: linear-gradient(
    90deg,
    #79CAE9 0%,
    #d1ecf7 28%,
    #f0b7b7 70%,
    #D32F2F 100%
  );
}

#equipo-turnos .pcard:nth-child(3n){
  --tone-a: rgba(110,135,80,.10);
  --tone-b: rgba(121,202,233,.10);
  --tone-line: linear-gradient(
    90deg,
    #7f9b62 0%,
    #cfe0bf 30%,
    #c8e7f2 68%,
    #79CAE9 100%
  );
}

#equipo-turnos .p-top{
  position: relative;
  z-index: 1;
  display: grid !important;
  grid-template-columns: 60px 1fr;
  gap: 14px !important;
  align-items: start !important;
  padding-top: 10px;
}

#equipo-turnos .p-avatar{
  width: 60px !important;
  height: 60px !important;
  border-radius: 999px !important;
  padding: 3px;
  background: linear-gradient(
    180deg,
    rgba(255,255,255,.82),
    rgba(255,255,255,.50)
  );
  border: 1px solid rgba(255,255,255,.52) !important;
  box-shadow:
    0 14px 30px rgba(15,23,42,.10),
    inset 0 1px 0 rgba(255,255,255,.82) !important;
  overflow: hidden;
  transform: none !important;
}

#equipo-turnos .p-avatar img{
  width: 100%;
  height: 100%;
  border-radius: 999px;
  object-fit: cover;
  transform: none !important;
}

#equipo-turnos .p-name{
  margin: 0 !important;
  font-size: clamp(20px,1.34vw,24px) !important;
  line-height: 1 !important;
  letter-spacing: -.035em !important;
  color: #1d2834 !important;
  font-weight: 800 !important;
  text-wrap: balance;
}

#equipo-turnos .p-spec{
  margin-top: 7px !important;
  color: #6c7682 !important;
  font-size: 14px !important;
  line-height: 1.42 !important;
  max-width: 95%;
}

#equipo-turnos .p-tags{
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 8px !important;
  align-items: center;
}

#equipo-turnos .tag{
  position: relative;
  overflow: hidden;
  min-height: 37px;
  padding: 8px 14px !important;
  border-radius: 999px !important;
  font-size: 11.5px !important;
  font-weight: 800 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase;
  border: 1px solid rgba(255,255,255,.46) !important;
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  backdrop-filter: blur(10px) saturate(140%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.76),
    0 10px 18px rgba(15,23,42,.05);
}

#equipo-turnos .tag::before{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.34),
      rgba(255,255,255,0) 46%
    ),
    linear-gradient(
      118deg,
      transparent 0 42%,
      rgba(255,255,255,.10) 50%,
      transparent 58%
    );
  pointer-events: none;
}

#equipo-turnos .tag.red{
  background: linear-gradient(
    180deg,
    rgba(255,255,255,.74),
    rgba(255,244,244,.54)
  ) !important;
  border-color: rgba(211,47,47,.22) !important;
  color: #973333 !important;
}

#equipo-turnos .p-tags .tag:not(.red){
  background: linear-gradient(
    180deg,
    rgba(255,255,255,.74),
    rgba(239,250,255,.54)
  ) !important;
  border-color: rgba(121,202,233,.32) !important;
  color: var(--celeste-umana-ink) !important;
}

#equipo-turnos .p-tags .tag.tn-open:hover,
#equipo-turnos .p-tags .tag.tn-open:focus-visible{
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.76),
    0 12px 24px rgba(15,23,42,.08) !important;
}

#equipo-turnos .p-desc{
  position: relative;
  z-index: 1;
  margin: 2px 0 0 !important;
  color: #42505f !important;
  font-size: 14.5px !important;
  line-height: 1.72 !important;
  flex: 1;
}

#equipo-turnos .p-cta{
  position: relative;
  z-index: 1;
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 12px !important;
  margin-top: auto;
}

#equipo-turnos .pcard .p-cta a{
  min-width: 0 !important;
  white-space: nowrap;
}

#equipo-turnos .pcard .p-cta .btn-ghost,
#equipo-turnos .pcard .p-cta .cta{
  min-height: 46px;
  padding: 11px 14px !important;
  border-radius: 999px !important;
  font-size: 11.5px !important;
  letter-spacing: .12em !important;
  font-weight: 800 !important;
}

#equipo-turnos .pcard .p-cta .btn-ghost{
  background: linear-gradient(
    180deg,
    rgba(255,255,255,.78),
    rgba(255,255,255,.50)
  ) !important;
  border: 1px solid rgba(255,255,255,.48) !important;
  color: #23303f !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.80),
    0 10px 18px rgba(15,23,42,.05) !important;
}

#equipo-turnos .pcard .p-cta .btn-ghost:hover{
  transform: translateY(-1px);
  background: linear-gradient(
    180deg,
    rgba(255,255,255,.88),
    rgba(255,255,255,.60)
  ) !important;
}

#equipo-turnos .pcard .p-cta .cta{
  background: linear-gradient(
    135deg,
    #e33a3a,
    #d32f2f 58%,
    #bf2525 100%
  ) !important;
  color: #fff !important;
  box-shadow:
    0 14px 30px rgba(211,47,47,.20),
    0 5px 12px rgba(211,47,47,.10) !important;
}

#equipo-turnos .pcard .p-cta .cta::before{
  left: 18px !important;
  right: 18px !important;
  bottom: -6px !important;
  height: 10px !important;
  background: rgba(211,47,47,.10) !important;
}

#equipo-turnos .pcard .p-cta .cta:hover{
  transform: translateY(-1px);
  box-shadow:
    0 18px 36px rgba(211,47,47,.24),
    0 6px 14px rgba(211,47,47,.12) !important;
}

@media (max-width: 1100px){
  #equipo-turnos .team-grid{
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
  }
}

@media (max-width: 680px){
  #equipo-turnos.team{
    padding: 42px 0 56px !important;
  }

  #equipo-turnos .team-grid{
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  #equipo-turnos .pcard{
    padding: 16px !important;
    border-radius: 24px !important;
  }

  #equipo-turnos .pcard::before{
    left: 14px;
    right: 14px;
    top: 10px;
  }

  #equipo-turnos .p-top{
    grid-template-columns: 56px 1fr;
    gap: 12px !important;
  }

  #equipo-turnos .p-avatar{
    width: 56px !important;
    height: 56px !important;
  }

  #equipo-turnos .p-name{
    font-size: 20px !important;
  }

  #equipo-turnos .p-desc{
    font-size: 14px !important;
    line-height: 1.64 !important;
  }

  #equipo-turnos .p-cta{
    grid-template-columns: 1fr !important;
  }
}

@supports not ((backdrop-filter: blur(8px)) or (-webkit-backdrop-filter: blur(8px))){
  #equipo-turnos .pcard{
    background: linear-gradient(
      180deg,
      rgba(255,255,255,.94),
      rgba(248,249,251,.96)
    ) !important;
  }
}

/* =========================================================
   FONDO ÚNICO GLOBAL · HOME UMANA
   Solo oscurece el fondo general y elimina el corte por secciones
========================================================= */

:root{
  --um-home-bg:#c3c1c3; /* más oscuro pero cálido */
}

html,
body,
main#app{
  background:var(--um-home-bg) !important;
}

/* todas las secciones principales quedan transparentes */
#inicio.hero,
#inicio.hero.hero-v2,
.hero,
.team,
#equipo-turnos.team,
.testimonials{
  background:transparent !important;
  border-top:0 !important;
  box-shadow:none !important;
}

/* anulamos pseudo fondos que puedan seguir “marcando” sectores */
#equipo-turnos.team::before,
#equipo-turnos.team::after,
.team::before,
.team::after,
.testimonials::before,
.testimonials::after,
#inicio.hero::before,
#inicio.hero::after,
#inicio.hero.hero-v2::before,
#inicio.hero.hero-v2::after{
  content:none !important;
  display:none !important;
}

/* =========================================================
   FOOTER · glass humo cálido
========================================================= */

footer{
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  width:100%;
  z-index:100;
  margin-top:32px;
  overflow:hidden;

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.22) 0%,
      rgba(255,248,246,.14) 52%,
      rgba(240,234,231,.18) 100%
    ),
    linear-gradient(
      135deg,
      rgba(108,105,112,.30) 0%,
      rgba(122,118,124,.22) 100%
    );

  border:1px solid rgba(255,255,255,.26);
  border-bottom:0 !important;
  border-radius:26px 26px 0 0;

  box-shadow:
    0 -12px 34px rgba(15,23,42,.10),
    0 -2px 10px rgba(15,23,42,.05),
    inset 0 1px 0 rgba(255,255,255,.22);

  -webkit-backdrop-filter:blur(18px) saturate(130%);
  backdrop-filter:blur(18px) saturate(130%);
}

/* brillo biselado arriba */
footer::before{
  content:"";
  position:absolute;
  left:18px;
  right:18px;
  top:0;
  height:1px;
  border-radius:999px;
  background:rgba(255,255,255,.42);
  pointer-events:none;
}

/* velo suave interno */
footer::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,0) 38%),
    linear-gradient(115deg, transparent 0 42%, rgba(255,255,255,.05) 50%, transparent 58%);
  opacity:.9;
}

main{
  padding-bottom:110px;
}

@media (max-width:640px){
  footer{ display:none; }
  main{ padding-bottom:0; }
}

/* Contenido footer */
footer .wrap,
footer .foot{
  position:relative;
  z-index:1;
}

.foot{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:14px;
  padding:10px 0;
}

/* Marca footer */
.logo-text{
  font-family:"Playfair Display",serif;
  font-size:clamp(18px,2.6vw,24px);
  font-weight:700;
  letter-spacing:.02em;
}

.logo-text .soy{
  color:var(--rojo);
  font-weight:400;
}

.logo-text .umana{
  color:var(--rojo);
}

.logo-text .by{
  font-style:italic;
  font-size:clamp(12px,1.8vw,14px);
  margin-left:6px;
  color:#566171;
}

/* Redes sociales + Legal */
.foot-center{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
}

.foot-center .socials{
  display:inline-flex;
  gap:12px;
}

.foot-center .socials a{
  color:#556070;
  font-size:18px;
  text-decoration:none;
  padding:4px;
  border-radius:999px;
  transition:
    transform .18s ease-out,
    color .18s ease-out,
    background .18s ease-out;
}

.foot-center .socials a:hover{
  color:var(--rojo);
  background:rgba(255,255,255,.16);
  transform:translateY(-1px);
}

/* Links legales */
.foot-legal{
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:center;
  font-size:12px;
  color:#667180;
}

.foot-legal a{
  color:#667180;
  text-decoration:none;
}

.foot-legal a:hover{
  color:var(--rojo);
  text-decoration:underline;
}

.foot-legal .sep{
  opacity:.5;
}

.foot-right{
  justify-self:end;
  display:flex;
  align-items:center;
}

/* Newsletter más integrada al nuevo glass */
.newsletter{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 8px;
  border-radius:999px;

  background:rgba(255,255,255,.20);
  border:1px solid rgba(255,255,255,.30);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.28),
    0 8px 18px rgba(15,23,42,.05);

  -webkit-backdrop-filter:blur(12px) saturate(125%);
  backdrop-filter:blur(12px) saturate(125%);
}

.newsletter i{
  font-size:14px;
  color:#586474;
  margin-left:4px;
}

.newsletter input{
  flex:1;
  border:0;
  outline:0;
  font-size:13px;
  background:transparent;
  padding:6px 8px;
  min-width:170px;
  color:#243140;
}

.newsletter input::placeholder{
  color:#7c8796;
}

.newsletter button{
  border:0;
  border-radius:999px;
  background:var(--rojo);
  color:#fff;
  font-weight:700;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.14em;
  padding:7px 14px;
  cursor:pointer;
  transition:
    background .18s ease-out,
    transform .18s ease-out,
    box-shadow .18s ease-out;
  box-shadow:0 8px 18px rgba(211,47,47,.24);
}

.newsletter button:hover{
  background:#b72727;
  transform:translateY(-1px);
  box-shadow:0 12px 26px rgba(211,47,47,.32);
}

@media (max-width:900px){
  .foot{
    grid-template-columns:1fr;
    text-align:center;
  }

  .foot-right{
    justify-self:center;
  }
}

/* =================== TESTIMONIOS · UMANA V2 =================== */

.testimonials{
  position:relative;
  padding:42px 0 58px;
  overflow:hidden;
  background:
    radial-gradient(900px 460px at 0% 0%, rgba(211,47,47,.07), transparent 58%),
    radial-gradient(780px 420px at 100% 0%, rgba(123,181,214,.12), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.76), rgba(255,255,255,.94));
  border-top:1px solid rgba(20,32,51,.08);
}

.testimonials::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,0));
}

.sec-title{
  font-family:"Playfair Display", serif;
  font-weight:700;
  color:#142033;
  font-size:clamp(26px, 3.4vw, 36px);
  line-height:1.08;
  margin:0 0 10px;
  position:relative;
  letter-spacing:-.02em;
}

.sec-title::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-8px;
  width:88px;
  height:4px;
  border-radius:999px;
  background:linear-gradient(90deg, rgba(211,47,47,.95), rgba(123,181,214,.55) 72%, rgba(123,181,214,0));
}

.t-carousel{
  position:relative;
  z-index:1;
}

.t-viewport{
  overflow:hidden;
  border-radius:26px;
  padding:0 72px;
}

.t-track{
  display:flex;
  transition:transform .5s cubic-bezier(.22,.61,.36,1);
  will-change:transform;
}

.t-slide{
  flex:0 0 100%;
  padding:10px;
  display:flex;
  justify-content:center;
}

.t-card{
  position:relative;
  width:100%;
  max-width:760px;
  min-height:118px;
  display:grid;
  grid-template-columns:56px 1fr;
  gap:14px;
  align-items:center;
  padding:18px 20px;
  border-radius:24px;
  border:1px solid rgba(255,255,255,.62);
  background:
    linear-gradient(135deg, rgba(255,255,255,.88), rgba(255,255,255,.66)),
    linear-gradient(180deg, rgba(237,246,251,.52), rgba(255,255,255,.34));
  box-shadow:
    0 18px 48px rgba(20,32,51,.10),
    inset 0 1px 0 rgba(255,255,255,.72);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
}

.t-card::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  background:
    radial-gradient(240px 100px at 0% 0%, rgba(211,47,47,.08), transparent 60%),
    radial-gradient(240px 100px at 100% 100%, rgba(123,181,214,.10), transparent 62%);
}

.t-avatar{
  position:relative;
  width:56px;
  height:56px;
  border-radius:999px;
  overflow:hidden;
  display:grid;
  place-items:center;
  background:linear-gradient(135deg, rgba(211,47,47,.18), rgba(123,181,214,.22));
  border:1px solid rgba(211,47,47,.22);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.8),
    0 8px 18px rgba(20,32,51,.10);
  font-weight:800;
  font-size:16px;
  color:#8f1f1f;
}

.t-avatar img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  border-radius:inherit;
}

.t-stars{
  color:#d32f2f;
  font-size:14px;
  letter-spacing:1.5px;
  margin:0 0 4px;
  opacity:.96;
}

.t-name{
  margin:0 0 4px;
  font-weight:700;
  font-size:14px;
  line-height:1.3;
  color:#142033;
}

.t-text{
  margin:0 0 6px;
  color:#334155;
  font-size:14px;
  line-height:1.58;
  display:-webkit-box;
  -webkit-line-clamp:4;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

.t-role{
  color:#64748b;
  font-size:12.5px;
  line-height:1.35;
}

.t-nav{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  z-index:3;
  width:42px;
  height:42px;
  border:1px solid rgba(255,255,255,.75);
  border-radius:999px;
  background:rgba(255,255,255,.70);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  box-shadow:
    0 14px 34px rgba(20,32,51,.14),
    inset 0 1px 0 rgba(255,255,255,.82);
  display:grid;
  place-items:center;
  cursor:pointer;
  color:#142033;
  font-size:18px;
  transition:
    transform .18s ease,
    box-shadow .18s ease,
    background .18s ease,
    border-color .18s ease;
}

.t-nav.prev{ left:14px; }
.t-nav.next{ right:14px; }

.t-nav:hover{
  transform:translateY(-50%) translateY(-1px) scale(1.02);
  background:rgba(255,255,255,.88);
  border-color:rgba(211,47,47,.18);
  box-shadow:
    0 18px 38px rgba(20,32,51,.18),
    inset 0 1px 0 rgba(255,255,255,.92);
}

.t-dots{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:9px;
  margin-top:14px;
}

.t-dots button{
  width:8px;
  height:8px;
  padding:0;
  border:0;
  border-radius:999px;
  background:rgba(20,32,51,.18);
  cursor:pointer;
  transition:
    width .2s ease,
    transform .2s ease,
    background .2s ease,
    opacity .2s ease;
  opacity:.8;
}

.t-dots button[aria-selected="true"]{
  width:22px;
  background:linear-gradient(90deg, #d32f2f, #e85d5d);
  opacity:1;
  transform:translateY(-1px);
}

/* Responsive */
@media (max-width: 900px){
  .t-viewport{ padding:0 56px; }
}

@media (max-width: 640px){
  .testimonials{
    padding:36px 0 50px;
  }

  .t-viewport{
    padding:0 42px;
    border-radius:20px;
  }

  .t-slide{
    padding:6px;
  }

  .t-card{
    max-width:94vw;
    min-height:auto;
    padding:14px 14px;
    grid-template-columns:44px 1fr;
    gap:11px;
    border-radius:20px;
  }

  .t-avatar{
    width:44px;
    height:44px;
    font-size:14px;
  }

  .t-text{
    font-size:13.5px;
    -webkit-line-clamp:5;
  }

  .t-name{
    font-size:13.5px;
  }

  .t-role{
    font-size:12px;
  }

  .t-nav{
    width:34px;
    height:34px;
    font-size:16px;
  }

  .t-nav.prev{ left:8px; }
  .t-nav.next{ right:8px; }
}