/* =========================================================
   wopi – Página "PÁGINAS WEB"
   Se carga después de styles.css (cabecera, contacto y pie
   vienen de ahí).

   --m = 1 píxel de la maqueta (captura a 960px de ancho),
         ya reducido al 85% y proporcional al ancho de pantalla.
         En 1920px vale 1.7px; en 1366px, 1.2px.
   ========================================================= */
:root {
  /* Caja "Llamá la atención": su altura exacta (4 renglones) para subirla justo la mitad */
  --llama-fs:    calc(36 * var(--m));
  --llama-pad-t: calc(16 * var(--m));
  --llama-pad-b: calc(18 * var(--m));
  --llama-borde: max(2px, calc(2.5 * var(--m)));
  --llama-alto:  calc(4 * 1.1 * var(--llama-fs) + var(--llama-pad-t) + var(--llama-pad-b) + 2 * var(--llama-borde));
}


/* ---------- Piezas reutilizables ---------- */

/* =========================================================
   1. HERO PARTIDO
   ========================================================= */
.pw-hero {
  position: relative;
  z-index: 3;                       /* el celular y la estrella pasan por encima del bloque siguiente */
  display: grid;
  grid-template-columns: 575fr 385fr;
  min-height: calc(252 * var(--m));
}

.pw-hero__izq {
  display: flex;
  align-items: center;        /* centrada en vertical */
  justify-content: center;    /* centrada en horizontal */
  padding: calc(30 * var(--m)) calc(40 * var(--m));
  background: var(--celeste) url("../img/trama-fondo.png") center / calc(598 * var(--m)) auto;
}

