/*
Theme Name: HTO Minimal
Theme URI: https://htochile.cl/
Author: Undergraf + Chatom
Author URI: https://htochile.cl/
Description: Tema corporativo minimalista para HTO Chile. Header, navegación, secciones y footer institucional.
Version: 1.1
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: hto-minimal
Tags: corporate, minimal, clean, responsive
*/

/* =========================
   1) Variables y base
========================= */
:root{
  /* Brand */
  --hto-orange:#EB632D;
  --hto-green:#2E8571;
  --hto-black:#000000;
  --hto-white:#ffffff;
  --hto-text:#1a1a1a;

  /* Footer (estilo Mangueplast) */
  --hto-orange-dark:#C44F22;
  --footer-text:#fff;
  --footer-muted:rgba(255,255,255,.8);
  --footer-bg:#EB632D;
  --footer-bottom:#B8441B;

  /* Off-canvas */
  --nav-panel-w: min(86vw, 360px);
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
html,body{ overflow-x:hidden; }
body{
  margin:0;
  color:var(--hto-text);
  font:300 16px/1.6 Helvetica, Arial, system-ui, -apple-system, "Segoe UI", Roboto, "Ubuntu", "Noto Sans", sans-serif;
  background:#fff;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  font-synthesis:none;
}
.container{ max-width:1200px; margin:0 auto; padding:0 20px; }

body.admin-bar .site-header{ top:32px; }
@media (max-width:782px){ body.admin-bar .site-header{ top:46px; } }

/* =========================
   2) Header y navegación
========================= */
.site-header{
  position:sticky; top:0; z-index:1000;
  background:#fff; border-bottom:1px solid #eee; overflow:visible;
}
.header-inner{ display:flex; align-items:center; justify-content:space-between; padding:12px 0; }

.site-branding{ display:flex; align-items:center; gap:12px; }
.custom-logo{ max-height:72px; height:auto; width:auto; display:block; }
.site-title{ margin:0; font-weight:800; letter-spacing:.4px; text-transform:uppercase; font-size:20px; }
.site-title a{ color:var(--hto-black); text-decoration:none; }
.site-description{ margin:0; font-size:13px; color:#666; }

/* Navegación (estructura básica) */
.site-navigation{ position:static; }
.primary-nav, .primary-nav li{ list-style:none; margin:0; padding:0; }
.primary-nav{ display:flex; gap:24px; align-items:center; }
.primary-nav a{
  text-decoration:none; color:var(--hto-green);
  font-weight:300; letter-spacing:.02em; text-transform:uppercase;
  padding:8px 4px; display:inline-block;
}
.primary-nav a:hover,
.primary-nav .current-menu-item>a,
.primary-nav .current_page_item>a{ color:var(--hto-orange); }

/* Toggle hamburguesa (oculto en desktop) */
.nav-toggle{
  display:none; align-items:center; justify-content:center;
  width:44px; height:44px; border:0; border-radius:10px;
  background:var(--hto-orange); color:#fff; box-shadow:0 6px 16px rgba(0,0,0,.12);
  cursor:pointer;
}
.nav-toggle svg{ width:24px; height:24px; }

/* Backdrop global (lo muestra JS) */
.nav-backdrop{
  position:fixed; inset:0; background:rgba(0,0,0,.35);
  opacity:0; pointer-events:none; transition:opacity .2s; z-index:999;
}
body.menu-open .nav-backdrop{ opacity:1; pointer-events:auto; }

/* Panel off-canvas (móvil) */
@media (max-width:992px){
  .site-header .nav-toggle{ display:inline-flex; }               /* mostrar botón */
  .site-header .site-navigation{
    position:fixed; top:0; right:0; bottom:0; left:auto;
    width:var(--nav-panel-w);
    transform:translate3d(100%,0,0);
    transition:transform .28s ease; z-index:1000;
    background:transparent !important;
  }
  .site-header .site-navigation.is-open{ transform:translate3d(0,0,0); }

  .site-header .nav-panel{
    height:100%; overflow:auto; background:#fff; padding:20px;
    box-shadow:-12px 0 30px rgba(0,0,0,.12); border-radius:0;
    position:relative;
  }

  .site-header .nav-close{
    position:absolute; top:8px; right:10px;
    width:36px; height:36px; border:0; border-radius:10px;
    background:#f3f5f6; color:#222; font-size:24px; line-height:1; cursor:pointer;
    display:inline-flex; align-items:center; justify-content:center;
  }

  /* Menú vertical */
  #primary-menu{ display:flex; flex-direction:column; gap:14px; margin:46px 0 0; padding:0; }
  #primary-menu a{
    display:block; padding:10px 0; border-bottom:1px solid #eee;
    color:var(--hto-orange); font-weight:600; text-decoration:none;
  }
  #primary-menu a:hover{ color:var(--hto-green); }
  #primary-menu .current-menu-item>a{ color:var(--hto-green); }

  /* Layout del header en móvil */
  .header-inner{
    display:grid; grid-template-columns:1fr auto; row-gap:10px;
    grid-template-areas:"branding toggle" "search search";
    align-items:center;
  }
  .site-branding{ grid-area:branding; }
  .nav-toggle{ grid-area:toggle; }
}

/* Desktop reset (>=993px) */
@media (min-width:993px){
  .nav-toggle, .site-header .nav-close, .nav-backdrop{ display:none !important; }
  .site-header .site-navigation,
  .site-header .site-navigation .nav-panel{
    position:static !important; transform:none !important; width:auto !important;
    background:transparent !important; padding:0 !important; box-shadow:none !important; height:auto !important; overflow:visible !important;
  }
  #primary-menu{ display:flex !important; gap:24px; margin:0; padding:0; list-style:none; }
}

/* Estilos comunes de enlaces de menú (aplica en desktop también) */
#primary-menu, #primary-menu li{ margin:0; padding:0; list-style:none; }
#primary-menu{ gap:24px; }
#primary-menu a{
  font-weight:600; color:var(--hto-orange);
  text-decoration:none; transition:color .2s, border-color .2s; padding:6px 0; border-bottom:2px solid transparent;
}
#primary-menu a:hover, #primary-menu a:focus-visible{ color:var(--hto-green); border-color:var(--hto-green); }
#primary-menu .current-menu-item>a{ color:var(--hto-green); border-color:var(--hto-green); }

