/* KD Web · extras de diseño (se carga DESPUÉS de app.css)
 *
 * Todo lo de esta hoja se puede quitar de una vez: borrá la línea <link … extras.css> de index.php
 * y el sitio vuelve a verse como antes. Los colores están arriba, en variables.
 *
 *   1. Variables de color
 *   2. Todo el sitio en oscuro (secciones, tarjetas, formulario, pie)
 *   3. Fondo de estrellas y figuras 3D en toda la página
 *   4. Botones de contacto y redes (+ chips)
 *   5. Bloque "Contacto y redes" + códigos QR
 */

/* ---------- 1. Variables ---------- */
:root {
  /* Superficies claras (más oscuras que antes para no cansar la vista) */
  --bg-crema: #E4DDCC;      /* era #F2EEE5 */
  --bg-card:  #EFEADD;      /* era #FBF8F2 (tarjetas, planes, mapa) */
  --bg-field: #F1ECE0;      /* campos del formulario */
  --nav-stars: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='190' height='60'%3E%3Cpath d='M18 10Q18 14 22 14Q18 14 18 18Q18 14 14 14Q18 14 18 10ZM63 37Q63 40 66 40Q63 40 63 43Q63 40 60 40Q63 40 63 37ZM104 11Q104 16 109 16Q104 16 104 21Q104 16 99 16Q104 16 104 11ZM139 41.5Q139 44 141.5 44Q139 44 139 46.5Q139 44 136.5 44Q139 44 139 41.5ZM172 16.5Q172 20 175.5 20Q172 20 172 23.5Q172 20 168.5 20Q172 20 172 16.5ZM88 48Q88 50 90 50Q88 50 88 52Q88 50 86 50Q88 50 88 48ZM45 6Q45 8 47 8Q45 8 45 10Q45 8 43 8Q45 8 45 6Z' fill='%23000' fill-opacity='.2'/%3E%3C/svg%3E");   /* estrellitas negras de la barra de arriba */
  --muted:    #3E5857;      /* texto secundario: se oscurece para mantener el contraste sobre los fondos nuevos */

  /* Estrellas */
  --pet-rgb: 39 73 75;
  --star-a: #F2EEE5;
  --star-b: #DE9064;
  --star-c: #8FC7BF;
  --veil-a: rgb(20 39 41 / .30);   /* secciones que eran crema (Servicios, Por qué, pie) */
  --veil-b: rgb(39 73 75 / .42);   /* secciones que eran arena (Planes, Contacto) */
  --veil-pet: .55;          /* opacidad de las secciones verdes (menos = se ven más las estrellas) */
  --veil-deep: .30;         /* ídem para las secciones oscuras */

  /* Marcas */
  --wa: #25D366;
  --wa-ink: #06301A;
  --ig-grad: linear-gradient(45deg, #F58529 0%, #DD2A7B 45%, #8134AF 75%, #515BD4 100%);
  --ig-solid: #C2287A;
  --mail: #BD6C3F;
  --mail-ink: #FFFFFF;
  --tt: #121212;
}

/* ---------- 2. Todo el sitio en oscuro ---------- */
/* Texto y tarjetas de las secciones que eran claras, ahora sobre fondo oscuro */
.sec--crema, .sec--arena, .footer {
  --tinta: var(--crema);
  --muted: var(--muted-dark);
  --line: rgba(242, 238, 229, .14);
  color: var(--crema);
}
.sec--crema { background: var(--veil-a); }
.sec--arena { background: var(--veil-b); }
.footer { background: var(--veil-a); border-top-color: rgba(242, 238, 229, .12); }

/* Servicios */
.card { background: rgba(242, 238, 229, .06); border-color: rgba(242, 238, 229, .12); }
.card:hover { box-shadow: 0 30px 50px -30px rgba(0, 0, 0, .8); }
.service__icon { background: rgba(189, 108, 63, .22); color: var(--ter-2); }
.service:hover .service__icon { background: var(--ter); color: #fff; }
.service:first-child { background: var(--pet); }
.service:first-child .service__icon { background: var(--ter); color: #fff; }
.service:nth-child(7) { background: var(--ter); }
.service:nth-child(7) .service__icon { color: #fff; }

/* Planes */
.plan { background: rgba(242, 238, 229, .06); border-color: rgba(242, 238, 229, .12); }
.plan--featured { background: var(--pet); border-color: rgba(222, 144, 100, .55); }
.plan .btn--pet { --bg: var(--crema); --fg: var(--pet); }
.plan .btn--pet:hover { background: #fff; }

/* Por qué KD Web */
.why__item { border-top-color: rgba(242, 238, 229, .25); }
.why__icon { color: var(--ter-2); }
.stats { background: rgba(39, 73, 75, .85); border: 1px solid rgba(242, 238, 229, .12); }

/* Formulario */
.field { color: var(--crema); }
.field em { color: var(--muted-dark); }
.field input, .field select, .field textarea {
  background: rgba(242, 238, 229, .07); color: var(--crema); border-color: rgba(242, 238, 229, .24); color-scheme: dark;
}
.field input::placeholder, .field textarea::placeholder { color: var(--muted-dark); opacity: .9; }
.field select option { background: var(--pet-deep); color: var(--crema); }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--ter-2); box-shadow: 0 0 0 4px rgba(222, 144, 100, .22); }
.field .is-invalid { border-color: #FF8A75; }
.form__status { color: #9FE3B5; }
.form__status.is-error { color: #FF9C88; }
.check-legal { color: var(--crema); }
.check-legal input { color-scheme: dark; }
.check-legal input[aria-invalid="true"] { outline: 3px solid #FF8A75; outline-offset: 2px; }
.form__error { color: #FF9C88; }
.form__legal, .footer__legal { color: var(--muted-dark); }
.form .btn--pet { --bg: var(--crema); --fg: var(--pet); }
.form .btn--pet:hover { background: #fff; }
.map { background: rgba(242, 238, 229, .06); border-color: rgba(242, 238, 229, .14); }
.contact__addr a { color: var(--ter-2); }

/* Pie: logo original con un brillo violeta suave detrás (sigue el contorno del logo, no lo modifica) */
.footer__text { color: var(--crema); }
.footer__logo {
  filter: drop-shadow(0 0 3px rgba(190, 120, 255, .85)) drop-shadow(0 0 14px rgba(150, 80, 255, .5));
}

/* Menú: barra clara como siempre, con estrellitas negras sutiles */
.nav__bar { background-image: var(--nav-stars); background-size: 190px 60px; background-repeat: repeat-x; }
.nav.is-open .nav__links { background-image: var(--nav-stars); background-size: 190px 60px; }

/* Botón flotante: WhatsApp (50 px) con una flechita arriba que despliega Instagram, TikTok y Correo (38 px) */
.fab {
  position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 60;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.fab .wa-float {
  position: relative; right: auto; bottom: auto; width: 50px; height: 50px;
  opacity: 1; transform: none; pointer-events: auto;      /* anula el "se esconde en el inicio del celular" de app.css */
}
.fab .wa-float .ico { width: 27px; height: 27px; }
.fab .wa-float:hover { transform: scale(1.08) rotate(-6deg); }

.fab__toggle {
  width: 44px; height: 28px; border: 0; border-radius: 14px; cursor: pointer; display: grid; place-items: center;
  background: rgba(20, 39, 41, .8); color: var(--crema); box-shadow: inset 0 0 0 1px rgba(242, 238, 229, .28), 0 8px 18px -10px rgba(0, 0, 0, .8);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  transition: background-color .2s, transform .25s var(--ease);
}
.fab__toggle:hover { background: rgba(39, 73, 75, .95); transform: translateY(-2px); }
.fab__toggle .ico { width: 18px; height: 18px; transition: transform .4s var(--ease); }
.fab.is-open .fab__toggle .ico { transform: rotate(180deg); }          /* abierto: la flecha mira hacia abajo */

.fab__menu { list-style: none; margin: 0 0 4px; padding: 0; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.fab__item {
  opacity: 0; visibility: hidden; transform: translateY(16px) scale(.6);
  transition: opacity .2s ease, transform .2s ease, visibility 0s .2s;
}
.fab.is-open .fab__item {
  opacity: 1; visibility: visible; transform: none;
  transition: opacity .25s ease var(--dl), transform .4s var(--ease) var(--dl), visibility 0s var(--dl);
}
/* salen de a uno, desde la flechita hacia arriba */
.fab__item:nth-last-child(1) { --dl: 0ms; }
.fab__item:nth-last-child(2) { --dl: 70ms; }
.fab__item:nth-last-child(3) { --dl: 140ms; }
.fab__btn {
  display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; color: #fff;
  box-shadow: 0 10px 20px -10px rgba(0, 0, 0, .8); transition: transform .25s var(--ease), filter .2s;
}
.fab__btn:hover { transform: scale(1.1); filter: brightness(1.08); }
.fab__btn .ico { width: 20px; height: 20px; }
.fab__btn--ig   { background: var(--ig-grad); }
.fab__btn--tt   { background: var(--tt); box-shadow: inset 0 0 0 1.5px rgba(242, 238, 229, .4), 0 10px 20px -10px rgba(0, 0, 0, .8); }
.fab__btn--tt .ico { filter: drop-shadow(-.7px -.7px 0 #25F4EE) drop-shadow(.7px .7px 0 #FE2C55); }
.fab__btn--mail { background: var(--mail); color: var(--mail-ink); }

/* Celular y tablet: con un solo botón igual tapa "Ver proyectos" en el tope, así que aparece al bajar ~90 px */
@media (max-width: 899px) {
  .js .fab { opacity: 0; visibility: hidden; transform: translateY(12px); transition: opacity .3s, transform .3s var(--ease), visibility 0s .3s; }
  .js body.fab-on .fab { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
}
@media (prefers-reduced-motion: reduce) {
  .fab, .fab__item, .fab__toggle .ico, .fab__btn { transition: none !important; }
  .fab__item { transform: none; }
}
/* Páginas internas (privacidad, términos, cookies, 404): no hay hero que tapar, así que el flotante se ve desde el inicio */
@media (max-width: 899px) {
  .js body.page-inner .fab { opacity: 1; visibility: visible; transform: none; }
}

/* ---------- 3. Fondo de estrellas y figuras 3D en toda la página ---------- */
/* Una capa fija detrás de todo (CSS puro, sin JS ni WebGL). El inicio conserva su escena 3D. */
body { background: var(--pet-deep); }
body::before, body::after { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; }
body::before {
  background:
    radial-gradient(2.2px 2.2px at 23px 41px, var(--star-a) 50%, transparent 100%),
    radial-gradient(1.9px 1.9px at 97px 133px, var(--star-a) 50%, transparent 100%),
    radial-gradient(1.7px 1.7px at 151px 19px, var(--star-c) 50%, transparent 100%),
    radial-gradient(2.1px 2.1px at 61px 197px, var(--star-a) 50%, transparent 100%),
    radial-gradient(1.7px 1.7px at 189px 89px, var(--star-b) 50%, transparent 100%),
    radial-gradient(1.9px 1.9px at 233px 171px, var(--star-c) 50%, transparent 100%),
    radial-gradient(60% 50% at 78% 20%, rgba(189, 108, 63, .20), transparent 70%),
    radial-gradient(50% 60% at 10% 85%, rgba(62, 120, 118, .38), transparent 70%),
    var(--pet-deep);
  background-size: 251px 251px, 263px 263px, 277px 277px, 293px 293px, 307px 307px, 331px 331px, auto, auto, auto;
}
/* Estrellas más grandes que titilan despacio */
body::after {
  background:
    radial-gradient(3.2px 3.2px at 40px 60px, var(--star-a) 50%, transparent 100%),
    radial-gradient(3.4px 3.4px at 210px 150px, var(--star-b) 50%, transparent 100%),
    radial-gradient(3px 3px at 120px 240px, var(--star-c) 50%, transparent 100%),
    radial-gradient(3.2px 3.2px at 300px 30px, var(--star-a) 50%, transparent 100%);
  background-size: 347px 347px, 389px 389px, 419px 419px, 463px 463px;
  animation: twinkle 7s ease-in-out infinite alternate;
}
@keyframes twinkle { from { opacity: .25; } to { opacity: .9; } }
.lite body::after { animation: none; opacity: .55; }   /* celular o equipo modesto: estático */
@media (max-width: 760px) { body::after { animation: none; opacity: .55; } }
@media (prefers-reduced-motion: reduce) { body::after { animation: none; opacity: .55; } }
body.page-inner::after { animation: none; opacity: .55; }   /* textos largos: las estrellas quedan quietas detrás de la lectura */

/* Secciones oscuras: translúcidas para que se vean las estrellas */
.sec--pet  { background: rgb(var(--pet-rgb) / var(--veil-pet)); }
.sec--deep { background: rgb(20 39 41 / var(--veil-deep)); }
.sec--redes { background: rgb(20 39 41 / var(--veil-deep)); color: var(--crema); }

/* Figuras 3D de las secciones de abajo (solo compu; las crea fondo3d.js) */
.fondo3d { position: fixed; inset: 0; z-index: -1; width: 100%; height: 100%; pointer-events: none; opacity: 0; transition: opacity .6s; }
.fondo3d.is-on { opacity: 1; }

/* ---------- 4. Botones de contacto y redes ---------- */
.btn--wa   { --bg: var(--wa); --fg: var(--wa-ink); }
.btn--wa:hover { background: #20BD5A; }
.btn--ig   { --bg: var(--ig-solid); --fg: #fff; background: var(--ig-grad); }
.btn--ig:hover { background: var(--ig-grad); filter: brightness(1.08); }
.btn--mail { --bg: var(--mail); --fg: var(--mail-ink); }
.btn--tt   { --bg: var(--tt); --fg: #fff; }

/* Enlaces rápidos del bloque de contacto */
.quick--wa { background: var(--wa); color: var(--wa-ink); }
.quick--wa .ico { color: var(--wa-ink); }
.quick--ig { background: var(--ig-grad); color: #fff; border-color: transparent; }
.quick--ig .ico { color: #fff; }
.quick--wa:hover, .quick--ig:hover { filter: brightness(1.06); }

/* Íconos del pie, con el color de cada red */
.footer__social a { color: #fff; }
.footer__social a[aria-label="WhatsApp"]  { background: var(--wa); color: var(--wa-ink); }
.footer__social a[aria-label="Instagram"] { background: var(--ig-grad); }
.footer__social a[aria-label="Facebook"]  { background: #1877F2; }
.footer__social a:hover { background-color: inherit; filter: brightness(1.1); }

/* Chips pequeños (Correo, TikTok) debajo de los botones grandes */
.chips { display: flex; flex-wrap: wrap; gap: .55rem; }
.chip {
  display: inline-flex; align-items: center; gap: .45rem; padding: .5rem .95rem .5rem .8rem; border-radius: 999px;
  font: 600 .92rem/1 var(--font); text-decoration: none; color: #fff;
  transition: transform .25s var(--ease), filter .2s;
}
.chip .ico { width: 1.15em; height: 1.15em; }
.chip:hover { transform: translateY(-2px); filter: brightness(1.1); }
.chip--mail { background: var(--mail); color: var(--mail-ink); }
.chip--tt { background: var(--tt); box-shadow: inset 0 0 0 1.5px rgba(242, 238, 229, .35); }
.chip--tt .ico { filter: drop-shadow(-.7px -.7px 0 #25F4EE) drop-shadow(.7px .7px 0 #FE2C55); }

/* ---------- 5. Bloque "Contacto y redes" ---------- */
.redes { display: grid; gap: 2rem; align-items: start; }
.redes__main h2 { font-size: clamp(2.1rem, 6vw, 3.4rem); font-weight: 800; letter-spacing: -.03em; text-wrap: balance; }
.redes__main > p { margin: .9rem 0 1.8rem; color: var(--muted-dark); max-width: 46ch; font-size: 1.1rem; }

.rcards { display: grid; gap: .8rem; }
.rcard {
  display: flex; align-items: center; gap: 1rem; padding: .95rem 1.1rem; border-radius: 22px;
  background: var(--bg-card); color: var(--tinta); text-decoration: none; border: 1px solid var(--line);
  box-shadow: 0 14px 30px -22px rgba(0, 0, 0, .7);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.rcard:hover { transform: translateY(-3px); box-shadow: 0 22px 36px -22px rgba(0, 0, 0, .8); }
.rcard__ico {
  display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; flex: none; color: #fff;
}
.rcard__ico .ico { width: 28px; height: 28px; }
.rcard__txt { display: grid; min-width: 0; flex: 1; }
.rcard__txt strong { font-family: var(--font-display); font-size: 1.2rem; line-height: 1.15; }
.rcard__txt small { color: var(--muted); font-size: .95rem; overflow-wrap: anywhere; }
.rcard__go { color: var(--muted); transition: transform .3s var(--ease); }
.rcard:hover .rcard__go { transform: translateX(4px); }
.rcard--wa .rcard__ico   { background: var(--wa); color: var(--wa-ink); }
.rcard--mail .rcard__ico { background: var(--mail); color: var(--mail-ink); }
.rcard--ig .rcard__ico   { background: var(--ig-grad); }
.rcard--tt .rcard__ico   { background: var(--tt); }
.rcard--tt .rcard__ico .ico { filter: drop-shadow(-1px -1px 0 #25F4EE) drop-shadow(1px 1px 0 #FE2C55); }

.qrcard {
  background: var(--bg-card); color: var(--tinta); border-radius: 28px; padding: 1.3rem; border: 1px solid var(--line);
  box-shadow: 0 30px 60px -36px rgba(0, 0, 0, .8);
}
.qrcard h3 { font-size: 1.3rem; font-weight: 700; margin-bottom: 1rem; }
.qrcard__grid { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.qrbtn {
  display: grid; justify-items: center; gap: .45rem; padding: .7rem .5rem .8rem; cursor: pointer; font: inherit; color: inherit;
  background: #fff; border: 1.5px solid var(--line); border-radius: 20px;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .2s;
}
.qrbtn:hover { transform: translateY(-3px); box-shadow: 0 18px 30px -20px rgba(20, 39, 41, .7); border-color: rgba(39, 73, 75, .4); }
.qrbtn__img { display: block; width: 100%; max-width: 190px; }
.qrbtn__img svg { display: block; width: 100%; height: auto; }
.qrbtn__name { display: inline-flex; align-items: center; gap: .35rem; font-weight: 700; font-size: 1rem; }
.qrbtn__name .ico { width: 1.15em; height: 1.15em; }
.qrbtn:first-child .qrbtn__name .ico { color: #1FAF5A; }
.qrbtn:last-child .qrbtn__name .ico { color: var(--ig-solid); }
.qrbtn small { color: var(--muted); font-size: .85rem; }

.qrdialog {
  border: 0; border-radius: 28px; padding: 1.4rem; background: #fff; color: var(--tinta); width: min(92vw, 440px);
  box-shadow: 0 40px 90px -20px rgba(0, 0, 0, .8); text-align: center;
}
.qrdialog::backdrop { background: rgba(10, 20, 21, .78); backdrop-filter: blur(3px); }
.qrdialog__img svg { display: block; width: 100%; height: auto; }
.qrdialog__cap { margin-top: .6rem; font: 700 1.2rem/1.2 var(--font-display); }
.qrdialog__close {
  position: absolute; top: .6rem; right: .6rem; width: 42px; height: 42px; border-radius: 50%; border: 0; cursor: pointer;
  display: grid; place-items: center; background: var(--bg-crema); color: var(--pet);
}

@media (min-width: 640px) { .rcards { grid-template-columns: 1fr 1fr; } }
@media (min-width: 960px) {
  .redes { grid-template-columns: 1.4fr 1fr; gap: 3.5rem; }
  .qrcard { padding: 1.6rem; position: sticky; top: 100px; }
}