.pw-hero__der {
  position: relative;
  background: var(--salmon) radial-gradient(ellipse 75% 120% at 100% 100%,
              var(--azul) 0%, #9a5fc4 32%, #d4568e 64%, var(--salmon) 100%);
}

.pw-hero__dominios {
  position: absolute;
  top: calc(20 * var(--m));
  left: calc(100% - 150 * var(--m));   /* se corta contra el borde derecho */
  margin: 0;
  font-family: var(--font-titulos);
  font-size: calc(62 * var(--m));
  line-height: 1.12;
  text-transform: uppercase;
  color: transparent;
  -webkit-text-stroke: max(1px, calc(1.2 * var(--m))) rgba(255, 255, 255, .4);
  white-space: nowrap;
  pointer-events: none;
}

.pw-hero__celular {
  position: absolute;
  z-index: 2;
  left: calc(108 * var(--m));
  top: calc(35 * var(--m));
  width: calc(168 * var(--m));
  filter: drop-shadow(0 calc(10 * var(--m)) calc(16 * var(--m)) rgba(0, 0, 0, .35));
}

.pw-hero__estrella {
  position: absolute;
  z-index: 1;
  left: calc(59.9% - 55 * var(--m));   /* centrada sobre el límite celeste / salmón */
  top: calc(195 * var(--m));
  width: calc(110 * var(--m));
  animation: girar 50s linear infinite;
}

/* =========================================================
   2. NEGOCIO 24/7
   ========================================================= */
.pw-247 {
  position: relative;
  z-index: 1;
  padding: calc(63 * var(--m)) 20px calc(115 * var(--m) + var(--llama-alto) / 2) calc(100 * var(--m));
  background: #0d0d0d url("../img/fondo-textura-negro.jpg") center / cover;
}

.pw-247__www {
  position: absolute;
  top: calc(16 * var(--m));
  left: calc(25 * var(--m));
  margin: 0;
  font-family: var(--font-titulos);
  font-size: calc(32 * var(--m));
  color: transparent;
  -webkit-text-stroke: max(1px, calc(1.2 * var(--m))) rgba(255, 255, 255, .28);
}

.pw-247__deco {
  position: absolute;
  top: calc(48 * var(--m));
  right: calc(50 * var(--m));
  width: calc(140 * var(--m));
  animation: flotar 7s ease-in-out infinite;
}

.pw-247__contenido {
  display: flex;
  align-items: center;
  gap: calc(10 * var(--m));
}

.pw-247__titulo {
  margin: 0;
  font-family: var(--font-titulos);
  font-weight: 400;
  font-size: calc(38 * var(--m));
  line-height: 1.05;
  color: var(--blanco);
}

.pw-247__sticker {
  width: calc(170 * var(--m));
  animation: latir 2.4s ease-in-out infinite;
}
@keyframes latir {
  0%, 100% { transform: scale(1) rotate(0deg); }
  50%      { transform: scale(1.05) rotate(-3deg); }
}

/* =========================================================
   3. TIPOS DE WEB
   ========================================================= */
.pw-planes {
  position: relative;
  z-index: 2;
  display: flow-root;   /* evita que el margen negativo de la caja arrastre toda la sección */
  /* Degradé salmón → azul que termina justo donde empieza el celeste */
  background: var(--salmon) radial-gradient(ellipse calc(1050 * var(--m)) calc(330 * var(--m)) at 80% calc(var(--llama-alto) / 2 + 405 * var(--m)),
              var(--azul) 0%, #8e62cf 30%, #c3579a 62%, var(--salmon) 100%);
}

/* --- "Llamá la atención" --- */
.pw-llama {
  position: relative;
  width: calc(282 * var(--m));
  margin: calc(var(--llama-alto) / -2) auto 0;   /* mitad sobre el negro, mitad sobre el degradé */
}

.pw-llama__caja {
  position: relative;
  z-index: 1;
  margin: 0;
  padding: var(--llama-pad-t) calc(14 * var(--m)) var(--llama-pad-b);
  font-family: var(--font-titulos);
  font-weight: 400;
  font-size: var(--llama-fs);
  line-height: 1.1;
  text-align: center;
  text-transform: uppercase;
  background: var(--blanco);
  border: var(--llama-borde) solid var(--amarillo);
}
/* Sombra dura con degradé amarillo → celeste */
.pw-llama__caja::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  transform: translate(calc(8 * var(--m)), calc(8 * var(--m)));
  background: linear-gradient(90deg, var(--amarillo), var(--celeste));
}
.pw-llama__caja::after {          /* fondo blanco por encima de la sombra */
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: var(--blanco);
}

.pw-llama__estrella {
  position: absolute;
  z-index: 0;
  left: calc(-35 * var(--m));
  top: calc(-40 * var(--m));
  width: calc(74 * var(--m));
  animation: girar 30s linear infinite reverse;
}

.pw-llama__flecha {
  position: absolute;
  top: calc(110 * var(--m));
  width: calc(75 * var(--m));
}
.pw-llama__flecha--izq { left: calc(-133 * var(--m)); }
.pw-llama__flecha--der { right: calc(-145 * var(--m)); }

.pw-llama__warning {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: calc(100% - 10 * var(--m));
  width: calc(130 * var(--m));
  margin-left: calc(-65 * var(--m));
  transform-origin: 50% 100%;
  animation: sacudir 4s ease-in-out infinite;
}
@keyframes sacudir {
  0%, 84%, 100% { transform: rotate(0deg); }
  88% { transform: rotate(-6deg); }
  92% { transform: rotate(6deg); }
  96% { transform: rotate(-3deg); }
}

/* --- Los dos planes --- */
.planes {
  position: relative;
  display: grid;
  grid-template-columns: 1fr calc(480 * var(--m)) calc(480 * var(--m)) 1fr;
  padding-top: calc(20 * var(--m));
}

/* En escritorio cada plan "se desarma" y sus partes van a la grilla común */
.plan { display: contents; }
.plan--institucional > * { grid-column: 2; }
.plan--tienda > *        { grid-column: 3; }
.plan__estrella { grid-row: 1; }
.plan__captura  { grid-row: 2; }
.plan__detalle  { grid-row: 3; }

/* Fondo celeste a todo el ancho, con la línea central */
.planes__fondo {
  grid-column: 1 / -1;
  grid-row: 2 / 4;
  margin-top: calc(95 * var(--m));
  background: var(--celeste);
  position: relative;
}
.planes__fondo::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  left: 50%;
  width: 2px;
  margin-left: -1px;
  background: var(--blanco);
}

.planes__trama {
  position: absolute;
  left: calc(50% - 155 * var(--m));
  top: calc(160 * var(--m));
  width: calc(315 * var(--m));
  height: calc(200 * var(--m));
  background: url("../img/trama-fondo.png") center / calc(598 * var(--m)) auto;
  pointer-events: none;
}

