/* ==========================================================================
   ELMED Aesthetic Solutions — capa de marca sobre la plantilla Glamora
   Paleta, tipografía y jerarquía según imagenes_branding_2.0/branding.png
   ========================================================================== */

/* --- Tipografía de marca, servida desde el propio dominio ----------------
   La guía pide SUIT para títulos, pero SUIT no trae los caracteres acentuados
   del español (no tiene á é í ó ú ñ ü ¿ ¡): con texto en español cae a otra
   fuente y las palabras salen mezcladas. Se usa Pretendard, la otra sans
   coreana moderna del mismo registro, que sí cubre el español completo.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "Pretendard";
  src: url("/_assets/fuentes/pretendard-latin.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Noto Sans KR";
  src: url("/_assets/fuentes/noto-kr-latin.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193,
                 U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Noto Sans KR";
  src: url("/_assets/fuentes/noto-kr-latin-ext.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
                 U+A720-A7FF;
}

:root {
  /* Paleta principal */
  --elmed-blanco: #ffffff;
  --elmed-coral: #f5645c;          /* acento del logotipo y el isotipo */
  --elmed-coral-texto: #c93f38;    /* misma familia, con contraste AA sobre blanco */
  --elmed-coral-suave: #f79491;    /* Dusty Coral */
  --elmed-rosa: #f9dbde;           /* Powder Pink */
  --elmed-taupe: #b9a397;          /* Warm Taupe */
  --elmed-taupe-profundo: #71655e; /* Deep Taupe */
  --elmed-tinta: #4a302a;          /* marrón del logotipo, texto principal */

  /* Neutros de apoyo */
  --elmed-gris-claro: #f4f5f7;
  --elmed-gris-suave: #e6e7ea;
  --elmed-gris-medio: #d4d8db;
  --elmed-gris: #a7aaad;

  --elmed-borde: rgba(74, 48, 42, .14);
  --elmed-borde-fuerte: rgba(74, 48, 42, .26);

  --elmed-titulo: "Pretendard", "Noto Sans KR", system-ui, sans-serif;
  --elmed-cuerpo: "Noto Sans KR", "Pretendard", system-ui, sans-serif;

  --elmed-transicion: .28s cubic-bezier(.22, .61, .36, 1);

  /* --- Tokens propios de la plantilla, redefinidos con la marca ELMED --- */
  --body-font: var(--elmed-cuerpo);
  --heading-font: var(--elmed-titulo);
  --heading-two: var(--elmed-titulo);
  --_colors---body-font: var(--elmed-taupe-profundo);
  --_colors---heading-font: var(--elmed-tinta);
  --_colors---primary-color: var(--elmed-coral);
  --_colors---black: #2b1d19;
  --_font-size---h1: 54px;
  --_font-size---h1-d: 132px;
  --_font-size---h2: 38px;
  --_font-size---h3: 30px;
  --_font-size---h4: 22px;
  --_font-size---h5: 19px;
  --_font-size---h6: 17px;
  --_font-size---body: 16px;
}

/* --------------------------------------------------------------- Base ---- */
html { scroll-behavior: smooth; }

