:root{color-scheme: dark;
  /* Typography */
  --font_family: "Inter", system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --base_font_size: 17px;

  /* Logo sizes (device specific) */
  --logo_size_d: 120px; /* desktop */
  --logo_size_m: 96px;  /* mobile */
}
*{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0;
  font-family: var(--font_family, system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif);
  font-size: var(--base_font_size, 17px);
  background: radial-gradient(1000px 650px at 30% 10%, rgba(255,255,255,.06), transparent 60%),
              linear-gradient(135deg, #060913, #050814);
  color: var(--text_color, #e5e7eb);
}

.tv-outer{
  min-height:100vh;
  padding: 22px;
  display:flex;
  justify-content:center;
  align-items:flex-start;
}

.tv-shell{
  width: min(var(--page_max_width, 1000px), 100%);
  padding: 14px;
  border-radius: calc(var(--radius, 22px) + 10px);
  background: linear-gradient(135deg, var(--outer_a, #050814), var(--outer_b, #020617));
  box-shadow: 0 18px 55px rgba(0,0,0,.35);
  border: 1px solid rgba(255,255,255,.08);
}

.tv-card{
  border-radius: var(--radius, 22px);
  overflow:hidden;
  background: linear-gradient(135deg, var(--inner_a, #0b1220), var(--inner_b, #050814));
  border: 1px solid rgba(255,255,255,.08);
}

/* HERO */
/* Un poco mas alto en PC, sin desbordar en movil */
.tv-hero{position:relative;height:clamp(260px, 34vw, 460px);overflow:visible;}
@media (max-width: 640px){
  .tv-hero{height:clamp(220px, 55vw, 340px);}
}
/* Tipo 1: sin panel blanco. El contenido cae sobre el mismo tema. */
.tv-hero--classic:after{content:none;}

/* Tipo 2 (ClickCard): compacto pero responsivo */
.tv-hero--clickcard{height:clamp(200px, 30vw, 300px);
  --logo_inset: clamp(24px, calc(var(--logo_size, 94px) * 0.25), 80px);
}
.tv-hero__click{position:relative;height:100%;overflow:visible;}
.tv-hero__wave{position:absolute;left:-10%;right:-10%;bottom:-35px;height:110px;
  background: linear-gradient(135deg, rgba(255,255,255,.10), rgba(255,255,255,.02));
  border-radius: 999px;
  filter: blur(0px);
  transform: rotate(-3deg);
  pointer-events:none;
  z-index:3;
}
.tv-hero__row{position:absolute;left:var(--logo_inset, 24px);right:var(--logo_inset, 24px);bottom:0px;z-index:6;display:flex;}
.tv-hero__row.right{justify-content:flex-end;}
.tv-hero__row.left{justify-content:flex-start;}
.tv-hero--clickcard .tv-hero__overlay{background: rgba(0,0,0, calc(var(--hero_overlay, .25) + .10));}

.tv-logo--side{position:relative;transform:none;left:auto;bottom:auto;}
.tv-hero__img{position:absolute;inset:0;background-size:cover;background-position:center 18%;z-index:1;}
.tv-hero__overlay{position:absolute;inset:0;background: rgba(0,0,0,var(--hero_overlay, .25));z-index:2;}


/* Logo positioning (shared across hero styles) */
.tv-hero--logo-left .tv-logo{left:20px;transform:none;}
.tv-hero--logo-right .tv-logo{left:auto;right:20px;transform:none;}
.tv-hero--logo-center .tv-logo{left:50%;right:auto;transform:translateX(-50%);}
.tv-logo{
  position:absolute;
  left:50%;
  bottom: calc(var(--logo_size_d, var(--logo_size, 94px)) * -0.40);
  transform:translateX(-50%);
  z-index:50;
}
.tv-logo__ring{
  width: var(--logo_size_d, var(--logo_size, 94px));
  height: var(--logo_size_d, var(--logo_size, 94px));
  border-radius: 999px;
  padding: clamp(6px, calc(var(--logo_size_d, var(--logo_size, 94px)) * 0.06), 16px);
  background: linear-gradient(135deg, var(--brand_a, #38bdf8), var(--brand_b, #a855f7));
  box-shadow: 0 18px 40px rgba(0,0,0,.35);
}

/* Logo lateral (estilo ClickCard): mas presencia y superposicion */
.tv-card--clickcard .tv-logo--side{transform: translateY(22px);}
.tv-card--clickcard .tv-logo__ring{box-shadow: 0 16px 38px rgba(0,0,0,.42);}
.tv-hero__row.left .tv-logo--side{margin-left: 6px;}
.tv-hero__row.right .tv-logo--side{margin-right: 6px;}
.tv-logo__core{
  width:100%;
  height:100%;
  border-radius: 999px;
  background: rgba(255,255,255,.92);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.tv-logo__core img{width:100%;height:100%;object-fit:cover;}
.tv-logo__placeholder{font-size:11px;color:#0b1220;font-weight:900;}

/* TITLES */
.tv-titles{padding: 58px 18px 12px;text-align:center;}
.tv-card--classic .tv-titles{background: transparent;}
.tv-titles h1{margin-top:30px;color: var(--h1_color, #f8fafc);font-size:clamp(22px, 2.6vw, 30px);letter-spacing:.3px;font-weight:900;}
.tv-titles h2{margin:8px 0 0;color: var(--h2_color, #e2e8f0);font-size:clamp(15px, 1.8vw, 18px);font-weight:650;opacity:.95;}
.tv-titles .mini{margin-top:8px;font-size:clamp(12px, 1.4vw, 15px);color: var(--text_color, #e5e7eb);opacity:.85;}

/* SOCIAL */
.tv-social{padding: 10px 14px 12px;display:flex;flex-wrap:wrap;gap:12px;justify-content:center;}
.tv-card--classic .tv-social{background: transparent;}
.tv-social a{
  width:54px;height:54px;border-radius:999px;display:flex;align-items:center;justify-content:center;
  text-decoration:none;background: rgba(255,255,255,.06);border: 1px solid rgba(255,255,255,.10);
  transition: transform .15s ease, filter .15s ease;
}
.tv-social a:hover{transform: translateY(-1px);filter:brightness(1.08);}
.tv-social svg{width:24px;height:24px;fill: var(--social_icon_color, #e5e7eb);}

/* CHIPS */
.tv-chips{padding: 0 14px 12px;display:flex;flex-wrap:wrap;gap:10px;justify-content:center;}
.tv-card--classic .tv-chips{background: transparent;}
.tv-chip{
  display:inline-flex;align-items:center;gap:10px;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  backdrop-filter: blur(8px);
  font-size:13px;
  font-weight:800;
  color: var(--text_color, #e5e7eb);
}
.tv-card--classic .tv-chip{border-color: rgba(255,255,255,.12);background: rgba(255,255,255,.05);}
.tv-chip .dot{
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--brand_a, #38bdf8), var(--brand_b, #a855f7));
  box-shadow: 0 0 0 3px rgba(255,255,255,.08);
  flex: 0 0 auto;
}
.tv-chip.off{opacity:.55;}
.tv-chip.off .dot{background: rgba(255,255,255,.35);}

/* CONTENT */
.tv-content{padding: 14px 16px 14px;}
.tv-block{margin-top:14px;padding:12px;border-radius:18px;border:1px solid rgba(255,255,255,.08);background: rgba(255,255,255,.03);}
.tv-block__head{display:flex;gap:10px;align-items:center;margin-bottom:8px;}
.tv-block__head h2{margin:0;color: var(--h2_color, #e2e8f0);font-size:0.95rem;letter-spacing:.35px;font-weight:900;}
.tv-block__head h3{margin:0;color: var(--h3_color, #cbd5e1);font-size:0.92rem;font-weight:850;}
.tv-block__head svg{width:22px;height:22px;fill: var(--section_icon_color, #93c5fd);}
.tv-block p{margin:0;color: var(--text_color, #e5e7eb);font-size:1rem;line-height:1.55;opacity:.92;}
/* Textos principales: sin guiones y usando el ancho normal del layout */
#about p,
#do p,
#how p{
  text-align: left;     /* por defecto, lo más limpio */
  hyphens: none;        /* quita los guiones */
  word-break: normal;   /* evita cortes agresivos */
  overflow-wrap: normal;
  line-height: 1.55;
  text-wrap: pretty;
}

/* Si igual quieres justificado en PC, pero SIN guiones */
@media (min-width: 900px){
  #about p,
  #do p,
  #how p{
    text-align: justify;
    text-justify: inter-word;
    hyphens: none;      /* clave: sigue sin guiones */
  }
}


/* GALLERY */
.tv-gallery{display:grid;gap:10px;margin-top:10px;}
.tv-gallery.grid-1{grid-template-columns:1fr;}
.tv-gallery.grid-2{grid-template-columns:1fr 1fr;}
.tv-gallery .gimg{border-radius:14px;overflow:hidden;border:1px solid rgba(255,255,255,.08);background: rgba(0,0,0,.25);height:150px;}
.tv-gallery.grid-1 .gimg{height:clamp(180px, 45vw, 320px);}
.tv-gallery .gimg img{width:100%;height:100%;object-fit:cover;}

.tv-gallery.slider{position:relative;width:100%;height:auto;aspect-ratio:16/9;min-height:190px;max-height:420px;}
.tv-gallery.slider .slide{position:absolute;inset:0;opacity:0;transition:opacity .45s ease;border-radius:14px;overflow:hidden;border:1px solid rgba(255,255,255,.08);}
.tv-gallery.slider .slide.active{opacity:1;}
.tv-gallery.slider .slide img{width:100%;height:100%;object-fit:cover;object-position:center 25%;}

/* Slider controls */
.tv-slider__arrow{
  position:absolute;top:50%;transform:translateY(-50%);
  width:42px;height:42px;border-radius:999px;
  border:1px solid rgba(255,255,255,.18);
  background: rgba(0,0,0,.28);
  backdrop-filter: blur(8px);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;z-index:6;
}
.tv-slider__arrow:hover{filter:brightness(1.08);}
.tv-slider__arrow svg{width:20px;height:20px;color: rgba(255,255,255,.9);}
.tv-slider__arrow.prev{left:10px;}
.tv-slider__arrow.next{right:10px;}
.tv-slider__dots{position:absolute;left:0;right:0;bottom:10px;display:flex;gap:8px;justify-content:center;z-index:6;}
.tv-slider__dot{width:8px;height:8px;border-radius:999px;border:1px solid rgba(255,255,255,.3);background: rgba(255,255,255,.18);cursor:pointer;}
.tv-slider__dot.active{background: rgba(255,255,255,.85);}

/* MAP */
.tv-map{margin-top:10px;display:grid;gap:10px;}
.tv-map__addr{font-size:13px;opacity:.92;}
.tv-map__img{display:none;text-decoration:none;}
.tv-map__img.show{display:block;}
.tv-map__imgInner{height:auto;aspect-ratio: 16 / 9;border-radius:14px;overflow:hidden;border:1px solid rgba(255,255,255,.08);background-size:cover;background-position:center;}

/* QR */
.tv-qr{margin-top:12px;display:none;}
.tv-qr.show{display:block;}
.tv-qr__img{height:auto;aspect-ratio: 1 / 1;max-width: 320px;margin: 0 auto;border-radius:16px;border:1px solid rgba(255,255,255,.08);background: rgba(255,255,255,.92);background-size:cover;background-position:center;}

/* BOTTOM BUTTONS */
.tv-bottom{padding: 12px 16px 18px;display:grid;gap:10px;}
.tv-btn{
  display:flex;gap:12px;align-items:center;justify-content:space-between;
  padding: 12px 14px;border-radius: var(--btn_radius, 18px);text-decoration:none;
  background: linear-gradient(135deg, var(--btn_grad_a, var(--brand_a, #38bdf8)), var(--btn_grad_b, var(--brand_b, #a855f7)));
  color: var(--btn_text_color, #0b1220);
  border: var(--btn_border_w, 2px) solid transparent;
  background-clip: padding-box;
  position: relative;
}
.tv-btn:before{
  content:"";
  position:absolute;
  inset: calc(-1 * var(--btn_border_w, 2px));
  border-radius: calc(var(--btn_radius, 18px) + var(--btn_border_w, 2px));
  background: linear-gradient(135deg, var(--btn_border_a, var(--brand_a, #38bdf8)), var(--btn_border_b, var(--brand_b, #a855f7)));
  z-index:-1;
}
.tv-btn:hover{filter:brightness(1.03);}

.tv-btn__left{display:flex;gap:12px;align-items:center;}
.tv-btn__icon{width:34px;height:34px;border-radius:12px;background: rgba(255,255,255,.22);display:flex;align-items:center;justify-content:center;}
.tv-btn__icon svg{width:18px;height:18px;fill: var(--btn_icon_color, #0b1220);}
.tv-btn__texts{display:flex;flex-direction:column;line-height:1.15;}
.tv-btn__title{font-weight:900;font-size:13px;}
.tv-btn__value{font-weight:700;font-size:12px;opacity:.92;}
.tv-btn__chev svg{width:18px;height:18px;fill: currentColor;opacity:.65;}

.tv-foot{padding:0 16px 16px;text-align:center;}
.tv-foot .tiny{font-size:11px;opacity:.55;}

@media (max-width: 640px){
  .tv-outer{padding:14px;}
  .tv-hero{height:clamp(220px, 60vw, 360px);}
  .tv-logo{bottom: calc(var(--logo_size_m, var(--logo_size_d, var(--logo_size, 94px))) * -0.40);}
  .tv-logo__ring{
    width: var(--logo_size_m, var(--logo_size_d, var(--logo_size, 94px)));
    height: var(--logo_size_m, var(--logo_size_d, var(--logo_size, 94px)));
    padding: clamp(6px, calc(var(--logo_size_m, var(--logo_size_d, var(--logo_size, 94px))) * 0.06), 14px);
  }
}