/* =========================
   3) Botones y CTA
========================= */
.btn, .button, .wp-block-button__link, input[type=submit], button{
  background:var(--hto-green); color:#fff; border:0; border-radius:10px;
  padding:.75rem 1.1rem; font-weight:600; text-decoration:none; display:inline-block; cursor:pointer;
  transition:background .3s ease, transform .2s ease;
}
.btn:hover, .button:hover, .wp-block-button__link:hover, input[type=submit]:hover, button:hover{
  background:#256c5b; color:#fff;
}
.cta-group a.btn,
.cta-group a.button,
.cta-group .wp-block-button__link{
  background:var(--hto-green) !important; color:#fff !important; border:0 !important; border-radius:50px !important;
  padding:.7rem 1.6rem !important; font-weight:600 !important; letter-spacing:.5px !important;
  box-shadow:0 4px 10px rgba(0,0,0,.10) !important;
}
.cta-group a.btn:hover,
.cta-group a.button:hover,
.cta-group .wp-block-button__link:hover{ background:#256c5b !important; transform:translateY(-2px); }

/* =========================
   4) Hero
========================= */
.hero{ background:linear-gradient(180deg, rgba(235,99,45,.06), rgba(46,133,113,.06)); padding:64px 0; }
.hero h1{ margin:0 0 10px; font-size:40px; line-height:1.1; font-weight:800; }
.hero p.lead{ font-size:18px; color:#444; margin:0 0 24px; max-width:780px; }
.hero .cta-group{ display:flex; gap:12px; flex-wrap:wrap; }

/* Hero por página (con imagen vía --hero) */
.page-hero{
  background-image: linear-gradient(180deg, rgba(0,0,0,.06), rgba(0,0,0,.02)), var(--hero);
  background-position:center; background-repeat:no-repeat; background-size:cover;
  border-bottom:1px solid #eee; width:100%;
  min-height:220px; padding:20px 0;
}
@media (max-width:992px){ .page-hero{ padding:32px 0; } }

/* =========================
   5) Secciones / Cards
========================= */
.section{ padding:56px 0; }
.section h2{ font-size:28px; margin:0 0 18px; font-weight:700; }
.grid3{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.card{ border:1px solid #eee; border-radius:16px; padding:18px; background:#fff; box-shadow:0 1px 2px rgba(0,0,0,.03); }
.card h3{ margin:0 0 6px; font-size:18px; }
.card p{ margin:0; color:#555; }
.card img{ display:block; margin:0 auto 10px; width:250px; height:250px; object-fit:cover; border-radius:8px; }

/* =========================
   6) Bloque Contacto
========================= */
.section.contacto{ background:#f9f9f9; padding:40px 20px; border-top:3px solid var(--hto-green); }
.contacto-titulo{ font-size:1.8rem; font-weight:800; margin-bottom:24px; text-align:center; color:#0b1e2d; }
.contacto-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:18px; }
.contacto-item{
  background:#fff; border:1px solid rgba(0,0,0,.06); border-radius:12px; padding:16px;
  display:flex; gap:12px; align-items:flex-start; box-shadow:0 4px 12px rgba(0,0,0,.05);
}
.contacto-item .icon{ font-size:1.4rem; color:var(--hto-green); }
.link{ color:var(--hto-green); font-weight:600; text-decoration:none; }
.link:hover{ text-decoration:underline; }
.contacto-item p{ margin:4px 0; font-size:.95rem; }
.contacto-item strong{ color:#0b1e2d; font-weight:600; }
/* Ajuste del párrafo de introducción en la página de contacto */


/* =========================
   7) WooCommerce (básico)
========================= */
.shop-main{ padding:32px 16px; }
.single-product .woocommerce div.product{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:32px; align-items:start;
}
.single-product .woocommerce div.product div.images img{ width:100%; height:auto; border-radius:8px; }
.single-product .product_title{ margin-bottom:12px; }
.single-product .woocommerce-product-details__short-description{ margin:12px 0 16px; }
.single-product .single_add_to_cart_button,
.single-product .button{ background:var(--hto-green); color:#fff; font-weight:600; padding:12px 18px; border-radius:8px; }
.single-product .single_add_to_cart_button:hover,
.single-product .button:hover{ background:#236857; }
.woocommerce-breadcrumb{ margin-bottom:16px; color:#666; }
.single-product .product_meta{ margin-top:16px; color:#555; font-size:.95rem; }
.archive.woocommerce .shop-main{ padding:32px 16px; }

/* Enlaces solo en tienda */
.woocommerce a, .woocommerce-page a{ color:var(--hto-orange); text-decoration:none; }
.woocommerce a:hover, .woocommerce-page a:hover{ color:var(--hto-green); text-decoration:underline; }
.woocommerce ul.products li.product a{ color:var(--hto-orange); }
.woocommerce ul.products li.product a:hover{ color:var(--hto-green); }
.woocommerce .woocommerce-breadcrumb a{ color:var(--hto-orange); }
.woocommerce .woocommerce-breadcrumb a:hover{ color:var(--hto-green); }

/* Resultados como cards */
.woocommerce ul.products li.product.hto-card-product{
  background:#fff; border-radius:12px; padding:16px; box-shadow:0 8px 24px rgba(0,0,0,.06);
}
.woocommerce ul.products li.product.hto-card-product img{ border-radius:8px; }
.woocommerce ul.products li.product.hto-card-product h2{ font-size:1rem; margin:.6rem 0; }

/* Sección “Líneas de productos” */
#lineas-de-productos .grid3{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
#lineas-de-productos .card{ background:#fff; border-radius:12px; padding:16px; box-shadow:0 8px 24px rgba(0,0,0,.06); }
#lineas-de-productos h3{ margin:6px 0 12px; }
.btn-hto{
  display:inline-block; margin-top:10px; padding:10px 16px; border-radius:8px;
  text-decoration:none; font-weight:600; background:var(--hto-green); color:#fff; transition:all .2s;
}
.btn-hto:hover{ background:#256a5a; }

/* =========================
   8) Texto empresa
========================= */
.hto-texto{ margin-bottom:16px; line-height:1.6; font-size:16px; color:#222; }
.hto-lista{ list-style:disc; margin:10px 0 16px 30px; padding-left:0; }
.hto-lista li{ margin-bottom:6px; font-size:15px; }
.hto-historia-valores{ text-align:center; }
.hto-historia-valores .hto-texto{ text-align:center; margin:0 auto 16px; max-width:850px; line-height:1.6; }
.hto-historia-valores .hto-lista{ display:inline-block; text-align:center; margin:10px auto 16px; }

/* =========================
   9) Footer (Mangueplast)
========================= */
.site-footer.mp-style{ color:var(--footer-text); background:var(--footer-bg); margin-top:0; }

.footer-brandbar{ display:flex; align-items:center; justify-content:center; gap:16px; padding:28px 16px 12px; }
.footer-logo{ display:inline-flex; align-items:center; gap:10px; text-decoration:none; color:#fff; }
.footer-brandtext{ font-weight:800; letter-spacing:.4px; font-size:1.35rem; }
.social-links a{
  display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px;
  border-radius:50%; background:rgba(255,255,255,.12); color:#fff; margin:0 4px; transition:transform .15s, background .15s;
}
.social-links a:hover{ transform:translateY(-2px); background:rgba(255,255,255,.22); }

.footer-grid{ display:grid; gap:28px; padding:24px 16px 8px; grid-template-columns:repeat(4,minmax(0,1fr)); }
@media (max-width:900px){ .footer-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:540px){ .footer-grid{ grid-template-columns:1fr; } }

.footer-title{ font-size:.95rem; font-weight:800; text-transform:uppercase; margin:6px 0 8px; }
.footer-list{ list-style:none; margin:0; padding:0; }
.footer-list li{ margin:6px 0; }
.footer-list a{ color:var(--footer-text); text-decoration:none; }
.footer-list a:hover{ text-decoration:underline; }
.footer-list li strong{ font-weight:800; }

.footer-badges{ display:flex; gap:10px; margin-top:10px; align-items:center; }
.footer-badges img{ height:48px; width:auto; filter:drop-shadow(0 1px 0 rgba(0,0,0,.1)); }

.footer-address{ background:rgba(0,0,0,.08); padding:10px 0; color:var(--footer-muted); text-align:center; }
.footer-address p{ margin:0; }

.footer-bottom{ background:var(--footer-bottom); }
.footer-bottom-inner{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:12px 16px; color:#fff; }
.footer-copy{ opacity:.95; }
.footer-madeby a{ color:#fff; text-decoration:underline; }

.site-footer.mp-style a{ color:#fff !important; }
.site-footer.mp-style a:hover{ color:#fff !important; text-decoration:underline; }

/* =========================
   10) Buscador Header
========================= */
.header-actions .woocommerce-product-search{ display:flex; gap:8px; width:100%; }
.header-actions .woocommerce-product-search .search-field{
  flex:1; min-width:0; height:42px; border:1px solid #e5e5e5; border-radius:10px; padding:0 12px;
}
.header-actions .woocommerce-product-search button{ height:42px; border-radius:10px; }

@media (min-width:993px){
  .header-inner{ display:flex; align-items:center; gap:24px; }
  .site-branding{ flex:0 0 auto; }
  .site-header .site-navigation{ flex:1 1 auto; }
  .header-actions{ flex:0 0 360px; display:flex; justify-content:flex-end; }
}
@media (max-width:992px){
  .header-actions{ grid-area:search; }
  .header-actions .woocommerce-product-search{ width:100%; }
}

/* ===== Líneas de Productos: layout responsive ===== */

/* Tablet: 2 columnas */
@media (max-width: 1024px){
  #lineas-de-productos .grid3{
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Móvil: 1 columna (apiladas hacia abajo) */
@media (max-width: 680px){
  #lineas-de-productos .grid3{
    grid-template-columns: 1fr;       /* apila las cards */
  }
  #lineas-de-productos .card{
    max-width: 560px;                  /* opcional: centra y limita ancho */
    margin-inline: auto;
  }
}

/* Por si WooCommerce mete columnas dentro del shortcode, forzamos 1x1 */
#lineas-de-productos .card ul.products{
  margin: 10px 0 0;
}
#lineas-de-productos .card ul.products li.product{
  width: 100% !important;
  float: none !important;
  margin: 0 0 8px !important;
}

/* Banner home full width */
.banner-home{
  width:100%;
  height:400px;                       /* alto solicitado */
  background-image: var(--banner);
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
  border-bottom:1px solid #eee;       /* opcional, para corte limpio */
}

/* Opcional: ajustar un poco en móviles muy pequeños */
@media (max-width: 600px){
  .banner-home{ height:300px; }       /* quita esta regla si quieres 500px en todo */
}

/* =========================
   Menú móvil — look & feel
========================= */
@media (max-width: 992px){
  /* Panel: tarjeta limpia, suave */
  .site-header .nav-panel{
    padding:20px;
    background:linear-gradient(180deg,#fff 0%,#fafdfc 100%);
    box-shadow:-20px 0 50px rgba(0,0,0,.18);
    border-radius:16px 0 0 16px;
  }

  /* Barra superior decorativa (marca) */
  .site-header .nav-panel::before{
    content:"";
    position:sticky; top:0; display:block;
    height:6px; margin:-20px -20px 12px;
    background:linear-gradient(90deg,var(--hto-orange),var(--hto-green));
    border-radius:16px 0 0 0;
  }

  /* Botón cerrar */
  .site-header .nav-close{
    position:absolute; top:10px; right:12px;
    width:36px; height:36px;
    border:0; border-radius:10px;
    background:#f3f5f6; color:#0b1e2d;
    font-size:22px; line-height:1;
    display:inline-flex; align-items:center; justify-content:center;
    box-shadow:0 2px 10px rgba(0,0,0,.08);
  }
  .site-header .nav-close:hover{ background:#e9eef0; }

  /* Lista principal: reset y separadores sutiles */
  #primary-menu{ margin:0; padding:0; display:flex; flex-direction:column; gap:0; }
  #primary-menu > li{ border-bottom:1px solid #eef1f1; }
  #primary-menu > li:last-child{ border-bottom:0; }

  /* Enlaces: grandes, legibles, con chevron animado */
  #primary-menu > li > a{
    display:flex; align-items:center; justify-content:space-between;
    padding:14px 6px;
    font-size:18px; font-weight:700; letter-spacing:.2px;
    color:#0b1e2d; text-transform:none; text-decoration:none;
    transition:background .18s ease, color .18s ease, transform .06s ease;
  }
  #primary-menu > li > a::after{
    content:"›"; /* chevron */
    font-size:22px; line-height:1;
    color:var(--hto-orange);
    opacity:.6;
    transform:translateX(0);
    transition:transform .18s ease, opacity .18s ease;
  }
  #primary-menu > li > a:hover{
    background:#fff6f2;             /* suave naranja */
    color:var(--hto-green);
  }
  #primary-menu > li > a:hover::after{
    transform:translateX(4px); opacity:1;
  }
  #primary-menu .current-menu-item > a{
    background:#ecf5f3;              /* suave verde para activo */
    color:var(--hto-green);
  }

  /* Micro-interacción al tap */
  #primary-menu > li > a:active{ transform:translateY(1px); }

  /* Scrollbar sutil dentro del panel */
  .site-header .nav-panel::-webkit-scrollbar{ width:10px; }
  .site-header .nav-panel::-webkit-scrollbar-thumb{
    background:#e6eceb; border-radius:10px;
  }
  .site-header .nav-panel::-webkit-scrollbar-track{ background:transparent; }

  /* Backdrop con leve blur */
  .nav-backdrop{
    background:rgba(0,0,0,.28);
    backdrop-filter:saturate(110%) blur(2px);
  }
}

/* FAB flotantes */
:root{ --fab-size:54px; --fab-gap:12px; }
.hto-fab{ position:fixed; right:16px; bottom:16px; display:flex; flex-direction:column; gap:var(--fab-gap); z-index:2147483647; pointer-events:none; }
.hto-fab .fab-btn{ width:var(--fab-size); height:var(--fab-size); border-radius:50%; display:grid; place-items:center; box-shadow:0 8px 22px rgba(0,0,0,.18); color:#fff; pointer-events:auto; transition:transform .16s, box-shadow .16s; }
.hto-fab .fab-btn:hover{ transform:translateY(-2px); box-shadow:0 12px 30px rgba(0,0,0,.22); }
.fab-wa{ background:#25D366; }
.fab-ig{ background:radial-gradient(circle at 30% 107%, #fdf497 0%, #fd5949 45%, #d6249f 60%, #285AEB 90%); }
.fab-in{ background:#0A66C2; }

/* Header fijo que sigue el scroll */
.site-header{
  position: fixed; /* antes estaba sticky */
  top: 0; left: 0; right: 0;
  z-index: 1000;
  background:#fff;            /* asegura fondo */
  transition: transform .24s ease, box-shadow .2s ease, background .2s ease;
}

/* Sombra al empezar a bajar */
.site-header.is-scrolled{
  box-shadow: 0 6px 18px rgba(0,0,0,.08);
}

/* Ocultar header cuando el usuario hace scroll hacia abajo (solo desktop) */
@media (min-width: 993px){
  .site-header.hide-up{
    transform: translateY(-100%);
  }
}

/* Evitar salto del contenido bajo header fijo */
body.has-fixed-header{
  padding-top: var(--header-h, 80px); /* se setea por JS */
}


/* Google Maps responsive */
.map-responsive {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding-top: 56.25%;  /* relación 16:9 */
  border-radius: 12px;  /* opcional */
  margin: 16px 0;       /* separación con otros bloques */
}

.map-responsive iframe {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
}

.mapa {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding-top: 56.25%;   /* relación 16:9 */
  margin: 20px 0;        /* separa un poco arriba y abajo */
  border-radius: 12px;   /* opcional */
  box-shadow: 0 4px 12px rgba(0,0,0,.1); /* opcional */
}

.mapa iframe {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
}


/* ===== Evitar que el header tape títulos y anclas ===== */
:root{
  /* Ajusta si tu header es más alto/bajo */
  --header-offset-desktop: 90px;
  --header-offset-mobile: 110px;
}

/* Empuje mínimo para el primer bloque bajo el header */
.site-main,
main{
  padding-top: 30px;
}

/* Cuando haces click a una sección con #ancla o al cargar la página,
   deja espacio para el header sticky */
h1, h2, h3, [id]{
  scroll-margin-top: var(--header-offset-desktop);
}

/* En móvil el header suele ser más alto */
@media (max-width: 992px){
  h1, h2, h3, [id]{
    scroll-margin-top: var(--header-offset-mobile);
  }
  .site-main, main{ padding-top: 40px; }
}

/* Si algún bloque arriba tenía margen negativo, neutralízalo un poco */
.site-main > *:first-child{ margin-top: 40px; }


/* Ajustes de espaciado solo en la página de contacto */
.page .entry-header {
  margin-bottom: 12px !important;  /* título más cerca */
}

.page .entry-content > .hto-contacto:first-of-type {
  margin-top: 0 !important;       /* quita aire extra arriba */
  padding-top: 0 !important;
}

.hto-contacto .hto-intro {
  margin-top: 0 !important;       /* párrafo pegado al título */
  margin-bottom: 20px;
  line-height: 1.6;
}

/* Fuerza aplanar margen superior del párrafo en la sección contacto */
section.hto-contacto {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

section.hto-contacto .hto-intro {
  margin-top: 0 !important;
  margin-bottom: 50px !important;
}

/* POP UP */
.hto-pop__dialog{
  position:relative;
  max-width:90vw;   /* ancho máximo relativo a la pantalla */
  max-height:90vh;  /* alto máximo relativo */
  width:480px;      /* ancho base en desktop */
  border-radius:14px;
  overflow:hidden;
  box-shadow:0 20px 60px rgba(0,0,0,.45);
}

.hto-pop__dialog img{
  width:100%;
  height:auto;
  display:block;
}