body {
  color: var(--elmed-tinta);
  font-family: var(--elmed-cuerpo);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Solo se cambia la forma de la letra: el color lo sigue resolviendo la
   plantilla con --_colors---heading-font, para no pisar los títulos claros
   que van sobre fondo oscuro. */
h1, h2, h3, h4, h5, h6,
.rt-text-style-h1, .rt-text-style-h2, .rt-text-style-h3,
.rt-text-style-h4, .rt-text-style-h5, .rt-text-style-h6 {
  font-family: var(--elmed-titulo) !important;
  font-weight: 600;
  letter-spacing: -.015em;
  line-height: 1.18;
  text-transform: none;
}

h1, .rt-text-style-h1 { font-weight: 600; letter-spacing: -.025em; }
h2, .rt-text-style-h2 { font-weight: 500; }
h3, .rt-text-style-h3,
h4, .rt-text-style-h4 { font-weight: 500; letter-spacing: -.01em; }

p, li, .rt-text-style-body, .rt-paragraph { font-family: var(--elmed-cuerpo); }

strong, b { font-weight: 600; }

::selection { background: var(--elmed-rosa); color: var(--elmed-tinta); }

:focus-visible {
  outline: 2px solid var(--elmed-coral-texto);
  outline-offset: 3px;
  border-radius: 2px;
}

/* La plantilla capitaliza cada palabra (convención inglesa). En español eso
   deja "Cuéntenos Sobre Su Consulta": se anula en todo lo que lleva texto. */
.rt-text-style-h1, .rt-text-style-h2, .rt-text-style-h3,
.rt-text-style-h4, .rt-text-style-h5, .rt-text-style-h6,
.rt-contact-v2-form-label, .rt-faq-v5-text, .rt-body-font-dark,
.rt-big-text-v2, .rt-feature-v1-big-text, .rt-service-v1-marquee-text,
input.w-input, textarea.w-input, .w-form-label {
  text-transform: none !important;
}

input.w-input::placeholder,
textarea.w-input::placeholder { text-transform: none; }

/* Antetítulos y textos en versalitas */
.rt-sub-heading,
.rt-header-top-text,
.rt-menu-text,
.rt-nav-menu-link,
.rt-footer-text-links,
.rt-text-transform-uppercase {
  font-family: var(--elmed-titulo);
  letter-spacing: .12em;
  font-weight: 500;
}

/* --------------------------------------------------------- Logotipo ------ */
.rt-brand img,
.rt-footer-heading-wrapper img {
  width: 168px !important;
  height: auto !important;
}

@media screen and (max-width: 767px) {
  .rt-brand img { width: 138px !important; }
}

/* ------------------------------------------------------- Navegación ------ */
.elmed-client-nav-link {
  display: inline-flex !important;
  align-items: center;
  min-height: 44px;
  padding: 0 15px;
  color: inherit !important;
  font-family: var(--elmed-titulo);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: .1em;
  line-height: 1;
  text-decoration: none;
  text-transform: uppercase;
  position: relative;
  transition: color var(--elmed-transicion);
}

.elmed-client-nav-link::after {
  content: "";
  position: absolute;
  left: 15px;
  right: 15px;
  bottom: 9px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--elmed-transicion);
}

.elmed-client-nav-link:hover::after,
.elmed-client-nav-link[aria-current="page"]::after { transform: scaleX(1); }

.elmed-client-nav-link:hover,
.elmed-client-nav-link[aria-current="page"] { color: var(--elmed-coral) !important; }

@media screen and (max-width: 991px) {
  .elmed-client-nav-link { width: 100%; min-height: 48px; padding: 0 24px; }
  .elmed-client-nav-link::after { display: none; }
}

/* ----------------------------------------------------------- Botones -----
   Los botones de la plantilla conservan su óvalo animado (.rt-button-overlay),
   que mueven las interacciones de Webflow. Solo se neutraliza en las páginas
   generadas —fichas de producto y notas—, donde no hay interacción que lo
   anime y quedaría como una mancha fija sobre el botón. */
.elmed-product-hero .rt-button-overlay,
.elmed-nota-hero .rt-button-overlay,
.elmed-nota-cta-row .rt-button-overlay { display: none !important; }

.elmed-product-hero .rt-button-style-one,
.elmed-nota-hero .rt-button-style-one,
.elmed-nota-cta-row .rt-button-style-one {
  background-color: var(--elmed-coral-texto) !important;
  border: 1px solid var(--elmed-coral-texto) !important;
  color: #fff !important;
  height: auto !important;
  max-height: none !important;
  min-height: 50px;
  padding: 0 32px !important;
  transition: background-color var(--elmed-transicion),
              border-color var(--elmed-transicion),
              transform var(--elmed-transicion),
              box-shadow var(--elmed-transicion);
}