/* Estrella negra con el nombre del plan */
.plan__estrella {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: calc(305 * var(--m));
  aspect-ratio: 1;
  margin: 0;
  font-family: var(--font-titulos);
  font-weight: 400;
  font-size: calc(22 * var(--m));
  line-height: 1.15;
  text-align: center;
  text-transform: uppercase;
  color: var(--blanco);
  background: url("../img/estrella-negra.svg") center / contain no-repeat;
}
.plan__sub { font-size: calc(14 * var(--m)); margin-top: calc(6 * var(--m)); }
.plan--institucional .plan__destacado { color: var(--amarillo); }
.plan--tienda .plan__destacado        { color: var(--celeste); }

.plan--institucional .plan__estrella { justify-self: start; margin-left: calc(50 * var(--m)); }
.plan--tienda .plan__estrella        { justify-self: end;   margin-right: calc(55 * var(--m)); }

/* Captura de ejemplo (la sombra de color viene en la imagen) */
.plan__captura {
  position: relative;
  z-index: 2;
  width: calc(253 * var(--m));
  margin-top: calc(-50 * var(--m));
  transition: transform .3s ease;
}
.plan__captura:hover { transform: translateY(calc(-6 * var(--m))) rotate(-1deg); }
.plan--institucional .plan__captura { justify-self: end;   margin-right: calc(35 * var(--m)); }
.plan--tienda .plan__captura        { justify-self: start; margin-left: calc(38 * var(--m)); }

/* Lista de servicios + botón */
.plan__detalle {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  padding: calc(18 * var(--m)) 0 calc(40 * var(--m));
}
.plan--institucional .plan__detalle { align-items: flex-end;   padding-right: calc(50 * var(--m)); text-align: right; }
.plan--tienda .plan__detalle        { align-items: flex-start; padding-left: calc(43 * var(--m)); }

.plan__lista li {
  position: relative;
  font-size: max(12px, calc(10.5 * var(--m)));
  font-weight: 600;
  line-height: max(20px, calc(18 * var(--m)));
}
/* Marcas sobre la línea central (alineadas con los renglones de la derecha) */
.plan--tienda .plan__lista li::before {
  content: "";
  position: absolute;
  top: 50%;
  left: calc(-54 * var(--m));
  width: calc(22 * var(--m));
  height: 2px;
  margin-top: -1px;
  background: var(--blanco);
}

.plan--institucional .boton-wa { margin-top: calc(12 * var(--m)); }
.plan--tienda .boton-wa        { margin-top: calc(16 * var(--m)); }

/* =========================================================
   5. MEDIOS DE PAGO
   ========================================================= */
.pw-pagos {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: calc(112 * var(--m));
  padding: calc(55 * var(--m)) 20px;
  background: #0d0d0d url("../img/fondo-textura-negro.jpg") center / cover;
  color: var(--blanco);
}

.pw-pagos__medios { width: calc(383 * var(--m)); }

.pw-pagos__logos { position: relative; }
.pw-pagos__img   { width: 100%; }
.pw-pagos__tarjeta {
  position: absolute;
  left: -12.8%;
  top: calc(-33 * var(--m));
  width: 17.5%;
  transform: rotate(-4deg);
}
.pw-pagos__escudo {
  position: absolute;
  left: 97.4%;
  top: calc(49 * var(--m));
  width: 22.2%;
}

.pw-pagos__texto {
  max-width: calc(350 * var(--m));
  margin: calc(18 * var(--m)) auto 0;
  font-size: max(12px, calc(10.5 * var(--m)));
  font-weight: 600;
  line-height: 1.45;
  text-align: center;
}
.pw-pagos__texto strong { display: block; font-weight: 700; }

