/*
 * Store group pages (templates/orderforms/dabbleam/products.tpl).
 * Layout by the Diseño session (dabbleam/design, piezas/whmcs-tienda/alojamiento-gestionado.html, 30-10-2026);
 * colours come from the palette variables in style.css.
 */
.tienda { --tinta: #0b2a40; --gris: #5f6b78; --linea: #e3eef6; --fondo: #f3f9fe;
  max-width: 1024px; margin: 0 auto; padding: 3em 1.25em 4em; }
.tienda-seccion { margin-top: 4em; }
.tienda-seccion > h2 { font-size: 1.6em; line-height: 1.25; text-align: center; color: var(--tinta); margin: 0 0 1em; }
.tienda-etiqueta { display: block; font-size: .8em; letter-spacing: .2em; text-transform: uppercase; color: var(--link-color); margin-bottom: .8em; }

/* 1. cabecera del grupo: campos del grupo (nombre, headline, descripción) */
.tienda-cabecera { text-align: center; max-width: 760px; margin: 0 auto; }
.tienda-cabecera h1 { font-size: 2.5em; line-height: 1.15; color: var(--tinta); margin: 0 0 .45em; }
.tienda-subtitulo { font-size: 1.3em; line-height: 1.45; color: var(--tinta); margin: 0 0 .7em; }
.tienda-entradilla { font-size: 1.05em; line-height: 1.6; color: #4a5866; margin: 0 auto; max-width: 62ch; }
.tienda-ciclo { display: inline-flex; align-items: center; gap: .7em; margin-top: 1.8em; font-size: .95em; color: var(--gris); cursor: pointer; }
.tienda-ciclo input { position: absolute; opacity: 0; }
.tienda-ciclo .interruptor { width: 2.9em; height: 1.6em; border-radius: .8em; background: #b9c7d3; position: relative; transition: background .2s; }
.tienda-ciclo .interruptor::after { content: ""; position: absolute; top: .2em; left: .2em; width: 1.2em; height: 1.2em; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .2s; }
.tienda-ciclo input:checked + .interruptor { background: var(--primary-color); }
.tienda-ciclo input:checked + .interruptor::after { transform: translateX(1.3em); }
.tienda-ciclo input:focus-visible + .interruptor { box-shadow: 0 0 0 3px var(--focus-ring); }
.tienda-ciclo b { color: var(--tinta); }

/* 2. tarjetas de plan: {foreach $products} */
.tienda-planes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5em; margin-top: 2.5em; align-items: stretch; } /* all cards as tall as the tallest */
.tienda-plan { position: relative; background: #fff; border-radius: .6em; box-shadow: 0 2px 12px rgba(0, 60, 110, .14); overflow: visible; display: flex; flex-direction: column; }
.tienda-plan.destacado { box-shadow: 0 6px 24px rgba(0, 60, 110, .22); margin-top: -.8em; }
.tienda-plan .recomendado, .servicio .recomendado { position: absolute; top: -.85em; left: 50%; transform: translateX(-50%); white-space: nowrap;
  background: var(--primary-color); color: #fff; font-size: .75em; font-weight: bold; letter-spacing: .12em; text-transform: uppercase;
  padding: .45em .9em .2em; border-radius: 1em; box-shadow: 0 2px 6px rgba(0, 60, 110, .3); z-index: 1; }
.tienda-plan h3 { margin: 0; padding: .8em 1em .7em; border-radius: .6em .6em 0 0; background: var(--brand-gradient); color: #fff; font-size: 1.2em; text-align: center; }
.tienda-plan.destacado h3 { padding-top: 1.15em; }
.tienda-plan .para { text-align: center; color: var(--gris); font-size: .9em; line-height: 1.45; margin: 1.1em 1.2em 0; min-height: 2.9em; }
.tienda-plan .precio { text-align: center; margin: .9em 0 .2em; }
.tienda-plan .precio b { font-size: 2.3em; color: var(--dark-primary-color); }
.tienda-plan .ciclo { text-align: center; font-size: .9em; color: var(--gris); }
.tienda-plan .ciclo small { display: block; margin-top: .2em; font-size: .9em; }
.tienda-plan ul { list-style: none; margin: 1.2em 1.2em 0; padding: 0; font-size: .9em; }
.tienda-plan li { display: flex; justify-content: space-between; gap: 1em; padding: .55em 0; border-top: 1px solid var(--linea); }
.tienda-plan li span { color: var(--gris); }
.tienda-plan li b { color: var(--tinta); text-align: right; }
/* Objectivity draws capitals .1em over the middle of the line: the text of the buttons goes lower, taken
   from the bottom padding so the height stays (Jesús, 03-11-2026) */
.tienda-boton { display: block; text-align: center; text-decoration: none; font-weight: bold; font-size: 1.1em; line-height: 1.2;
  padding: calc(.75em + 1px) 1em calc(.7em - 1px); border-radius: .45em; background: var(--brand-gradient); color: #fff !important; text-shadow: 0 1px .4px rgba(0,0,0,.35);
  box-shadow: 0 2px 6px rgba(0, 60, 110, .25); }
.tienda-boton:hover { background: var(--secondary-color); }
.tienda-boton:focus-visible, .tienda-boton-sec:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
.tienda-plan .tienda-boton { margin: 1.4em 1.2em 1.3em; }
.tienda-boton-sec { display: inline-block; text-decoration: none; font-weight: bold; font-size: 1.05em; padding: calc(.7em + 1px) 1.2em calc(.65em - 1px); border-radius: .45em;
  border: 2px solid var(--link-color); color: var(--link-color) !important; }
.tienda-boton-sec:hover { background: #f3f9fe; }
.tienda-iva { text-align: center; font-size: .85em; color: var(--gris); margin-top: 1.3em; }

/* 3. todos los planes incluyen: iconos redondos con el degradado claro, como los servicios de la portada */
.tienda-incluye { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2em 1.8em; }
.tienda-incluye > div { text-align: center; }
.tienda-incluye > div::before { content: ""; display: block; width: 3.4em; height: 3.4em; margin: 0 auto .8em; border-radius: 50%;
  background: var(--icono) center / 52% no-repeat, var(--brand-light-gradient); box-shadow: 0 2px 6px rgba(0, 0, 0, .2); }
.tienda-incluye b { display: block; color: var(--tinta); margin-bottom: .35em; line-height: 1.3; }
.tienda-incluye p { margin: 0; color: var(--gris); font-size: .92em; line-height: 1.5; }

/* 4. Plan Tranquilidad: banda destacada, como las cajas de cifras de los documentos */
.tienda-tranquilidad { display: grid; grid-template-columns: 1fr auto; gap: 2em; align-items: center;
  background: var(--fondo); border-top: 3px solid var(--brand-light-color); border-radius: 0 0 .6em .6em; padding: 2em 2.2em; }
.tienda-tranquilidad h2 { font-size: 1.5em; color: var(--tinta); margin: 0 0 .5em; text-align: left; }
.tienda-tranquilidad p { margin: 0; line-height: 1.6; }
.tienda-tranquilidad .oferta { text-align: center; min-width: 13em; }
.tienda-tranquilidad .oferta b { display: block; font-size: 2.6em; color: var(--dark-primary-color); line-height: 1; }
/* the commitment goes in ink and at normal size: no fine print (owner, 30-10-2026) */
.tienda-tranquilidad .oferta span { display: block; color: var(--tinta); font-size: 1em; margin: .4em 0 1em; }
.tienda-tranquilidad .oferta a.condiciones { display: block; font-size: .85em; margin-top: .8em; }

/* 5. ¿gestionado o sin gestión?: dos columnas con enlace cruzado */
.tienda-comparar { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5em; }
.tienda-comparar > div { border: 1px solid var(--linea); border-radius: .6em; padding: 1.5em 1.6em; position: relative; }
.tienda-comparar > div.aqui { border: 2px solid var(--primary-color); }
.tienda-comparar .estas { position: absolute; top: -.8em; left: 1.4em; background: #fff; padding: 0 .5em; font-size: .75em; letter-spacing: .12em; text-transform: uppercase; color: var(--link-color); font-weight: bold; }
.tienda-comparar h3 { margin: 0 0 .5em; color: var(--tinta); font-size: 1.15em; }
.tienda-comparar p { margin: 0 0 .9em; color: #4a5866; line-height: 1.55; }
.tienda-comparar a { font-weight: bold; }

/* 6. preguntas frecuentes */
.tienda-preguntas { max-width: 760px; margin: 0 auto; }
.tienda-preguntas details { border-bottom: 1px solid var(--linea); }
.tienda-preguntas summary { cursor: pointer; list-style: none; font-weight: bold; color: var(--tinta); padding: 1em 2em 1em 0; position: relative; line-height: 1.4; }
.tienda-preguntas summary::-webkit-details-marker { display: none; }
.tienda-preguntas summary::after { content: "+"; position: absolute; right: .2em; top: .75em; font-size: 1.3em; color: var(--link-color); }
.tienda-preguntas details[open] summary::after { content: "−"; }
.tienda-preguntas summary:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
.tienda-preguntas details p { margin: 0 0 1.1em; color: #4a5866; line-height: 1.6; }

/* 7. cierre */
.tienda-cierre { text-align: center; max-width: 760px; margin: 0 auto; padding: 2.2em 1.5em; border-radius: .6em; box-shadow: 0 2px 12px rgba(0, 60, 110, .12); }
.tienda-cierre h2 { margin: 0 0 .4em; color: var(--tinta); font-size: 1.45em; }
.tienda-cierre p { margin: 0 0 1.3em; color: #4a5866; line-height: 1.55; }
.tienda-cierre .botones { display: flex; flex-wrap: wrap; gap: .8em; justify-content: center; }
.tienda-cierre .botones .tienda-boton { display: inline-block; }
.tienda-estado { text-align: center; font-size: .85em; color: var(--gris); margin-top: 1.6em; }
.tienda-estado i { display: inline-block; width: .6em; height: .6em; border-radius: 50%; background: #22a05a; margin-right: .45em; vertical-align: .05em; }

@media (max-width: 860px) {
  .tienda-planes, .tienda-incluye, .tienda-comparar { grid-template-columns: 1fr; }
  .tienda-plan.destacado { margin-top: 0; }
  .tienda-plan .para { min-height: 0; }
  .tienda-incluye { grid-template-columns: 1fr 1fr; }
  .tienda-tranquilidad { grid-template-columns: 1fr; padding: 1.6em 1.4em; }
  .tienda-tranquilidad .oferta { min-width: 0; }
  .tienda-cabecera h1 { font-size: 2em; }
}
@media (max-width: 520px) {
  .tienda { padding: 2em 1em 3em; }
  .tienda-incluye { grid-template-columns: 1fr; }
  .tienda-subtitulo { font-size: 1.15em; }
  .tienda-cierre .botones a { flex: 1 1 100%; }
}

/* ---------- integration with the theme (its reset and global element styles) ---------- */
.tienda { padding-top: 7em; line-height: 1.5; }
.tienda b, .tienda h1, .tienda h2, .tienda h3, .tienda summary { font-weight: bold; }
/* the theme gives every <section> a centred flex column and a -20vh/20vh anchor offset */
.tienda .tienda-seccion { display: block; padding-top: 0; margin-top: 4em; }
.tienda .tienda-tranquilidad { display: grid; padding: 2em 2.2em; }
.tienda h2 { margin: 0; }
.tienda .tienda-plan ul, .tienda .tienda-plan li { list-style: none; margin-left: 0; margin-bottom: 0; }
.tienda .tienda-plan ul { margin: 1.2em 1.2em 0; }
.tienda-ciclo { font-size: .95em; margin-bottom: 0; display: inline-flex; }
.tienda-ciclo input { width: 0; height: 0; margin: 0; }
.tienda-plan .descripcion { margin: .8em 1.2em 0; font-size: .9em; color: var(--gris); text-align: center; line-height: 1.5; }
/* a condition in a card (the Plan Tranquilidad next to the Proactivo, /tienda/complementos): ink and normal size */
.tienda-plan .condicion { margin: 1.2em 1.08em 0; color: var(--tinta); line-height: 1.5; } /* the list's inset: 1.2em at .9em */
.tienda-plan .condicion a { text-decoration: underline; } /* inside a sentence: not by colour alone */
.tienda-plan .precio .desde { display: block; font-size: .8em; color: var(--gris); margin-bottom: .2em; }
.tienda-plan ul, .tienda-plan .descripcion { margin-bottom: 1.4em; }
.tienda-plan .tienda-boton { margin-top: auto; } /* button pinned to the bottom of equal-height cards */
/* "Incluye" as a centred flex grid, so 4, 5 or 7 items still look balanced */
.tienda-incluye { display: flex; flex-wrap: wrap; justify-content: center; }
/* more air between "Todo lo que incluye" and the icons, which stick out above each item */
.tienda-seccion > h2 + .tienda-incluye { margin-top: 2.2em; }
.tienda-incluye > div { flex: 0 1 calc((100% - 3.6em) / 3); }
/* items without an SVG of their own use a Font Awesome glyph in the same circle */
.tienda-incluye > div.fa-icono::before { display: none; }
.tienda-incluye .icono { display: flex; align-items: center; justify-content: center; width: 3.4em; height: 3.4em; margin: 0 auto .8em;
  border-radius: 50%; background: var(--brand-light-gradient); box-shadow: 0 2px 6px rgba(0, 0, 0, .2); color: #fff; font-size: 1em; }
.tienda-incluye .icono i { font-size: 1.5em; }
.tienda-tranquilidad ul { margin: .8em 0 0 1.2em; }
.tienda-tranquilidad li { list-style: disc; margin-bottom: .3em; line-height: 1.5; }
@media (max-width: 860px) {
  .tienda .tienda-tranquilidad { padding: 1.6em 1.4em; }
  .tienda-incluye > div { flex-basis: calc((100% - 1.8em) / 2); }
}
@media (max-width: 520px) {
  .tienda { padding-top: 6em; }
  .tienda-incluye > div { flex-basis: 100%; }
}
/* leave room for the "Estás aquí" tab when the section title wraps to two lines */
.tienda-comparar { margin-top: 1.6em; }
/* the theme limits every h1 to 80% width: here it spans the header so it stays centred with the rest */
.tienda .tienda-cabecera h1 { max-width: none; }
/* "Recomendado": reddish, like the old ribbon, so it stands out on the blue card header (owner, 30-10-2026) */
.tienda-plan .recomendado, .servicio .recomendado { background: var(--highlight-color); }

/* Icons of "incluye": one class per SVG (paths relative to this stylesheet) */
.tienda-incluye .i-dominio { --icono: url('../img/store/dominio.svg'); }
.tienda-incluye .i-ssl { --icono: url('../img/store/ssl.svg'); }
.tienda-incluye .i-correo { --icono: url('../img/store/correo.svg'); }
.tienda-incluye .i-copia { --icono: url('../img/store/copia.svg'); }
.tienda-incluye .i-vigilancia { --icono: url('../img/store/vigilancia.svg'); }
.tienda-incluye .i-wordpress { --icono: url('../img/store/wordpress.svg'); }

/* Same hover as the round service icons of the home page: the circle grows and the glyph a bit more */
.tienda-incluye > div { position: relative; }
/* SVG icons: circle on ::before, glyph on ::after, both scaled with transform only (no background-size animation) */
.tienda-incluye > div::before { background: var(--brand-light-gradient); }
.tienda-incluye > div:not(.fa-icono)::after { content: ""; position: absolute; top: 0; left: 50%; width: 3.4em; height: 3.4em; margin-left: -1.7em;
  background: var(--icono) center / 52% no-repeat; }
.tienda-incluye > div::before, .tienda-incluye > div::after, .tienda-incluye .icono, .tienda-incluye .icono i { transition: transform .4s ease-out; will-change: transform; }
.tienda-incluye > div:hover::before, .tienda-incluye > div:focus-within::before { transform: scale(1.2); }
.tienda-incluye > div:hover::after, .tienda-incluye > div:focus-within::after { transform: scale(1.43); }
.tienda-incluye > div:hover .icono, .tienda-incluye > div:focus-within .icono { transform: scale(1.2); }
.tienda-incluye > div:hover .icono i, .tienda-incluye > div:focus-within .icono i { transform: scale(1.1); }
/* card rows: the label never wraps under its icon */
.tienda-plan li span { white-space: nowrap; }
/* cards are <article>: drop the theme's article padding/margins so the header spans the whole card */
.tienda .tienda-plan { padding: 0; margin: 0; width: auto; max-width: none; }
.tienda .tienda-plan.destacado { margin-top: -.8em; }
@media (max-width: 860px) { .tienda .tienda-plan.destacado { margin-top: 0; } }

/* Sections aligned across cards: each card spans 7 rows of the parent grid and uses them as its own (subgrid):
   name, "para quién", price, cycle, description, features, button */
.tienda-planes { row-gap: 0; }
.tienda .tienda-plan { display: grid; grid-row: span 7; grid-template-rows: subgrid; row-gap: 0; align-content: start; }
.tienda-plan .para:empty, .tienda-plan .descripcion:empty, .tienda-plan ul:empty { margin-top: 0; margin-bottom: 0; min-height: 0; }
.tienda-plan .tienda-boton { align-self: end; }
@media (max-width: 860px) {
  .tienda .tienda-plan { margin-bottom: 1.5em; }
}

/* ---------- /servicios (templates/dabbleam/services.tpl): the store's cards, 2x2 (Diseño, 30-10-2026) ---------- */
.servicios-tarjetas { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5em; margin-top: 2.5em; align-items: stretch; }
.servicio { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 2em 1.6em 1.6em; background: #fff; border-radius: .6em; box-shadow: 0 2px 12px rgba(0, 60, 110, .14); }
.servicio.destacado { box-shadow: 0 6px 24px rgba(0, 60, 110, .22); }
.servicio h2 { font-size: 1.3em; line-height: 1.25; color: var(--tinta); margin: 0 0 .5em; }
.servicio p { margin: 0 0 1em; color: #4a5866; font-size: .95em; line-height: 1.55; }
.servicio .precio { margin: auto 0 1em; color: var(--gris); } /* price and button pinned to the bottom of equal-height cards */
.servicio .precio b { font-size: 1.8em; color: var(--dark-primary-color); }
.servicio .tienda-boton { align-self: stretch; }
/* round icon as on the home page: circle and glyph as two layers that grow (transform only) when hovering the icon */
.servicio .icono { position: relative; width: 4.2em; height: 4.2em; margin-bottom: 1em; }
.servicio .icono::before, .servicio .icono::after { content: ""; position: absolute; inset: 0; transition: transform .4s ease-out; will-change: transform; }
.servicio .icono::before { border-radius: 50%; background: var(--brand-light-color) var(--brand-light-gradient); box-shadow: 0 2px 6px rgba(0, 0, 0, .3); }
.servicio .icono::after { background: var(--icono) center / 50% no-repeat; }
.servicio .icono:hover::before, .servicio:focus-within .icono::before { transform: scale(1.2); }
.servicio .icono:hover::after, .servicio:focus-within .icono::after { transform: scale(1.44); }
.servicio .i-tranquilidad { --icono: url('../img/tranquilidad.svg'); }
.servicio .i-gestionado { --icono: url('../img/cloud.svg'); }
.servicio .i-sin-gestion { --icono: url('../img/onprem.svg'); }
.servicio .i-web { --icono: url('../img/design.svg'); }
.servicios-ademas { text-align: center; }
.servicios-ademas p { max-width: 40em; margin: 0 auto; color: #4a5866; line-height: 1.55; }
/* the two closing buttons, same height and text centred (Diseño, 30-10-2026) */
.tienda-cierre .botones { align-items: stretch; }
.tienda-cierre .botones .tienda-boton, .tienda-cierre .botones .tienda-boton-sec { display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.05em; line-height: 1.2; padding: calc(.7em + 2px) 1.2em calc(.7em - 2px); white-space: nowrap; }
.tienda-cierre .botones .tienda-boton { border: 2px solid transparent; }
.tienda-cierre .botones a { gap: .45em; }
.tienda-cierre .botones a i { font-size: 1.15em; }
.tienda-cierre .botones a i.fa-whatsapp { font-size: 1.25em; } /* outline glyph: looks smaller than the solid ones */
@media (max-width: 860px) {
  .servicios-tarjetas { grid-template-columns: 1fr; }
}

/* add-ons page (orderforms/dabbleam/addons.tpl): centred cards, the list is plain lines and the service is chosen in the card */
.tienda-planes.complementos { grid-template-columns: repeat(auto-fit, minmax(17em, 24em)); justify-content: center; }
.complementos .tienda-plan li span { white-space: normal; color: var(--tinta); }
.complementos .tienda-servicio { display: block; margin: 0 1.2em .4em; font-weight: bold; font-size: .9em; color: var(--tinta); }
.complementos .tienda-plan select { display: block; box-sizing: border-box; width: calc(100% - 2.4em); margin: 0 1.2em; height: 44px; padding: 0 .8em;
  font: inherit; font-size: .95em; color: var(--tinta); border: 1px solid #6b8ca6; border-radius: .45em; background: #fff; }
.complementos .tienda-plan select:focus { outline: none; border-color: var(--primary-color); box-shadow: 0 0 0 3px var(--focus-ring); }
/* the add-on cards have two rows more (label and service): 9 rows of the subgrid instead of 7 */
.tienda .complementos .tienda-plan { grid-row: span 9; }
.complementos .tienda-plan .tienda-boton { margin-top: 1em; }
.complementos .tienda-servicio { margin-top: .6em; }
.complementos .tienda-plan select { -webkit-appearance: none; appearance: none; padding-right: 2.2em;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23006bae' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right .9em center / .75em no-repeat; }
.tienda-cierre .tienda-horario { margin: 1.2em 0 0; }
/* no fine print (owner): what the client commits to or gets, in ink and at normal size: VAT included, the yearly saving,
   and what each plan includes (the domain only paying yearly, how long copies are kept) */
.tienda-iva { font-size: 1rem; color: var(--tinta); }
.tienda-plan .ciclo small { font-size: 1rem; color: var(--tinta); }
.tienda-incluye p { font-size: 1rem; color: var(--tinta); }
/* plan figures: every icon the same width and centred, so the labels start in one column (Font Awesome 5 or 6) */
.tienda-plan li span i { display: inline-block; width: 1.25em; flex: none; text-align: center; margin-right: .35em; }
/* (i) of a plan figure (js/tienda-ayuda.js): the explanation shows on hover, keyboard focus or tap, under the row and
   as wide as the card, in ink and at normal size; Esc closes it (.cerrada keeps it closed until the pointer or focus
   leaves) */
.tienda-plan li { position: relative; }
.tienda-info { display: inline-grid; place-items: center; width: 1.5em; height: 1.5em; margin: 0 0 0 .3em; padding: 0;
  border: 0; border-radius: 50%; background: none; color: var(--link-color); cursor: pointer; vertical-align: middle; font: inherit; line-height: 1; }
/* the (i) is drawn (SVG mask in the text colour), not a letter of the font: Objectivity's metrics put a letter high in the
   circle, a drawing is centred whatever the font */
.tienda-info::before { content: ""; display: block; width: 1.05em; height: 1.05em; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='7.1' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3Ccircle cx='8' cy='4.9' r='1.05'/%3E%3Crect x='7.1' y='6.9' width='1.8' height='5.1' rx='.55'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='7.1' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3Ccircle cx='8' cy='4.9' r='1.05'/%3E%3Crect x='7.1' y='6.9' width='1.8' height='5.1' rx='.55'/%3E%3C/svg%3E") center / contain no-repeat; }
.tienda-info:hover, .tienda-info[aria-expanded="true"] { color: var(--dark-primary-color); }
.tienda-info:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 1px; }
/* finger-sized (render gate: 44 px on phones): a 44 px button with negative margins, so the drawn (i) and the line stay
   exactly where they were; the focus ring keeps hugging the drawing */
.tienda-info { width: 44px; height: 44px; margin: calc(.75em - 22px) calc(.75em - 22px) calc(.75em - 22px) calc(1.05em - 22px); }
.tienda-info:focus-visible { outline-offset: calc(1px - (44px - 1.5em) / 2); }
.tienda-oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.tienda-plan li .tienda-ayuda { display: none; position: absolute; z-index: 5; left: -.6em; right: -.6em; top: calc(100% + .2em); padding: .7em .9em;
  border-radius: .45em; background: #fff; color: var(--tinta); font-size: 1rem; line-height: 1.45; white-space: normal; text-align: left;
  box-shadow: 0 4px 18px rgba(0, 40, 80, .25); }
.tienda-info:hover:not(.cerrada) + .tienda-ayuda, .tienda-info:focus-visible:not(.cerrada) + .tienda-ayuda,
.tienda-info[aria-expanded="true"] + .tienda-ayuda { display: block; }
.tienda-plan li b { white-space: nowrap; }
/* the server limits (icons marked "limite") start after a stronger line, as a group of their own */
.tienda-plan li:not(:has(.limite)) + li:has(.limite) { border-top: 2px solid var(--linea); margin-top: .3em; }

/* the monthly / yearly switch: a 44 px tall label (finger-sized), in the same place */
.tienda-ciclo { padding: 10px 0; margin-top: calc(1.8em - 10px); margin-bottom: -10px; }

/* finger-sized links (render gate: 44 px on phones), in the same place: "12 meses" of the Plan cards (a link inside the
   value) and "Condiciones del plan" under the Plan offer */
.tienda-plan li b a { display: inline-block; padding: 15px 0; margin: -15px 0; }
.tienda-tranquilidad .oferta a.condiciones { padding: 12px 0; margin: calc(.8em - 12px) 0 -12px; }

/* "Dominio incluido" / "Dominio y correo" link to /dominios (UX 20): finger-sized without moving the heading */
.tienda-incluye b a { display: inline-block; padding: 14px 0; margin: -14px 0; }

/* free edition of the Dynamic DNS extension, under the paid plans (includes/tienda-grupo-7.tpl): a light box, in ink
   and at normal size; its links are inside a sentence, so they are underlined (not by colour alone) */
.tienda-gratis { max-width: 760px; margin: 1.6em auto 0; padding: 1em 1.4em; border: 1px solid var(--linea); border-radius: .6em;
  background: var(--fondo); color: var(--tinta); line-height: 1.55; text-align: center; }
.tienda-gratis a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .15em; }
/* the longest rows of a plan card (a label with its (i), and its value) do not fit between 861 and 1023 px, with three
   cards, nor on phones narrower than 360 px: the page went wider than the screen (gestionado, sin gestión and Plan up
   to 985 px at 861-976, and 2 px at 320; measured 03-11-2026). There the label may take two lines (Diseño, 03-11-2026):
   - its icon hangs in the left margin, on the first line, so both lines start together;
   - the (i) takes no room in the line (its right margin cancels its width) and hangs in a space kept after the text, so
     it always follows the last word and never goes to a line of its own;
   - the value never wraps or shrinks;
   - the lists with an (i), and their gap, give up a few px ("Inodos" + "Sin límite propio" needs them at 861) */
@media (max-width: 359px), (min-width: 861px) and (max-width: 1023px) {
  .tienda-plan li > span { white-space: normal; }
  /* the icon hangs from the li (position: relative), not from the label, so the explanation keeps the width of the row */
  .tienda-plan li > span:has(> i:first-child) { padding-left: 1.6em; }
  .tienda-plan li > span > i:first-child { position: absolute; left: 0; }
  .tienda-plan li > span:has(.tienda-info) { padding-right: 1.8em; }
  .tienda-plan li .tienda-info { margin-right: calc(-1.05em - 22px); }
  .tienda-plan li b { flex: none; }
  .tienda .tienda-plan ul:has(.tienda-info) { margin-left: .8em; margin-right: .8em; }
  .tienda-plan ul:has(.tienda-info) li { gap: .75em; }
}

/* /servicios: a fifth service, Dynamic DNS, across the whole width under the 2x2 cards, in a row (icon, text, price and
   button), so the grid stays square (Diseño, 03-11-2026); below 861 px, a card like the others */
.servicio-ancho { grid-column: 1 / -1; flex-direction: row; align-items: center; gap: 1.6em; text-align: left;
  padding: 1.6em 2em; }
.servicio-ancho .icono { flex: none; margin-bottom: 0; }
.servicio-ancho .texto { flex: 1; }
.servicio-ancho h2 { text-align: left; }
.servicio-ancho .texto p { margin-bottom: 0; }
.servicio-ancho .accion { flex: none; width: 13em; text-align: center; }
.servicio-ancho .precio { margin: 0 0 .8em; }
.servicio-ancho .tienda-boton { display: block; }
.servicio .i-ddns { --icono: url('../img/dns-dinamico.svg'); }
@media (max-width: 860px) {
  .servicio-ancho { flex-direction: column; text-align: center; gap: 0; padding: 2em 1.6em 1.6em; }
  .servicio-ancho .icono { margin-bottom: 1em; }
  .servicio-ancho h2 { text-align: center; }
  .servicio-ancho .texto p { margin-bottom: 1em; }
  .servicio-ancho .accion { width: auto; align-self: stretch; }
}
/* /servicios: a link inside a sentence is underlined, not told apart by its colour alone (WCAG 1.4.1; Diseño,
   03-11-2026). Buttons and links on a line of their own ("Registrar o traer un dominio") stay as they are */
.servicios .tienda-entradilla a, .servicio p a, .servicios-ademas p:not(.servicios-dominio) a {
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .15em; }