.elmed-product-hero .rt-button-style-one:hover,
.elmed-nota-hero .rt-button-style-one:hover,
.elmed-nota-cta-row .rt-button-style-one:hover {
  background-color: #fff !important;
  border-color: #fff !important;
  color: var(--elmed-tinta) !important;
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(0, 0, 0, .22);
}

/* Variante WhatsApp (rt-green-button): fondo/borde en el verde de marca en vez del coral */
.elmed-nota-cta-row .rt-button-style-one.rt-green-button {
  background-color: #25864b !important;
  border-color: #25864b !important;
}

.elmed-nota-cta-row .rt-button-style-one.rt-green-button:hover {
  background-color: #fff !important;
  border-color: #25864b !important;
  color: #25864b !important;
}

.elmed-product-hero .rt-button-style-one .rt-button-text-wrap,
.elmed-nota-hero .rt-button-style-one .rt-button-text-wrap,
.elmed-nota-cta-row .rt-button-style-one .rt-button-text-wrap {
  height: auto !important;
  margin-top: 0 !important;
}

.elmed-product-hero .rt-button-style-one .rt-button-text.two,
.elmed-nota-hero .rt-button-style-one .rt-button-text.two,
.elmed-nota-cta-row .rt-button-style-one .rt-button-text.two,
.elmed-nota-cta-row .rt-button-style-one .rt-button-text.rt-font-color-white { display: none; }

.elmed-nota-cta-row .rt-button-style-one .rt-button-text.rt-font-color-deep-green { color: inherit !important; }

.rt-button-one,
.rt-button-two,
.w-button,
.rt-form-submit-button {
  background-color: var(--elmed-coral-texto) !important;
  border: 1px solid var(--elmed-coral-texto) !important;
  color: #fff !important;
  font-family: var(--elmed-titulo);
  font-weight: 500;
  letter-spacing: .1em;
  transition: background-color var(--elmed-transicion),
              border-color var(--elmed-transicion),
              transform var(--elmed-transicion),
              box-shadow var(--elmed-transicion);
}

.rt-button-one:hover,
.rt-button-two:hover,
.w-button:hover,
.rt-form-submit-button:hover {
  background-color: var(--elmed-tinta) !important;
  border-color: var(--elmed-tinta) !important;
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(74, 48, 42, .18);
}

.rt-button-one:active,
.w-button:active,
.rt-form-submit-button:active { transform: translateY(0); }

/* ------------------------------------------------------------- Pie ------
   La plantilla pinta el pie con el color primario. Con el coral de ELMED eso
   da un bloque saturado a todo el ancho: el coral es acento, no superficie. */
.rt-footer {
  background-color: var(--elmed-tinta) !important;
  background-image:
    radial-gradient(80% 130% at 88% 0%, rgba(245, 100, 92, .22) 0%, rgba(245, 100, 92, 0) 60%) !important;
}

.rt-footer a { transition: color var(--elmed-transicion), opacity var(--elmed-transicion); }
.rt-footer a:hover { color: var(--elmed-coral-suave) !important; }

/* --------------------- Neutralización del verde salvia de la plantilla --- */
.rt-sub-heading.rt-second { background-color: var(--elmed-taupe-profundo); }

.rt-accordian-arrow,
.rt-service-v1-bg-box.two { border-color: var(--elmed-taupe) !important; }

.rt-reality-text-center-line { background-color: var(--elmed-taupe) !important; }

.rt-testimonial-arrow,
.rt-testimonial-arrow.change-border { border-color: rgba(185, 163, 151, .55) !important; }

.rt-bloom,
.rt-price,
.rt-testimonial,
.rt-reality-v2-bg { background-color: var(--elmed-gris-claro) !important; }

.rt-heading-overlay-green-color { background-color: rgba(249, 219, 222, .5) !important; }
.rt-heading-overlay-yellow-color { background-color: rgba(244, 245, 247, .5) !important; }