.pw-pagos__titulo {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0;
  font-family: var(--font-titulos);
  font-weight: 400;
  font-size: calc(26 * var(--m));
  line-height: 1;
  text-transform: uppercase;
}
.pw-pagos__cien {
  margin: calc(4 * var(--m)) 0 calc(2 * var(--m));
  font-size: calc(90 * var(--m));
  background: linear-gradient(90deg, var(--salmon) 15%, var(--azul) 110%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(calc(-3 * var(--m)) calc(3 * var(--m)) 0 var(--blanco));
}
.pw-pagos__seguras { font-size: calc(38 * var(--m)); }

/* =========================================================
   MÓVIL Y TABLET CHICA (≤ 820px): todo en una columna
   ========================================================= */
@media (max-width: 820px) {

  /* 1. Hero */
  .pw-hero { grid-template-columns: 1fr; min-height: 0; }
  .pw-hero__izq { justify-content: center; padding: 44px 20px; }
  .caja-titulo { padding: 12px 18px 14px; font-size: min(24px, 6.2vw); border-width: 3px; box-shadow: 6px 6px 0 var(--negro); }
  .pw-hero__der { padding-top: 28px; overflow: visible; }
  .pw-hero__dominios { top: 10px; left: auto; right: -40px; font-size: 76px; -webkit-text-stroke-width: 1.5px; }
  .pw-hero__celular {
    position: relative;
    left: auto; top: auto;
    display: block;
    width: 190px;
    margin: 0 auto -150px;
    filter: drop-shadow(0 12px 18px rgba(0, 0, 0, .35));
  }
  .pw-hero__estrella { left: -28px; top: auto; bottom: -60px; width: 110px; }

  /* 2. 24/7 */
  .pw-247 { padding: 180px 20px calc(50px + var(--llama-alto) / 2); }
  .pw-247__www { top: 18px; left: 16px; font-size: 34px; }
  .pw-247__deco { top: 30px; right: -30px; width: 130px; }
  .pw-247__contenido { flex-direction: column; text-align: center; gap: 14px; }
  .pw-247__titulo { font-size: 34px; }
  .pw-247__sticker { width: 160px; }

  /* 3. Llamá la atención */
  :root { --llama-fs: 31px; --llama-pad-t: 14px; --llama-pad-b: 16px; --llama-borde: 3px; }
  .pw-llama { width: 250px; }
  .pw-llama__caja { padding-left: 12px; padding-right: 12px; }
  .pw-llama__caja::before { transform: translate(7px, 7px); }
  .pw-llama__estrella { left: -28px; top: -32px; width: 64px; }
  .pw-llama__flecha { display: none; }
  .pw-llama__warning { top: calc(100% - 12px); width: 96px; margin-left: -48px; }

  /* 3. Planes: cada uno completo, uno debajo del otro */
  .pw-planes { background: var(--salmon); }
  .planes { display: block; padding-top: 90px; }
  .planes__fondo, .planes__trama { display: none; }

  .plan {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: linear-gradient(175deg, var(--salmon) 10%, #b25aa8 55%, var(--azul) 100%);
  }
  .plan--tienda { padding-top: 40px; }
  .plan > * { grid-column: auto; }

  .plan__estrella,
  .plan--institucional .plan__estrella,
  .plan--tienda .plan__estrella { width: 270px; margin: 0; font-size: 21px; }
  .plan__sub { font-size: 14px; margin-top: 6px; }

  .plan__captura,
  .plan--institucional .plan__captura,
  .plan--tienda .plan__captura { width: min(300px, 82vw); margin: -40px 0 0; }

  .plan__detalle,
  .plan--institucional .plan__detalle,
  .plan--tienda .plan__detalle {
    align-self: stretch;
    align-items: center;
    margin-top: -70px;
    padding: 96px 20px 44px;
    text-align: left;
    background: var(--celeste);
  }
  .plan__captura { z-index: 2; }

  .plan__lista { max-width: 360px; }
  .plan__lista li { padding-left: 22px; font-size: 14px; line-height: 1.45; margin-bottom: 6px; }
  .plan__lista li::before,
  .plan--tienda .plan__lista li::before {
    content: "";
    position: absolute;
    left: 0; top: .72em;
    width: 12px; height: 2px; margin: 0;
    background: var(--blanco);
  }
  .plan--institucional .boton-wa,
  .plan--tienda .boton-wa { margin-top: 20px; }
  .boton-wa__texto { font-size: 18px; padding: 4px 12px 6px; box-shadow: 4px 4px 0 var(--negro); }
  .boton-wa__icono { width: 34px; }

  /* 5. Pagos */
  .pw-pagos { flex-direction: column; gap: 56px; padding: 60px 20px; }
  .pw-pagos__medios { width: min(330px, 84vw); }
  .pw-pagos__tarjeta { left: -6%; top: -26px; }
  .pw-pagos__escudo { left: auto; right: -9%; top: 40px; width: 20%; }
  .pw-pagos__texto { max-width: 330px; margin-top: 22px; font-size: 13px; }
  .pw-pagos__titulo { font-size: 26px; }
  .pw-pagos__cien { font-size: 84px; filter: drop-shadow(-3px 3px 0 var(--blanco)); }
  .pw-pagos__seguras { font-size: 38px; }
}

@media (max-width: 820px) {
  .pw-247__www { display: none; }   /* en móvil la estrella del hero ocupa ese lugar */
}