/* DeMark, el sitio tras el pivote: el sistema como producto principal.
   Solo maquetacion estatica, con los tokens de sitio.css. Aqui no se anima
   nada: los efectos los ponen sitio.js y secciones.js con su red de seguridad,
   y sin JS o con menos movimiento todo se ve en su sitio. */

/* ---- el sistema: una fila por funcion, la captura recortada al lado del texto ----
   A todo el ancho, las capturas hacian una portada de 16.600 px. Ahora
   cada una se ve por una ventana de alto fijo (300 px; 320 en tableta, donde
   va encima del texto a todo el ancho, y 240 en movil) que ensena su parte de
   arriba, donde esta lo que se explica. Con el alto fijo ni la carga de la
   imagen ni el parallax de secciones.js (translate en la ventana) mueven la
   maquetacion. data-lado alterna el lado de la captura. */
.sitio .pivote-funciones > .fila {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-areas: "captura texto";
  align-items: center; gap: clamp(28px, 4vw, 64px); padding: clamp(20px, 2vw, 28px) 0;
}
.sitio .pivote-funciones > .fila[data-lado="derecha"] { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-areas: "texto captura"; }
.sitio .pivote-funcion-captura {
  grid-area: captura; position: relative; height: 300px; overflow: hidden;
  border: 1px solid var(--linea); border-radius: var(--radio); background: var(--superficie);
}
.sitio .pivote-funcion-captura .pivote-recorte { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.sitio .pivote-funcion-texto { grid-area: texto; }
.sitio .pivote-funcion-texto .dato { display: block; margin-bottom: 14px; }
.sitio .pivote-funcion-texto h3 { margin: 0 0 14px; font-size: clamp(28px, 2.6vw, 36px); max-width: 16ch; }
.sitio .pivote-funcion-texto p { margin: 0 0 16px; max-width: 46ch; color: var(--texto-2); }
@media (max-width: 900px) {
  .sitio .pivote-funciones > .fila,
  .sitio .pivote-funciones > .fila[data-lado="derecha"] { grid-template-columns: minmax(0, 1fr); grid-template-areas: "captura" "texto"; gap: 20px; }
  .sitio .pivote-funcion-captura { height: 320px; }
}
@media (max-width: 640px) {
  .sitio .pivote-funcion-captura { height: 240px; }
}

/* ---- planes: tabla tipografica y, bajo cada plan, lo que trae ---- */
.sitio .pivote-plan { row-gap: 20px; }
.sitio .pivote-plan-funciones { grid-column: 1 / -1; }
.sitio .pivote-plan-mas {
  /* 14 px es el minimo de las etiquetas mono en todo el sitio: en tema oscuro
     la letra pequena pierde legibilidad mas rapido (NN/g, "Dark Mode vs. Light
     Mode"). El letter-spacing va en em, asi que escala solo. */
  margin: 0; font-family: var(--fuente-mono); font-size: 14px; line-height: 1.5;
  letter-spacing: .14em; text-transform: uppercase; color: var(--texto-2);
}
.sitio .pivote-proyectos { margin-top: clamp(48px, 6vw, 88px); }

/* Pricing: funcion por plan. La marca es un punto azul; la ausencia, un guion. */
.sitio .pivote-comparar { margin-top: clamp(40px, 5vw, 64px); }
.sitio .pivote-comparar thead th:not(:first-child),
.sitio .pivote-comparar td { width: 22%; text-align: center; }
.sitio .pivote-comparar tbody th {
  padding: 20px clamp(16px, 3vw, 40px) 20px 0; border-bottom: 1px solid var(--linea); text-align: left;
  font-family: var(--fuente-titular); font-size: clamp(22px, 2vw, 26px); font-weight: 500; line-height: 1.15;
  letter-spacing: 0; text-transform: none; color: var(--tinta);
}
.sitio .pivote-comparar td { padding: 20px 0; vertical-align: middle; }
.sitio .pivote-marca { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--azul); }
.sitio .pivote-sin { display: inline-block; width: 14px; height: 1px; vertical-align: middle; background: var(--texto-3); }
.sitio .pivote-notas { margin-top: clamp(28px, 3vw, 40px); }
/* En movil sitio.css convierte .precios-tabla en filas de rejilla sin cabecera:
   para precios va bien, pero aqui cada marca dejaba de decir de que plan es (la
   de Essential a la derecha del nombre, la de Complete sola en otra linea). La
   comparativa sigue siendo una tabla de tres columnas con su cabecera a la vista. */
@media (max-width: 640px) {
  .sitio .precios-tabla.pivote-comparar { display: table; }
  .sitio .precios-tabla.pivote-comparar thead {
    display: table-header-group; position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal;
  }
  .sitio .precios-tabla.pivote-comparar tbody { display: table-row-group; }
  /* Tambien la fila de la cabecera: la primera regla movil de sitio.css pone en rejilla todo tr. */
  .sitio .precios-tabla.pivote-comparar tr,
  .sitio .precios-tabla.pivote-comparar tbody tr,
  .sitio .precios-tabla.pivote-comparar tbody tr:first-child { display: table-row; padding: 0; border: 0; }
  /* Con el .14em de sitio.css "ESSENTIAL" llena su columna de 84 px y toca "COMPLETE". */
  .sitio .precios-tabla.pivote-comparar thead th { padding: 0 0 12px; letter-spacing: .06em; }
  .sitio .precios-tabla.pivote-comparar thead th:not(:first-child),
  .sitio .precios-tabla.pivote-comparar td { width: 84px; }
  .sitio .precios-tabla.pivote-comparar tbody th { padding: 14px 12px 14px 0; font-size: 19px; }
  .sitio .precios-tabla.pivote-comparar td,
  .sitio .precios-tabla.pivote-comparar tr:last-child td { padding: 14px 0; border-bottom: 1px solid var(--linea); }
}

/* ---- alta (/en/start) ---- */
/* .campo es una rejilla y la fila la estira a la altura de su vecina: junto a la
   contrasena (que lleva ayuda debajo) el correo repartia ese sobrante entre sus
   filas y bajaba y engordaba su caja. Pegado arriba, las dos cajas quedan a la par. */
.sitio .registro-form .campo { align-content: start; }

/* ---- franja final: dos acciones sobre el verde pastel ---- */
.sitio .pivote-acciones { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
/* Sobre el verde pastel de la franja el texto va en --tinta, nunca en blanco. */
.sitio .pivote-acciones .boton-suave { background: transparent; color: var(--tinta); border-color: var(--tinta); }
.sitio .pivote-acciones .boton-suave:hover,
.sitio .pivote-acciones .boton-suave:focus-visible { background: var(--superficie); color: var(--azul); border-color: var(--azul); }
@media (max-width: 640px) {
  .sitio .pivote-acciones .boton, .sitio .pivote-acciones .boton-suave { flex: 1 1 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .sitio .pivote-acciones .boton-suave { transition: none; }
}