/* ------------------------------------------------- Catálogo: tarjetas ---- */
.rt-gallery-card-wrapper {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 36px 28px;
  align-items: stretch;
}

.rt-gallery-card {
  background: #fff;
  border: 1px solid var(--elmed-borde);
  display: flex !important;
  flex-direction: column;
  height: 100%;
  padding-bottom: 22px;
  text-decoration: none;
  transition: border-color var(--elmed-transicion),
              box-shadow var(--elmed-transicion),
              transform var(--elmed-transicion);
}

.rt-gallery-card:hover,
.rt-gallery-card:focus-visible {
  border-color: var(--elmed-coral-suave);
  box-shadow: 0 18px 38px rgba(74, 48, 42, .11);
  transform: translateY(-4px);
}

.rt-gallery-card > .elmed-product-card-media {
  aspect-ratio: 1 / 1;
  background: var(--elmed-gris-claro);
  overflow: hidden;
}

.rt-gallery-card .rt-gallery-image {
  aspect-ratio: auto;
  height: 100% !important;
  object-fit: contain;
  width: 100%;
  transition: transform .5s cubic-bezier(.22, .61, .36, 1);
}

.rt-gallery-card:hover .rt-gallery-image { transform: scale(1.045); }

.rt-gallery-card .rt-gallery-image-overlay { display: none; }

.rt-gallery-card .rt-text-style-h4 {
  margin: 10px 20px 0;
  color: var(--elmed-tinta);
  font-size: 1.22rem;
  line-height: 1.2;
}

.rt-gallery-card .elmed-product-brand,
.rt-gallery-card .elmed-product-description,
.rt-gallery-card .elmed-product-card-link { margin-left: 20px; margin-right: 20px; }

.rt-gallery-card .elmed-product-brand { margin-top: 18px; }

.elmed-product-card-link {
  border-top: 1px solid var(--elmed-borde);
  color: var(--elmed-coral-texto);
  font-family: var(--elmed-titulo);
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .14em;
  margin-top: auto;
  padding-top: 14px;
  text-transform: uppercase;
}

.elmed-product-brand {
  color: var(--elmed-coral-texto);
  font-family: var(--elmed-titulo);
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  margin-top: 18px;
}

.elmed-product-description {
  color: var(--elmed-taupe-profundo);
  font-size: .93rem;
  line-height: 1.6;
  margin-top: 9px;
  padding-bottom: 16px;
}

/* -------------------------------------------------------- Novedades ------ */
.elmed-notas-grilla {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 40px 28px;
  align-items: start;
}

.rt-blog-v2-card {
  display: block;
  text-decoration: none;
  height: 100%;
}

/* Las gráficas del fabricante son banners anchos y con mucho texto: recortadas
   quedaban con las palabras cortadas. Se muestran completas. */
.rt-blog-v2-card img {
  aspect-ratio: 1.5 / 1;
  object-fit: contain;
  background: var(--elmed-gris-claro);
  width: 100%;
  height: auto !important;
  transition: transform .5s cubic-bezier(.22, .61, .36, 1);
}

.rt-blog-v2-card:hover img { transform: scale(1.03); }

.rt-blog-v2-card .rt-text-style-h4 {
  line-height: 1.22;
  font-size: 1.16rem;
  margin-top: 8px;
  transition: color var(--elmed-transicion);
}

.rt-blog-v2-card:hover .rt-text-style-h4 { color: var(--elmed-coral-texto); }

.rt-blog-v2-card .rt-text-transform-uppercase {
  color: var(--elmed-coral-texto);
  font-size: .68rem;
  letter-spacing: .14em;
}

/* Nota cuya gráfica original correspondía a otro evento: se muestra un bloque
   de marca en vez de una imagen que no le pertenece. */
