/* ═══════════════════════════════════════════════════════════════════
   ENELDO — main-mobile.css
   Correcciones específicas para mobile (≤768px)
   Cero impacto en desktop · cargado después de main.css
═══════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {

  /* ─────────────────────────────────────────────────────────────
     1 · PILLARS · imágenes mejor encuadradas
     ───────────────────────────────────────────────────────────── */
  .pillar {
    grid-template-columns: 50% 50%;
    min-height: 135px;
  }
  .p-body {
    padding: 1rem 1.1rem;
  }
  .p-img-wrap img {
    transform: scale(1.05);
    transform-origin: center center;
    object-position: center center;
  }
  .pillar:hover .p-img-wrap img {
    transform: scale(1.08);
  }


  /* ─────────────────────────────────────────────────────────────
     2 · SECCIÓN .productos
     ───────────────────────────────────────────────────────────── */
  .productos {
    padding-top: 0.3rem !important;
    padding-bottom: 0 !important;
  }


  /* ─────────────────────────────────────────────────────────────
     3 · MARQUEE
     ───────────────────────────────────────────────────────────── */
  .prod-marquee {
    padding-top: 0.55rem !important;
    padding-bottom: 0.55rem !important;
    margin-bottom: 0 !important;
  }
  .prod-mq-item {
    font-size: 0.6rem !important;
    letter-spacing: 0.5em !important;
    padding-left: 1.7rem !important;
  }


  /* ─────────────────────────────────────────────────────────────
     4 · HEADER (eyebrow + título + descripción)
     ───────────────────────────────────────────────────────────── */
  .prod-header {
    padding-top: 1.15rem !important;
    margin-bottom: 0.65rem !important;
    gap: 1.3rem !important;
  }
  .prod-header .eyebrow {
    font-size: 0.62rem !important;
  }
  .prod-header .section-h {
    font-size: 1.65rem !important;
    margin-bottom: 0 !important;
  }
  .prod-header-right {
    font-size: 0.92rem !important;
  }


  /* ─────────────────────────────────────────────────────────────
     5 · STAGE DEL CATÁLOGO
     ───────────────────────────────────────────────────────────── */
  .prod-stage {
    height: 20vw !important;
    min-height: 215px !important;
    max-height: 315px !important;
    overflow: visible !important;
    margin-bottom: 160px !important;
  }
  #prod-bg {
    object-position: 26% 26% !important;
  }
  .pslide img {
    object-position: 0% 0% !important;
  }


  /* ─────────────────────────────────────────────────────────────
     6 · INFO CARD · strip edge-to-edge debajo del stage
     ───────────────────────────────────────────────────────────── */
  #prod-info {
    position: absolute !important;
    top: calc(100% + 12px) !important;
    left: 0 !important;
    right: 0 !important;
    bottom: auto !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    padding-top: 7px !important;
    padding-bottom: 12px !important;
    padding-left: 18px !important;
    padding-right: 18px !important;
    border-radius: 0 !important;
    text-align: center !important;
  }
  #pi-name { font-size: 26px !important; }
  #pi-phrase { font-size: 0.94rem !important; }
  #pi-tag { font-size: 0.7rem !important; }
  #pi-sub { font-size: 0.74rem !important; }


  /* ─────────────────────────────────────────────────────────────
     7 · NAVEGACIÓN · flechas a los costados (no juntas)
     ───────────────────────────────────────────────────────────── */
  #prod-nav {
    top: 90% !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    transform: translateY(-50%) !important;
    justify-content: space-between !important;
    gap: 0 !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
    pointer-events: none !important;
  }
  #prod-nav button {
    width: 28px !important;
    height: 28px !important;
    pointer-events: auto !important;
  }
  #prod-dots { display: none !important; }


  /* ─────────────────────────────────────────────────────────────
     8 · CTA "Realizar pedido" · arriba derecha
     ───────────────────────────────────────────────────────────── */
  .prod-cta-full {
    top: 1.1% !important;
    right: 1.1% !important;
    font-size: 0.48rem !important;
    padding-top: 0.55rem !important;
    padding-left: 1.2rem !important;
  }


  /* ─────────────────────────────────────────────────────────────
     9 · CTA inferior · DISEÑO ESCALADO PROPORCIONAL (vw-based)
     Mantiene proporciones idénticas en cualquier mobile.
     Base de cálculo: 390px viewport
     ───────────────────────────────────────────────────────────── */

  /* Safety: cierra la línea blanca de la derecha */
  .productos {
    overflow-x: hidden !important;
  }

  /* Contenedor · márgenes calc para llenar viewport */
  .prod-cta-bottom {
    margin-left: calc(-50vw + 43%) !important;
    margin-right: calc(-50vw + 46%) !important;
    padding-left: calc(50vw - 48%) !important;
    min-height: 21vw !important;            /* era 82px @ 390 */
  }

  /* Frase izquierda */
  .prod-cta-frase-wrap {
    padding-top: 1.3vw !important;          /* era 0.32rem */
    padding-bottom: 2.87vw !important;      /* era 0.7rem */
    padding-right: 2.38vw !important;       /* era 0.58rem */
    padding-left: 3.85vw !important;        /* era 0.94rem */
  }
  .prod-cta-frase {
    font-size: clamp(9px, 2.79vw, 13px) !important;   /* era 0.68rem, con piso/techo */
    line-height: 1.52 !important;
    letter-spacing: -0.035em !important;
  }

  /* Zona verde diagonal */
  .prod-cta-right-zone {
    min-height: 17.95vw !important;         /* era 70px */
    flex-grow: 1.3 !important;
  }

  /* Línea diagonal (parallelogram) · clip-path en vw */
  .prod-cta-line {
    left: 4.62vw !important;                /* era 18px */
    width: 10.77vw !important;              /* era 42px */
    clip-path: polygon(9.23vw 0%, 100% 0%, calc(100% - 9.23vw) 100%, 0% 100%) !important;
  }

  /* Bloque verde principal · clip-path y posición en vw */
  .prod-cta-block {
    left: 7.18vw !important;                /* era 28px */
    right: -0.77vw !important;              /* era -3px */
    padding-top: 1.64vw !important;         /* era 0.4rem */
    padding-bottom: 1.48vw !important;      /* era 0.36rem */
    padding-left: 2.87vw !important;        /* era 0.7rem */
    padding-right: 4.1vw !important;        /* era 1rem */
    clip-path: polygon(9.23vw 0%, 100% 0%, 100% 100%, 0% 100%) !important;
  }

  /* Botón · todo en vw para escalar con el bloque */
  .prod-cta-btn {
    font-size: clamp(6.5px, 2.05vw, 10px) !important;  /* era 0.5rem, con piso/techo */
    padding-top: 2.46vw !important;
    padding-bottom: 2.46vw !important;
    padding-left: 1.44vw !important;         /* era 0.35rem (~5.6px @ 390) */
    padding-right: 1.44vw !important;
    letter-spacing: 0.12em !important;
    white-space: nowrap !important;
  }

}