.elmed-nota-placeholder {
  aspect-ratio: 1.5 / 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 10px;
  padding: 26px;
  background:
    radial-gradient(90% 130% at 82% 8%, rgba(245, 100, 92, .3) 0%, rgba(245, 100, 92, 0) 60%),
    linear-gradient(160deg, #3a2621 0%, var(--elmed-tinta) 100%);
}

.elmed-nota-placeholder span {
  color: var(--elmed-coral-suave);
  font-family: var(--elmed-titulo);
  font-size: .66rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.elmed-nota-placeholder strong {
  color: #fff;
  font-family: var(--elmed-titulo);
  font-size: 1.4rem;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -.01em;
}

.elmed-nota-placeholder--ancho {
  aspect-ratio: 2.6 / 1;
  margin-bottom: clamp(34px, 6vw, 64px);
  padding: 40px;
}

.elmed-nota-placeholder--ancho strong { font-size: clamp(1.6rem, 3vw, 2.4rem); }

.elmed-nota-resumen {
  color: var(--elmed-taupe-profundo);
  font-size: .93rem;
  line-height: 1.6;
  margin-top: 10px;
}

@media screen and (max-width: 991px) {
  .elmed-notas-grilla { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media screen and (max-width: 620px) {
  .elmed-notas-grilla { grid-template-columns: 1fr; gap: 34px; }
}

/* --------------------------------------------------- Nota individual ----- */
.elmed-nota-hero h1 { max-width: 22ch; }
.elmed-nota-hero .elmed-product-hero-paragraph { margin-top: 18px; }

.elmed-nota-figura {
  margin: 0 0 clamp(34px, 6vw, 64px);
  background: var(--elmed-gris-claro);
}

.elmed-nota-figura img {
  display: block;
  width: 100%;
  height: auto !important;
  aspect-ratio: 1.6 / 1;
  object-fit: contain;
}

.elmed-nota-cuerpo {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(240px, .65fr);
  gap: clamp(30px, 6vw, 76px);
  align-items: start;
}

.elmed-nota-cuerpo > p { margin: 0 0 18px; font-size: 1.02rem; line-height: 1.75; }
.elmed-nota-cuerpo > p:first-child { font-size: 1.12rem; }
.elmed-nota-cuerpo .elmed-product-spec-panel { grid-row: 1 / 99; grid-column: 2; }

.elmed-nota-volver { margin-top: 44px; }

.elmed-nota-volver a {
  color: var(--elmed-coral-texto);
  font-family: var(--elmed-titulo);
  font-size: .74rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 3px;
}

@media screen and (max-width: 767px) {
  .elmed-nota-cuerpo { grid-template-columns: 1fr; }
  .elmed-nota-cuerpo .elmed-product-spec-panel { grid-row: auto; grid-column: auto; }
}

/* CTA doble (ficha de producto + WhatsApp) en los articulos de blog de producto */
.elmed-nota-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin: 8px 0 32px;
}

/* Reveal de imagen al hacer scroll (Inicio/Nosotros): la plantilla original
   tapaba la imagen con un bloque solido del color primario (coral) que se
   encogia para revelarla — se ve como un parche de color plano. Se reemplaza
   por un panel de vidrio esmerilado: el fondo detras del panel es la misma
   imagen que tapa, desenfocada via backdrop-filter, no un color ni otra
   imagen. La animacion (alto/posicion, data-w-id) no se toca, solo el
   material visual del panel. */
.rt-image-overlay-appearence {
  background-color: rgba(255, 255, 255, .32) !important;
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
}

/* ------------------------------------------------------------- Home ------ */
.elmed-hero-note {
  color: var(--elmed-coral-suave);
  font-family: var(--elmed-titulo);
  letter-spacing: .18em;
  text-transform: uppercase;
  font-size: .72rem;
  font-weight: 500;
}

.elmed-icono {
  width: 56px;
  height: 56px;
  object-fit: contain;
  flex: 0 0 auto;
}

/* Los iconos de la barra superior y del pie eran SVG de la plantilla; ahora son
   PNG del sistema ELMED y necesitan tamaño explícito. */
.rt-header-top-text img,
.rt-footer-text-links img,
.rt-contact-us-one-box-icon img {
  width: 20px !important;
  height: 20px !important;
  object-fit: contain;
}

.rt-contact-us-one-box-icon img { width: 26px !important; height: 26px !important; }

.elmed-faq-answer { color: var(--elmed-taupe-profundo); }

/* --------------------------------------------------- Ficha de producto --- */
.elmed-product-hero {
  background: var(--elmed-tinta);
  color: #fff;
  /* la plantilla reserva 256px arriba para su hero de equipo; acá sobra */
  padding-top: 150px !important;
  padding-bottom: 96px !important;
}

@media screen and (max-width: 767px) {
  .elmed-product-hero { padding-top: 118px !important; padding-bottom: 64px !important; }
}

.elmed-product-hero h1,
.elmed-product-hero .rt-text-style-h1 { color: #fff; }

.elmed-product-hero-main {
  align-items: stretch;
  gap: clamp(36px, 7vw, 112px);
}

.elmed-product-hero-media {
  align-items: center;
  align-self: start;
  aspect-ratio: 1 / 1;
  display: flex;
  flex: 0 1 48%;
  background: linear-gradient(150deg, var(--elmed-rosa), #fff 70%);
  justify-content: center;
  padding: clamp(18px, 3vw, 40px);
}

.elmed-product-hero-media img {
  aspect-ratio: auto;
  height: 100% !important;
  object-fit: contain;
  width: 100%;
}

.elmed-product-hero-copy {
  justify-content: center;
  flex: 1;
  padding: clamp(24px, 4vw, 72px) 0;
}

.elmed-product-hero-copy h1 { max-width: 14ch; letter-spacing: -.02em; }

.elmed-product-eyebrow,
.elmed-product-kicker,
.elmed-product-related-kicker {
  color: var(--elmed-coral-suave);
  font-family: var(--elmed-titulo);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .18em;
  line-height: 1.5;
  text-transform: uppercase;
}

.elmed-product-kicker,
.elmed-product-related-kicker { color: var(--elmed-coral-texto); }

.elmed-product-hero-paragraph {
  max-width: 52ch;
  color: rgba(255, 255, 255, .82);
}

.elmed-product-hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 18px 40px;
  margin: 30px 0 34px;
  border-top: 1px solid rgba(255, 255, 255, .22);
  border-bottom: 1px solid rgba(255, 255, 255, .22);
  padding: 20px 0;
}

.elmed-product-hero-meta-item {
  display: grid;
  gap: 5px;
  align-content: start;
  flex: 0 1 auto;
  min-width: 120px;
  max-width: 320px;
}

.elmed-product-hero-meta-label {
  color: rgba(255, 255, 255, .6);
  font-family: var(--elmed-titulo);
  font-size: .66rem;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.elmed-product-hero-meta-value { color: #fff; font-size: .93rem; line-height: 1.4; }

.elmed-product-content { background: #fff; }

.elmed-product-intro {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(260px, .7fr);
  align-items: start;
  gap: clamp(34px, 7vw, 100px);
}

.elmed-product-intro h2,
.elmed-product-ingredients h2,
.elmed-product-related h2 { margin-top: 12px; }

.elmed-product-spec-panel {
  border-left: 2px solid var(--elmed-rosa);
  padding-left: 26px;
}

/* Etiqueta arriba y valor debajo: hay presentaciones largas ("Vial 1: 155 mg
   (polvo liofilizado) · Vial 2: 5 mL") que en dos columnas se parten en
   pedazos de dos palabras. */
.elmed-product-spec {
  display: grid;
  gap: 4px;
  padding: 13px 0;
  border-bottom: 1px solid var(--elmed-borde);
}

.elmed-product-spec-label {
  color: var(--elmed-taupe-profundo);
  font-family: var(--elmed-titulo);
  font-size: .7rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.elmed-product-spec-value {
  color: var(--elmed-tinta);
  font-weight: 600;
  line-height: 1.45;
}

.elmed-product-gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  margin: clamp(46px, 8vw, 96px) 0;
}

.elmed-product-gallery figure {
  margin: 0;
  background: var(--elmed-gris-claro);
  overflow: hidden;
  aspect-ratio: 1 / 1;
}

.elmed-product-gallery img {
  display: block;
  width: 100%;
  height: 100% !important;
  aspect-ratio: auto;
  object-fit: contain;
  transition: transform .55s cubic-bezier(.22, .61, .36, 1);
}

.elmed-product-gallery figure:hover img { transform: scale(1.04); }

.elmed-product-ingredients {
  border-top: 1px solid var(--elmed-borde);
  padding-top: 44px;
}

.elmed-product-ingredient-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  margin-top: 30px;
}

.elmed-product-ingredient-card {
  background: var(--elmed-gris-claro);
  border-top: 2px solid var(--elmed-coral-suave);
  padding: 28px;
}

.elmed-product-ingredient-card h3 {
  margin: 0 0 16px;
  font-size: .95rem;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.elmed-product-ingredient-card ul { margin: 0; padding-left: 18px; }
.elmed-product-ingredient-card li { color: var(--elmed-taupe-profundo); }
.elmed-product-ingredient-card li + li { margin-top: 9px; }

.elmed-product-quote {
  border-left: 3px solid var(--elmed-coral);
  color: var(--elmed-tinta);
  font-family: var(--elmed-titulo);
  font-weight: 400;
  font-size: clamp(1.5rem, 2.6vw, 2.15rem);
  line-height: 1.28;
  letter-spacing: -.02em;
  margin: clamp(48px, 8vw, 104px) 0;
  padding: 12px 0 12px 30px;
}

.elmed-product-related {
  border-top: 1px solid var(--elmed-borde);
  padding-top: 44px;
}

.elmed-product-related-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  margin-top: 30px;
}

.elmed-product-related-card {
  background: #fff;
  border: 1px solid var(--elmed-borde);
  color: inherit;
  display: block;
  padding-bottom: 16px;
  text-decoration: none;
  transition: border-color var(--elmed-transicion),
              box-shadow var(--elmed-transicion),
              transform var(--elmed-transicion);
}

.elmed-product-related-card:hover {
  border-color: var(--elmed-coral-suave);
  box-shadow: 0 14px 28px rgba(74, 48, 42, .1);
  transform: translateY(-3px);
}

.elmed-product-related-card-image {
  background: var(--elmed-gris-claro);
  aspect-ratio: 1 / 1;
  min-height: 0;
  overflow: hidden;
}

.elmed-product-related-card-image img {
  display: block;
  width: 100%;
  height: 100% !important;
  aspect-ratio: auto;
  object-fit: contain;
  transition: transform .5s cubic-bezier(.22, .61, .36, 1);
}

.elmed-product-related-card:hover img { transform: scale(1.05); }

.elmed-product-related-card .elmed-product-brand {
  margin: 14px 16px 0;
}

.elmed-product-related-card-title {
  font-family: var(--elmed-titulo);
  font-size: 1.02rem;
  font-weight: 500;
  line-height: 1.22;
  margin: 6px 16px 0;
}

/* Medidas disponibles — línea Instrumental. Informativo, no es selector de
   compra: por eso son <span>, no botones ni inputs. */
.elmed-product-sizes {
  border-top: 1px solid var(--elmed-borde);
  padding-top: 44px;
  margin: clamp(46px, 8vw, 96px) 0;
}

.elmed-product-sizes-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 22px;
}

.elmed-product-size-chip {
  background: var(--elmed-gris-claro);
  border: 1px solid var(--elmed-borde);
  color: var(--elmed-tinta);
  font-family: var(--elmed-titulo);
  font-size: .8rem;
  font-weight: 500;
  letter-spacing: .01em;
  padding: 9px 16px;
  white-space: nowrap;
}

.elmed-product-sizes-note {
  color: var(--elmed-taupe-profundo);
  font-size: .85rem;
  line-height: 1.5;
  margin: 18px 0 0;
  max-width: 62ch;
}

/* Carrusel de imágenes del hero — línea Instrumental. Solo se activa con
   .has-carousel, así que las 30 fichas existentes (una sola imagen) no
   se tocan: siguen usando el aspect-ratio:1/1 fijo de .elmed-product-hero-media. */
.elmed-product-hero-media.has-carousel { aspect-ratio: auto; }

.elmed-product-hero-carousel {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
}

.elmed-product-hero-image { aspect-ratio: 1 / 1; width: 100%; }

.elmed-product-hero-thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}

.elmed-product-hero-thumb {
  background: #fff;
  border: 2px solid transparent;
  border-radius: 2px;
  cursor: pointer;
  flex: 0 0 auto;
  height: 56px;
  padding: 3px;
  transition: border-color var(--elmed-transicion);
  width: 56px;
}

.elmed-product-hero-thumb:hover { border-color: var(--elmed-coral-suave); }
.elmed-product-hero-thumb.is-active { border-color: var(--elmed-coral); }

/* Migas de pan */
.elmed-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  font-family: var(--elmed-titulo);
  font-size: .7rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-bottom: 22px;
}

.elmed-breadcrumb a { color: rgba(255, 255, 255, .62); text-decoration: none; }
.elmed-breadcrumb a:hover { color: #fff; }
.elmed-breadcrumb span { color: rgba(255, 255, 255, .38); }

/* Aviso de dato pendiente de confirmación del fabricante */
.elmed-nota-dato {
  color: var(--elmed-taupe-profundo);
  font-size: .82rem;
  line-height: 1.6;
  margin-top: 18px;
  padding-left: 14px;
  border-left: 2px solid var(--elmed-gris-medio);
}

/* --------------------------------------------------- Banner de contacto --
   La plantilla trae una foto de peluquería como fondo; se sustituye por el
   degradado de marca. */
.elmed-contacto-banner {
  background-image:
    radial-gradient(90% 130% at 78% 4%, rgba(245, 100, 92, .32) 0%, rgba(245, 100, 92, 0) 58%),
    linear-gradient(160deg, #3a2621 0%, var(--elmed-tinta) 58%, #2f211d 100%) !important;
  background-color: var(--elmed-tinta) !important;
}

/* ------------------------------------------------------- Formulario ------ */
.rt-form-input,
.rt-form-text-area,
input.w-input,
textarea.w-input {
  font-family: var(--elmed-cuerpo);
  color: var(--elmed-tinta);
  transition: border-color var(--elmed-transicion);
}

.rt-form-input::placeholder,
.rt-form-text-area::placeholder,
input.w-input::placeholder,
textarea.w-input::placeholder { color: var(--elmed-gris); }

.rt-form-input:focus,
.rt-form-text-area:focus,
input.w-input:focus,
textarea.w-input:focus { border-color: var(--elmed-coral) !important; }

/* --------------------------------------------------------- Responsive --- */
@media screen and (max-width: 991px) {
  .rt-gallery-card-wrapper { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .elmed-product-hero-main { gap: 30px; }
  .elmed-product-related-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media screen and (max-width: 620px) {
  .rt-gallery-card-wrapper { grid-template-columns: 1fr; gap: 28px; }

  .elmed-product-hero-main,
  .elmed-product-intro { display: block; }

  .elmed-product-hero-copy { padding-bottom: 0; }
  .elmed-product-hero-copy h1 { max-width: none; }
  .elmed-product-hero-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .elmed-product-spec-panel {
    border-left: 0;
    border-top: 2px solid var(--elmed-rosa);
    margin-top: 32px;
    padding: 26px 0 0;
  }

  .elmed-product-gallery,
  .elmed-product-ingredient-grid { grid-template-columns: 1fr; }

  .elmed-product-related-grid { grid-template-columns: 1fr 1fr; }
}

/* ------------------------------------------------- Movimiento reducido --- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}